观察者模式
观察者模式包含观察目标和观察者两类对象。一个目标可以有任意数目的与之相依赖的观察者。一旦观察目标的状态发生改变,所有的观察者都将得到通知。
当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题。
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
前端通常的应用是导航和面包屑,面包屑发生改变,对应的页面内容也会发生改变。
优势:目标者与观察者,功能耦合度降低,专注自身功能逻辑;观察者被动接收更新,时间上解耦,实时接收目标者更新状态。
缺点:观察者模式虽然实现了对象间依赖关系的低耦合,但却不能对事件通知进行细分管控,如“筛选通知”,“指定主题事件通知”。
订阅发布模式
- 观察者和目标要相互知道
- 发布者和订阅者不用互相知道,通过第三方实现调度,属于经过解耦合的观察者模式
// 发布订阅模式
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');