JavaScript 怎么通过面向对象设计实现一个支持批量派发的事件总线系统

千枫同学_4387

千枫同学_4387

2026-09-11

427人浏览

原创

javascript事件总线通过eventbus类实现批量派发,核心是用map维护事件名与处理器数组映射,支持onmany/emitmany/emitbatch等批量操作,具备去重、错误隔离、异步安全等特性。

javascript 怎么通过面向对象设计实现一个支持批量派发的事件总线系统

JavaScript 中通过面向对象方式实现支持批量派发的事件总线(Event Bus),核心在于封装事件注册、触发与批量处理逻辑,同时保证事件解耦、类型安全(可选)和执行顺序可控。下面是一个轻量、可扩展、生产可用的设计方案。

1. 事件总线类的基本结构

定义一个 EventBus 类,内部维护一个事件映射表(Map 或普通对象),键为事件名,值为回调函数数组。支持单个/多个事件监听、触发,以及关键的「批量触发」能力。

使用 Map 更适合动态事件名且避免原型污染;用 WeakMap 可辅助做实例级私有状态(如用于自动清理),但此处以清晰性优先。

2. 支持批量监听与批量触发

批量派发 ≠ 多次单发。真正的批量是指:一次调用触发多个不同事件,并确保所有监听器按注册顺序、事件分组内顺序执行(不交叉)。为此需提供:

  • onMany(events, handler):为多个事件名统一绑定同一处理器
  • emitMany(eventMap):传入 { 'eventA': dataA, 'eventB': dataB } 对象,一次性触发多个事件,每个事件携带各自参数
  • emitBatch(events):传入事件名数组(如 ['user.login', 'stats.track']),无参批量触发(适合通知类事件)

3. 关键实现细节

✅ 去重与内存管理:相同事件+相同 handler 不重复添加;提供 off() 和 offMany() 清理接口;可选支持 handler 自动绑定 this 或传入 context。

✅ 异步安全:默认同步执行;若需异步批量(如微任务队列),可用 Promise.resolve().then(() => {...}) 包裹 emitMany 内部循环,避免阻塞主线程。

Alibabacloud Sdk Client Initialization For Java
Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 错误隔离:单个 handler 抛错不应中断其余 handler 执行,用 try/catch 包裹每个调用。

✅ 通配符支持(可选):如 on('user.*', cb),配合 minimatch 或简易 glob 匹配,增强灵活性。

4. 一个简洁可用的实现示例

以下代码不含第三方依赖,ES6+ 环境可直接运行:

class EventBus {
  constructor() {
    this.events = new Map();
  }

  on(event, handler) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    const handlers = this.events.get(event);
    if (!handlers.includes(handler)) {
      handlers.push(handler);
    }
  }

  onMany(events, handler) {
    events.forEach(event => this.on(event, handler));
  }

  off(event, handler) {
    if (this.events.has(event)) {
      const handlers = this.events.get(event);
      const i = handlers.indexOf(handler);
      if (i > -1) handlers.splice(i, 1);
      if (handlers.length === 0) this.events.delete(event);
    }
  }

  offMany(events, handler) {
    events.forEach(event => this.off(event, handler));
  }

  emit(event, ...args) {
    const handlers = this.events.get(event) || [];
    for (const handler of handlers) {
      try {
        handler(...args);
      } catch (e) {
        console.error(`Event "${event}" handler error:`, e);
      }
    }
  }

  // 批量触发:每个事件独立传参
  emitMany(eventMap) {
    Object.entries(eventMap).forEach(([event, args]) => {
      if (Array.isArray(args)) {
        this.emit(event, ...args);
      } else {
        this.emit(event, args);
      }
    });
  }

  // 批量触发:仅事件名,无参
  emitBatch(events) {
    events.forEach(event => this.emit(event));
  }
}

使用示例:

const bus = new EventBus();

bus.on('user.login', (user) => console.log('Login:', user.name));
bus.on('stats.track', (action) => console.log('Track:', action));

// 一次触发两个事件,各自带参
bus.emitMany({
  'user.login': [{ name: 'Alice' }],
  'stats.track': ['page_view']
});

// 输出:
// Login: Alice
// Track: page_view

不复杂但容易忽略的是:批量不是语法糖,而是语义升级——它让跨模块协作更声明式、更可控。结合 TypeScript 还可进一步约束 event 名类型和 payload 结构,提升工程健壮性。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
编程语言有哪些
编程语言有哪些

编程语言有C语言、C++语言、Java语言、Python语言、JavaScript语言、Ruby语言、Go语言等。本专题为大家提供编程语言相关的各种文章、以及下载和课程。

2023.08.11

972

5

html转换txt文本格式方法
html转换txt文本格式方法

html通过使用在线工具、离线工具和编程语言来转txt。更多关于html转换txt文本格式方法详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.01

3035

8

c语言是什么编程语言
c语言是什么编程语言

c语言作为一种通用、结构化的编程语言,自诞生以来广泛应用于计算机领域。其基本特性包括结构化编程、过程式编程、底层访问能力、高效性能和跨平台性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.03.14

660

5

如何挑选适合初学者的编程语言
如何挑选适合初学者的编程语言

编程语言选择至关重要,它直接影响学习效率和职业发展。初学者选择易于入门且应用广泛的语言,能为未来的深造和职业规划奠定基础。选择不当可能导致学习曲线陡峭、应用范围狭窄、就业机会有限,甚至难以拓展其他领域。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.01.24

382

4

编程语言排行榜2025
编程语言排行榜2025

本专题文章深入分析2025年最新的编程语言流行度排名,基于TIOBE指数等权威数据,揭示Python、C++、Java等主流语言的最新动态与市场份额变化。通过对比各语言的优缺点、应用场景及就业前景,为开发者提供选择学习方向的实用参考,同时展望编程语言在人工智能、大数据和云计算等前沿技术中的未来发展。想了解更多详细内容,请阅读专题下面的文章。

2025.07.29

3987

27

java基础知识学习
java基础知识学习

本专题文章旨在为Java语言初学者提供系统化的学习路径,涵盖Java编程的核心基础知识、实用代码示例及全面的知识点总结。本专题适合零基础学习者及希望巩固Java基础的开发者,通过理论与实践结合,快速入门并迈向进阶开发。

2025.08.01

3864

26

2026 年编程语言排行榜与趋势解读
2026 年编程语言排行榜与趋势解读

本专题整合了编程语言排行榜合集,阅读专题下面的文章了解更多详细内容。

2026.05.29

18195

17

零基础编程语言选择与学习路线
零基础编程语言选择与学习路线

面向编程零基础用户与转行人群,系统分析不同编程语言的学习曲线、适用场景与就业前景,涵盖 Python(数据分析/AI/自动化/爬虫)、JavaScript/TypeScript(前端/全栈/小程序)、Java(企业后端/Android/大数据)、Go(云原生/微服务/DevOps)、C/C++(系统底层/嵌入式/游戏引擎)的定位对比与人群匹配建议、各语言从入门到实战的分阶段学习路线图、优质学习资源推荐(官方文档/在线课程/开源项目)、自

2026.05.29

604

20

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4166

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习