//var ss = {}
// 直接报错,因为get,set 不能与writable,value,同时存在，
// 可以与enumerable configurable 同时存在
/*Object.defineProperty(ss,'b',{
get:function () {
return 12;
},
enumerable:true,
configurable:true,
value:'sdf',
writable:true
})*/
// html片段
var strHtml = ` <p>name</p>
<div>{{name}}</div>`;
// 打开页面插入html片段到body中
document.querySelector('body').innerHTML = strHtml;
// 根据传入的变量key，替换html中的插值
var changeView = function (str) {
// 正则表达式，通过new RegExp的时候，需要双斜线来转义 {
var reg = new RegExp("\\{\\{"+str+"\\}\\}","g");
strHtmlTemp = strHtml.replace(reg,data['_'+str]);
document.querySelector('body').innerHTML = strHtmlTemp;
};
// 如果在set方法中直接改data.name 会出现死循环，导致栈溢出，所以用_name 代替name 来存储变量的值;
var data={
_name:'',
name:''
};
// 进入页面，循环所有data的属性，添加defineProperty
for(var i in data){
if(i.indexOf('_')===-1){
changeView(i);
Object.defineProperty(data,i,{
get:function () {
return getName();
},
enumerable:true,
configurable:false,
set:function (newValue) {
setName(newValue) ;
}
})
var getName = function() {
return data['_'+i];
};
var setName = function (value) {
data['_'+i] = value;
console.log(111)
changeView(i)
};
}
}
通过在console里面更改data.name的值，看到数据的绑定的实现。
defineProperty 实现数据绑定
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 熟悉DataBinding的小伙伴都知道，使用EditText控件是可以通过使用@={}实现双向数据绑定，但如果是...
- 在阅读本文前，为了避免概念模糊，阅读障碍，请先看完Step by Step 实现基于 Cloudera 5.8.2...
