ExtJs 架构分析

《ExtJs 架构分析》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、理解Ext.util.Event由于Ext2.0中所有的组件都是由Observable继承而来，理解Ext就需要先从Ext.util.Observable说起，而Observable是对Event对象进行管理，从而理解Observable必须首先从Ext.util.Event说起。 Ext.util.Event是一个封装的非常精致的对象，但和你想象的不同，Event同任何的HTMLDOM元素没有任何的关系（尽管Ext是处理HTML元素的），实际上，它是一个通用的事件及其事件的处理的对象。也许有朋友要问，HTMLElement本身已经支持了事件，为什么还要再重新设计一

2、套Event机制呢？其实，基本上所有的javascript框架都会实现自己的Event机制，原因很多，但是至少有一点：HTML元素对于事件的处理是通过简单的单一绑定实现，也就是说，如果不进行任何的封装，你的事件只能唯一的绑定到一个事件处理句柄，举个例子： vare=document.getElementById("test"); e.onclick=function(){alert("handle1")}; e.onclick=function(){alert("handle2")}; 运行的结果你回发现，只会弹出一个"handle2"的alert框，因为第一个事件

3、已经被第二个事件重载了。而使用Ext框架，你可以放心的解决这个问题，同一个事件可以依次被绑定到多个事件处理句柄上。 Ext.util.Event对象构建器需要传入两个对象：obj(处理事件的缺省对象），name(事件名称）。在构建Event对象时，Event对象会同时构建一个事件的处理函数的数组:listeners，通过这个数组实现了一个事件的多个事件句柄函数的处理。Ext.util.Event=function(obj,name){ this.name=name; this.obj=obj; this.listeners=[];};通过Event的fire方法就可

4、以依次触发该数组中的处理函数。实际上，fire方法在遍历listeners数组中的处理函数过程中，只要处理函数的返回值为false，则不再继续运行后续的处理函数。所以，可以通过检查fire方法的返回值得知事件处理函数是否完全被运行。 fire:function(){  varls=this.listeners,scope,len=ls.length;  if(len>0){   this.firing=true;//通过firing可以保证多个事件处理函数不会并发运行   varargs=Array.prototype.slice.call(arguments,0)

5、;//slice方法可以有效的进行数组的克隆   for(vari=0;i

6、

7、this.obj

8、

9、window,arguments)===false){     this.firing=false;     returnfalse;    }   }   this.firing=false;  }  returntrue; } Event可以通过addListener、removeList

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

11、

12、{};  

13、scope=scope

14、

15、this.obj;  varl={fn:fn,scope:scope,options:o};  varh=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;  returnl; } varcreateBuffered=function(h,o,scope){