发布订阅模式通过事件总线解耦发布者与订阅者，核心实现含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 观察者模式：关键区别
二者都解决“一对多”通知问题，但结构与耦合程度不同：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“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）
一句话总结本质差异
观察者模式是“对象之间”的一对多依赖，发布订阅模式是“消息之间”的一对多解耦；前者是设计模式层面的约定，后者更偏向一种通信架构风格。
