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。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！