🌟观察者模式 vs 发布订阅模式详解教程

收藏 + 点赞 + 关注，持续更新高频面试知识库！🚀

---

一、核心概念（总）

在软件开发中，观察者模式（Observer） 和 发布订阅模式（Publish-Subscribe） 经常被提及。二者非常相似，都属于行为型设计模式，核心思想是：解耦发送者与接收者。
但它们在实际使用中又有细微区别，理解清楚能帮助我们在业务代码、框架设计、架构层面灵活应用。

---

二、核心区别（分）

特性	观察者模式（Observer）	发布-订阅模式（Pub-Sub）
角色	主题（Subject）+ 观察者（Observer）	发布者（Publisher）+ 订阅者（Subscriber）+ 中间人（Broker）
依赖	观察者直接依赖主题	订阅者不依赖发布者，通过事件中心解耦
通信	一对多，通知直接发送	完全解耦，依赖消息通道
场景	GUI、数据绑定、状态变化监听	消息队列、微服务、系统解耦

👉 简单理解：
观察者模式更偏同步直接通知，发布订阅更偏异步消息总线。

---

三、具体讲解（深入分解）

1️⃣ 观察者模式详解

📌 设计结构：

• Subject（被观察者）：维护观察者列表，状态变更时通知观察者。
• Observer（观察者）：接收通知并做出相应处理。

📌 适用场景：

• UI 组件更新
• Vue 响应式系统（2.x 的 Dep）
• 数据流监听

📌 示例代码（JavaScript 实现）

// 主题（被观察者）
class Subject {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}removeObserver(observer) {this.observers = this.observers.filter(o => o !== 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 observer1 = new Observer("观察者A");
const observer2 = new Observer("观察者B");subject.addObserver(observer1);
subject.addObserver(observer2);subject.notify("数据更新了！");

✅ 输出：

观察者A 收到通知: 数据更新了！
观察者B 收到通知: 数据更新了！

---

2️⃣ 发布-订阅模式详解

📌 设计结构：

• Publisher（发布者）：发送事件。
• Subscriber（订阅者）：监听事件。
• EventBus（事件中心）：负责消息分发，中间层解耦了两者。

📌 适用场景：

• Vue / React 全局事件管理
• 微服务架构中的消息总线
• 复杂模块解耦

📌 示例代码（JavaScript 实现）

// 简易 EventBus 实现
class EventBus {constructor() {this.events = {};}subscribe(event, callback) {if (!this.events[event]) this.events[event] = [];this.events[event].push(callback);}unsubscribe(event, callback) {this.events[event] = this.events[event].filter(cb => cb !== callback);}publish(event, data) {if (!this.events[event]) return;this.events[event].forEach(callback => callback(data));}
}// 使用示例
const bus = new EventBus();function listenerA(data) {console.log('监听器A 收到:', data);
}
function listenerB(data) {console.log('监听器B 收到:', data);
}bus.subscribe('news', listenerA);
bus.subscribe('news', listenerB);bus.publish('news', '有新消息发布！');

✅ 输出：

监听器A 收到: 有新消息发布！
监听器B 收到: 有新消息发布！

---

四、总结对比（总）

对比维度	观察者模式	发布订阅模式
通信方式	主动通知	中介通知
耦合度	存在一定耦合	完全解耦
适用复杂度	轻量简单	更适合大型系统
使用典型	Vue 2 响应式、数据绑定	Vue3 mitt、EventBus、微服务消息

✅ 面试建议

• 先讲两者共同点（解耦通知）
• 再讲关键区别（是否通过中间层）
• 最后补充应用场景（Vue、React、微服务）

---

五、推荐面试金句

“观察者模式是一种直接订阅、直接通知的同步模型，而发布订阅模式通过中介（事件总线）实现完全解耦**，更适用于复杂系统模块通信。”**