观察者模式 vs 发布订阅模式：深入解析两种事件处理架构

small-pudding

于 2025-03-28 17:54:44 发布

阅读量753

点赞数 26

文章标签：观察者模式架构

本文链接：https://blog.csdn.net/weixin_42216813/article/details/146607205

版权

在软件架构设计中，观察者模式(Observer Pattern)和发布订阅模式(Publish-Subscribe Pattern)都是处理对象间通信的重要模式，尤其在前端框架、游戏开发、分布式系统中应用广泛。尽管两者常被混淆，但它们有着本质的区别。本文将深入对比这两种模式的实现原理、适用场景及优缺点。

模式定义与核心概念

观察者模式（Observer Pattern）

观察者模式是一种对象间的一对多依赖关系的设计模式，当一个对象（被观察者/Subject）的状态发生改变时，所有依赖于它的对象（观察者/Observers）都会自动收到通知并更新。

关键角色：

Subject（被观察者）：维护观察者列表，提供注册/注销接口，状态变化时通知观察者
Observer（观察者）：定义更新接口，接收Subject通知

发布订阅模式（Publish-Subscribe Pattern）

发布订阅模式通过**消息代理（事件总线）**解耦发布者和订阅者，发布者将消息发布到特定频道，订阅者只接收感兴趣频道的消息。

关键角色：

Publisher（发布者）：发布消息到事件通道，不关心订阅者
Subscriber（订阅者）：订阅特定频道，处理消息
Event Channel（事件通道）：负责过滤和路由消息

核心区别对比

特性	观察者模式	发布订阅模式
耦合度	松耦合（但Subject知道Observer存在）	完全解耦（双方不知道彼此存在）
通信方式	直接调用Observer方法	通过中间件传递消息
关系	一对一或一对多	多对多
同步性	通常是同步的	可以是异步的
实现复杂度	较简单	较复杂（需中间件）
典型应用	GUI事件处理、MVC架构	微服务通信、消息队列

代码实现对比

观察者模式实现示例

// 被观察者
class Subject {
  private observers: Observer[] = [];
  
  attach(observer: Observer) {
    this.observers.push(observer);
  }
  
  notify(message: string) {
    this.observers.forEach(observer => observer.update(message));
  }
}

// 观察者接口
interface Observer {
  update(message: string): void;
}

// 具体观察者
class ConcreteObserver implements Observer {
  update(message: string) {
    console.log(`收到消息: ${message}`);
  }
}

// 使用
const subject = new Subject();
const observer = new ConcreteObserver();
subject.attach(observer);
subject.notify("状态更新！");

发布订阅模式实现示例

// 事件总线
class EventBus {
  private channels: Map<string, Function[]> = new Map();
  
  subscribe(channel: string, callback: Function) {
    if (!this.channels.has(channel)) {
      this.channels.set(channel, []);
    }
    this.channels.get(channel)!.push(callback);
  }
  
  publish(channel: string, data: any) {
    const callbacks = this.channels.get(channel);
    callbacks?.forEach(cb => cb(data));
  }
}

// 使用
const bus = new EventBus();

// 订阅者A
bus.subscribe("news", (data: string) => {
  console.log(`订阅者A收到新闻: ${data}`);
});

// 订阅者B
bus.subscribe("news", (data: string) => {
  console.log(`订阅者B收到新闻: ${data}`);
});

// 发布者
bus.publish("news", "重大科技突破！");