javascript_如何实现发布订阅模式-js教程-PHP中文网

javascript_如何实现发布订阅模式

狼影

发布： 2025-12-02 19:40:34

原创

384人浏览过

发布订阅模式通过事件中心解耦发送者与接收者，核心为on、emit、off方法，实现事件的订阅、发布与取消，适用于组件通信、状态管理等场景。

javascript_如何实现发布订阅模式

发布订阅模式是一种经典的设计模式，适用于解耦事件的发送者和接收者。在 JavaScript 中实现发布订阅模式，核心是创建一个事件中心，允许对象订阅特定事件，并在事件被触发时通知所有订阅者。

定义事件中心

事件中心是发布订阅模式的核心，它负责管理事件的注册、触发和移除。你可以通过一个简单的对象来实现：

on(event, callback)：订阅事件，将回调函数添加到对应事件的队列中。
emit(event, data)：发布事件，执行该事件下所有订阅的回调函数，并传入数据。
off(event, callback)：取消订阅，从事件队列中移除指定的回调函数。

示例代码：

class EventEmitter {
  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);
    }
  }
}

登录后复制

使用示例

创建一个事件中心实例，然后让不同部分订阅和发布消息：

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

青泥AI

青泥学术AI写作辅助平台

302

查看详情

const eventBus = new EventEmitter();

// 订阅事件
eventBus.on('userLogin', user => {
  console.log('欢迎 ' + user.name);
});

eventBus.on('userLogin', user => {
  console.log('更新用户状态：' + user.status);
});

// 发布事件
eventBus.emit('userLogin', { name: 'Alice', status: 'online' });

登录后复制

输出结果：

欢迎 Alice
更新用户状态：online

登录后复制

支持取消订阅

为了避免内存泄漏或重复执行，可以移除不再需要的订阅：

function welcome(user) {
  console.log('欢迎 ' + user.name);
}

eventBus.on('userLogin', welcome);

// 取消订阅
eventBus.off('userLogin', welcome);

登录后复制

这样，welcome 函数不会再被调用。

实际应用场景

组件通信：在前端框架中，父子组件或兄弟组件可通过事件中心通信。
状态管理：全局状态变化时通知多个视图更新。
异步任务协调：某个异步操作完成后通知多个监听者。

基本上就这些。发布订阅模式在 JavaScript 中实现简单，却非常实用。只要掌握 on、emit、off 三个方法的逻辑，就能灵活运用在各种场景中。不复杂但容易忽略细节，比如重复订阅或忘记解绑。

以上就是javascript_如何实现发布订阅模式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

模块化开发规范_javascript工程化实践如何在不影响布局的情况下为元素添加高亮边框 JavaScript物联网_MQTT协议与设备通信组件通信_自定义事件系统微前端通信JavaScript_跨应用状态同步