Object.defineOroperty(obj,key,describeObj)
要搞明白数据的双向绑定，必须先整明白这个方法；好玩得很！（备注：最好看文档，我这里简单的记录下就行）
第一个参数obj是：要定义属性的对象；也就是你需要定义一个对象，用来装你要存的数据，如：var obj = {name:'LANDEN'};
第二个参数是属性的名字，如这里的name;
第三个是个描述对象
{
configurable:false,
enumerable:false,
value:'',
writable:false,
//set:function(){},
//get:function(){}
}
// 备注：这个其实文档上也有，写这个的目的是提醒下，set和get方法不能与value或者writale共存；只可配置其中一种；其他的就不解释了，看文档；
好了，那么这个方法有什么用呢，这个方法就是实现数据双向绑定的关键方法；因为你obj对象的所有属性的改动都会触发他的set方法；
说道这里你如果会Vue就会发现，Vue里的所有数据都是在data对象里，而vue用这个方法观察着data的变化，变动了就顺便更改对应节点的数据；（提醒：一个观察者只能观察同一个对象的变化，如上你观察的obj，就只能做obj数据的双向绑定，而不是obj2等）
好了，基本介绍就这样；
上最简单实现一个数据双向绑定的demo
// html代码
<input type="text" value="" id="valID">
<p id="textID"></p>
// js 代码
var obj = {name:'模拟初始化的数据'}
testID.value = obj.name;
textID.innerText=obj.name;
// 定义观察者
Object.defineProperty(obj,name,{
enumerable:true,
configurable:true,
set:function(newVal){
testID.value = newVal;
textID.innerText=newVal;
return newVal;
}
})
// 模拟数据改变从而dom上对应数据也变化
setTimeout(function(){
obj.name="接收到新数据了"
},2000)
// 监听输入框改变值，对应的数据也跟着变化，可以观察p标签的内容看是否跟着输入框改变，这模拟dom上改变，对应的数据也改变
function datachange(){
obj.name=testID.value;
}
// 这样两个方向的数据都可以实现互相绑定了
以上只是模拟了一个最简单的数据双向绑定；现在你可以自己封装自己方法来实现非框架环境下的数据的双向绑定了；面试叫你徒手撸一个数据双向绑定的代码也不用怕了，so easy!
网友评论