EventEmitter事件通信（发布订阅）

基于框架（angular,react,vue等）开发的项目都有合适的状态管理库，一般也很少使用eventEmitter，那么一些传统的或者遗留的基于 jQuery + template 的项目如何处理通信问题呢？

解决方案：

1. 发布订阅（EventEmitter事件通信）
2. callback（传递回调函数）

这里简要实现一下EventEmitter

class EventEmitter {
  // 存储所有事件的监听器
  es = {};

  // 事件订阅
  on(eventName, cb, once = false) {
    if (!this.es[eventName]) {
      this.es[eventName] = [];
    }
    this.es[eventName].push({
      cb,
      once,
    });
  }

  // 仅订阅一次
  once(eventName, cb) {
    this.on(eventName, cb, true);
  }

  // 派发事件，通知订阅者
  emit(eventName, ...params) {
    const listeners = this.es[eventName] || [];
    let l = listeners.length;
    for (let i = 0; i < l; i++) {
      const { cb, once } = listeners[i];
      cb.apply(this, params);
      if (once) {
        listeners.splice(i, 1);
        i--;
        l--;
      }
    }
  }

  // 取消订阅
  off(eventName, cb) {
    // clean all
    if (eventName === undefined) {
      this.es = {};
    } else {
      if (cb === undefined) {
      	delete this.es[eventName];
      } else {
	      const listeners = this.es[eventName] || [];
	      let l = listeners.length;
	      for (let i = 0; i < l; i++) {
	        if (listeners[i].cb === cb) {
	          listeners.splice(i, 1);
	          i--;
	          l--;
	        }
	      }
	   }
    }
  }
}

const eventEmitter = new EventEmitter();

export default eventEmitter;

可能有的小伙伴会迷惑，我在不同的模板文件中分别导入了这个类，那不是分别有一个EventEmitter的实例吗？不同的实例之间没法通信啊！

其实是这样的：
多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。
比如：

import 'lodash';
import 'lodash';

上面代码加载了两次lodash，但是只会执行一次。

也就是，不同模板之间不过只是共享同一个EventEmitter实例，所以能通信