跳到主要内容

TypeScript 观察者模式

观察者模式（Observer Pattern）是一种行为设计模式，它允许对象（称为“观察者”）订阅另一个对象（称为“主题”或“可观察对象”）的状态变化。当主题的状态发生变化时，所有订阅的观察者都会自动收到通知并更新。这种模式非常适合实现事件驱动的系统，例如用户界面更新、日志记录或数据同步。

观察者模式的核心概念​

观察者模式的核心思想是将“观察者”与“主题”解耦。主题不需要知道观察者的具体实现，只需要维护一个观察者列表，并在状态变化时通知它们。这种设计使得系统更加灵活，易于扩展和维护。

观察者模式的组成部分​

  1. 主题（Subject）：维护一个观察者列表，并提供注册、移除和通知观察者的方法。
  2. 观察者（Observer）：定义一个更新接口，用于接收主题的通知。
  3. 具体主题（Concrete Subject）：实现主题的具体逻辑，并在状态变化时通知观察者。
  4. 具体观察者（Concrete Observer）：实现观察者的更新逻辑，以响应主题的状态变化。

观察者模式的实现​

下面是一个简单的TypeScript实现示例，展示如何使用观察者模式来实现一个天气站系统。

1. 定义观察者接口​

首先，我们定义一个观察者接口 Observer，它包含一个 update 方法，用于接收主题的通知。

interface Observer {
  update(temperature: number, humidity: number, pressure: number): void;
}

2. 定义主题接口​

接下来，我们定义一个主题接口 Subject，它包含注册、移除和通知观察者的方法。

interface Subject {
  registerObserver(observer: Observer): void;
  removeObserver(observer: Observer): void;
  notifyObservers(): void;
}

3. 实现具体主题​

然后，我们实现一个具体主题 WeatherStation，它维护一个观察者列表，并在天气数据变化时通知所有观察者。

class WeatherStation implements Subject {
  private observers: Observer[] = [];
  private temperature: number = 0;
  private humidity: number = 0;
  private pressure: number = 0;

  registerObserver(observer: Observer): void {
    this.observers.push(observer);
  }

  removeObserver(observer: Observer): void {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers(): void {
    for (const observer of this.observers) {
      observer.update(this.temperature, this.humidity, this.pressure);
    }
  }

  setMeasurements(temperature: number, humidity: number, pressure: number): void {
    this.temperature = temperature;
    this.humidity = humidity;
    this.pressure = pressure;
    this.notifyObservers();
  }
}

4. 实现具体观察者​

最后，我们实现一个具体观察者 Display，它会在收到通知时打印当前的天气数据。

class Display implements Observer {
  update(temperature: number, humidity: number, pressure: number): void {
    console.log(`Current conditions: ${temperature}°C, ${humidity}% humidity, ${pressure} hPa`);
  }
}

5. 使用观察者模式​

现在，我们可以创建一个天气站实例，并注册一个显示观察者。当天气数据变化时，显示观察者会自动更新。

const weatherStation = new WeatherStation();
const display = new Display();

weatherStation.registerObserver(display);

weatherStation.setMeasurements(25, 65, 1013);
// 输出: Current conditions: 25°C, 65% humidity, 1013 hPa

weatherStation.setMeasurements(30, 70, 1015);
// 输出: Current conditions: 30°C, 70% humidity, 1015 hPa

实际应用场景​

观察者模式在许多实际场景中都有应用，例如：

  • 用户界面更新：当用户点击按钮或输入数据时，UI组件可以自动更新。
  • 日志记录：当系统状态变化时，日志记录器可以自动记录相关信息。
  • 数据同步：当数据源发生变化时，多个客户端可以自动同步数据。

总结​

观察者模式是一种强大的设计模式，它通过事件驱动的方式实现了对象间的松耦合通信。通过将观察者与主题解耦，我们可以轻松地扩展和维护系统。在实际开发中，观察者模式非常适合用于实现事件驱动的系统，例如用户界面更新、日志记录或数据同步。

附加资源与练习​

  • 练习：尝试扩展上面的天气站示例，添加更多的观察者（例如，一个记录天气历史的观察者）。
  • 资源：阅读《设计模式：可复用面向对象软件的基础》一书，深入了解观察者模式和其他设计模式。
提示

观察者模式是事件驱动编程的核心模式之一。掌握它可以帮助你构建更加灵活和可扩展的系统。