观察者模式

定义

对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。

实质

A男孩和C男孩在M女孩的追求者列表中，当M女孩对追求者列表说我失恋了，追求者列表的A男孩和C男孩收到消息后开心的笑了，因为他们没忍住

特点

M女孩在执行添加、删除、通知操作的时候会通知所有的备胎。M女孩就相当于目标对象Subject,备胎就相当于观察者

代码

//定义一个目标对象。也就是M女孩
class Subject {
    constructor() {
        this.subs = [];
    }
    //添加一个备胎
    add(sub) {
        this.subs.push(sub);
    }
    //删除一个备胎
    remove(sub) {
        let idx = this.subs.findIndex(item => JSON.stringify(item) === JSON.stringify(sub))
        this.subs.splice(idx, 1)
    }
    //通知备胎报名
    notify() {
        this.subs.forEach(ob => {
            ob.update.apply(ob, Array.prototype.slice.call(arguments));
        })
    }
}
//定义一个观察者，也就是备胎
class Observer {
    constructor() {
        this.name = name
    }
    update() {
        console.log("我是备胎" + this.name);
    }
}
const boy1 = new Observer('boy1');
const boy2 = new Observer('boy2');
const boy3 = new Observer('boy3');
const boy4 = new Observer('boy4');
const subject = new Subject();
subject.add(boy1);
subject.add(boy2);
subject.add(boy3);
subject.add(boy4);
subject.notify("我失恋了");

发布订阅者模式

定义

对象间一种一对多的依赖关系，当目标对象指定的动作发生改变时，订阅该动作的依赖对象会收到相应的通知。

实质

男孩A和男孩B分别在抖音和火山直播平台关注了主播。主播在抖音上发布消息，男孩A就可以收到消息，女孩在火山上发布消息，男孩B就可以收到消息。那么直播平台就充当了一个事件调度中心。

特点

事件调度中心执行添加/删除订阅者和发布操作。

代码

//定义一个事件调度中心
class PubSub {
    constructor() {
        //事件缓存列表
        this.eventList = Object.create(null);
    }
    //订阅
    subscribe(event, fn) {
        if (Array.isArray(this.eventList[event])) {
            this.eventList[event].push(fn);
        }
    }
    //取消订阅
    unSubscribe(key) {
        delete this.eventList[key];
    }
    //发布
    publish(event, ...args) {
        const fns = this.eventList[event] || [];
        //如果该平台下面没有订阅者，就返回
        if (fns.length == 0) {
            return false;
        }
        //通知该平台下面的订阅者更新
        fns.forEach((fn) => {
            fn.call(this, args)
        })
        return this;
    }
}
//订阅是基于抖音/雅虎直播平台传入自定义事件进行订阅
//发布也是基于抖音/雅虎直播平台触发自定义事件的
const pubSub = new PubSub();
pubSub.subscribe("抖音", (msg) => {
    console.log("抖音: " + msg);
});
pubSub.subscribe("雅虎", (msg) => {
    console.log("雅虎: " + msg);
});
pubSub.publish("抖音", "我失恋了")
pubSub.publish("雅虎", "我恋爱了")

区别

观察者模式

目标直接将通知分发到观察者身上

发布订阅者模式

目标首先是将通知分发到事件调度中心，事件调度中心再通过订阅者具体订阅的类型分发到不同的订阅者身上

总结

从代码角度看，观察者的subs是一个数组，该数组用来存储订阅者对应的自定义事件。发布订阅者模式的subs是一个对象，该对象用来存储目标主题相关的事件。