【设计模式】观察者模式和订阅发布模式

观察者模式

观察者模式包含观察目标和观察者两类对象。一个目标可以有任意数目的与之相依赖的观察者。一旦观察目标的状态发生改变，所有的观察者都将得到通知。

当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象通知的问题。

class Subject {constructor() {this.observers = []}add(observer) {this.observers.push(observer)}remove(observe) {this.observers = this.observers.filter(observer => observer !== observe)}notify() {this.observers.forEach(observer => {observer.update()})}
}
class Observer {constructor(name) {this.name = name}update() {console.log(this.name, 'update')}
}const subject = new Subject();
const observer1 = new Observer('liu');
const observer2 = new Observer('hao')subject.add(observer1)
subject.add(observer2)
subject.notify() // liu update hao update

前端通常的应用是导航和面包屑，面包屑发生改变，对应的页面内容也会发生改变。

优势：目标者与观察者，功能耦合度降低，专注自身功能逻辑；观察者被动接收更新，时间上解耦，实时接收目标者更新状态。

缺点：观察者模式虽然实现了对象间依赖关系的低耦合，但却不能对事件通知进行细分管控，如“筛选通知”，“指定主题事件通知”。

订阅发布模式

1. 观察者和目标要相互知道
2. 发布者和订阅者不用互相知道，通过第三方实现调度，属于经过解耦合的观察者模式

// 发布订阅模式
class PubSub {constructor() {this.subscribers = {};}subscribe(type, callback) {if (!this.subscribers[type]) {this.subscribers[type] = [];}this.subscribers[type].push(callback);}publish(type, ...args) {if (this.subscribers[type]) {this.subscribers[type].forEach(callback => {callback(...args);});}}unsubscribe(type, callback) {if (this.subscribers[type]) {this.subscribers[type] = this.subscribers[type].filter(cb => cb !== callback);}}
}function eventA() {console.log('eventA');
}
function testB() {console.log('testB');
}const pubSub = new PubSub();
pubSub.subscribe('eventA', eventA);
pubSub.subscribe('testB', testB);
pubSub.publish('eventA');