1.观察者模式是只有两个对象:目标对象(类)去直接作用观察者(类)去更新,这个更新是在观察者内部调用自身的update方法去执行响应或者说去做更新。
耦合度较高,因为观察者是在目标对象的“体内”去执行的。目标对象在自己体内去添加观察者列表,然后调用自身的发布事件触发观察者调用自己的update方法执行。
按照上面的思路写一个简易版的观察者模式:
1 // 观察者模式:
2 class Observer {
3 constructor(cb) {
4 // 判断传进来的是不是一个函数,如果是就挂载到this上
5 if (Object.prototype.toString.call(cb) !== "[object Function]") {
6 console.log('不是一个函数');
7 } else {
8 this.cb = cb;
9 }
10 }
11 // 执行更新
12 update() {
13 this.cb();
14 }
15 }
16 // 目标对象
17 class Target {
18 constructor() {
19 // 存储观察者
20 this.observerList = [];
21 };
22 // 添加观察者
23 add(observer) {
24 this.observerList.push(observer)
25 };
26 // 通知所有观察者触发更新
27 notify() {
28 for (let i = 0; i < this.observerList.length; i++) {
29 this.observerList[i].update();
30 }
31 }
32 }
33
34 let fn1 = function() {console.log('我要触发了');}
35 let fn2 = function() {console.log('我要触发了2');}
36 let o1 = new Observer(fn1);
37 let o2 = new Observer(fn2);
38
39 let t = new Target();
40 // 把o1和o2两个观察者存入观察者数组
41 t.add(o1);
42 t.add(o2);
43 // 触发依次调用所有观察者的update方法,像不像addEventLister?
44 // 比如给一个按钮绑定点击事件,对应不同的回调函数,这里的fn1和fn2就相当于addEventListener中的回调函数
45 t.notify();
输出:
vue响应式观察者模式部分:
调用: Dep.target就是watcher实例,相当于new Watcher的行为,把实例添加进入了目标对象中,目标对象中的notify就执行了。
2.发布订阅模式
简单版本自写:
版本1:模仿vue响应式的发布订阅
1 // 收集依赖-相当于vue的Observer中definedPrototype中的get
2 class Observer {
3 constructor() {
4 this.saveArr = [];
5 }
6 add(fn) {
7 this.saveArr.push(fn);
8 return this.saveArr;
9 }
10 }
11 // 调度中心- 相当于Vue的Dep
12 class Dep {
13 constructor() {
14 this.getArr = [];
15 }
16 on(event) {
17 let ob = new Observer();
18 this.getArr = ob.add(event);
19 };
20 emit(event) {
21 let notify = new Notify();
22 notify.update(event);
23 }
24 }
25 // 发布者 - 相当于vue的Observer中definedPrototype中的set
26 class Notify {
27 constructor() {
28 this.arr = [];
29 }
30 update(fn) {
31 this.arr.push(fn);
32 for (var i = 0; i < this.arr.length; i++) {
33 this.arr[i]();
34 }
35 }
36 }
37
38 var fn1 = function() {
39 console.log('1');
40 }
41 var fn2 = function() {
42 console.log('2');
43 }
44 var d1 = new Dep();
45 var d2 = new Dep();
46
47 d1.on(fn1);
48 d2.on(fn2);
49 d1.emit(fn1);
50 d2.emit(fn2);
51 // 输入1,2
版本2:一个class类,类本身是一个调度中心,里面的on作为订阅者,emit是发布者
1 var f1 = function() {
2 console.log('f1');
3 }
4 var f2 = function() {
5 console.log('f2');
6 }
7 // EventEmitter这个类本就是一个调度中心
8 class EventEmitter {
9 constructor() {
10 this.getArr = {};
11 }
12 // 订阅
13 on(type, event) {
14 if (type) {
15 this.getArr[type] = [];
16 this.getArr[type].push(event);
17 }
18 };
19 // 发布
20 emit(type, event) {
21 for (var i = 0; i < this.getArr[type].length; i++) {
22 this.getArr[type][i]();
23 }
24 }
25 }
26
27 var ee = new EventEmitter();
28 ee.on("test1", f1);
29 ee.on("test2", f2);
30 ee.emit("test1", f1);
31 ee.emit("test2", f2);
32 // 输出: f1,f2
3.vue中的数据响应式其实是个发布订阅模式:
数据劫持中,get函数是触发监听,把data都绑定上了watcher
set函数是发布者,因为只要数据已更新,就会触发set函数,set函数就会告诉Dep让其执行notify,相当于this.$emit('notify'),set函数扮演的就是甲方,是个发号施令的角色。
Dep是调度中心,负责收集依赖和收到发布者的命令执行notify方法,调度中心通知Wather执行更新方法。watcher去调用自己的update方法,在compile编译模板的时候,new Watcher的时候,拿到了Watcher的回调函数(得到set修改后最新值)然后去通过textContent通过打补丁的方式,经历Diff算法,最终更新DOM。
get函数是订阅者,订阅wather
简单来说就是:
调度者作为订阅者和发布者的纽带,就像一个房产中介一样,租户就好比订阅者,去关注中介的发的租房信息,房东就好比发布者,去告诉中介他房子要出租了。
中介(Dep)就收集了很多租房者的微信(watcher),如果房东有房子告诉中介你去发微信(这个行为就是发布者知道调度者的方式notify)告诉租户们(set方法),就会立马通过微信通知(notify)租房者(watcher),租房者会去跟媳妇商量商量做出响应(update更新:跟虚拟DOM切磋,diff算法,patch打补丁)
上面说的不咋对,新的理解:
订阅阶段:
在最开始初始化vue阶段,走到模板编译阶段,也就是compile,加载compile.js的时候,回去new Watcher()实例,那么就会触发watcher中执行 把watcher实例给到 数据劫持的get方法(订阅者),给每一个data都加上了wather,这些watcher又被push进去了调度中心Dep。
发布阶段:当data数据发生改变后,就会触发set方法(发布者),set方法中就会让调度中心Dep去让他里面的watcher执行他们的update方法,watcher中的update方法呢,又会调用Watcher类中传入的回调函数,这个回调函数执行,并且传入set改了那个数据的最新值,这样complie.js中 去new Watcher实例的时候(数据每次发生变化的时候,就会触发beforeUpdate和upDate钩子进行重新编译,自然就会触发complie.js),传入的回调函数就可以收到Wather实例中执行的回调函数的值。拿到值后,去更新DOM。
截几个关键点:
complie.js中:页面初始化,new Watcher,触发Wather中的方法(触发数据劫持的get方法,添加监听器)
等到data数据发生变化,要重新编译模板,又会触发compile.js,自然又触发了Wather,拿到watcher的回调参数,更新DOM
数据劫持:
Dep:
Wather:
小小参考: