先实现一个简单的数据劫持。
思路:
遍历对象的每个属性,为每个属性挂上监听函数(即利用Object.defineProperty进行元编程);
考虑属性的子属性的监听;
先上代码:
function Observer(data) {
this.data = data;
this.walk(data);
}
Observer.prototype.walk = function(obj) {
var val;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
val = obj[key];
if (obj[key] instanceof Object) {
new Observer(obj[key]);
}
this.convert(key, val);
}
}
}
Observer.prototype.convert = function(key, val) {
Object.defineProperty(this.data, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('你访问了' + key);
return val;
},
set: function(newVal) {
console.log('你设置了' + key);
console.log('新的' + key + '=' + newVal);
if (val === newVal) {
return;
}
val = newVal;
}
});
}
var data = {
user: {
name: "lixixi",
age: "24"
},
address: {
city: "beijing"
}
};
var app = new Observer(data);
其中涉及的知识点:
Object.defineProperty(object, key, {});
如果属性值还是对象,则递归继续new Observer;