美文网首页饥人谷技术博客
使用Typescript手写一个Eventhub(发布订阅模式)

使用Typescript手写一个Eventhub(发布订阅模式)

作者: 萧雪圣 | 来源:发表于2019-09-28 20:48 被阅读0次

什么是发布-订阅模式?

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

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

说下简单的思路

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

使用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() 方法

测试用例运行结果

测试用例运行结果

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

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

相关文章

  • 使用Typescript手写一个Eventhub(发布订阅模式)

    什么是发布-订阅模式? 发布-订阅模式主要包含三个模块, 发布者,事件处理中心,订阅者。举个简单的例子,假设我们是...

  • EventHub-任意组件通信

    什么是EventHub EventHub本质上是基于发布订阅模式来实现的,可以将EventHub理解为发布订阅模式...

  • 实现一个简单的EventHub

    前言 谈到EventHub就不得不说到发布订阅这一种设计模式,EventHub正是基于这种设计模式实现出来的一个实...

  • 发布订阅模式(观察者模式)

    发布订阅模式(观察者模式) 发布订阅也叫观察者模式 发布 && 订阅 使用

  • 设计模式之发布订阅模式(1) 一文搞懂发布订阅模式

    目录 发布/订阅者模式的优点 实现发布/订阅者模式需要考虑的点 何时应使用发布/订阅者模式 发布/订阅者模式与观察...

  • 前端设计模式

    1,写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 2,使用发布订阅模式写一个事...

  • 常见设计模式

    问答 写出构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 使用发布订阅模式写一个事件管...

  • 前端设计模式

    一、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 二、使用发布订阅模式写一个事...

  • 常见设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 使用发布订阅模式写一个事件管理器...

  • 前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 使用发布订阅模式写一个事件管理器...

网友评论

    本文标题:使用Typescript手写一个Eventhub(发布订阅模式)

    本文链接:https://www.haomeiwen.com/subject/hkwtpctx.html