观察者模式是一种对象行为模式。它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
image.png
interface Msg { // Msg 可以按照任意约定的接口格式去约束,这里假设是如下类型消息
name: string;
value: string;
}
interface Subject {
registerObserver(observer: Observer): void;
removeObserver(observer: Observer): void;
notifyObservers(msg: Msg): void;
}
interface Observer {
update(msg: Msg): void
}
class ConcreteSubject implements Subject {
private observers: Observer[] = [];
private state: object = {};
registerObserver(observer: Observer): void {
this.observers.push(observer);
}
removeObserver(observer: Observer): void {
const index = this.observers.findIndex(val => val === observer);
if (index > -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(msg: Msg): void {
this.observers.forEach(observer => observer.update(msg));
}
setState(name, value): void {
this.state[name] = value;
console.log(`${name}状态更新为:${value}`);
console.log('通知所有观察者');
this.notifyObservers({
name,
value,
});
}
}
class ConcreteObserver implements Observer {
name: string;
constructor(name: string) {
this.name = name;
}
update(msg: Msg): void {
console.log(`${this.name} 观察到:${msg.name}状态更新为:${msg.value}`);
}
}
const concreteSubject = new ConcreteSubject();
const concreteObserver1 = new ConcreteObserver('小王');
const concreteObserver2 = new ConcreteObserver('小明');
concreteSubject.registerObserver(concreteObserver1);
concreteSubject.registerObserver(concreteObserver2);
concreteSubject.setState('天气', '多云');
concreteSubject.removeObserver(concreteObserver2);
concreteSubject.setState('天气', '晴');
image.png
这里的 Msg 其实就是一种约定的消息接口,你甚至可以直接使用 Subject,这样Subject 和 Observer 就是一种双向关系(关联和依赖)。另外,这里的 setState 也只是对变更行为的一种抽象而已,你可以在任何事件或者任何时机通知订阅者进行更新。
当一个对象密切关注另一个对象的某个状态时,就可以使用观察者模式。它解除了主题和具体观察者的耦合,让耦合的双方都依赖于抽象,而不是依赖具体。
另外,在使用轮询的地方,我们应该先考虑是否可以使用观察者模式。因为主动观察是优于被动轮询的。
观察者模式 - 百度百科 观察者模式 | 菜鸟教程 图解23种设计模式(TypeScript版)——前端必修内功心法 Java设计模式之观察者模式(Observer Pattern)