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

本文深入解析了Ext.util.Observable模块的功能,包括其事件处理机制、如何使用addListener和removeListener方法、addEvent方法的应用以及如何通过fireEvent触发事件。此外,还介绍了Observable提供的事件拦截机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

理解Ext.util.Observable

Observable维护了一个events数组,并提供了更加方便的对于事件的封装和调用机制。同Event一样,它也提供了addListenerremoveListener方法。它提供的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;
  }
  //
调用eventaddListener方法
  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);
    }
  },


为了方便使用,observableaddListenerremoveListener提供了一个更加简洁的所写:onun
Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;
Ext.util.Observable.prototype.un = Ext.util.Observable.prototype.removeListener;

你可以通过suspendEventsresumeEvents方法随时对于事件进行暂停和继续:
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
还通过capturereleaseCapture提供了对于事件处理函数的拦截机制:
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;
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值