emitter

作者: duiel | 来源:发表于2016-10-26 10:50 被阅读0次

    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;
    

    相关文章

      网友评论

          本文标题:emitter

          本文链接:https://www.haomeiwen.com/subject/ikiruttx.html