JavaScript 中如何利用 class 实现观察者模式-js教程-PHP中文网

javascript中可用class实现观察者模式：subject管理observer集合，提供subscribe、unsubscribe、notify方法；observer实现update接口响应变化，支持回调与扩展。

javascript 中如何利用 class 实现观察者模式

在 JavaScript 中，可以用 class 封装观察者模式的核心逻辑：一个被观察对象（Subject）维护订阅者列表，提供注册（subscribe）、移除（unsubscribe）和通知（notify）方法；观察者（Observer）则实现统一的更新接口。关键在于解耦发布与订阅，避免硬依赖。

定义 Observer 类（观察者）

每个观察者应具备可被调用的 update 方法，用于响应状态变化。它不关心谁通知它，只专注处理数据：

可以是纯函数，但用 class 更利于扩展（比如携带 ID、优先级等元信息）
update 接收参数通常为被观察对象传来的数据或事件对象
示例中支持传入自定义回调，兼顾灵活性与面向对象风格

class Observer {
  constructor(callback) {
    this.callback = callback;
  }
  update(data) {
    this.callback?.(data);
  }
}

定义 Subject 类（被观察者 / 发布者）

Subject 管理观察者集合，核心是三个操作：添加、删除、广播。使用 Set 避免重复订阅，也便于快速删除：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

subscribe(observer)：检查是否为合法 Observer 实例再加入 Set
unsubscribe(observer)：从 Set 中安全移除（支持传入实例或 ID，按需扩展）
notify(data)：遍历所有 observer 并调用其 update 方法

class Subject {
  constructor() {
    this.observers = new Set();
  }
  subscribe(observer) {
    if (observer && typeof observer.update === 'function') {
      this.observers.add(observer);
    }
  }
  unsubscribe(observer) {
    this.observers.delete(observer);
  }
  notify(data) {
    this.observers.forEach(obs => obs.update(data));
  }
}

实际使用示例

把 Subject 当作状态中心，Observer 作为响应单元。例如监听输入框变化：

创建一个 InputSubject 继承自 Subject，内部监听 input 事件并调用 notify
多个 Observer 可分别负责日志、校验、同步到其他字段等，互不影响
销毁时调用 unsubscribe 防止内存泄漏（尤其在组件卸载时）

const inputSubject = new Subject();
const logger = new Observer(data => console.log('log:', data));
const validator = new Observer(data => console.warn('length:', data.length > 5 ? 'OK' : 'Too short'));

inputSubject.subscribe(logger);
inputSubject.subscribe(validator);

inputSubject.notify('hello'); // → log: hello, length: OK