发布订阅与观察者模式详解区别

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript发布订阅模式详解与观察者区别》，聊聊，我们一起来看看吧！

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

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 观察者模式：关键区别

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

• 依赖关系：观察者模式中，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）

一句话总结本质差异

观察者模式是“对象之间”的一对多依赖，发布订阅模式是“消息之间”的一对多解耦；前者是设计模式层面的约定，后者更偏向一种通信架构风格。

今天关于《发布订阅与观察者模式详解区别》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！