一、前言

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

但，倘若我們想在某個(gè)對(duì)象中，新增某個(gè)屬性呢？

如下：

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

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

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

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

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

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

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

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

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

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

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

const extendObj = {};

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

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

接下來，就是實(shí)現(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屬性值為對(duì)象，再次監(jiān)聽key屬性值
    */     
  }  
});

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

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

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

//observer.js
p.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自身實(shí)例
  data.$Observer = this;
}
//新增一個(gè)observe方法
p.observe = function(data){
  if(typeof data === 'object'){
    new Observer(data);  
  }  
}

好了，這樣之后，得$set整體實(shí)現(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);  
  }  
});

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

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

//observer.js
function Observer(data){
  if(!(this instanceof Observer)){
    return new Observer(data);
  }
  //將監(jiān)聽對(duì)象的隱指針指向我們的extendObj對(duì)象
  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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論