观察者模式中目标对象直接通知观察者，两者存在耦合；发布订阅模式通过事件中心解耦，发布者与订阅者无直接依赖。前者适用于简单通信，后者更适合复杂系统的松耦合设计。
观察者模式和发布订阅模式听起来很像，但在 JavaScript 中它们有本质区别。很多人容易混淆这两个概念，其实理解清楚对构建解耦的前端架构很有帮助。
观察者模式：对象间的直接依赖
观察者模式中，一个目标对象（Subject）维护一组观察者（Observer），当目标状态发生变化时，会主动通知所有观察者执行更新。
特点在于：观察者和被观察者是**直接绑定**的，两者存在耦合。
例子：- 有一个数据模型作为 Subject
- 多个视图组件作为 Observer
- 数据变化时，调用每个观察者的 update 方法
实现简单，适合模块内部通信。
立即学习“Java免费学习笔记（深入）”；
代码示意：
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
notify() {
this.observers.forEach(observer => observer.update());
}
}
class Observer {
update() {
console.log('收到更新');
}
}
发布订阅模式：通过事件中心解耦
发布订阅模式引入了一个中间角色——事件总线（Event Bus）或调度中心。发布者和订阅者不直接通信，而是通过事件通道传递消息。
核心优势是**完全解耦**：发布者不需要知道谁订阅了，订阅者也不关心谁发布的。
典型场景：- 跨组件通信（如 Vue 的 EventBus）
- 模块间松耦合协作
- 异步事件处理（如用户登录、页面加载完成）
代码示意：
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
}
}
关键区别总结
虽然两种模式都实现了“一对多”的通知机制，但结构不同：
- 观察者模式：Subject 直接管理 Observer，属于设计模式中的行为型模式，耦合度高
- 发布订阅模式：通过事件中心转发消息，更灵活，常用于实现消息队列、事件系统
可以理解为：发布订阅是观察者模式的“升级版”，加了一层中介，更适合复杂应用。
基本上就这些。实际开发中，Vue 的 $emit/$on、Node.js 的 EventEmitter 都是发布订阅的应用。选择哪种，取决于你是否需要解耦和扩展性。
