原文：https://dushusir.com/js-event...
介绍
Event Bus 事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心，一个模块发送音讯，其它模块承受音讯，就达到了通信的作用。
比方，Vue 组件间的数据传递能够应用一个 Event Bus 来通信，也能够用作微内核插件零碎中的插件和外围通信。
原理
Event Bus 实质上是采纳了公布-订阅的设计模式，比方多个模块 A、B、C 订阅了一个事件 EventX，而后某一个模块 X 在事件总线公布了这个事件，那么事件总线会负责告诉所有订阅者 A、B、C，它们都能收到这个告诉音讯，同时还能够传递参数。
// 关系图 模块X ⬇公布EventX╔════════════════════════════════════════════════════════════════════╗║ Event Bus ║║ ║║ 【EventX】 【EventY】 【EventZ】 ... ║╚════════════════════════════════════════════════════════════════════╝ ⬆订阅EventX ⬆订阅EventX ⬆订阅EventX 模块A 模块B 模块C剖析
如何应用 JavaScript 来实现一个简略版本的 Event Bus
- 首先结构一个
EventBus类，初始化一个空对象用于寄存所有的事件 - 在承受订阅时，将事件名称作为 key 值，将须要在承受公布音讯后执行的回调函数作为 value 值，因为一个事件可能有多个订阅者，所以这里的回调函数要存储成列表
- 在公布事件音讯时，从事件列表里获得指定的事件名称对应的所有回调函数，顺次触发执行即可
以下是代码具体实现，能够复制到谷歌浏览器控制台间接运行检测成果。
代码
class EventBus { constructor() { // 初始化事件列表 this.eventObject = {}; } // 公布事件 publish(eventName) { // 取出以后事件所有的回调函数 const callbackList = this.eventObject[eventName]; if (!callbackList) return console.warn(eventName + " not found!"); // 执行每一个回调函数 for (let callback of callbackList) { callback(); } } // 订阅事件 subscribe(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { this.eventObject[eventName] = []; } // 存储订阅者的回调函数 this.eventObject[eventName].push(callback); }}// 测试const eventBus = new EventBus();// 订阅事件eventXeventBus.subscribe("eventX", () => { console.log("模块A");});eventBus.subscribe("eventX", () => { console.log("模块B");});eventBus.subscribe("eventX", () => { console.log("模块C");});// 公布事件eventXeventBus.publish("eventX");// 输入> 模块A> 模块B> 模块C下面咱们实现了最根底的公布和订阅性能，理论利用中，还可能有更进阶的需要。
进阶
1. 如何在发送音讯时传递参数
发布者传入一个参数到 EventBus 中，在 callback 回调函数执行的时候接着传出参数，这样每一个订阅者就能够收到参数了。
代码
class EventBus { constructor() { // 初始化事件列表 this.eventObject = {}; } // 公布事件 publish(eventName, ...args) { // 取出以后事件所有的回调函数 const callbackList = this.eventObject[eventName]; if (!callbackList) return console.warn(eventName + " not found!"); // 执行每一个回调函数 for (let callback of callbackList) { // 执行时传入参数 callback(...args); } } // 订阅事件 subscribe(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { this.eventObject[eventName] = []; } // 存储订阅者的回调函数 this.eventObject[eventName].push(callback); }}// 测试const eventBus = new EventBus();// 订阅事件eventXeventBus.subscribe("eventX", (obj, num) => { console.log("模块A", obj, num);});eventBus.subscribe("eventX", (obj, num) => { console.log("模块B", obj, num);});eventBus.subscribe("eventX", (obj, num) => { console.log("模块C", obj, num);});// 公布事件eventXeventBus.publish("eventX", { msg: "EventX published!" }, 1);// 输入> 模块A {msg: 'EventX published!'} 1> 模块B {msg: 'EventX published!'} 1> 模块C {msg: 'EventX published!'} 12. 订阅后如何勾销订阅
有时候订阅者只想在某一个时间段订阅音讯，这就波及带勾销订阅性能。咱们将对代码进行革新。
首先，要实现指定订阅者勾销订阅，每一次订阅事件时，都生成惟一一个勾销订阅的函数，用户间接调用这个函数，咱们就把以后订阅的回调函数删除。
// 每一次订阅事件，都生成惟一一个勾销订阅的函数const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this.eventObject[eventName][id];};其次，订阅的回调函数列表使换成对象构造存储，为每一个回调函数设定一个惟一 id， 登记回调函数的时候能够进步删除的效率，如果还是应用数组的话须要应用 split 删除，效率不如对象的 delete。
代码
class EventBus { constructor() { // 初始化事件列表 this.eventObject = {}; // 回调函数列表的id this.callbackId = 0; } // 公布事件 publish(eventName, ...args) { // 取出以后事件所有的回调函数 const callbackObject = this.eventObject[eventName]; if (!callbackObject) return console.warn(eventName + " not found!"); // 执行每一个回调函数 for (let id in callbackObject) { // 执行时传入参数 callbackObject[id](...args); } } // 订阅事件 subscribe(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this.eventObject[eventName] = {}; } const id = this.callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this.eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this.eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this.eventObject[eventName]).length === 0) { delete this.eventObject[eventName]; } }; return { unSubscribe }; }}// 测试const eventBus = new EventBus();// 订阅事件eventXeventBus.subscribe("eventX", (obj, num) => { console.log("模块A", obj, num);});eventBus.subscribe("eventX", (obj, num) => { console.log("模块B", obj, num);});const subscriberC = eventBus.subscribe("eventX", (obj, num) => { console.log("模块C", obj, num);});// 公布事件eventXeventBus.publish("eventX", { msg: "EventX published!" }, 1);// 模块C勾销订阅subscriberC.unSubscribe();// 再次公布事件eventX，模块C不会再收到音讯了eventBus.publish("eventX", { msg: "EventX published again!" }, 2);// 输入> 模块A {msg: 'EventX published!'} 1> 模块B {msg: 'EventX published!'} 1> 模块C {msg: 'EventX published!'} 1> 模块A {msg: 'EventX published again!'} 2> 模块B {msg: 'EventX published again!'} 23. 如何只订阅一次
如果一个事件只产生一次，通常也只须要订阅一次，收到音讯后就不必再承受音讯。
首先，咱们提供一个 subscribeOnce 的接口，外部实现简直和 subscribe 一样，只有一个中央有区别，在 callbackId 后面的加一个字符 d，用来标示这是一个须要删除的订阅。
// 标示为只订阅一次的回调函数const id = "d" + this.callbackId++;而后，在执行回调函数后判断以后回调函数的 id 有没有标示，决定咱们是否须要删除这个回调函数。
// 只订阅一次的回调函数须要删除if (id[0] === "d") { delete callbackObject[id];}代码
class EventBus { constructor() { // 初始化事件列表 this.eventObject = {}; // 回调函数列表的id this.callbackId = 0; } // 公布事件 publish(eventName, ...args) { // 取出以后事件所有的回调函数 const callbackObject = this.eventObject[eventName]; if (!callbackObject) return console.warn(eventName + " not found!"); // 执行每一个回调函数 for (let id in callbackObject) { // 执行时传入参数 callbackObject[id](...args); // 只订阅一次的回调函数须要删除 if (id[0] === "d") { delete callbackObject[id]; } } } // 订阅事件 subscribe(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this.eventObject[eventName] = {}; } const id = this.callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this.eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this.eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this.eventObject[eventName]).length === 0) { delete this.eventObject[eventName]; } }; return { unSubscribe }; } // 只订阅一次 subscribeOnce(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this.eventObject[eventName] = {}; } // 标示为只订阅一次的回调函数 const id = "d" + this.callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this.eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this.eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this.eventObject[eventName]).length === 0) { delete this.eventObject[eventName]; } }; return { unSubscribe }; }}// 测试const eventBus = new EventBus();// 订阅事件eventXeventBus.subscribe("eventX", (obj, num) => { console.log("模块A", obj, num);});eventBus.subscribeOnce("eventX", (obj, num) => { console.log("模块B", obj, num);});eventBus.subscribe("eventX", (obj, num) => { console.log("模块C", obj, num);});// 公布事件eventXeventBus.publish("eventX", { msg: "EventX published!" }, 1);// 再次公布事件eventX，模块B只订阅了一次，不会再收到音讯了eventBus.publish("eventX", { msg: "EventX published again!" }, 2);// 输入> 模块A {msg: 'EventX published!'} 1> 模块C {msg: 'EventX published!'} 1> 模块B {msg: 'EventX published!'} 1> 模块A {msg: 'EventX published again!'} 2> 模块C {msg: 'EventX published again!'} 24. 如何革除某个事件或者所有事件
咱们还心愿通过一个 clear 的操作来将指定事件的所有订阅革除掉，这个通常在一些组件或者模块卸载的时候用到。
// 革除事件 clear(eventName) { // 未提供事件名称，默认革除所有事件 if (!eventName) { this.eventObject = {}; return; } // 革除指定事件 delete this.eventObject[eventName]; }和勾销订阅的逻辑类似，只不过这里对立解决了。
代码
class EventBus { constructor() { // 初始化事件列表 this.eventObject = {}; // 回调函数列表的id this.callbackId = 0; } // 公布事件 publish(eventName, ...args) { // 取出以后事件所有的回调函数 const callbackObject = this.eventObject[eventName]; if (!callbackObject) return console.warn(eventName + " not found!"); // 执行每一个回调函数 for (let id in callbackObject) { // 执行时传入参数 callbackObject[id](...args); // 只订阅一次的回调函数须要删除 if (id[0] === "d") { delete callbackObject[id]; } } } // 订阅事件 subscribe(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this.eventObject[eventName] = {}; } const id = this.callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this.eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this.eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this.eventObject[eventName]).length === 0) { delete this.eventObject[eventName]; } }; return { unSubscribe }; } // 只订阅一次 subscribeOnce(eventName, callback) { // 初始化这个事件 if (!this.eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this.eventObject[eventName] = {}; } // 标示为只订阅一次的回调函数 const id = "d" + this.callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this.eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this.eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this.eventObject[eventName]).length === 0) { delete this.eventObject[eventName]; } }; return { unSubscribe }; } // 革除事件 clear(eventName) { // 未提供事件名称，默认革除所有事件 if (!eventName) { this.eventObject = {}; return; } // 革除指定事件 delete this.eventObject[eventName]; }}// 测试const eventBus = new EventBus();// 订阅事件eventXeventBus.subscribe("eventX", (obj, num) => { console.log("模块A", obj, num);});eventBus.subscribe("eventX", (obj, num) => { console.log("模块B", obj, num);});eventBus.subscribe("eventX", (obj, num) => { console.log("模块C", obj, num);});// 公布事件eventXeventBus.publish("eventX", { msg: "EventX published!" }, 1);// 革除eventBus.clear("eventX");// 再次公布事件eventX，因为曾经革除，所有模块都不会再收到音讯了eventBus.publish("eventX", { msg: "EventX published again!" }, 2);// 输入> 模块A {msg: 'EventX published!'} 1> 模块B {msg: 'EventX published!'} 1> 模块C {msg: 'EventX published!'} 1> eventX not found!5. TypeScript 版本
鉴于当初 TypeScript 曾经被大规模采纳，尤其是大型前端我的项目，咱们简要的革新为一个 TypeScript 版本
能够复制以下代码到 TypeScript Playground 体验运行成果
代码
interface ICallbackList { [id: string]: Function;}interface IEventObject { [eventName: string]: ICallbackList;}interface ISubscribe { unSubscribe: () => void;}interface IEventBus { publish<T extends any[]>(eventName: string, ...args: T): void; subscribe(eventName: string, callback: Function): ISubscribe; subscribeOnce(eventName: string, callback: Function): ISubscribe; clear(eventName: string): void;}class EventBus implements IEventBus { private _eventObject: IEventObject; private _callbackId: number; constructor() { // 初始化事件列表 this._eventObject = {}; // 回调函数列表的id this._callbackId = 0; } // 公布事件 publish<T extends any[]>(eventName: string, ...args: T): void { // 取出以后事件所有的回调函数 const callbackObject = this._eventObject[eventName]; if (!callbackObject) return console.warn(eventName + " not found!"); // 执行每一个回调函数 for (let id in callbackObject) { // 执行时传入参数 callbackObject[id](...args); // 只订阅一次的回调函数须要删除 if (id[0] === "d") { delete callbackObject[id]; } } } // 订阅事件 subscribe(eventName: string, callback: Function): ISubscribe { // 初始化这个事件 if (!this._eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this._eventObject[eventName] = {}; } const id = this._callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this._eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this._eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this._eventObject[eventName]).length === 0) { delete this._eventObject[eventName]; } }; return { unSubscribe }; } // 只订阅一次 subscribeOnce(eventName: string, callback: Function): ISubscribe { // 初始化这个事件 if (!this._eventObject[eventName]) { // 应用对象存储，登记回调函数的时候进步删除的效率 this._eventObject[eventName] = {}; } // 标示为只订阅一次的回调函数 const id = "d" + this._callbackId++; // 存储订阅者的回调函数 // callbackId应用后须要自增，供下一个回调函数应用 this._eventObject[eventName][id] = callback; // 每一次订阅事件，都生成惟一一个勾销订阅的函数 const unSubscribe = () => { // 革除这个订阅者的回调函数 delete this._eventObject[eventName][id]; // 如果这个事件没有订阅者了，也把整个事件对象革除 if (Object.keys(this._eventObject[eventName]).length === 0) { delete this._eventObject[eventName]; } }; return { unSubscribe }; } // 革除事件 clear(eventName: string): void { // 未提供事件名称，默认革除所有事件 if (!eventName) { this._eventObject = {}; return; } // 革除指定事件 delete this._eventObject[eventName]; }}// 测试interface IObj { msg: string;}type PublishType = [IObj, number];const eventBus = new EventBus();// 订阅事件eventXeventBus.subscribe("eventX", (obj: IObj, num: number, s: string) => { console.log("模块A", obj, num);});eventBus.subscribe("eventX", (obj: IObj, num: number) => { console.log("模块B", obj, num);});eventBus.subscribe("eventX", (obj: IObj, num: number) => { console.log("模块C", obj, num);});// 公布事件eventXeventBus.publish("eventX", { msg: "EventX published!" }, 1);// 革除eventBus.clear("eventX");// 再次公布事件eventX，因为曾经革除，所有模块都不会再收到音讯了eventBus.publish<PublishType>("eventX", { msg: "EventX published again!" }, 2);// 输入[LOG]: "模块A", { "msg": "EventX published!"}, 1[LOG]: "模块B", { "msg": "EventX published!"}, 1[LOG]: "模块C", { "msg": "EventX published!"}, 1[WRN]: "eventX not found!"6. 单例模式
在理论应用过程中，往往只须要一个事件总线就能满足需要，这里有两种状况，放弃在下层实例中单例和全局单例。
- 放弃在下层实例中单例
将事件总线引入到下层实例应用，只须要保障在一个下层实例中只有一个 EventBus，如果下层实例有多个，意味着有多个事件总线，然而每个下层实例管控本人的事件总线。
首先在下层实例中建设一个变量用来存储事件总线，只在第一次应用时初始化，后续其余模块应用事件总线时间接获得这个事件总线实例。
代码
// 下层实例class LWebApp { private _eventBus?: EventBus; constructor() {} public getEventBus() { // 第一次初始化 if (this._eventBus == undefined) { this._eventBus = new EventBus(); } // 后续每次间接取惟一一个实例，放弃在LWebApp实例中单例 return this._eventBus; }}// 应用const eventBus = new LWebApp().getEventBus();- 全局单例
有时候咱们心愿不论哪一个模块想应用咱们的事件总线，咱们都想这些模块应用的是同一个实例，这就是全局单例，这种设计能更容易对立治理事件。
写法同下面的相似，区别是要把 _eventBus 和 getEventBus 转为动态属性。应用时无需实例化 EventBusTool 工具类，间接应用静态方法就行了。
代码
// 下层实例class EventBusTool { private static _eventBus?: EventBus; constructor() {} public static getEventBus(): EventBus { // 第一次初始化 if (this._eventBus == undefined) { this._eventBus = new EventBus(); } // 后续每次间接取惟一一个实例，放弃全局单例 return this._eventBus; }}// 应用const eventBus = EventBusTool.getEventBus();原文：https://dushusir.com/js-event...
总结
以上是小编对 Event Bus 的一些了解，基本上实现了想要的成果。通过本人入手实现一遍公布订阅模式，也加深了对经典设计模式的了解。其中还有很多有余和须要优化的中央，欢送大家多多分享本人的教训。
参考
- 如何在 JavaScript 中实现 Event Bus
- How to Implement an Event Bus in TypeScript
- 用 JS 实现 EventBus
- Vue 事件总线（EventBus）应用具体介绍