- angular 脏值检测
- backbone 发布者订阅者模式
- vue 数据劫持(结合发布者订阅者的模式)
一、主要实现思路:
- observe数据监视器:通过对数据对象属性及其子属性进行遍历递归,通过Obeject.defineProperty()方法加上setter,getter,来实现监听数据的变化。
- 添加订阅者功能:用来实现数据发生变化时通知订阅者,方法如下,维护一个数组用来收集订阅者,当数据变化时触发notify(),来调用update()方法实现更新。
- 通过dep添加订阅者。
- 实现Compile: 主要的任务就是解析模板指令,将模板中的变量替换成数据,初始化渲染页面视图,再给每个指令下对应的节点绑定更新函数,添加订阅者,当数据发生变化时,将得到通知,然后更新视图。需要注意的一点是:为避免频繁操作DOM节点造成性能的过度消耗,可以将el节点暂时转换成fragment文档碎片,进行编译解析。完事儿再将fragment添加回原来的真实dom节点中。
- 实现Watcher:它作为主要的任务是成为Compile及Observe数据监视器之间通信的桥梁。
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
通过Object.defineProperty()方法,递归数据对象的每个属性,都添加上 setter, getter,以实现数据被赋新值时触发setter,实现监听。并通过创建的通知订阅者功能,通知订阅者。
var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈,监听到值变化了 kindeng --> dmq
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有属性遍历
Object.keys(data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
};
function defineReactive(data, key, val) {
observe(val); // 监听子属性
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
return val;
},
set: function(newVal) {
console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
val = newVal;
}
});
}
如何完成订阅者功能:首先维护一个数组subs,其次通过监听数据对象的属性是否变化,再调用notify()实现对数据对象的更新。
function defineReactive(data, key, val) {
var dep = new Dep();
observe(val); // 监听子属性
Object.defineProperty(data, key, {
set: function(newVal) {
if (val === newVal) return;
console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
val = newVal;
dep.notify(); // 通知所有订阅者
}
});
}
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};