react eventbus 监听事件

import { EmitFunc, ListenerFunc } from "../notice";
export class EventBus {
  public static getInstance: () => EventBus;
  public static instance: EventBus;
  public events: any;
  public emit: EmitFunc;
  public addListener: ListenerFunc;
  public removeListener: ListenerFunc;
  constructor() {
    /**
     * 构造函数需要存储的 event 事件
     */
    this.events = this.events || new Object();
  }
}

EventBus.getInstance = function () {
  if (!this.instance) {
    this.instance = new EventBus();
  }
  return this.instance;
}
/**
 * @name emit
 * @description 触发事件
 * @param {*} type 事件类型
 * @param  {...any} args 参数
 */
EventBus.prototype.emit = function (type: any, ...args: any) {
  const eventFuncs = this.events[type];
  // 查看这个 type 的 event 有多少个回调函数,如果有多个需要依次调用。
  if (Array.isArray(eventFuncs)) {
    // tslint:disable-next-line: prefer-for-of
    for (let index = 0; index < eventFuncs.length; index++) {
      eventFuncs[index].apply(this, args)
    }
  } else if (eventFuncs == null) {
    console.warn(`eventBus 没有监听${type}事件却发送了事件`)
  } else {
    eventFuncs.apply(this, args)
  }
};
/**
 * @name addEventListener
 * @description 增加监听函数
 * @param {*} type
 * @param {*} fun
 */
EventBus.prototype.addListener = function (type: any, func: any) {
  const eventFuncs = this.events[type];

  // 如果从未注册过监听函数,则将函数放入数组存入对应的键名下
  if (!eventFuncs) {
    this.events[type] = [func]
  }
  // 如果注册过,则直接放入
  else {
    eventFuncs.push(func)
  }
}

/**
 * @name removeListener
 * @description 删除监听事件
 * @param {*} type
 */
EventBus.prototype.removeListener = function (type: any, func: any) {
  if (this.events[type]) {
    const eventFuncs = this.events[type]
    if (Array.isArray(eventFuncs)) {
      if (func) {
        const funcIndex = eventFuncs.findIndex(eventFunc => func === eventFunc)
        if (funcIndex !== -1) {
          eventFuncs.splice(funcIndex, 1)
        } else {
          console.warn(`eventBus may remove unexit func(${type})`)
        }
      } else {
        delete eventFuncs[type]
      }
    } else {
      delete eventFuncs[type]
    }
  }
}

notice 文件

import { GetOrderDetailResponse } from "src-root/services/dto/dto-cart-order";
import { BillCalculateResponse } from "src-root/services/dto/dto-settle-calculate";

export interface IAPI {
  /**
   * 刷新购物车
   */
  refreshShoppingCart?: GetOrderDetailResponse;

  /**
   * 刷新账单 
   */
  refreshBill?: BillCalculateResponse;

  /**
   * 刷新开瓶数
   */
  refreshBottle?: any;
}


export type EmitFunc = (command: key, options?: IAPI[key]) => void;

export type ListenerFunc = (command: key, callback?: (msg?: IAPI[key]) => void) => void;


你可能感兴趣的:(react eventbus 监听事件)