发布订阅模式通过事件中心实现发布者与订阅者完全解耦，核心是维护事件名到回调数组的映射，支持on、emit、off操作；而观察者模式中被观察者直接持有观察者列表，耦合度更高。
JavaScript 中的发布订阅模式（Pub/Sub）是一种松耦合的事件通信机制，核心是通过一个“事件中心”来中介发布者和订阅者，双方互不持有对方引用。它和观察者模式（Observer Pattern）表面相似，但设计意图、结构关系和适用场景有本质区别。
如何用 JavaScript 实现一个简易发布订阅系统
关键在于维护一个事件映射表（event map），支持注册（on）、触发（emit）、取消（off）三个基本操作：
- 用对象或 Map 存储事件名 → 回调函数数组的映射
- on(event, callback)：把回调推入对应事件的数组
- emit(event, ...args)：遍历该事件的所有回调并执行
- off(event, callback?)：可清除全部或指定回调
示例代码：
class EventBus {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(callback);
}
emit(event, ...args) {
const callbacks = this.events[event];
if (callbacks && callbacks.length) {
callbacks.forEach(cb => cb(...args));
}
}
off(event, callback) {
if (!callback) {
delete this.events[event];
return;
}
const list = this.events[event];
if (list) {
const index = list.indexOf(callback);
if (index > -1) list.splice(index, 1);
}
}
}
// 使用
const bus = new EventBus();
bus.on('user:login', (user) => console.log('欢迎', user.name));
bus.emit('user:login', { name: '张三' });
发布订阅 vs 观察者模式：核心区别在哪
二者都解决“一对多通知”，但角色关系与依赖方式不同：
立即学习“Java免费学习笔记（深入）”；
- 观察者模式中，Subject（被观察者）直接持有 Observer（观察者）列表，Subject 负责添加、通知、移除 Observer；Observer 需主动订阅 Subject 实例
- 发布订阅中，Publisher 和 Subscriber 都只依赖 Event Bus（中间件），彼此完全解耦；没有直接引用，甚至可以跨模块、跨文件、跨生命周期存在
- 观察者模式是“对象内聚”的设计，常用于 UI 组件更新（如 Vue2 的响应式）；发布订阅更偏向“消息总线”，适合应用级事件通信（如路由切换、登录状态广播）
实际开发中怎么选
看耦合程度和控制权归属：
- 组件内部状态变化需通知几个固定子组件？→ 用观察者（或现代框架的响应式 API，如 Vue3 的 effect / React 的 useState + useEffect）
- 多个不相关模块需要响应同一业务事件（比如“用户登出”要清缓存、关 WebSocket、跳登录页）？→ 用发布订阅，避免互相 import 或全局变量
- 需要异步、延迟、过滤、中间件（如日志、权限校验）？→ 可在 EventBus 上扩展，而原生观察者模式很难自然支持
基本上就这些。发布订阅不是银弹，但它是组织大型前端项目事件流的实用工具；理解它和观察者模式的区别，能帮你更准确地做架构决策。
