今天本來想繼續(xù)看Webpack业筏，但是無奈公司上線到11點(diǎn)姨俩，沒有多少時間，就先看一篇別的文章 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
