14-观察者模式和发布订阅的区别/vue响应式是发布订阅模式和观察者模式

1.观察者模式是只有两个对象：目标对象（类）去直接作用观察者（类）去更新，这个更新是在观察者内部调用自身的update方法去执行响应或者说去做更新。

耦合度较高，因为观察者是在目标对象的“体内”去执行的。目标对象在自己体内去添加观察者列表，然后调用自身的发布事件触发观察者调用自己的update方法执行。

按照上面的思路写一个简易版的观察者模式：

  // 观察者模式：
        class Observer {
            constructor(cb) {
                    // 判断传进来的是不是一个函数，如果是就挂载到this上
                    if (Object.prototype.toString.call(cb) !== "[object Function]") {
                        console.log('不是一个函数');
                    } else {
                        this.cb = cb;
                    }
                }
                // 执行更新
            update() {
                this.cb();
            }
        }
        // 目标对象
        class Target {
            constructor() {
                // 存储观察者
                this.observerList = [];
            };
            // 添加观察者
            add(observer) {
                this.observerList.push(observer)
            };
            // 通知所有观察者触发更新
            notify() {
                for (let i = 0; i < this.observerList.length; i++) {
                    this.observerList[i].update();
                }
            }
        }

        let fn1 = function() {console.log('我要触发了');}
        let fn2 = function() {console.log('我要触发了2');}
        let o1 = new Observer(fn1);
        let o2 = new Observer(fn2);

        let t = new Target();
        // 把o1和o2两个观察者存入观察者数组
        t.add(o1);
        t.add(o2);
        // 触发依次调用所有观察者的update方法，像不像addEventLister?
        // 比如给一个按钮绑定点击事件，对应不同的回调函数，这里的fn1和fn2就相当于addEventListener中的回调函数
        t.notify();

输出：

vue响应式观察者模式部分：

 调用： Dep.target就是watcher实例，相当于new Watcher的行为，把实例添加进入了目标对象中，目标对象中的notify就执行了。

---

 2.发布订阅模式

 简单版本自写：

版本1：模仿vue响应式的发布订阅

 // 收集依赖-相当于vue的Observer中definedPrototype中的get
    class Observer {
        constructor() {
            this.saveArr = [];
        }
        add(fn) {
            this.saveArr.push(fn);
            return this.saveArr;
        }
    }
    // 调度中心- 相当于Vue的Dep
    class Dep {
        constructor() {
            this.getArr = [];
        }
        on(event) {
            let ob = new Observer();
            this.getArr = ob.add(event);
        };
        emit(event) {
            let notify = new Notify();
            notify.update(event);
        }
    }
    // 发布者 - 相当于vue的Observer中definedPrototype中的set
    class Notify {
        constructor() {
            this.arr = [];
        }
        update(fn) {
            this.arr.push(fn);
            for (var i = 0; i < this.arr.length; i++) {
                this.arr[i]();
            }
        }
    }

    var fn1 = function() {
        console.log('1');
    }
    var fn2 = function() {
        console.log('2');
    }
    var d1 = new Dep();
    var d2 = new Dep();

    d1.on(fn1);
    d2.on(fn2);
    d1.emit(fn1);
    d2.emit(fn2);
    // 输入1,2 

版本2：一个class类，类本身是一个调度中心，里面的on作为订阅者，emit是发布者

 var f1 = function() {
   console.log('f1');
 }
 var f2 = function() {
   console.log('f2');
 }
    // EventEmitter这个类本就是一个调度中心
    class EventEmitter {
        constructor() {
            this.getArr = {};
        }
        // 订阅
        on(type, event) {
            if (type) {
                this.getArr[type] = [];
                this.getArr[type].push(event);
            }
        };
        // 发布
        emit(type, event) {
            for (var i = 0; i < this.getArr[type].length; i++) {
                this.getArr[type][i]();
            }
        }
    }

    var ee = new EventEmitter();
    ee.on("test1", f1);
    ee.on("test2", f2);
    ee.emit("test1", f1);
    ee.emit("test2", f2);
    // 输出： 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:

---

小小参考：

https://www.cnblogs.com/wenbinjiang/p/12054308.html

https://juejin.cn/post/6844904102585974792