观察者模式中主题直接通知观察者，发布订阅模式通过事件中心解耦通信。前者适用于对象间紧密关联，如model与view同步；后者适合跨模块通信，如vue事件总线。两者均需注意取消订阅以避免内存泄漏。
观察者模式和发布订阅模式在JavaScript中常用于解耦组件之间的通信。虽然两者看起来相似，但它们的实现机制和使用场景略有不同。下面分别介绍这两种模式的核心思想与代码实现。
观察者模式（Observer Pattern）
观察者模式定义了一种一对多的依赖关系：当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。
在这个模式中，被观察的对象（称为“主题”或Subject）维护一个观察者列表，并在状态变化时主动通知它们。
实现步骤：
立即学习“Java免费学习笔记（深入）”；
- Subject 提供添加、删除和通知观察者的方法
- Observer 实现一个更新方法，用于接收通知
- Subject 状态变化时，遍历观察者列表并调用其 update 方法
代码示例：
```javascript class Subject { constructor() { this.observers = []; }
addObserver(observer) { this.observers.push(observer); }
removeObserver(observer) { this.observers = this.observers.filter(obs => obs !== observer); }
notify(data) { this.observers.forEach(observer => observer.update(data)); } }
class Observer { constructor(name) { this.name = name; }
update(data) {
console.log(${this.name} 收到通知：, data);
}
}
// 使用示例 const subject = new Subject(); const obs1 = new Observer('观察者A'); const obs2 = new Observer('观察者B');
subject.addObserver(obs1); subject.addObserver(obs2);
subject.notify('状态已更新！'); // 输出： // 观察者A 收到通知：状态已更新！ // 观察者B 收到通知：状态已更新！
<H3>发布订阅模式（Publish-Subscribe Pattern）</H3>
<p>发布订阅模式引入了事件通道（或事件中心），发布者和订阅者之间没有直接引用。消息通过事件中心进行中转，实现更彻底的解耦。</p>
<p>与观察者模式不同，发布者不直接通知订阅者，而是将消息推送给事件中心，由事件中心分发给所有订阅该事件的消费者。</p>
<font color="#000000">
<strong>核心角色：</strong>
<ul>
<li>Publisher：发布事件</li>
<li>Subscriber：订阅感兴趣的事件</li>
<li>Event Channel：负责事件的注册、触发和管理</li>
</ul>
</font>
<p><strong>代码示例：</strong></p>
```javascript
class EventCenter {
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));
}
}
// 取消订阅
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
// 只监听一次
once(event, callback) {
const wrapper = (data) => {
callback(data);
this.off(event, wrapper);
};
this.on(event, wrapper);
}
}
// 使用示例
const eventBus = new EventCenter();
eventBus.on('news', (msg) => {
console.log('新闻订阅者:', msg);
});
eventBus.on('news', (msg) => {
console.log('另一位读者:', msg);
});
eventBus.on('weather', (info) => {
console.log('天气预报:', info);
});
eventBus.emit('news', '今天发生了重大事件！');
// 输出：
// 新闻订阅者: 今天发生了重大事件！
// 另一位读者: 今天发生了重大事件！
eventBus.emit('weather', '明天晴，气温25℃');
// 输出：天气预报: 明天晴，气温25℃观察者模式 vs 发布订阅模式
两者都实现了对象间的松耦合通信，但关键区别在于耦合度和控制权：
- 观察者模式中，Subject 直接管理 Observer 列表，两者存在直接依赖
- 发布订阅模式通过事件中心中介，发布者和订阅者完全不知道对方的存在
- 发布订阅更适合复杂系统中的跨模块通信，如Vue的事件总线、Node.js的 EventEmitter
- 观察者模式更适用于对象间紧密关联的场景，如MVC中的Model与View
基本上就这些。理解它们的区别有助于在实际项目中选择合适的通信机制。不复杂但容易忽略细节，比如取消订阅和内存泄漏问题。
