观察者模式: 观察者观察被观察者,当被观察者发生被观察的行为时,触发观察者里面的事件。
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');
区别: 观察者模式和发布订阅模式都是为了解耦,减少代码的冗余,不同的是,观察者模式中观察者必须知道被观察者,而发布订阅模式解耦更彻底,订阅者与发布者不需要相互知道,只需要向事件大厅订阅和发布即可。