JavaScript class 语法中怎么在类中实现观察者订阅发布模式-js教程-PHP中文网

javascript class中实现观察者模式需封装事件管理逻辑：用map存储事件名与回调数组，提供subscribe、unsubscribe和notify方法；支持once选项和自动清理；推荐组合式集成而非继承；注意内存泄漏、错误隔离和命名规范。

javascript class 语法中怎么在类中实现观察者订阅发布模式

在 JavaScript class 中实现观察者（订阅-发布）模式，核心是让类内部维护一个事件监听器列表，提供 subscribe（订阅）、unsubscribe（取消订阅）和 notify（发布/触发）方法。不需要依赖外部库，用原生 JS 即可完成。

1. 基础实现：在类中封装事件管理逻辑

最简方式是在类中用 Map 或普通对象存储事件名与回调函数数组的映射关系：

class EventEmitter {
  constructor() {
    this.events = new Map(); // 事件名 → 回调函数数组
  }

  subscribe(event, callback) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    const listeners = this.events.get(event);
    listeners.push(callback);
  }

  unsubscribe(event, callback) {
    if (!this.events.has(event)) return;
    const listeners = this.events.get(event);
    const index = listeners.indexOf(callback);
    if (index > -1) {
      listeners.splice(index, 1);
    }
  }

  notify(event, data) {
    if (!this.events.has(event)) return;
    const listeners = this.events.get(event);
    // 浅拷贝避免执行过程中被修改影响遍历
    [...listeners].forEach(cb => cb(data));
  }
}

2. 支持一次性订阅与自动清理（增强实用性）

实际项目中常需支持「只触发一次」或「实例销毁时自动退订」，可在 subscribe 返回一个取消函数：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

返回的取消函数既能手动解绑，也便于配合 AbortController 或生命周期管理
支持 { once: true } 选项，简化一次性监听

class EventEmitter {
  constructor() {
    this.events = new Map();
  }

  subscribe(event, callback, options = {}) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    const listeners = this.events.get(event);

    const wrapped = (...args) => {
      callback(...args);
      if (options.once) {
        this.unsubscribe(event, wrapped);
      }
    };

    listeners.push(wrapped);

    return () => this.unsubscribe(event, wrapped);
  }

  unsubscribe(event, callback) {
    if (!this.events.has(event)) return;
    const listeners = this.events.get(event);
    const index = listeners.indexOf(callback);
    if (index > -1) {
      listeners.splice(index, 1);
    }
  }

  notify(event, ...args) {
    if (!this.events.has(event)) return;
    const listeners = this.events.get(event);
    [...listeners].forEach(cb => cb(...args));
  }
}

使用示例：

const bus = new EventEmitter();

// 订阅并获取取消函数
const off = bus.subscribe('user-login', (user) => {
  console.log('欢迎', user.name);
});

bus.notify('user-login', { name: 'Alice' }); // ✅ 触发
off(); // ? 手动取消
bus.notify('user-login', { name: 'Bob' }); // ❌ 不再触发

3. 在业务类中集成观察者能力（推荐做法）

不建议所有类都重复写事件逻辑，可用组合或继承方式复用。更现代、低侵入的做法是「组合」：

单独定义 EventEmitter 类（如上）
在业务类中实例化它，把事件委托给它管理
避免继承带来的耦合，也方便单元测试和替换

class UserService {
  constructor() {
    this.emitter = new EventEmitter();
  }

  login(user) {
    // ... 登录逻辑
    this.emitter.notify('login-success', user);
    this.emitter.notify('user-updated', user);
  }

  onLoginSuccess(callback) {
    return this.emitter.subscribe('login-success', callback);
  }

  onUserUpdated(callback) {
    return this.emitter.subscribe('user-updated', callback);
  }
}

// 使用
const service = new UserService();
service.onLoginSuccess(u => console.log('登录成功:', u));
service.login({ id: 1, name: 'Tom' });

4. 注意事项与常见坑

避免内存泄漏：每次 subscribe 的回调若为箭头函数或匿名函数，无法被 unsubscribe 精确移除 —— 应尽量传具名函数或保存引用
异步安全：默认同步通知；若需异步（如 Promise.then 或 queueMicrotask），需显式包装
错误隔离：单个回调报错不应中断其余回调执行，建议加 try/catch
事件命名规范：建议用 kebab-case（如 'data-loaded'）或命名空间前缀（如 'auth:login'），避免冲突