首页 > 代码库 > 20+行代码使用es5 Object.defineProperty 实现简单的watch功能
20+行代码使用es5 Object.defineProperty 实现简单的watch功能
1 /** 2 * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效 3 */ 4 $watch=function(myObject,callback){ 5 function initWatch(obj){ 6 for(var i in obj){ 7 if(typeof obj!=‘object‘){ 8 return; 9 } 10 (function(value,o,attr){ 11 var v=value; 12 var oldValue=http://www.mamicode.com/value; 13 Object.defineProperty(o,attr,{ 14 get:function(){ 15 return v; 16 }, 17 set:function (newValue){ 18 oldValue=http://www.mamicode.com/v; 19 v=newValue; 20 callback(newValue,oldValue) 21 } 22 }); 23 })(obj[i],obj,i); 24 initWatch(obj[i]); 25 } 26 } 27 initWatch(myObject); 28 }; 29 var a={ 30 name:‘Lee‘, 31 background:{ 32 hometown:‘De Zhou‘, 33 presentAddr:‘Texas‘ 34 } 35 } 36 $watch(a,function(newValue,oldValue){ 37 console.log(a.name+" moved from "+ oldValue + " to " + newValue); 38 }) 39 a.background.presentAddr="New York" 40 //Lee moved from Texas to New York 41 //"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。
20+行代码使用es5 Object.defineProperty 实现简单的watch功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。