
正文
20+行代码使用es5 Object.defineProperty 实现简单的watch功能
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
/**
* 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效
*/
$watch=function(myObject,callback){
function initWatch(obj){
for(var i in obj){
if(typeof obj!='object'){
return;
}
(function(value,o,attr){
var v=value;
var oldValue=value;
Object.defineProperty(o,attr,{
get:function(){
return v;
},
set:function (newValue){
oldValue=v;
v=newValue;
callback(newValue,oldValue)
}
});
})(obj[i],obj,i);
initWatch(obj[i]);
}
}
initWatch(myObject);
};
var a={
name:'Lee',
background:{
hometown:'De Zhou',
presentAddr:'Texas'
}
}
$watch(a,function(newValue,oldValue){
console.log(a.name+" moved from "+ oldValue + " to " + newValue);
})
a.background.presentAddr="New York"
//Lee moved from Texas to New York
//"New York"
Object.defineProperty()方法是实现vue双向绑定的重要api,关于该方法的详细信息可移步:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty。这里主要应用了其get/set函数的功能。对get/set方法而言,值得一提的是,当使用了get/set 方法后,原有的属性便已经被对应的get/set方法所替代。
以上代码简单模拟了对一个object的watch功能,模拟ng或vue中的watch,对一个对象进行监听,其中任一属性发生了改变随即执行callback。







