1. 简介
观察者模式是一种对象行为模式。它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
2. 使用场景
- 当一个抽象模型有两个方面，其中一个方面依赖于另一方面。将这二者封装在独立的对象中以使它们可以各自独立地改变和复用。
- 当对一个对象的改变需要同时改变其他对象，而不知道具体有多少对象需要被改变。
- 当一个对象必须通知其他对象，而它又不能假定其他对象是谁。换言之，不希望这些对象是紧密耦合的。
3. 角色
- 抽象主题（Subject）： 它把所有观察者对象的引用保存到一个聚集里，每个主题都可以有任何数量的观察者。抽象主题提供一个接口，可以增加和删除观察者对象。
- 具体主题（Concrete Subject）： 将有关状态存入具体观察者对象；在具体主题内部状态改变时，给所有登记过的观察者发出通知。
- 抽象观察者（Observer）： 为所有的具体观察者定义一个接口，在得到主题通知时更新自己。
- 具体观察者（Concrete Observer）： 实现抽象观察者角色所要求的更新接口，以便使本身的状态与主题状态协调。
4. 实现
image.png
代码语言：javascript复制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 也只是对变更行为的一种抽象而已，你可以在任何事件或者任何时机通知订阅者进行更新。
5. 小结
当一个对象密切关注另一个对象的某个状态时，就可以使用观察者模式。它解除了主题和具体观察者的耦合，让耦合的双方都依赖于抽象，而不是依赖具体。
另外，在使用轮询的地方，我们应该先考虑是否可以使用观察者模式。因为主动观察是优于被动轮询的。
参考
观察者模式 - 百度百科 观察者模式 | 菜鸟教程 图解23种设计模式（TypeScript版）——前端必修内功心法 Java设计模式之观察者模式(Observer Pattern)
