javascript如何实现观察者模式_与发布订阅有何区别-js教程-PHP中文网

javascript如何实现观察者模式_与发布订阅有何区别

幻影之瞳

发布： 2025-12-19 21:57:07

原创

975人浏览过

观察者模式通过Subject维护Observer列表并直接通知更新，Pub/Sub则借助事件总线实现完全解耦的事件通信；二者在耦合度、通信方式、生命周期管理和适用场景上存在本质区别。

javascript如何实现观察者模式_与发布订阅有何区别

观察者模式的 JavaScript 实现

观察者模式（Observer Pattern）是一种行为型设计模式，核心是让一个对象（被观察者/Subject）维护一组依赖它的对象（观察者/Observer），当被观察者状态变化时，自动通知所有观察者更新。

基础实现如下：

被观察者（Subject）

class Subject {
  constructor() {
    this.observers = [];
  }

  // 添加观察者
  addObserver(observer) {
    if (typeof observer.update === 'function') {
      this.observers.push(observer);
    }
  }

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // 通知所有观察者
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

登录后复制

观察者（Observer）

立即学习“Java免费学习笔记（深入）”；

AI发型设计

虚拟发型试穿工具和发型模拟器

247

查看详情

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} 收到更新：`, data);
  }
}

登录后复制

使用示例：

const subject = new Subject();
const o1 = new Observer('UI组件');
const o2 = new Observer('日志服务');

subject.addObserver(o1);
subject.addObserver(o2);

subject.notify({ status: 'loading' }); // 两者都会收到

登录后复制

发布-订阅模式（Pub/Sub）的实现

发布-订阅是观察者模式的松耦合变体：不直接持有观察者引用，而是通过一个中间调度中心（事件总线）进行消息分发。发布者和订阅者完全解耦，甚至无需知道彼此存在。

简易事件总线实现：

class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }

  // 发布事件
  emit(event, data) {
    const callbacks = this.events[event];
    if (callbacks && callbacks.length) {
      callbacks.forEach(cb => cb(data));
    }
  }

  // 取消订阅
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

// 使用
const bus = new EventBus();

bus.on('user:login', (user) => console.log('欢迎', user.name));
bus.on('user:logout', () => console.log('已登出'));

bus.emit('user:login', { name: '张三' });

登录后复制

二者核心区别

耦合程度不同：观察者模式中，Subject 必须显式管理 Observer 实例，存在直接引用；Pub/Sub 中发布者与订阅者仅依赖事件总线，无直接关联。
通信方式不同：观察者是“推”模型（Subject 主动调用 observer.update()）；Pub/Sub 可支持“推”或“拉”，且常按事件类型（字符串名）路由，支持一对多、多对多、条件过滤等扩展。
生命周期管理不同：观察者需手动添加/移除，易内存泄漏；Pub/Sub 通常提供 off 方法，但更依赖开发者主动清理，否则监听器可能滞留。
适用场景不同：观察者适合对象间强关联、结构清晰的场景（如 MVC 中 View 观察 Model）；Pub/Sub 更适合大型应用中跨模块、异步、解耦通信（如前端框架中的全局事件、微前端通信）。

实际开发中的选择建议

用 观察者模式 当你控制两端代码、关系稳定、需要同步响应（比如一个数据模型通知多个视图刷新）。
用 发布-订阅 当模块边界明确、团队协作复杂、或需动态增删逻辑（如插件系统、埋点上报、状态变更广播）。
现代前端中，Vue 的响应式系统底层是观察者模式；而 Vuex/Pinia 的 store.$onAction 或自定义事件总线，本质是 Pub/Sub 思想。
注意避免滥用：过度使用全局事件总线会导致逻辑分散、调试困难，推荐配合 TypeScript 类型约束 + 明确事件命名规范（如 module:eventName）。

以上就是javascript如何实现观察者模式_与发布订阅有何区别的详细内容，更多请关注php中文网其它相关文章！