面試官:既然React/Vue能夠用Event Bus進行組件通訊,你能夠實現下嗎?

面試官系列(2):如何實現一個Event

---

往期

面試官系列(1): 如何實現深克隆

---

前言

本文標題的題目是由其餘問題延伸而來,面試中面試官的經常使用套路,揪住一個問題一直深挖,在產生這個問題以前必定是這個問題.

React/Vue不一樣組件之間是怎麼通訊的?

Vue

1. 父子組件用Props通訊
2. 非父子組件用Event Bus通訊
3. 若是項目夠複雜,可能須要Vuex等全局狀態管理庫通訊
4. $dispatch(已經廢除)和$broadcast(已經廢除)

React

1. 父子組件,父->子直接用Props,子->父用callback回調
2. 非父子組件,用發佈訂閱模式的Event模塊
3. 項目複雜的話用Redux、Mobx等全局狀態管理管庫
4. 用新的Context Api

咱們大致上都會有以上回答,接下來極可能會問到如何實現Event(Bus),由於這個東西過重要了,幾乎全部的模塊通訊都是基於相似的模式,包括安卓開發中的Event Bus,Node.js中的Event模塊(Node中幾乎全部的模塊都依賴於Event,包括不限於http、stream、buffer、fs等).

咱們仿照Node中Event API實現一個簡單的Event庫,他是發佈訂閱模式的典型應用.

提早聲明: 咱們沒有對傳入的參數進行及時判斷而規避錯誤,僅僅對核心方法進行了實現.

---

1.基本構造

1.1初始化class

咱們利用ES6的class關鍵字對Event進行初始化,包括Event的事件清單和監聽者上限.

咱們選擇了Map做爲儲存事件的結構,由於做爲鍵值對的儲存方式Map比通常對象更加適合,咱們操做起來也更加簡潔,能夠先看一下Map的基本用法與特色.

class EventEmeitter {
  constructor() {
    this._events = this._events || new Map(); // 儲存事件/回調鍵值對
    this._maxListeners = this._maxListeners || 10; // 設立監聽上限
  }
}
複製代碼

1.2 監聽與觸發

觸發監聽函數咱們能夠用apply與call兩種方法,在少數參數時call的性能更好,多個參數時apply性能更好,當年Node的Event模塊就在三個參數如下用call不然用apply.

固然當Node全面擁抱ES6+以後,相應的call/apply操做用Reflect新關鍵字重寫了,可是咱們不想寫的那麼複雜,就作了一個簡化版.

// 觸發名爲type的事件
EventEmeitter.prototype.emit = function(type, ...args) {
  let handler;
  // 從儲存事件鍵值對的this._events中獲取對應事件回調函數
  handler = this._events.get(type);
  if (args.length > 0) {
    handler.apply(this, args);
  } else {
    handler.call(this);
  }
  return true;
};

// 監聽名爲type的事件
EventEmeitter.prototype.addListener = function(type, fn) {
  // 將type事件以及對應的fn函數放入this._events中儲存
  if (!this._events.get(type)) {
    this._events.set(type, fn);
  }
};

複製代碼

咱們實現了觸發事件的emit方法和監聽事件的addListener方法,至此咱們就能夠進行簡單的實踐了.

// 實例化
const emitter = new EventEmeitter();

// 監聽一個名爲arson的事件對應一個回調函數
emitter.addListener('arson', man => {
  console.log(`expel ${man}`);
});

// 咱們觸發arson事件,發現回調成功執行
emitter.emit('arson', 'low-end'); // expel low-end
複製代碼

彷佛不錯,咱們實現了基本的觸發/監聽,可是若是有多個監聽者呢?

// 重複監聽同一個事件名
emitter.addListener('arson', man => {
  console.log(`expel ${man}`);
});
emitter.addListener('arson', man => {
  console.log(`save ${man}`);
});

emitter.emit('arson', 'low-end'); // expel low-end
複製代碼

是的,只會觸發第一個,所以咱們須要進行改造.

---

2.升級改造

2.1 監聽/觸發器升級

咱們的addListener實現方法還不夠健全,在綁定第一個監聽者以後,咱們就沒法對後續監聽者進行綁定了,所以咱們須要將後續監聽者與第一個監聽者函數放到一個數組裏.

// 觸發名爲type的事件
EventEmeitter.prototype.emit = function(type, ...args) {
  let handler;
  handler = this._events.get(type);
  if (Array.isArray(handler)) {
    // 若是是一個數組說明有多個監聽者,須要依次此觸發裏面的函數
    for (let i = 0; i < handler.length; i++) {
      if (args.length > 0) {
        handler[i].apply(this, args);
      } else {
        handler[i].call(this);
      }
    }
  } else { // 單個函數的狀況咱們直接觸發便可
    if (args.length > 0) {
      handler.apply(this, args);
    } else {
      handler.call(this);
    }
  }

  return true;
};

// 監聽名爲type的事件
EventEmeitter.prototype.addListener = function(type, fn) {
  const handler = this._events.get(type); // 獲取對應事件名稱的函數清單
  if (!handler) {
    this._events.set(type, fn);
  } else if (handler && typeof handler === 'function') {
    // 若是handler是函數說明只有一個監聽者
    this._events.set(type, [handler, fn]); // 多個監聽者咱們須要用數組儲存
  } else {
    handler.push(fn); // 已經有多個監聽者,那麼直接往數組裏push函數便可
  }
};
複製代碼

是的,今後之後能夠愉快的觸發多個監聽者的函數了.

// 監聽同一個事件名
emitter.addListener('arson', man => {
  console.log(`expel ${man}`);
});
emitter.addListener('arson', man => {
  console.log(`save ${man}`);
});

emitter.addListener('arson', man => {
  console.log(`kill ${man}`);
});

// 觸發事件
emitter.emit('arson', 'low-end');
//expel low-end
//save low-end
//kill low-end
複製代碼

2.2 移除監聽

咱們會用removeListener函數移除監聽函數,可是匿名函數是沒法移除的.

EventEmeitter.prototype.removeListener = function(type, fn) {
  const handler = this._events.get(type); // 獲取對應事件名稱的函數清單

  // 若是是函數,說明只被監聽了一次
  if (handler && typeof handler === 'function') {
    this._events.delete(type, fn);
  } else {
    let postion;
    // 若是handler是數組,說明被監聽屢次要找到對應的函數
    for (let i = 0; i < handler.length; i++) {
      if (handler[i] === fn) {
        postion = i;
      } else {
        postion = -1;
      }
    }
    // 若是找到匹配的函數,從數組中清除
    if (postion !== -1) {
      // 找到數組對應的位置,直接清除此回調
      handler.splice(postion, 1);
      // 若是清除後只有一個函數,那麼取消數組,以函數形式保存
      if (handler.length === 1) {
        this._events.set(type, handler[0]);
      }
    } else {
      return this;
    }
  }
};
複製代碼

---

3.發現問題

咱們已經基本完成了Event最重要的幾個方法,也完成了升級改造,能夠說一個Event的骨架是被咱們開發出來了,可是它仍然有不足和須要補充的地方.

1. 魯棒性不足: 咱們沒有對參數進行充分的判斷,沒有完善的報錯機制.
2. 模擬不夠充分: 除了removeAllListeners這些方法沒有實現之外,例如監聽時間後會觸發newListener事件,咱們也沒有實現,另外最開始的監聽者上限咱們也沒有利用到.

固然,這在面試中現場寫一個Event已是很夠意思了,主要是體現出來對發佈-訂閱模式的理解,以及針對多個監聽情況下的處理,不可能現場擼幾百行寫一個完整Event.

索性Event庫幫咱們實現了完整的特性,整個代碼量有300多行,很適合閱讀,你能夠花十分鐘的時間通讀一下,見識一下完整的Event實現.