JavaScript 实现发布订阅模式与 EventHub 详解

作者：纸飞机时间：2026-10-26 12:50:44浏览：307

本文介绍如何利用发布订阅模式在 JavaScript 中构建轻量级的 EventHub，通过 on 和 emit 方法实现事件监听与触发。同时对比 Vue 原生事件机制，探讨在 Vue3 中替代方案的可行性，帮助开发者在不引入重型状态管理库时处理组件间通信。

背景

在开发过程中，我们常需实现事件监听功能，即当事件触发时自动执行对应的处理函数，例如：

on('changeText', (data) => {
    console.log(data)
})

这种机制正是发布订阅模式的典型应用。对于大型项目，虽然可以使用 Redux 或 Vuex 等响应式状态管理系统，但若希望避免引入过重依赖，EventHub 是一个轻量级的替代方案。

EventHub 与发布订阅模式（Pub/Sub）的关系？

发布订阅是一种经典的设计模式，而 EventHub 可被视为该模式的一种具体实现方式。

示例

class EventHub {
  constructor() {
    this.listeners = {};
  }

  on(eventName, callback) {
    if (!this.listeners[eventName]) {
      this.listeners[eventName] = [];
    }
    this.listeners[eventName].push(callback);
  }

  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(callback => {
        callback(data);
      });
    }
  }
}

const eventHub = new EventHub();

eventHub.on('hello', (data) => {
  console.log(`Hello ${data}!`);
});

eventHub.emit('hello', 'world');

上述代码定义了一个名为 EventHub 的类，主要包含两个核心方法：

on 方法用于注册事件订阅
emit 方法用于触发事件发布

在实际应用场景中，我们可能需要更复杂的功能支持，例如取消特定事件的订阅或限制监听器的最大数量。

基于 Vue 的 eventHub

Vue 原生提供了 $on、$emit 等方法，可直接使用，但 Vue3 似乎移除了部分原生支持，此时可改用更灵活的 ref 或 reactive 进行替代处理。

let eventHub = new Vue()

// 监听
eventHub.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

// 广播
eventHub.$emit('eventName', data)

// 去掉监听
eventHub.$off('eventName')

至此，关于利用发布订阅模式编写 JavaScript 事件监听函数的介绍结束，更多相关内容可参考本站以往文章或继续浏览后续内容，感谢大家的支持！

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28