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;