使用Typescript手写一个Eventhub（发布订阅模式）

什么是发布-订阅模式？

发布-订阅模式主要包含三个模块， 发布者，事件处理中心，订阅者。
举个简单的例子，假设我们是一个淘宝买家，我们喜欢一家淘宝店铺的话可以点击关注，就可以接收到店铺发布的消息。
这里我们就相当于一个 订阅者 ，淘宝就相当于 事件处理中心，然后我们关注的卖家店铺就相当于 发布者。
订阅者 可以有多个，小明，小红，小亮都关注的小米手机官方店，这个时候小米手机官方店就作为一个发布者，可以给小明，小红，小亮通过淘宝，发布新产品上市的消息。

如何实现一个发布订阅模式？

说下简单的思路

• 首先我们需要一个事件处理中心能够储存我们订阅的事件。
• 然后我们需要一个发布方法，发布的时候能够遍历储存好的订阅事件，依次执行，还能够接收发布传递的参数。

使用Typescript实现

type Event = (params?: unknown) => void;

class EventHub {
  private cache: { [key: string]: Array<Event> } = {};  // 缓存订阅的事件   
  // {
  //     'xxx事件': [fn1, fn2, fn3]
  // }

  // 把fn 推进this.cache[eventName]数组里
  on(eventName: string, fn: Event) {
    // 如果订阅的事件缓存里不存在任何处理函数，则初始化订阅事件名为一个空数组
    this.cache[eventName] = this.cache[eventName] || [];
    this.cache[eventName].push(fn);
  }

  // 依次执行this.cache[eventName]数组里的函数
  emit(eventName: string, params?: unknown) {
    (this.cache[eventName] || []).forEach(fn  => fn(params))
  }

  // 取消订阅的事件
  off(eventName: string, fn: Event) {
    // 检查需要取消的事件是否存在, 如果存在则把该事件从this.cache[eventName]数组里面移除
    let index = indexOf(this.cache[eventName], fn);
    index !== -1 && this.cache[eventName].splice(index, 1);
  }
}

export default EventHub;

/**
 * 帮助函数
 * @param array 
 * @param item 
 */
function indexOf(array: Array<Event> | undefined, item: unknown) {
  if(array === undefined) return -1;
  let index = -1;
  for(let i = 0; i<array.length; i++) {
    if(array[i] === item) {
      index = i;
      break;
    }
  }
  return index;
}

使用测试用例保证我们的代码是可靠的！

import EventHub from '../src/index';

type TestCase = (message: string) => void;

const test1: TestCase = message => {
   const eventhub = new EventHub();
   console.assert(eventhub instanceof Object === true, 'EventHub是一个对象');
   console.log(message)
}
   

const test2: TestCase = message => {
   const eventhub = new EventHub();
   let called = false;
   eventhub.on('testEvent', (params) => {
      called = true;
      console.assert(params === 'redmi note8pro 新品发布')
   });
   eventhub.emit('testEvent', 'redmi note8pro 新品发布');
   setTimeout(() => {
      console.assert(called === true);
      console.log(message)
   })
}

const test3: TestCase = message => {
   const eventhub = new EventHub();
   let called = false;
   const fn1 = () => {
      called = true;
   }
   eventhub.on('testEvent', fn1);
   eventhub.off('testEvent', fn1);
   eventhub.emit('testEvent');
   setTimeout(() => {
      console.assert(called === false);
      console.log(message)
   }, 2000)
}

test1('EventHub可以创建一个对象');
test2('EventHub可以on订阅事件和emit触发事件');
test3('EventHub可以off取消一个订阅事件');

测试用例主要用到了assert(断言)这个方法，如果不知道用法可以参考这个api说明
console.assert() 方法

测试用例运行结果

没有报错，说明我们的发布订阅模式是可用的，如果有疑问可以留言！

本文正在参加“写编程博客瓜分千元现金”活动，关注公众号“饥人谷”回复“编程博客”参与活动。