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

尋找海藍96發表於2018-04-03
面試ReactVue元件

面試官系列(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實現.

相關文章