日志文章

2008年02月04日 10:09:23

Ext架构分析(2)--理解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;
};


Tags: Observable   Ext  

类别: Ext |  评论(10) |  浏览(3676) |  收藏
10楼 [匿名]b9zb7dg6 2009年11月05日 11:46:35 Says:
%E6%9C%8D%E8%A3%85%E6%89%B9%E5%8F%91,5%E5%85%83%E8%B5%B7www.aliichina.com%E8%AE%A2%E8%B4%A7QQ:1036162405%E3
9楼 [匿名]gbdnsfzk 2009年11月04日 11:02:01 Says:
%E4%B8%9C%E8%8E%9E%E5%B8%82%E5%AF%8C%E7%BF%94%E5%85%AC%E5%8F%B8%E5%BA%9F%E6%97%A7%E7%89%A9%E8%B5%84%E5%9B%9E%E6%94%B6,%E4%B8%93%E4%B8%9A%E6%94%B6%E8%B4%AD%E9%A1%B9%E7%9B%AE%E5%A6%82%E4%B8%8B%EF%BC%9A%E5%BA%9F%E9%93%9C%EF%BC%8C%E9%93%9C%E7%BA%BF%EF%BC%8C%E5%BA%9F%E9%93%9D%EF%BC%8C%E5%90%88%E9%87%91%E9%93%9D%EF%BC%8C%E5%BA%9F%E9%92%A8%E9%92%A2%E7%B1%BB%EF%BC%9A%E6%8A%A5%E5%BA%9F%E7%A1%AC%E8%B4%A8%E5%90%88%E9%87%91%E5%88%B6%E5%93%81%EF%BC%88%E9%93%A3%E5%88
8楼 [匿名]nyg4kdiw 2009年10月24日 01:43:26 Says:
%E4%BE%9B%E5%BA%9407%E5%B9%B4%E4%BA%8C%E6%89%8B%E4%B9%85%E4%BF%9D%E7%94%B0sr75%E6%94%B6%E5%89%B2%E6%9C%BA%E5%A3%B9%E5%8F%B0%EF%BC%8C%E6%B6%A1%E8%BD%AE%E5%A2%9E%E5%8E%8B75%E9%A9%AC%E5%8A%9B%EF%BC%8C%E5%8E%9F%E8%A3%85%E9%A9%BE%E9%A9%B6%E5%AE%A4%EF%BC%8C%E5%B8%A6%E7%A9%BA%E8%B0%83%EF%BC%8C%E6%AF%8F%E5%B0%8F%E6%97%B6%E6%94%B6%E5%89%B2%E6%B0%B4%E7%A8%BB10%E5%88%B015%E4%BA%A9%EF%BC%8C%E6%98%AF%E5%86%9C%E5%9C%BA%E7%A8%BB%E9%BA%A6%E6%94%B6%E5%89%B2%E4%BD%9C%E4%B8%9A%E7%9A%84%E5%BE%97%E5%8A%9B%E5%8A%A9%E6%89%8B%E3
7楼 [匿名]ubbo4x90 2009年10月22日 13:45:07 Says:
%E6%9C%BA%E7%A5%A8%E9%AA%8C%E8%AF%81%E5%90%8E%E5%86%8D%E4%BB%98%E6%AC%BEhttp://jp.518jip.cn%0D%0A%E5%9B%BD%E9%99%85%E6%9C%BA%E7%A5%A8http://jip.58jip.cn%E7%89%B9%E4%BB%B7%E6%9C%BA%E7%A5%A8http://www.jip8.cn%E7%95%99%E5%AD%A6%E7%94%9F%E6%9C%BA%E7%A5%A8http://jip.58jip.cn%0D%0A2%E6%8A%98%E6%9C%BA%E7%A5%A8%E9%A2%84%E5%AE%9Ahttp://jip.58jip.cn%20%E7%89%B9%E4%BB%B7%E6%9C%BA%E7%A5%A8%E9%A2%84%E5%AE%9Ahttp://www.jip8.cn%20%E5%9B%BD%E9%99%85%E6%9C%BA%E7%A5%A8%E6%9F%A5%E8%AF%A2http://jp.518jip.cn%20%E7%95%99%E5%AD%A6%E7%94%9F%E6%9C%BA%E7%A5%A8%E6%9F%A5%E8%AF%A2%20http://jp.518jip.cn%E5%85%8D%E8%B4%B9%E9%A2%84%E5%AE%9A%E7%95%99%E5%AD%A6%E7%94%9F%E6%9C%BA%E7%A5%A8http://jip.58jip.cn%E6%97%85%E6%B8%B8%20%E8%87%AA%E7%94%B1%E8%A1%8Chttp://www.58jip.cn%20%E5%85%8D%E8%B4%B9%E9%A2%84%E5%AE%9A%E7%89%B9%E4%BB%B7%E6%9C%BA%E7%A5%A8http://www.jip8.cn%20%E6%89%93%E6%8A%98%E6%9C%BA%E7%A5%A8%E9%A2%84%E5%AE%9A%20http://jp.518jip.cn%0D%0A%E6%9C%BA%E7%A5%A8%E9%AA%8C%E8%AF%81%E5%90%8E%E5%86%8D%E4%BB%98%E6%AC%BEhttp://www.jip8.cn%E6%9C%BA%E7%A5%A8%E9%AA%8C%E8%AF%81%E5%90%8E%E5%86%8D%E4%BB%98%E6%AC%BEhttp://jip.58jip.cn%E6%9C%BA%E7%A5%A8%E9%AA%8C%E8%AF%81%E5%90%8E%E5%86%8D%E4%BB%98%E6%AC%BE%0D%0Ahttp://www.58jip.cn%E6%9C%BA%E7%A5%A8%E9%AA%8C%E8%AF%81%E5%90%8E%E5%86%8D%E4%BB%98%E6%AC%BEhttp://www.jip58.cn%20.ubbo4x90
6楼 [匿名]sayacqlx 2009年10月17日 21:01:00 Says:
http://www.qqgexing.la%0D%0AQQ%E4%B8%AA%E6
5楼 [匿名]59hvgbkj 2009年10月17日 19:11:58 Says:
%E5%A4%8D%E5%8D%B0%E6%9C%BA%E6%89%93%E5%8D%B0%E6%9C%BA%E7%A2%B3%E7%B2%89%E9%9B%B6%E5%94%AE9%E5%85%83/%E6%96%A4%E8%B5%B7%EF%BC%81%0D%0A%E6%B0%B8%E8%BF%9C%E4%B8%8D%E8%B5%9A%E9%BB%91%E5%BF%83%E9%92%B1%EF%BC%8C%E5%8F%AA%E8%B5%9A%E5%90%88%E7%90%86%E5%88%A9%E6%B6%A6!%0D%0A%E5%A1%91%E6%96%99%E9%99%A4%E9%BB%84%E5%89%82,%E6%84%9F%E5%85%89%E9%BC%93%E4%BF%AE%E5%A4%8D%E6%B6%B2%E6
4楼 [匿名]9izwot5q 2009年06月19日 15:51:28 Says:
%E7%BD%91%E7%AB%99%E6%8E%A8%E5%B9%BF%E8%BD%AF%E4%BB%B6,%E5%8D%9A%E5%AE%A2%E7%BE%A4%E5%8F%91%E8%BD%AF%E4%BB%B6,%E5%8D%9A%E5%AE%A2%E7%BE%A4%E5%BB%BA%E8%BD%AF%E4%BB%B6,%E7%BD%91%E7%BB%9C%E8%90%A5%E9%94
3楼 [匿名]gcusujck 2008年08月20日 13:40:05 Says:
%5Bb%5D%5Bsize=3%5D%E9%BE%99%E5%85%B4%E7%BD%91%E7%BB%9C%E6%98%AF%E5%9B%BD%E5%86%85%E4%B8
2楼 [匿名]小石 2008年04月24日 14:33:39 Says:
很好
正在读代码!
1楼 [匿名]haodaluobo 2008年04月02日 14:57:19 Says:
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);
  }
},

中间部分的for循环处,抄错了.
而且原来的代码好像也是出错了,没有任何实际意义.
而最后的地方Ext.apply这个,个人认为更是设计上的错误,本来addListener内部实现了比较复杂的算法,包装了Event(Event类从设计上看还是个内部类),但是这里却要直接的灌入,破坏了设计思路.
发表评论
看不清楚,换一张