JS观察者模式和发布订阅模式的区别

观察者模式: 观察者观察被观察者，当被观察者发生被观察的行为时，触发观察者里面的事件。

document.querySelector('#btn').addEventListener('click', ()=>{
    console.log('点击了按钮');
})

发布订阅模式： 订阅者订阅想要观察的事件，当发布者发布事件时，会去查找对应事件的订阅事件并触发。

// 事件大厅
class Event {
    constructor() {
        this.list = {}
    }
    // 订阅者订阅想要观察的事件
    addEvent(fnName,fn) {
        this.list[fnName] = this.list[fnName] || [];
        this.list[fnName].push(fn);
    }
    // 发布者发布事件
    trigger(fnName){
        if(this.list[fnName]) {
            this.list[fnName].forEach((item)=>{
                item();
            })
        }
    }
}
let event = new Event();
event.addEvent('click', ()=>{
    console.log('触发事件1');
});
event.addEvent('click', ()=>{
    console.log('触发事件2');
});
event.trigger('click');

区别： 观察者模式和发布订阅模式都是为了解耦，减少代码的冗余，不同的是，观察者模式中观察者必须知道被观察者，而发布订阅模式解耦更彻底，订阅者与发布者不需要相互知道，只需要向事件大厅订阅和发布即可。