原文: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();
// 订阅事件 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 = 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();
// 订阅事件 eventX
eventBus.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);
});
// 公布事件 eventX
eventBus.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!'} 2
3. 如何只订阅一次
如果一个事件只产生一次,通常也只须要订阅一次,收到音讯后就不必再承受音讯。
首先,咱们提供一个 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();
// 订阅事件 eventX
eventBus.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);
});
// 公布事件 eventX
eventBus.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!'} 2
4. 如何革除某个事件或者所有事件
咱们还心愿通过一个 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();
// 订阅事件 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);
// 革除
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();
// 订阅事件 eventX
eventBus.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);
});
// 公布事件 eventX
eventBus.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)应用具体介绍