一、区别

虽然发布订阅模式和观察者模式经常被混淆，但它们有几个关键区别：

角度	观察者模式	发布订阅模式
耦合度	观察者和主题之间是松耦合的，但观 察者需要知道主题的存在	发布者和订阅者完全解耦，通过事件通道通 信，互不知道对方的存在
通信方式	主题直接通知观察者	通过中间的事件通道进行通信
灵活性	观察者需要知道主题的存在	发布者和订阅者可以完全不知道对方的存在， 提供了更大的灵活性
应用场景	适用于组件间有明确依赖关系的场景	适用于组件间完全解耦的场景，特别是在大 型、复杂的系统中
复杂性	相对简单，直接在主题上注册观察者	引入了一个额外的事件通道层，增加了一定的 复杂性，但提供了更好的解耦
性能	可能较快，因为是直接通信	由于引入了中间层，可能会有轻微的性能开销

二、代码对比

观察者模式：

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notify(data) {
    this.observers.forEach((observer) => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log("Received update:", data);
  }
}

const subject = new Subject();
const observer = new Observer();
subject.addObserver(observer);
subject.notify("Hello World");

发布订阅模式（使用之前定义的 Publisher 类）：

const xiaoWang = new Publisher("送报员", "小王"); // 发布者 送报员 小王
const kangkang = new Receiver("kangkang"); // 读者 kangkang

xiaoWang.subscribe("notify", kangkang); // 送报员小王 接受了 kangkang 报纸订阅请求

xiaoWang.publish("notify", "'Hello, 这是今天的报纸！'");

// 【添加订阅】送报员 小王 接受了读者 kangkang 的订阅请求，成功！
// 【新通知】读者 kangkang 收到来自 送报员 小王 的通知: 'Hello, 这是今天的报纸！'

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24