前端面试题：JS 如何实现事件总线 Event Bus
原文：https://lwebapp.com/zh/post/event-bus
介绍
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();
// 订阅事件eventX
eventBus.subscribe("eventX", () => {
console.log("模块A");
});
eventBus.subscribe("eventX", () => {
console.log("模块B");
});
eventBus.subscribe("eventX", () => {
console.log("模块C");
});
// 发布事件eventX
eventBus.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();
// 订阅事件eventX
eventBus.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);
});
// 发布事件eventX
eventBus.publish("eventX", {
msg: "EventX published!" }, 1);
// 输出
> 模块A {
msg: 'EventX published!'} 1
> 模块B {
msg: 'EventX published!'} 1
> 模块C {
msg: 'EventX published!'} 1
2. 订阅后如何取消订阅
有时候订阅者只想在某一个时间段订阅消息，这就涉及带取消订阅功能。我们将对代码进行改造。
首先，要实现指定订阅者取消订阅，每一次订阅事件时，都生成唯一一个取消订阅的函数，用户直接调用这个函数，我们就把当前订阅的回调函数删除。
// 每一次订阅事件，都生成唯一一个取消订阅的函数
const unSubscribe = () => {
// 清除这个订阅者的回调函数
delete this.eventObject[eventName][id];
};
其次，订阅的回调函数列表使换成对象结构存储，为每一个回调函数设定一个唯一 id， 注销回调函数的时候可以提高删除的效率，如果还是使用数组的话需要使用 split 删除，效率不如对象的 delete。
代码
class EventBus {
constructor() {
// 初始化事件列表
this.eventObject = {
};
// 回调函数列表的id
this.callbackId = 0;
}
// 发布事件
publish(eventName, ...args) {
// 取出当前事件所有的回调函数
const callbackObject