观察者模式详解与示例

意图与它要解决的问题

意图：定义对象之间的一对多依赖关系，使得当一个对象的状态改变时，所有依赖于它的对象都得到通知并自动更新。观察者是《设计模式》（Gang of Four，GoF）一书中的行为型模式之一，也称为发布订阅或监听器模式。

设想网店里的购物车。添加商品时，页头的购物车图标要显示新的数量，侧边栏要显示新的合计，分析模块要记录这一事件。如果购物车直接调用这些模块，购物车模块就依赖页头、侧边栏和分析模块。再加第四种响应，就得再改一次购物车。

使用观察者模式时，购物车只保存一个订阅者列表，变化时调用其中每一个。页头、侧边栏和分析模块自行订阅。购物车不需要导入它们，新功能也可以在不碰购物车代码的情况下响应购物车的变化。

结构与参与者

通知有两种风格。在推模型中，主题把变化后的数据随通知一起发送。在拉模型中，它只说“有东西变了”，由观察者向主题索取所需的数据。

TypeScript 实现

一个小型泛型 Subject 类负责处理订阅。观察者是普通函数，这是 TypeScript 中最常见的形式。subscribe 返回一个用于取消订阅的函数，调用方因此不会忘记自己注册了哪个监听器。

type Listener<T> = (value: T) => void;

class Subject<T> {
  private listeners = new Set<Listener<T>>();

  subscribe(listener: Listener<T>): () => void {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  }

  protected notify(value: T) {
    for (const listener of [...this.listeners]) listener(value);
  }
}

type CartEvent = { count: number; total: number };

class Cart extends Subject<CartEvent> {
  private items: { name: string; price: number }[] = [];

  add(name: string, price: number) {
    this.items.push({ name, price });
    const total = this.items.reduce((sum, item) => sum + item.price, 0);
    this.notify({ count: this.items.length, total });
  }
}

const cart = new Cart();
cart.subscribe(({ count }) => console.log("header: " + count + " items"));
const stopAnalytics = cart.subscribe(({ total }) => console.log("analytics: total " + total));

cart.add("Book", 12);
stopAnalytics(); // unsubscribe
cart.add("Pen", 3);
// header: 1 items
// analytics: total 12
// header: 2 items

notify 遍历的是集合的副本（[...this.listeners]）。这样，监听器在通知过程中取消订阅自己，不会扰乱循环。

使用内置的 EventTarget

浏览器、Node.js 和 Deno 都提供 EventTarget，所以你往往不需要自己写主题类：

const thermostat = new EventTarget();

thermostat.addEventListener("change", (e) => {
  console.log("new temperature:", (e as CustomEvent<number>).detail);
});

thermostat.dispatchEvent(new CustomEvent("change", { detail: 21.5 }));
// new temperature: 21.5

Node.js 还在 node:events 模块中提供 EventEmitter 类，带有 on、off 和 emit 方法。

何时使用，何时不用

• 当一个对象的变化必须更新其他对象，而你事先不知道有多少个、是哪些对象时使用。
• 用来让核心模块独立于响应它的界面、日志或分析代码。
• 用于随时间发生的事件，例如用户输入、消息或传感器读数。
• 只有一个固定接收者时不要使用；直接调用方法或传入回调参数更容易理解。
• 要小心观察者链：它们会触发其他通知，可能造成更新循环，让人很难看出某个东西为何改变。
• 除非主题的文档有说明，否则不要依赖观察者被调用的顺序。

实际应用

• DOM：element.addEventListener("click", handler) 就是给元素订阅一个观察者。
• Node.js：EventEmitter 是流、HTTP 服务器和许多其他核心对象的基础。
• 浏览器的观察者 API，如 MutationObserver、IntersectionObserver 和 ResizeObserver，会把页面变化通知给回调。
• RxJS 把值的流建模为可观察对象（observable），由观察者订阅。
• Java：java.util.Observable 在 Java 9 中已弃用；现在改用 java.util.concurrent.Flow 接口（发布者和订阅者）以及事件监听器接口。

相关模式