前端面试题:JS 如何实现事件总线 Event Bus

原文:https://lwebapp.com/zh/post/event-bus

介绍

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 

你可能感兴趣的:(js,前端,javascript,vue.js)