观察者模式通过Subject维护Observer列表并直接通知更新，Pub/Sub则借助事件总线实现完全解耦的事件通信；二者在耦合度、通信方式、生命周期管理和适用场景上存在本质区别。
观察者模式的 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免费学习笔记（深入）”；
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）。
