DOM 事件抽象
elem.addEventListener('click', function(){console.log(1)});
elem.addEventListener('click', function(){console.log(2)});
非常簡單的事件添加的代碼侈玄，點(diǎn)擊 eleme 元素逮诲，先后輸出 1屹逛，2。
想象下其內(nèi)部結(jié)構(gòu)：
_cbs = {
// 各式各樣的 event
'click': [fn1, fn2],
'別的事件': [fn3, fn4, fn5],
// 更多的事件
...
}
事件綁定汛骂，就是不斷往 elem._cbs[event] 里面添加不同的函數(shù)；
事件解綁评腺，就是刪除 elem._cbs[event] 里面的指定函數(shù)帘瞭；
事件觸發(fā)，就是執(zhí)行 elem._cbs[event] 里面的所有函數(shù)蒿讥。
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 指向當(dāng)前對象
self.off();
// this 指向調(diào)用者，也就是當(dāng)前對象 _ctx 屬性指向的對象
fn.apply(this, arguments);
}
},
emit: function() {
this.fn.apply(this._ctx, arguments);
}
}
call芋绸、apply 性能對比
不管是 jQ媒殉，還是 Vue，只要涉及到 call摔敛、apply 的方法都是寫兩份廷蓉，一份參數(shù)少的用 call，一份直接傳 arguments 的用apply马昙，他們的解釋都是 call 執(zhí)行效率高于 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 跑下上面的代碼，會(huì)發(fā)現(xiàn)攒暇，call 確實(shí)比 apply 快很多（參數(shù)非常多的情況未測試）土匀。
事件只觸發(fā)一次
如何保證事件方法只觸發(fā)一次？
只調(diào)用一次事件觸發(fā)方法就好了形用！
就任性就轧，就要多次調(diào)用事件觸發(fā)方法，同時(shí)還得保證指定事件方法只觸發(fā)一次田度！
觸發(fā)完妒御，解綁就是了。
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);
}
不過這里面涉及到一個(gè)問題每币，就是只執(zhí)行一次的事件方法携丁，如何解綁，如何準(zhǔn)確識別出來兰怠，而后解綁特定方法梦鉴。畢竟，off 傳入的參數(shù)只有 event揭保、fn肥橙，沒有那個(gè) once 方法里的 on 函數(shù)。
on.fn = fn;
把 fn 附加到 on 上秸侣，然后再綁定就好了存筏， off 的時(shí)候，額外判定下 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) {
// 只有一個(gè)方法，直接刪除該事件
delete this._cbs[event];
return this;
}
var cb;
for(var i = 0; i < callbacks.length; i++) {
cb = callbacks[i];
// 兼顧考慮只執(zhí)行一次事件方法綁定的解綁
if(cb === fn || cb.fn === fn) {
callbacks.splice(i, 1);
break;
}
}
return this;
}
// 有限位數(shù)參數(shù)搏色，使用 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;
}
// 參數(shù)過多或者未知，使用 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;
