登录
首页 >  文章 >  前端

JavaScript实现发布订阅模式详解

时间：2026-04-12 19:36:52 408浏览 收藏

本文深入讲解了如何用原生 JavaScript 从零实现一个轻量、健壮且可扩展的发布/订阅（Pub/Sub）事件系统，涵盖核心的 on（订阅）、emit（发布）、off（取消订阅）三大方法，通过对象映射管理事件回调，有效解耦模块间通信；同时提供通配符匹配、once 一次性监听、clear 清空等实用增强方案，并附有清晰代码示例和使用场景说明，帮助开发者快速构建高内聚、低耦合的应用架构。

如何用JavaScript实现一个完整的Publish/Subscribe事件系统？

实现一个完整的 Publish/Subscribe（发布/订阅）事件系统，核心是解耦事件的发送者和接收者。通过 JavaScript 可以轻松构建一个支持监听、触发和移除事件的模块。以下是具体实现方式。

1. 基本结构设计

一个典型的 Pub/Sub 系统需要支持以下功能：

  • on(event, callback)：注册事件监听器
  • emit(event, data)：触发事件并传递数据
  • off(event, callback)：移除指定事件的监听器

使用一个对象来存储事件名到回调函数数组的映射，是常见做法。

2. 完整代码实现

function createPubSub() {
  const events = {};

  // 订阅事件
  function on(event, callback) {
    if (!events[event]) {
      events[event] = [];
    }
    events[event].push(callback);
  }

  // 发布事件
  function emit(event, data) {
    if (!events[event] || events[event].length === 0) return;
    events[event].forEach(callback => callback(data));
  }

  // 移除监听器
  function off(event, callback) {
    if (!events[event]) return;
    const index = events[event].indexOf(callback);
    if (index !== -1) {
      events[event].splice(index, 1);
    }
  }

  return { on, emit, off };
}

3. 使用示例

创建实例并绑定事件：

const pubsub = createPubSub();

// 监听用户登录事件
pubsub.on('login', user => {
  console.log('欢迎 ' + user.name);
});

// 触发登录
pubsub.emit('login', { name: 'Alice' }); // 输出：欢迎 Alice

可以绑定多个回调，也可以移除特定监听：

const handler = () => console.log('只执行一次');
pubsub.on('init', handler);
pubsub.emit('init'); // 触发
pubsub.off('init', handler); // 移除

4. 扩展功能建议

可根据需求增强系统能力：

  • 支持通配符事件（如 user.*）
  • 添加 once(event, callback) 实现一次性监听
  • 提供 clear(event) 清空某个事件的所有监听
  • 增加事件命名空间管理

这类系统广泛应用于组件通信、状态管理或跨模块解耦场景。

基本上就这些，不复杂但容易忽略细节，比如正确处理不存在的事件或重复移除的问题。

到这里，我们也就讲完了《JavaScript实现发布订阅模式详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于发布订阅的知识点！

发布订阅
资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>