今天本来想继续看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