20+行代码使用es5 Object.defineProperty 实现简单的watch功能

Posted L_F理想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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=value;
13                 Object.defineProperty(o,attr,{
14                     get:function(){
15                         return v;
16                     },
17                     set:function (newValue){
18                         oldValue=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功能的主要内容,如果未能解决你的问题,请参考以下文章

前端学习(3289):object.define2

前端学习(3288):object.define

Babel 入门

Babel 入门

ES6转ES5:Gulp+Babel

手动es6编译es5(命令行)