关于javascript:如何在-JavaScript-中实现-Event-Bus事件总线

32次阅读

共计 12590 个字符，预计需要花费 32 分钟才能阅读完成。

原文：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. 单例模式

在理论应用过程中，往往只须要一个事件总线就能满足需要，这里有两种状况，放弃在下层实例中单例和全局单例。

  1. 放弃在下层实例中单例

将事件总线引入到下层实例应用，只须要保障在一个下层实例中只有一个 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();
  1. 全局单例

有时候咱们心愿不论哪一个模块想应用咱们的事件总线，咱们都想这些模块应用的是同一个实例，这就是全局单例，这种设计能更容易对立治理事件。

写法同下面的相似，区别是要把 _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）应用具体介绍

正文完
javascript
发表至： javascript
2022-03-12
 0
关于javascript:useEffect学习
小程序云开发实战问题1没有找到可以构建的-NPM-包
ES6 系列之我们来聊聊 Promise
关于javascript:从头学前端04搞懂JavaScript中的基本数据类型