EventBus

FruitBro
156 阅读9分钟

EventBus事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心。一个模块发送消息，其他模块接收消息，就达到了通信的作用。

原理

EventBus采用【订阅-发布】的设计模式，比如多个模块A、B、C 等，订阅了一个事件EventX,然后某一个模块x在事件总线发布了这个事件，那么事件总线会负责通知所有订阅者 A、B、C。

实现

实现一个简版的EventBus步骤如下：

  • 首先构造一个EventBus类，初始化一个空对象用于存放所有的对象。
  • 在接受订阅时，将事件名作为key值，将需要在接受发布消息后执行的回调函数作为value值，由于一个事件可能有多个订阅者，所以这里的回调函数要存储成列表。
  • 在发布事件消息时，从事件列表里取得指定的事件名称所有的回调函数，并依次触发。
class EventBus {
  constructor() {
      // 初始化事件列表
      this.eventObject = {}
      // 回调函数列表的id
      this.callbackId = 0;
  }
  // 发布事件
  publish(eventName) {
      // 取出当前时间的所有回调函数
      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] = [];
      }
      const id = this.callbackId++;
      // 存储订阅者的回调函数
      this.eventObject[eventName][id] = callback;
      
      // 每一次订阅事件，都生成唯一一个取消订阅的函数
      const unSubscribe = () => {
          // 清除这个订阅者的回调函数
          delete this.eventObject[eventName][id];
          // 如果这个事件没有订阅者了，也把整个事件对象清除
          if (Object.key(this.eventObject[eventName]).length  === 0) {
              delete this.eventObject[eventName];
          }
      }
      return { unSubscribe };
  }
  
}

// 使用，初始化eventBus
const eventBus = new EventBus();
// 订阅事件eventX
eventBus.subscribe('eventX', (obj, num) => {
    console.log('模块A')
})

eventBus.subscribe('eventX', (obj, num) => {
    console.log('模块B')
})

const subscribeC = eventBus.subscribe('eventX', (obj, num) => {
    console.log('模块C')
})

// 发布事件eventX
eventBus.publish("eventX", { msg: "EventX published!" }, 1)；

// 模块C取消订阅
subscribeC.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

这样我们就实现了基础的发布订阅功能。

进阶

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 };
  }
}

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!

总结

以上是对 Event Bus 的一些理解，基本上实现了想要的效果。通过自己动手实现一遍发布订阅模式，也加深了对经典设计模式的理解。

文章来源：segmentfault.com/a/119000004…

avatar
文章
阅读
粉丝