小叙Ext架构-理解Ext.util.Observable

?

理解Ext.util.Observable

Observable维护了一个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 options
? ? ? ? this.addListener(e, o[e], o.scope, o);
? ? ? }else{
? ? ? ? // individual options
? ? ? ? this.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;
};