前端小纠结--Event Bus模块约定本文产生的背景是，因为在封装Axios的时候，对于服务端的异常或者需要根据业务上

之前的约定--前端小纠结--Vue项目代码组织和风格约定

背景

本文产生的背景是，因为在封装Axios的时候，对于服务端的异常或者需要根据业务上异常code，进行不同的处理逻辑。但是基于Axios做的封装作为跨项目、跨框架模块使用所以不能和具体的router或者store等模块耦合，所以使用Event Bus，在整个Web范围中来解耦各个组件。

为什么使用Event Bus？

Event Bus有特殊的使用场景，不止在view组件之间的通信使用；Event Bus设计作为整个SPA应用的事件（消息）投递层使用。

模块通信

解决模块之间的通信问题，view组件层面，父子组件、兄弟组件通信都可以使用event bus处理。
模块解耦

storage change事件，cookie change事件，view组件的事件等，全部转换

使用Event Bus来订阅和发布，这样就统一了整个应用不同模块之间的通信接口问题。
父子页面通信

window.postMessage + Event Bus
多页面通信

storage change + Event Bus

Event Bus模块封装

Event Bus接口设计

参考jQuery和Vue

方法： on, off, once, emit(可选trigger/dispatch/publish)

如果你使用vue框架，就使用Vue对象或者使用dynamic-vue-bus包（其实也是包装了下Vue，实现自动destroy handler）。
如果搞一个框架无关的，兼容性好的就基于PubSubJS 封装。

`BusEvent`元数据模型设计

参考DOM中的Event对象

// 服务端返回的元数据模型(responeBody)
export interface ResponseResult<T = any> {
  message: string;
  code: number;
  data: T;
}

export interface BusEvent<T = any> extends ResponseResult<T> {
  type: string;
}

export type BusEventHandler = (data: BusEvent) => any;

这里的message是参考Error来设计的，因为当我们程序异常或者业务上异常时，就可以统一直接使用new Error()进行处理。

封装实现

项目中实现选择一种即可。

基于`Vue`封装实现

import EventBus from 'dynamic-vue-bus';
import { isFunction } from 'lodash-es';

// 基于Vue实现
export const VueBus = {
  originBus: EventBus,
  on(topic: string | string[], handler: BusEventHandler): string[] {
    // @ts-ignore
    this.originBus.$on(topic, handler)
    return [];
  },

  off(topic: string | string[], handler?: any) {
    const length = arguments.length;
    switch (length) {
      case 1:
        this.originBus.$off(topic);
        break;
      case 2:
        this.originBus.$off(topic, handler);
        break;
      default:
        this.originBus.$off();
    }
  },

  once(topic: string, handler: BusEventHandler) {
    // @ts-ignore
    return this.originBus.$once(topic, handler);
  },

  publish(topic: string, data: BusEvent) {
    return this.originBus.$emit(topic, data);
  },
};

使用：

function wsHandler(evt: BusEvent) {
    console.log(evt);
}
const topic = 'ws.100021';
VueBus.on(topic, wsHandler);
// VueBus.once(topic, wsHandler);

VueBus.publish(topic, {
   code: 100021,
   type: 'ws',
   message: '',
   data: {
        result: [{
            id: 1,
            name: 'junna'
        }]
    }
});

// VueBus.off();
VueBus.off(topic);
// VueBus.off(topic, wsHandler);

// 使用原生的Vue
const eventBus = PubSubBus.originBus;

基于`PubSubJS`实现

以下代码并没测试


export const PubSubBus = {
  originBus: PubSub,
  on(topic: string | string[], handler: BusEventHandler): string[] {
    if (!topic) {
      return [];
    }
    // @ts-ignore
    let events: string[] = [].concat(topic);
    return events.map(evt =>
      PubSub.subscribe(evt, () => (topic: string, data: BusEvent) =>
        handler(data)
      )
    );
  },

  /**
   * 不兼容这种模式：PubSubBus.off('ws.001', handler);
   * 因为PubSubJS使用token来off这种操作
   */
  off(tokenOrHandler?: () => void | string | string[]) {
    let length = arguments.length,
      evts: string[],
      listener;
    if (length === 0) {
      PubSub.clearAllSubscriptions();
    } else {
      // PubSubBus.off(handler);
      if (isFunction(tokenOrHandler)) {
        PubSub.unsubscribe(listener);
      } else {
        // @ts-ignore
        evts = [].concat(tokenOrHandler);
        evts.forEach(evt => PubSub.unsubscribe(evt));
      }
    }
  },

  once(topic: string, handler: BusEventHandler) {
    // @ts-ignore
    return PubSub.subscribeOnce(topic, handler);
  },

  publish(topic: string, data: BusEvent, sync = false) {
    return sync ? PubSub.publishSync(topic, data) : PubSub.publish(topic, data);
  },
};

使用：

function wsHandler(evt: BusEvent) {
    console.log(evt);
}
const topic = 'ws.100021';
const tokens: string[] = PubSubBus.on(topic, wsHandler);
// PubSubBus.once(topic, wsHandler);

PubSubBus.publish(topic, {
   code: 100021,
   type: 'ws',
   message: '',
   data: {
        result: [{
            id: 1,
            name: 'junna'
        }]
    }
});

// PubSubBus.off();
PubSubBus.off(topic);
// PubSubBus.off(tokens[0]); // 等价于VueBus.off(topic, wsHandler);
// PubSubBus.off(wsHandler); // 移除多个topic使用的同一个handler.

// 使用原生的PubSubJS
const PubSub = PubSubBus.originBus;

Event相关约定

`BusEvent#type`类型约定

事件类型的约定参考：

ws： WebSocket事件
storage: 储存事件, sessionStorage, localStorage
cs: cache storage
ap: application cache
cookie: cookie事件
biz: 业务事件
system: 系统事件
ui: 界面
cmp： components事件

`BusEvent#code`范围约定

code范围约定只是参考，因为这个约定需要和服务端小伙伴，甚至系统设计时规划决定。（瞎写）

ws： 10000~19999
storage: 20000~~29999, sessionStorage: 22000~~22999, localStorage: 23000~23999
cs: 24000~24999
ap: 25000~25999
cookie: 26000~26999
biz: 30000~31000
system: 40000~41000
ui: 42000~42999
cmp： 43000~44999

统一处理EventBus事件

有了约定，就可以统一发布相关的事件

// 模拟WebSocket推送消息
const data = [{
   code: 100021,
   type: 'ws',
   message: '',
   data: {
        result: [{
            id: 1,
            name: 'junna'
        }]
    }
},{
   code: 100022,
   type: 'ws',
   message: '',
   data: {
        result: [{
            id: 1,
            name: 'junna'
        }]
    }
}];

data.forEach(event => PubSubBus.publish(`${event.type}.${event.code}`), event));