乐趣区

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

原文:https://dushusir.com/js-event…

介绍

Event Bus 事件总线,通常作为多个模块间的通信机制,相当于一个事件管理中心,一个模块发送音讯,其它模块承受音讯,就达到了通信的作用。

比方,Vue 组件间的数据传递能够应用一个 Event Bus 来通信,也能够用作微内核插件零碎中的插件和外围通信。

原理

Event Bus 实质上是采纳了公布 - 订阅的设计模式,比方多个模块 ABC 订阅了一个事件 EventX,而后某一个模块 X 在事件总线公布了这个事件,那么事件总线会负责告诉所有订阅者 ABC,它们都能收到这个告诉音讯,同时还能够传递参数。

// 关系图
                           模块 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. 全局单例

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

写法同下面的相似,区别是要把 _eventBusgetEventBus 转为动态属性。应用时无需实例化 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)应用具体介绍
退出移动版