2017-08-03读书笔记（js监听对象属性改变）

今天本来想继续看Webpack，但是无奈公司上线到11点，没有多少时间，就先看一篇别的文章 js监听对象属性改变。

公司用的框架是backbone，但是正在转型为react，但是个人非常喜欢backbone中对model的有一个listenTo的方法，可以监听对象的所有变化，就可以在回调函数中直接修改别处的样式。在一个对象渲染于多处却需要挨个修改的情况下，这样可以节省一部分的去寻找并修改的精力，让代码更好读、易理解。

所以在网上广泛的寻找能行的替代解决方案（当然我也不是很清楚react到底有没有类似功能，目前使用程度还不太深）。然后就找到了这篇文章。

文章中提到的方法是用的ES5提供的Object.defineProperty函数。

Object.defineProperty(user, 'name', {
    set:function(key,value){
        //此处拦截了设置请求
    }
});

文章中还讲说，如果为user增加一个新的属性，比如user里没有id属性，增加一个 user.id=1，Object.defineProperty函数是不知道存在'id'的，也就无法写出上面的代码，这可以用ES6提供的Proxy代理处理，代码如下：

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

如果使用这种方法，我觉得可以专门加一层collection的感觉，在一个对象中定义所有的属性，之后所有的新建都可以是new一个这个对象，并继承这个初始对象的所有属性，之后就基本只有修改的话可以只用defineProperty函数就可以了。

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

可以用这个extend方法来继承所有的属性。当然也可以用es6的class和extends来实现继承。

公司项目准备将ajax、backbone的fetch等进行整合，准备使用axios来统一的进行http请求，到时候一旦将backbone的fetch去掉，使用axois，可以自己尝试封装一下。当然，最简单的还是将json传入model层中自动转化为backbone的model，就能直接使用listenTo也不需要改太多代码了。

另外附一份代码，也是封装过的可以实现对象属性监听的代码。

//简单对象的属性的变化监控
//通过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);

明天继续Webpack