EventEmitter

sixleaves 發(fā)布于2019-08-26 10:46 / 2051人閱讀

摘要：工具函數(shù)判斷所屬類型判斷是否是或者添加事件監(jiān)聽事件的名稱監(jiān)聽事件對應(yīng)的方法改變的指向執(zhí)行的主體是否只執(zhí)行一次必須是一個函數(shù)如果只執(zhí)行一次將是一次函數(shù)如果已經(jīng)存在監(jiān)聽一個函數(shù)則將是一個數(shù)組如果存在監(jiān)聽多個函數(shù)數(shù)組則類初始化屬性添加事件可執(zhí)行

//工具函數(shù),判斷所屬類型,判斷是否是null或者undefined
const toString = Object.prototype.toString;
const isType = obj => toString.call(obj).slice(8, -1).toLowerCase();
const isArray = obj => Array.isArray(obj) || isType(obj) === "array";
const isNullOrUndefined = obj => obj === null || obj === undefined;
/**
 * 添加事件
 * @param {*} type 監(jiān)聽事件的名稱
 * @param {*} fn   監(jiān)聽事件對應(yīng)的方法
 * @param {*} context 改變this的指向/執(zhí)行的主體
 * @param {*} once 是否只執(zhí)行一次
 */
const _addListener = function(type, fn, context, once) {
  if (typeof fn != "function") {
    throw new TypeError("fn 必須是一個函數(shù)");
  }
  fn.context = context;
  fn.once = !!once;
  const event = this._events[type];
  //如果只執(zhí)行一次, this._events[type] 將是一次函數(shù)
  if (isNullOrUndefined(event)) {
    this._events[type] = fn;
  } else if (typeof event === "function") {
    //如果已經(jīng)存在(監(jiān)聽)一個函數(shù),則this._events[type]將是一個數(shù)組
    this._events[type] = [event, fn];
  } else if (isArray(event)) {
    //如果存在(監(jiān)聽)多個函數(shù)(數(shù)組),則push
    this._events[type].push(fn);
  }
  return this;
}

//EventEmitter類
class EventEmitter {
  constructor() {
    //初始化_events屬性
    if (isNullOrUndefined(this._events)) {    
      this._events = Object.create(null);
    }
  }
  //添加事件
  addListener(type, fn, context) {
    return _addListener.call(this, type, fn, context);
  }
  //可執(zhí)行多次
  on(type, fn, context) {
    return this.addListener(type, fn, context);
  }
  //執(zhí)行一次
  once(type, fn, context) {
    return _addListener.call(this, type, fn, context, true);
  }
  //事件觸發(fā)
  emit(type, ...rest) {
    if (isNullOrUndefined(type)) {
      throw new Error("emit必須接收至少一個參數(shù)");
    }
    const events = this._events[type];
    if (isNullOrUndefined(events)) return false;
    if (typeof events === "function") {
      //用call改變this的指向指向events.context主體,否則指向null
      events.call(events.context || null, rest);
      //執(zhí)行完畢判斷是否只執(zhí)行一次,是則移除
      if (events.once) {
        this.removeListener(type, events);
      }
    } else if (isArray(events)) {
      events.map(e => {
        e.call(e.context || null, rest);
        if (e.once) {
          this.removeListener(type, e);
        }
      })
    }
    return true;
  }
  //事件移除
  removeListener(type, fn) {
    if (isNullOrUndefined(this._events)) return this;
    if (isNullOrUndefined(type)) return this;
    if (typeof fn !== "function") {
      throw new Error("fn 必須是一個函數(shù)");
    }
    const events = this._events[type];
    if (typeof events === "function") {
      events === fn && delete this._events[type];
    } else {
      const findIndex = events.findIndex(e => e === fn);
      if (findIndex === -1) return this;
      if (findIndex === 0) {
        events.shift();
      } else {
        events.splice(findIndex, 1);
      }
      //如果只剩下一個監(jiān)聽者,則把數(shù)組變?yōu)楹瘮?shù)
      if (events.length === 1) {
        this._events[type] = events[0];
      }
    }
    return this;
  }
  //刪除所有事件
  removeAllListeners(type) {
    if (isNullOrUndefined(this._events)) return this;
    //如果沒有指定type,則刪除全部
    if (isNullOrUndefined(type)) this._events = Object.create(null);
    const events = this._events[type];
    if (!isNullOrUndefined(events)) {
      //判斷是否只剩下最后一個事件
      if (Object.keys(this._events).length === 1) {
        this._events = Object.create(null);
      } else {
        delete this._events[type];
      }
    }
    return this;
  }
  //監(jiān)聽隊列
  listeners(type) {
    if (isNullOrUndefined(this._events)) return [];
    const events = this._events[type];
    return isNullOrUndefined(events) ? [] : (typeof events === "function" ? [events] : events.map(o => o));
  }
  //監(jiān)聽者數(shù)量
  listenerCount(type) {
    if (isNullOrUndefined(this._events)) return 0;
    const events = this._events[type];
    return isNullOrUndefined(events) ? 0 : (typeof events === "function" ? 1 : events.length);
  }
  eventNames() {
    if (isNullOrUndefined(this._events)) return [];
    return Object.keys(this._events);
  }
}

參考自https://www.php.cn/js-tutoria... 作者:php中世界最好的語言