Javascript如何实现发布订阅模式_它与观察者模式有何不同？-js教程-PHP中文网

Javascript如何实现发布订阅模式_它与观察者模式有何不同？

幻影之瞳

发布： 2025-12-24 11:20:02

原创

441人浏览过

发布订阅模式通过事件总线解耦发布者与订阅者，核心实现含on、emit、off三方法，以对象映射事件名与回调数组；观察者模式则需观察者主动注册到被观察对象，存在直接依赖。

javascript如何实现发布订阅模式_它与观察者模式有何不同？

JavaScript 中的发布订阅模式（Pub/Sub）通过一个中央事件总线（Event Bus）解耦发布者和订阅者，两者不直接通信；而观察者模式中，观察者需主动注册到被观察对象（Subject），存在直接依赖关系。

如何用 JavaScript 实现发布订阅模式

核心是维护一个事件中心，支持 on（订阅）、emit（发布） 和 off（取消订阅） 三个方法。每个事件类型对应一个回调函数队列：

使用对象存储事件名 → 回调数组的映射，例如 events = { 'user:login': [cb1, cb2] }
on：将回调推入对应事件的数组
emit：遍历该事件的所有回调并执行，支持传参
off：从数组中移除指定回调（注意要处理引用一致，或支持按事件名清空）

简易实现示例：

class EventBus {
  constructor() {
    this.events = {};
  }
  on(type, callback) {
    if (!this.events[type]) this.events[type] = [];
    this.events[type].push(callback);
  }
  emit(type, ...args) {
    const cbs = this.events[type];
    if (cbs && cbs.length) cbs.forEach(cb => cb(...args));
  }
  off(type, callback) {
    if (!callback) {
      this.events[type] = [];
    } else {
      this.events[type] = this.events[type]?.filter(cb => cb !== callback) || [];
    }
  }
}

登录后复制

发布订阅模式 vs 观察者模式：关键区别

二者都解决“一对多”通知问题，但结构与耦合程度不同：

趣问问AI

免费可用的国内版chat，AI写作和AI对话

查看详情

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

依赖关系：观察者模式中，Subject 持有 Observer 实例列表，Observer 必须知道 Subject；Pub/Sub 中，发布者和订阅者只依赖事件总线，彼此完全隔离
通信方式：观察者是同步的、点对点的（Subject.notify() 直接调用 Observer.update()）；Pub/Sub 是异步/同步皆可，且支持一对多、多对一、多对多，消息可延迟、过滤、转发
生命周期管理：观察者通常需手动从 Subject 解注册，否则易内存泄漏；Pub/Sub 的事件总线可统一管理，也更易做销毁清理（如 off(‘*’) 或销毁整个 bus）
适用场景：观察者适合模块内紧密协作（如 Vue 2 的响应式系统）；Pub/Sub 更适合跨模块、跨组件、松耦合系统（如大型 SPA 的全局状态通知、插件通信）

实际开发中的注意事项

真实项目中直接手写 Pub/Sub 容易遗漏边界情况，建议注意：

支持通配符（如 on('user:*', handler)）或事件命名空间（user:login / user:logout）提升可维护性
emit 时避免回调执行异常中断后续通知，可用 try/catch 包裹单个回调
考虑是否需要异步 emit（如用 Promise.all 并行执行，或 queueMicrotask 延迟）
大型应用推荐使用成熟库（如 mitt、tiny-emitter）或框架内置机制（Vue 的 mitt + provide/inject，React 的自定义 Hook + Context）