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;
网友评论