DOM 事件抽象

elem.addEventListener('click', function(){console.log(1)});
elem.addEventListener('click', function(){console.log(2)});

非常簡單的事件添加的代碼，點擊 eleme 元素，先后輸出 1，2。

想象下其內部結構：

_cbs = {
  // 各式各樣的 event
  'click': [fn1, fn2],
  '別的事件': [fn3, fn4, fn5],
  // 更多的事件
  ...
}

事件綁定，就是不斷往 elem._cbs[event] 里面添加不同的函數；

事件解綁，就是刪除 elem._cbs[event] 里面的指定函數；

事件觸發，就是執行 elem._cbs[event] 里面的所有函數。

call、apply 的 this 指向

function Emitter(ctx) {
  this._ctx = ctx || this;
}
Emitter.prototype = {
  constructor: Emitter,
  off: function() {
    console.log('off');
  },
  once: function(fn) {
    var self = this;
    this.fn = function() {
      // self 指向當前對象
      self.off();
      // this 指向調用者，也就是當前對象 _ctx 屬性指向的對象
      fn.apply(this, arguments);
    }
  },
  emit: function() {
    this.fn.apply(this._ctx, arguments);
  }
}

call、apply 性能對比

不管是 jQ，還是 Vue，只要涉及到 call、apply 的方法都是寫兩份，一份參數少的用 call，一份直接傳 arguments 的用apply，他們的解釋都是 call 執行效率高于 apply。

寫段小代碼測試下：

function out(a) {
  window.a = a;
}
function fn(fn, a) {
  args = [].slice.call(arguments, 1);
  fn.call(window, a);
  //fn.apply(window, args);
}
var start = new Date();
for(var i = 0; i < 100000; i++) {
  fn(out, i);
}
console.log(new Date() - start);

分別注釋掉 call、apply 跑下上面的代碼，會發現，call 確實比 apply 快很多（參數非常多的情況未測試）。

事件只觸發一次

如何保證事件方法只觸發一次？

只調用一次事件觸發方法就好了！

就任性，就要多次調用事件觸發方法，同時還得保證指定事件方法只觸發一次！

觸發完，解綁就是了。

Emiter.prototype.on = function(event, fn) {
  this._cbs[event].push(fn);
};
Emiter.prototype.once = function(event, fn) {
  var self = this;
  function on() {
    // 先解綁
    self.off(event, on);
    fn.apply(this, argument);
  }
  this.on(event, on);
}

不過這里面涉及到一個問題，就是只執行一次的事件方法，如何解綁，如何準確識別出來，而后解綁特定方法。畢竟，off 傳入的參數只有 event、fn，沒有那個 once 方法里的 on 函數。

  on.fn = fn;

把 fn 附加到 on 上，然后再綁定就好了， off 的時候，額外判定下 fn.fn。

emitter.js

var slice = [].slice;

function Emitter(ctx) {
  this._ctx = ctx || this;
}

var EmitterProto = Emitter.prototype;

EmitterProto.on = function(event, fn) {
  this._cbs = this._cbs || {};
  (this._cbs[event] = this._cbs[event] || []).push(fn);
  return this;
}

EmitterProto.once = function(event, fn) {
  var self = this;
  this._cbs = this._cbs || {};
  
  function on() {
    self.off(event, on);
    fn.apply(this, arguments);
  }
  
  on.fn = fn;
  this.on(event, on);
  return this;
}

EmitterProto.off = function(event, fn) {
  this._cbs = this._cbs || {};
  
  // 不傳參，則清除所有事件
  if(!arguments.length) {
    this._cbs = {};
    return this;
  }
  
  var callbacks = this._cbs[event];
  if(!callbacks) return this;

  if(arguments.length === 1) {
    // 只有一個方法，直接刪除該事件
    delete this._cbs[event];
    return this;
  }

  var cb;
  for(var i = 0; i < callbacks.length; i++) {
    cb = callbacks[i]; 
    // 兼顧考慮只執行一次事件方法綁定的解綁
    if(cb === fn || cb.fn === fn) {
      callbacks.splice(i, 1);
      break;
    }
  }
  return this;
}

// 有限位數參數，使用 call，更高效
EmitterProto.emit = function(event, a, b, c) {
  this._cbs = this._cbs || {};
  var callbacks = this._cbs[event];
  
  if(callbacks) {
    callbacks = callbacks.slice(0);
    for(var i = 0, len = callbacks.length; i < len; i++) {
      callbacks[i].call(this._ctx, a, b, c);
    }
  }

  return this;
}
// 參數過多或者未知，使用 apply
EmitterProto.emit = function(event) {
  this._cbs = this._cbs || {};
  var callbacks = this._cbs[event], args;
  
  if(callbacks) {
    callbacks = callbacks.slice(0);
    args = slice.call(arguments, 1);
    for(var i = 0, len = callbacks.length; i < len; i++) {
      callbacks[i].apply(this._ctx, args);
    }
  }

  return this;
}

module.exports = Emitter;