🌟观察者模式 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、微服务消息