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實例，所以能通信