观察者模式（Observer Pattern）是一种常用的设计模式，用于在对象之间建立一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知并自动更新。对于这位刚入行的小白开发者来说，理解和实现观察者模式可能是一个挑战。在本文中，我将向他解释观察者模式的流程，并提供实现观察者模式所需的代码示例。
观察者模式的流程
观察者模式包含以下几个角色：
- Subject（主题）：定义了观察者需要观察的对象，并提供了注册、取消注册观察者以及通知观察者的方法。
- Observer（观察者）：定义了接收主题通知的方法。
- ConcreteSubject（具体主题）：继承自Subject，实现了注册、取消注册观察者以及通知观察者的方法，并维护了一个观察者列表。
- ConcreteObserver（具体观察者）：继承自Observer，实现了接收主题通知的方法。
下面是观察者模式的流程示意图：
classDiagram
class Subject {
+ attach(observer: Observer): void
+ detach(observer: Observer): void
+ notify(): void
}
class Observer {
+ update(): void
}
class ConcreteSubject {
- observers: Observer[]
+ attach(observer: Observer): void
+ detach(observer: Observer): void
+ notify(): void
}
class ConcreteObserver {
+ update(): void
}
Subject <|-- ConcreteSubject
Observer <|-- ConcreteObserver
实现观察者模式的步骤
下面是实现观察者模式的步骤：
| 步骤 | 代码 | 描述 |
|---|---|---|
| 1 | interface Subject {<br>attach(observer: Observer): void;<br>detach(observer: Observer): void;<br>notify(): void;<br>}<br><br>interface Observer {<br>update(): void;<br>} |
创建Subject和Observer接口，定义了主题和观察者的方法。 |
| 2 | class ConcreteSubject implements Subject {<br>private observers: Observer[] = [];<br><br>attach(observer: Observer): void {<br>this.observers.push(observer);<br>}<br><br>detach(observer: Observer): void {<br>const index = this.observers.indexOf(observer);<br>if (index !== -1) {<br>this.observers.splice(index, 1);<br>}<br>}<br><br>notify(): void {<br>for (const observer of this.observers) {<br>observer.update();<br>}<br>}<br>} |
创建ConcreteSubject类，继承自Subject接口，并实现了注册、取消注册观察者以及通知观察者的方法。 |
| 3 | class ConcreteObserver implements Observer {<br>update(): void {<br>// 实现观察者的更新逻辑<br>}<br>} |
创建ConcreteObserver类，继承自Observer接口，并实现了接收主题通知的方法。 |
完整代码示例
下面是完整的代码示例：
// Step 1
interface Subject {
attach(observer: Observer): void;
detach(observer: Observer): void;
notify(): void;
}
interface Observer {
update(): void;
}
// Step 2
class ConcreteSubject implements Subject {
private observers: Observer[] = [];
attach(observer: Observer): void {
this.observers.push(observer);
}
detach(observer: Observer): void {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notify(): void {
for (const observer of this.observers) {
observer.update();
}
}
}
// Step 3
class ConcreteObserver implements Observer {
update(): void {
// 实现观察者的更新逻辑
}
}
在这个示例中，我们创建了Subject接口和Observer接口
