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。