JavaScript设计模式_观察者与发布订阅实现-js教程-PHP中文网

JavaScript设计模式_观察者与发布订阅实现

幻影之瞳

发布： 2025-11-18 17:15:47

原创

619人浏览过

观察者模式中主题直接通知观察者，发布订阅模式通过事件中心解耦通信。前者适用于对象间紧密关联，如Model与View同步；后者适合跨模块通信，如Vue事件总线。两者均需注意取消订阅以避免内存泄漏。

javascript设计模式_观察者与发布订阅实现

观察者模式和发布订阅模式在JavaScript中常用于解耦组件之间的通信。虽然两者看起来相似，但它们的实现机制和使用场景略有不同。下面分别介绍这两种模式的核心思想与代码实现。

观察者模式（Observer Pattern）

观察者模式定义了一种一对多的依赖关系：当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。

在这个模式中，被观察的对象（称为“主题”或Subject）维护一个观察者列表，并在状态变化时主动通知它们。

实现步骤：

立即学习“Java免费学习笔记（深入）”；

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

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℃

登录后复制