今天本來想繼續(xù)看Webpack，但是無奈公司上線到11點，沒有多少時間，就先看一篇別的文章 js監(jiān)聽對象屬性改變。

公司用的框架是backbone，但是正在轉(zhuǎn)型為react，但是個人非常喜歡backbone中對model的有一個listenTo的方法，可以監(jiān)聽對象的所有變化，就可以在回調(diào)函數(shù)中直接修改別處的樣式。在一個對象渲染于多處卻需要挨個修改的情況下，這樣可以節(jié)省一部分的去尋找并修改的精力，讓代碼更好讀、易理解。

所以在網(wǎng)上廣泛的尋找能行的替代解決方案（當(dāng)然我也不是很清楚react到底有沒有類似功能，目前使用程度還不太深）。然后就找到了這篇文章。

文章中提到的方法是用的ES5提供的Object.defineProperty函數(shù)。

Object.defineProperty(user, 'name', {
    set:function(key,value){
        //此處攔截了設(shè)置請求
    }
});

文章中還講說，如果為user增加一個新的屬性，比如user里沒有id屬性，增加一個 user.id=1，Object.defineProperty函數(shù)是不知道存在'id'的，也就無法寫出上面的代碼，這可以用ES6提供的Proxy代理處理，代碼如下：

var user = new Proxy({},{
   set:function(target,key,value,receiver){
       //處理代碼
   }
})

如果使用這種方法，我覺得可以專門加一層collection的感覺，在一個對象中定義所有的屬性，之后所有的新建都可以是new一個這個對象，并繼承這個初始對象的所有屬性，之后就基本只有修改的話可以只用defineProperty函數(shù)就可以了。

function extend(parent){
    var child={};
    for(var i in parent){
        child[i]=parent[i];
    }
    child.uber=parent;
    return child;
}

可以用這個extend方法來繼承所有的屬性。當(dāng)然也可以用es6的class和extends來實現(xiàn)繼承。

公司項目準(zhǔn)備將ajax、backbone的fetch等進(jìn)行整合，準(zhǔn)備使用axios來統(tǒng)一的進(jìn)行http請求，到時候一旦將backbone的fetch去掉，使用axois，可以自己嘗試封裝一下。當(dāng)然，最簡單的還是將json傳入model層中自動轉(zhuǎn)化為backbone的model，就能直接使用listenTo也不需要改太多代碼了。

另外附一份代碼，也是封裝過的可以實現(xiàn)對象屬性監(jiān)聽的代碼。

//簡單對象的屬性的變化監(jiān)控
//通過setAttr改變屬性的值
  
var o = {
  'a':2,
  'b':3
};
function watch(obj, attr, callback){
   if(typeof obj.defaultValues == 'undefined'){
      obj.defaultValues = {};
      for(var p in obj){
        if(typeof obj[p] !== 'object') 
            obj.defaultValues[p] = obj[p];
      }
   }
   if(typeof obj.setAttr == 'undefined'){
      obj.setAttr = function(attr, value){  
              if(this[attr] != value){
                this.defaultValues[attr] = this[attr];
                this[attr] = value;
                return callback(this);
              }
              return this;             
       };
   } 
}
watch(o, 'a', function(obj){
  console.log(obj);
});
o.setAttr('a',4);

明天繼續(xù)Webpack