Ext架构分析

一 ： 理解Ext.util.Event

        由于Ext2.0中所有的组件都是由Observable继承而来，理解Ext就需要先从Ext.util.Observable说起，而 Observable是对Event对象进行管理，从而理解Observable必须首先从Ext.util.Event说起。 

  Ext.util.Event是一个封装的非常精致的对象，但和你想象的不同，Event同任何的HTML DOM元素没有任何的关系（尽管Ext是处理HTML元素的），实际上，它是一个通用的事件及其事件的处理的对象。 也许有朋友要问，HTML Element本身已经支持了事件，为什么还要再重新设计一套Event机制呢？其实，基本上所有的javascript框架都会实现自己的Event机 制，原因很多，但是至少有一点：HTML元素对于事件的处理是通过简单的单一绑定实现，也就是说，如果不进行任何的封装，你的事件只能唯一的绑定到一个事件处理句柄，举个例子：

  var e = document.getElementById( " test " ); 

  e.onclick = function() {alert("handle1")} ; 
  e.onclick = function() {alert("handle2")} ; 

  运行的结果你回发现，只会弹出一个"handle2"的alert框，因为第一个事件已经被第二个事件重载了。这就叫只能绑定到一个事件句柄。而使用Ext框架，你可以放心的解决这个问题，同一个事件可以依次被绑定到多个事件处理句柄上。 


  Ext.util.Event对象构建器  ：

     /**
     * Ext.util.Event对象构建器
     * @param obj : 处理事件的缺省对象
     * @param name : 事件名称
     */
    Ext.util.Event  =  function(obj, name)  {
        this.name = name;
        this.obj = obj;
        this.listeners = []; //事件的处理函数的数组,实现了一个事件的多个事件句柄函数的处理
    } ;

通过Event的fire方法就可以依次触发该数组中的处理函数。 实际上，fire方法在遍历listeners数组中的处理函数过程中，只要处理函数的返回值为false，则不再继续运行后续的处理函数。所以，可以通 过检查fire方法的返回值得知事件处理函数是否完全被运行。
  

fire : function(){
    var ls = this.listeners, scope, len = ls.length;
    if(len > 0){
      this.firing = true;//通过firing可以保证多个事件处理函数不会并发运行
      var args = Array.prototype.slice.call(arguments, 0);//slice方法可以有效的进行数组的克隆
      for(var i = 0; i < len; i++){
        var l = ls;
        //事件的处理，只要有一个处理函数返回false,整个事件处理就被停止
        if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
          this.firing = false;
          return false;
        }
      }
      this.firing = false;
    }
    return true;
  }

  Event可以通过addListener、removeListener、clearListeners（移除所有的事件处理函数）方法对 listeners进行管理。但是，Listener中保存的事件处理函数实际上并不是addListener传递的函数，实际 上，addListener传入的方法通过createListener对事件的处理函数进行了封装，通过封装，实现了对通一个重复事件的的三种不同处理 方式：delay（延迟运行）、single(移除Listener中的处理函数，仅运行当前的处理函数）、buffer(避免重复运行处理函数)。
 

createListener : function(fn, scope, o){
    o = o || {};
    scope = scope || this.obj;
    var l = {fn: fn, scope: scope, options: o};
    var h = fn;
    if(o.delay){
      h = createDelayed(h, o, scope);
    }
    if(o.single){
      h = createSingle(h, this, fn, scope);
    }
    if(o.buffer){
      h = createBuffered(h, o, scope);
    }
    l.fireFn = h;
    return l;
  }

  var createBuffered = function(h, o, scope){
    var task = new Ext.util.DelayedTask();
    return function(){
        task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
    };
  };
  var createSingle = function(h, e, fn, scope){
    return function(){
        e.removeListener(fn, scope);
        return h.apply(scope, arguments);
    };
  };
  var createDelayed = function(h, o, scope){
    return function(){
        var args = Array.prototype.slice.call(arguments, 0);
        setTimeout(function(){
          h.apply(scope, args);
        }, o.delay || 10);
    };
  };