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