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:
小小参考：