美文网首页react
react eventbus 监听事件

react eventbus 监听事件

作者: 小领袖 | 来源:发表于2021-05-27 13:36 被阅读0次
    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 = <key extends keyof IAPI>(command: key, options?: IAPI[key]) => void;
    
    export type ListenerFunc = <key extends keyof IAPI>(command: key, callback?: (msg?: IAPI[key]) => void) => void;
    
    
    

    相关文章

      网友评论

        本文标题:react eventbus 监听事件

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