ExtJs 架构分析

理解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对象构建器需要传入两个对象：obj(处理事件的缺省对象），name(事件名称）。

在构建Event对象时，Event对象会同时构建一个事件的处理函数的数组:listeners，通过这个数组实现了一个事件的多个事件句柄函数的处理。

Ext.util.Event = function(obj, 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);};};理解Ext.util.ObservableObservable维护了一个events数组，并提供了更加方便的对于事件的封装和调用机制。

同Event一样，它也提供了addListener、removeListener 方法。

它提供的addListenere方法使用起来更加方便,你可以通过json对象一次实现多个事件的绑定：foo.addListener({'click' : {fn: this.onClick,scope: this,delay: 100},'mouseover' : {fn: this.onMouseOver,scope: this},'mouseout' : {fn: this.onMouseOut,scope: this}})如果你看一下源程序，你会发现，实际上，observable最终还是把事件绑定机制委托到Event对象上：addListener : function(eventName, fn, scope, o){//如果参数是一个json对象if(typeof eventName == "object"){o = eventName;for(var e in o){if(this.filterOptRe.test(e)){continue;}if(typeof o[e] == "function"){// shared optionsthis.addListener(e, o[e], o.scope, o);}else{// individual optionsthis.addListener(e, o[e].fn, o[e].scope, o[e]);}}return;}o = (!o || typeof o == "boolean") ? {} : o;eventName = eventName.toLowerCase();var ce = this.events[eventName] || true;if(typeof ce == "boolean"){//事件不存在则新建一个Event对象并把它纳入event数组ce = new Ext.util.Event(this, eventName);this.events[eventName] = ce;}//调用event的addListener方法ce.addListener(fn, scope, o);}除了支持addListener方法，Obserable还提供了一个addEvent方法，通过该方法，Observable可以绑定多个不包含处理句柄的Event对象：addEvents : function(o){if(!this.events){this.events = {};}if(typeof o == 'string'){for(var i = 0, a = arguments, v; v = a; i++){if(!this.events[a]){o[a] = true;}}}else{Ext.applyIf(this.events, o);}},为了方便使用，observable对addListener和removeListener提供了一个更加简洁的所写：on和un：Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;Ext.util.Observable.prototype.un = Ext.util.Observable.prototype.removeListener;你可以通过suspendEvents和resumeEvents方法随时对于事件进行暂停和继续：suspendEvents : function(){this.eventsSuspended = true;},resumeEvents : function(){this.eventsSuspended = false;},当然，通过fireEvent方法,你可以触发制定的事件：fireEvent : function(){if(this.eventsSuspended !== true){//arguments[0]就是你需要触发的事件var ce = this.events[arguments[0].toLowerCase()];if(typeof ce == "object"){return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));}}return true;},Observable还通过capture和releaseCapture提供了对于事件处理函数的拦截机制：Ext.util.Observable.capture = function(o, fn, scope){o.fireEvent = o.fireEvent.createInterceptor(fn, scope);};Ext.util.Observable.releaseCapture = function(o){o.fireEvent = Ext.util.Observable.prototype.fireEvent;};Widget之父Component：总结在这里，我们引用Ext Overview中的Component life cycle对组件的功能进行相应的总结：[list=1]∙配置项对象生效：组件对象的构造器会把全部的配置项传入到其子类中去，并且进行下列所有的步骤。