一、前言

在"模擬Vue之?dāng)?shù)據(jù)驅(qū)動2"中，我們實現(xiàn)了個Observer構(gòu)造函數(shù)，通過它可以達(dá)到監(jiān)聽已有數(shù)據(jù)data中的所有屬性。

但，倘若我們想在某個對象中，新增某個屬性呢？

如下：

那么豈不是，新增的infor屬性，以及它的對象屬性，沒有得到監(jiān)聽。

此時，應(yīng)該怎么處理呢？

通過走讀Vue源碼，發(fā)現(xiàn)他是采用另增屬性方法$set實現(xiàn)的。

就是說，如果我們采用常規(guī)方法為對象增加屬性（如上），我們沒法得知并監(jiān)控它，所以，我們?yōu)槊總€對象擴(kuò)展一個$set方法，用于另增屬性使用，即可，如下：

data.user.$set('infor', {msg: 'happy'});

好了，下面，我們就一同實現(xiàn)這個$set方法吧。

二、$set方法實現(xiàn)

首先，我們得創(chuàng)建一個恒定extendObj對象，用于將$set方法綁定在其中。

你可能會想，為什么我們需要一個extendObj對象呢？直接將$set函數(shù)賦值給每個需要監(jiān)聽的對象不就完了么？

是的，這樣也可以，但是隨著需求增長，倘若我們又想為每個監(jiān)聽對象擴(kuò)展其他方法呢？難道又要去Observer里面為對象，一一賦值？

so，創(chuàng)建恒定extendObj對象，如下：

const extendObj = {};

因為，我們將$set綁定到extendObj中，且讓$set為不可枚舉型，所以會用到Object.defineProperty，固將其提取出來，作為一個方法如下：

function proxyObject(obj, key, val, enume){  Object.defineProperty(obj, key, {    value: val,    enumerable: !!enume,    writable: true,    configurable: true  });  };

接下來，就是實現(xiàn)$set方法了，整體結(jié)構(gòu)如下：

proxyObject(extendObj, '$set', function(key, val){  //this指向extendObj  if(this.hasOwnProperty(key)){    return;  }else{    /*     TODO:在extendObj中監(jiān)聽key屬性，     且，若key屬性值為對象，再次監(jiān)聽key屬性值    */       }  });

看到上面的TODO注釋，是否似曾相識，不就是是在“模擬Vue之?dāng)?shù)據(jù)驅(qū)動2”遇見過的嘛，通過Observer.prototype.convert監(jiān)聽key屬性，通過new Observer再次監(jiān)聽key屬性值不就完啦。

的確，但是一旦這樣做了，不就和上面我們提到的“直接將$set賦予監(jiān)聽對象”問題一樣嘛，耦合性太大，且隨著需求上漲，不易維護(hù)。

固而，在此需要一點小技巧：在observer模塊中為每個監(jiān)聽對象賦予一個$Observer屬性，其值指向Observer自身實例，如下：

//observer.jsp.walk = function(data){  let keys = Object.keys(data);  keys.forEach( key => {    let val = data[key];    if(typeof val === 'object'){      new Observer(val);    }    this.convert(key, val);  });  //$Observer屬性指向Observer自身實例  data.$Observer = this;}//新增一個observe方法p.observe = function(data){  if(typeof data === 'object'){    new Observer(data);    }  }

好了，這樣之后，得$set整體實現(xiàn)如下：

proxyObject(extendObj, '$set', function(key, val){  if(this.hasOwnProperty(key)){    return;  }else{    proxyObject(this, key, val, true);    let ob = this.$Observer;    ob.observe(val);    ob.convert(key, val);    }  });

到此，一個簡單的$set方法構(gòu)建完畢。

在上面我們提到，之所以需要一個恒定extendObj對象，是為了更好的代碼管理。且，到目前為止，需要監(jiān)聽的對象上并沒有擴(kuò)展$set方法呢，所以，下面的事情就是為了達(dá)到以上效果，如下：

//observer.jsfunction Observer(data){  if(!(this instanceof Observer)){    return new Observer(data);  }  //將監(jiān)聽對象的隱指針指向我們的extendObj對象  data.__proto__ = extendObj;  this.data = data;  this.walk(data);  }

好了，一切完畢，接下來就測試下吧：

<script src="./extendObj.js"></script><script src="./observer.js"></script><script>  let data = {    user: {      name: 'Monkey',      age: 24    },    lover: {      name: 'Dorie',      age: 23    }  };  Observer(data);</script>

效果如下：

Perfect，完整代碼見github。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。