Ext架构分析(2)--理解Ext.util.Observable

Observable维护了一个events数组,并提供了更加方便的对于事件的封装和调用机制。同Event一样,它也提供了addListener、removeListener方法。它提供的addListenere方法使用起来更加方便,你可以通过json对象一次实现多个事件的绑定:
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observablefoo.addListener(Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable
'click' : Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable  fn: 
this.onClick, 
Ext架构分析(2)--理解Ext.util.Observable  scope: 
this
Ext架构分析(2)--理解Ext.util.Observable  delay: 
100 
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable
'mouseover' : Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable  fn: 
this.onMouseOver, 
Ext架构分析(2)--理解Ext.util.Observable  scope: 
this 
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable
'mouseout' : Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable  fn: 
this.onMouseOut, 
Ext架构分析(2)--理解Ext.util.Observable  scope: 
this 
Ext架构分析(2)--理解Ext.util.Observable}
 
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.Observable

如果你看一下源程序,你会发现,实际上,observable最终还是把事件绑定机制委托到Event对象上:
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservableaddListener : function(eventName, fn, scope, o)Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable    
//如果参数是一个json对象 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable
    if(typeof eventName == "object")Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable    o 
= eventName; 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable    
for(var e in o)Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable      
if(this.filterOptRe.test(e))Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable        
continue
Ext架构分析(2)--理解Ext.util.Observable      }
 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable      
if(typeof o[e] == "function")Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable        
// shared options 
Ext架构分析(2)--理解Ext.util.Observable
        this.addListener(e, o[e], o.scope, o); 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable      }
elseExt架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable        
// individual options 
Ext架构分析(2)--理解Ext.util.Observable
        this.addListener(e, o[e].fn, o[e].scope, o[e]); 
Ext架构分析(2)--理解Ext.util.Observable      }
 
Ext架构分析(2)--理解Ext.util.Observable    }
 
Ext架构分析(2)--理解Ext.util.Observable    
return
Ext架构分析(2)--理解Ext.util.Observable  }
 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable  o 
= (!|| typeof o == "boolean"? Ext架构分析(2)--理解Ext.util.Observable{} : o; 
Ext架构分析(2)--理解Ext.util.Observable  eventName 
= eventName.toLowerCase(); 
Ext架构分析(2)--理解Ext.util.Observable  
var ce = this.events[eventName] || true
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable  
if(typeof ce == "boolean")Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable    
//事件不存在则新建一个Event对象并把它纳入event数组 
Ext架构分析(2)--理解Ext.util.Observable
    ce = new Ext.util.Event(this, eventName); 
Ext架构分析(2)--理解Ext.util.Observable    
this.events[eventName] = ce; 
Ext架构分析(2)--理解Ext.util.Observable  }
 
Ext架构分析(2)--理解Ext.util.Observable  
//调用event的addListener方法 
Ext架构分析(2)--理解Ext.util.Observable
  ce.addListener(fn, scope, o); 
Ext架构分析(2)--理解Ext.util.Observable}
 
Ext架构分析(2)--理解Ext.util.Observable
除了支持addListener方法,Obserable还提供了一个addEvent方法,通过该方法,Observable可以绑定多个不包含处理句柄的Event对象:
 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservableaddEvents : function(o)Ext架构分析(2)--理解Ext.util.Observable{
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable    
if(!this.events)Ext架构分析(2)--理解Ext.util.Observable{
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable        
this.events = Ext架构分析(2)--理解Ext.util.Observable{};
Ext架构分析(2)--理解Ext.util.Observable    }

Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable    
if(typeof o == 'string')Ext架构分析(2)--理解Ext.util.Observable{
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable        
for(var i = 0, a = arguments, v; v = a; i++)Ext架构分析(2)--理解Ext.util.Observable{
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable          
if(!this.events[a])Ext架构分析(2)--理解Ext.util.Observable{
Ext架构分析(2)--理解Ext.util.Observable            o[a] 
= true;
Ext架构分析(2)--理解Ext.util.Observable          }

Ext架构分析(2)--理解Ext.util.Observable        }

Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable    }
elseExt架构分析(2)--理解Ext.util.Observable{
Ext架构分析(2)--理解Ext.util.Observable        Ext.applyIf(
this.events, o);
Ext架构分析(2)--理解Ext.util.Observable    }

Ext架构分析(2)--理解Ext.util.Observable  }
,
Ext架构分析(2)--理解Ext.util.Observable


为了方便使用,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方法随时对于事件进行暂停和继续:
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservablesuspendEvents : function()Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable  
this.eventsSuspended = true
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservableresumeEvents : 
function()Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable  
this.eventsSuspended = false
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.Observable

当然,通过fireEvent方法,你可以触发制定的事件:
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservablefireEvent : function()Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable  
if(this.eventsSuspended !== true)Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable    
//arguments[0]就是你需要触发的事件 
Ext架构分析(2)--理解Ext.util.Observable
    var ce = this.events[arguments[0].toLowerCase()]; 
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.Observable    
if(typeof ce == "object")Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observable      
return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1)); 
Ext架构分析(2)--理解Ext.util.Observable    }
 
Ext架构分析(2)--理解Ext.util.Observable  }
 
Ext架构分析(2)--理解Ext.util.Observable  
return true
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.Observable


Observable还通过capture和releaseCapture提供了对于事件处理函数的拦截机制:
Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservableExt.util.Observable.capture = function(o, fn, scope)Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observableo.fireEvent 
= o.fireEvent.createInterceptor(fn, scope); 
Ext架构分析(2)--理解Ext.util.Observable}

Ext架构分析(2)--理解Ext.util.ObservableExt架构分析(2)--理解Ext.util.ObservableExt.util.Observable.releaseCapture 
= function(o)Ext架构分析(2)--理解Ext.util.Observable
Ext架构分析(2)--理解Ext.util.Observableo.fireEvent 
= Ext.util.Observable.prototype.fireEvent; 
Ext架构分析(2)--理解Ext.util.Observable}

上一篇:仿IOS弹出框及提示框(含Demo)


下一篇:Android在广播接收者中弹出对话框