[JS] 事件总线

亚囡

事件总线与发布订阅模式

事件总线是对发布-订阅模式的一种实现。
发布-订阅模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
发布-订阅模式实现了松耦合，发布者不是直接将消息发送给订阅者，而是经过了一个中间的代理，事件总线就是一种中间代理的实现。
事件总线维护了一个事件列表，订阅者可以订阅某一个事件，并指定一个回调（回调的具体实现在订阅者内部）；
每个事件又维护了一个依赖列表，发布者可以“触发”一个事件，事件总线负责遍历该事件的依赖列表，调用每一个当初订阅者订阅时指定的回调函数。

在 JS 中实现Event Bus

定义一个EventBus类：

1. class EventBus{}

复制代码

需要维护一个事件列表，在初始化事件总线对象的时候创建。
对于每一个事件，我们需要记录它的事件名(string类型)，还需要记录该事件的依赖列表(Array类型)，依赖列表其实就是各个订阅者的回调函数的列表。
这采用了一个对象来记录多个事件，刚好键值对就是事件名:依赖列表

1. constructor(){
2.     this.eventObject = {};
3. }

复制代码

实现订阅：
每一次订阅需要指定订阅的事件名和发布时要触发的回调函数。

• 如果指定的事件不存在，则添加一个事件，并推入该新依赖（回调函数）。
  
• 如果指定的事件存在，则直接推入新依赖（回调函数）
  

1. subscribe(eventName, callback){
2.     if(!this.eventObject[eventName]){
3.         this.eventObject[eventName] = [];
4.     }
5.     this.eventObject[eventName].push(callback);
6. }

复制代码

实现发布：
发布也要考虑到指定的事件是否存在。如果不存在，则中断并返回警告；如果存在指定事件，则依次调用事件的依赖列表（回调列表）。

1. publish(eventName){
2.     const callbackList = this.eventObject[eventName];
3.     if(!callbackList)return console.warn(eventName + " Not Found!");
4.     for(let callback of callbackList){
5.         callback();
6.     }
7. }

复制代码

汇总如下：

1. class EventBus{
2.     constructor(){
3.         this.eventObject = {};
4.     }
6.     /**
7.      * @param {string} eventName
8.     */
9.     publish(eventName){
10.         const callbackList = this.eventObject[eventName];
12.         if(!callbackList)return console.warn(eventName + " Not Found!");
13.         
14.         for(let callback of callbackList){
15.             callback();
16.         }
17.     }
19.     /**
20.      * @param {string} eventName
21.      * @param {Function} callback
22.     */
23.     subscribe(eventName, callback){
24.         if(!this.eventObject[eventName]){
25.             this.eventObject[eventName] = [];
26.         }
28.         this.eventObject[eventName].push(callback);
29.     }
30. }

复制代码

优化Event Bus的实现

在发布时传递参数

使用...args介绍不定长参数列表，在发布时传入，并在调用回调函数列表的时候依次传入。

1. /**
2. * @param {string} eventName
3. */
4. publish(eventName, ...args){
5.     const callbackList = this.eventObject[eventName];
7.     if(!callbackList)return console.warn(eventName + " Not Found!");
9.     for(let callback of callbackList){
10.         callback(...args);
11.     }
12. }

复制代码

提供取消订阅的操作

在订阅者调用subscribe方法订阅事件的时候，返回一个用于取消订阅的unSubscribe方法。
在实现事件的回调函数列表的时候，需要为每一个回调函数添加一个id，方便以后查询并删除该回调函数。
这里将订阅的回调函数列表换成用对象结构存储，因为在数组中删除某个中间元素较麻烦且耗时，效率不如对象结构的delete删除键值对。
换成对象结构存储后，键值对表示：id:回调函数。

1. class EventBus{
2.     constructor(){
3.         // 初始化事件列表
4.         this.eventObject = {};
5.         // 回调函数列表的 id
6.         this.callbackId = 0;
7.     }
9.     /**
10.      * @param {string} eventName
11.     */
12.     publish(eventName, ...args){
13.         // 取出该事件的回调函数列表(对象)
14.         const callbackObject = this.eventObject[eventName];
16.         if(!callbackObject)return console.warn(eventName + " Not Found!");
17.         
18.         // 执行每一个回调函数，这里的id是对象的key
19.         for(let id in callbackObject){
20.             callbackObject[id](...args);
21.         }
22.     }
24.     /**
25.      * @param {string} eventName
26.      * @param {Function} callback
27.      * @returns {{
28.      *      unSubscribe: Function
29.      * }}
30.     */
31.     subscribe(eventName, callback){
32.         if(!this.eventObject[eventName]){
33.             this.eventObject[eventName] = {};
34.         }
35.         // 为当前事务的回调函数申请一个专属id
36.         const id = this.callbackId++;
37.         // 绑定回调函数
38.         this.eventObject[eventName][id] = callback;
39.         // 生成取消订阅的函数
40.         const unSubscribe = ()=>{
41.             // 删除该回调函数
42.             delete this.eventObject[eventName][id];
43.             // 如果该事件的回调函数都删完了，则顺便删除事件列表中的事件
44.             if(Object.keys(this.eventObject[eventName]).length === 0){
45.                 delete this.eventObject[eventName];
46.             }
47.         }
48.         
49.         return {unSubscribe};
50.     }
51. }

复制代码

清除某个事件

1. /**
2. * @description 清除某事件
3. * @param {string} eventName
4. */
5. clear(eventName){
6.     if(!this.eventObject.hasOwnProperty(eventName)){
7.         return console.warn(eventName + " Not Found!");
8.     }
9.     delete this.eventObject[eventName];
10. }

复制代码

来源:https://www.cnblogs.com/feixianxing/p/js-event-bus-publish-subscribe-pattern.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！