ts发布订阅模式 | 实现

即所谓的事件派发（EventDispatch）。

事件派发者EventDispatcher的任务就是调度中心，类似电话交换机，接受信号，然后转发给目标。

事件派发者EventDispatcher通常提供三个方法

1. 保存收听者 addEventListener

EventDispatcher.getInstance().addEventListener('event1', message =>
  console.log('event1: ', message)
)

2. 移除收听者 removeEventListener

EventDispatcher.getInstance().removeEventListener('event1')

3. 派发消息 dispatchEvent

EventDispatcher.getInstance().dispatchEvent('event1', 'how is it going?')

除此之外，事件派发者EventDispatcher还需要一个保存收听者的容器

/**
   *EventList
   *
   * @private
   * @type {Event[]}
   * @memberof EventDispatcher
   */
  private EventList: Event[]

Event事件的数据结构

/**
 *Listener
 *
 * @interface Listener
 */
interface Listener {
  (message?: any): void
}
/**
 *Event
 *
 * @interface Event
 */
interface Event {
  name: string
  listener: Listener
}

最后，事件派发者EventDispatcher也应该是单例类。

完整代码

/*
 * @Author: AK-12
 * @Date: 2018-12-10 12:25:34
 * @Last Modified by: AK-12
 * @Last Modified time: 2018-12-10 12:36:23
 */
/**
 *Listener
 *
 * @interface Listener
 */
interface Listener {
  (message?: any): void
}
/**
 *Event
 *
 * @interface Event
 */
interface Event {
  name: string
  listener: Listener
}
/**
 *EventDispatcher
 *
 * @export
 * @class EventDispatcher
 */
export default class EventDispatcher {
  private constructor() {
    this.EventList = new Array<Event>()
  }
  private static instance: EventDispatcher
  /**
   *EventDispatcher
   *
   * @static
   * @returns {EventDispatcher}
   * @memberof EventDispatcher
   */
  static getInstance(): EventDispatcher {
    this.instance = this.instance || new EventDispatcher()
    return this.instance
  }
  /**
   *EventList
   *
   * @private
   * @type {Event[]}
   * @memberof EventDispatcher
   */
  private EventList: Event[]
  /**
   *addEventListener
   *
   * @param {string} name
   * @param {Listener} listener
   * @memberof EventDispatcher
   */
  public addEventListener(name: string, listener: Listener): void {
    this.EventList.push({ name: name, listener: listener })
  }
  /**
   *removeEventListener
   *
   * @param {string} name
   * @memberof EventDispatcher
   */
  public removeEventListener(name: string): void {
    this.EventList = this.EventList.filter(event => event.name !== name)
  }
  /**
   *dispatchEvent
   *
   * @param {string} name
   * @param {*} [message]
   * @memberof EventDispatcher
   */
  public dispatchEvent(name: string, message?: any): void {
    this.EventList.filter(event => event.name === name)
      .map(event => event.listener)
      .forEach(listener => listener(message))
  }
}

来源：CSDN

作者：Prpr_Saber

链接：https://blog.csdn.net/u011607490/article/details/85222339

标签

string

event