观察者模式（Observer Pattern）
观察者模式是一种常见的设计模式，属于行为型模式（Behavioral Pattern）。它定义了一种一对多的依赖关系，使得多个观察者对象能够在被观察对象的状态发生变化时自动收到通知。
观察者模式的结构
在 TypeScript 中，实现观察者模式通常涉及以下几个部分：
- Subject（主题/被观察者）：维护一个观察者列表，并提供添加、移除和通知观察者的方法。
- Observer（观察者）：定义一个接口或抽象类，所有观察者都需要实现该接口。
- 具体主题（Concrete Subject）：继承自
Subject，实现具体的业务逻辑。 - 具体观察者（Concrete Observer）：实现
Observer接口，定义在状态变化时需要执行的操作。
TypeScript 实现
下面是一个 TypeScript 版本的观察者模式实现。
// 观察者接口
interface Observer {
update(data: any): void;
}
// 被观察者（主题）
class Subject {
private observers: Observer[] = [];
// 添加观察者
addObserver(observer: Observer): void {
this.observers.push(observer);
}
// 移除观察者
removeObserver(observer: Observer): void {
this.observers = this.observers.filter(obs => obs !== observer);
}
// 通知所有观察者
notifyObservers(data: any): void {
this.observers.forEach(observer => observer.update(data));
}
}
// 具体观察者
class ConcreteObserver implements Observer {
private name: string;
constructor(name: string) {
this.name = name;
}
update(data: any): void {
console.log(`${this.name} 收到更新:`, data);
}
}
// 测试代码
const subject = new Subject();
const observer1 = new ConcreteObserver("观察者1");
const observer2 = new ConcreteObserver("观察者2");
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers("状态发生变化！");
subject.removeObserver(observer1);
subject.notifyObservers("再次更新状态");
适用场景
观察者模式适用于以下场景：
- 事件驱动架构：如浏览器事件监听机制。
- 数据绑定：Vue 和 React 的响应式数据系统。
- 消息广播：如发布-订阅模式。
- 日志系统：让多个日志处理器监听并记录日志。
结论
观察者模式提供了一种解耦的方式，让对象之间可以通过事件通知的方式进行通信，而不需要相互引用。这样可以提高系统的可维护性和扩展性。在 TypeScript 中，借助接口和类的特性，可以更容易地实现和管理观察者模式。
