日志文章

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 |  评论(14) |  浏览(3731) |  收藏
14楼 [匿名]hu315utv 2009年11月21日 01:15:51 Says:
%E7%A6%BB%E5%AD%90%E6%B8%97%E7%A2%B3%E5%8C%96%E9%92%A8%E5%A4%84%E7%90%86%E5%B7%B2%E8%8D%A3%E8%8E%B7%E5%9B%BD%E5%AE%B6%E5%8F%91%E6%98%8E%E4%B8%93%E5%88%A9(ZL01113768.1)%E6%8A
13楼 [匿名]mjv 2009年11月19日 15:17:54 Says:
[url=http://www.bjzdsj.com/]塑钢门窗[/url]
[url=http://www.drxbw.cn/]保温材料[/url]
[url=http://www.daishusheying.com/]儿童摄影[/url]
[url=http://www.qasd2008.com/]易拉宝[/url]
[url=http://www.qasd2008.com/]北京易拉宝[/url]
[url=http://www.qasd2008.com/]北京展台[/url]
[url=http://www.qasd2008.com/]拉网展架[/url]
[url=http://www.qasd2008.com/]x展架[/url]
[url=http://www.ccckyb.com/]液位计[/url]
[url=http://www.ccckyb.com/prohtml_2/cfb.htm]超声波液位计[/url]
[url=http://www.jiulonghengye.com/]货架[/url]
[url=http://www.jiulonghengye.com/Chinese/Index.asp]货架厂[/url]
[url=http://www.drxbw.cn/]挤塑板[/url]
[url=http://www.piao180.com/]国家大剧院演出票[/url]
[url=http://www.piao180.com/]票务网[/url]
[url=http://www.piao180.com/]票务[/url]
[url=http://www.piao180.com/]中国票务网[/url]
[url=http://www.piao180.com/]中国票务在线[/url]
[url=http://www.piao180.com/]中山音乐堂[/url]
[url=http://www.tnbz.org.cn/]褥疮[/url]
[url=http://www.tnbz.org.cn/]糖尿病足[/url]
[url=http://www.bjsac.net/]防静电地板[/url]

[url=http://www.bj-shenran.com/]磁流体[/url]
[url=http://www.xinyangguang.net/]真皮座套[/url]
[url=http://www.famenbj.cn/]上海阀门[/url]
[url=http://www.famenbj.cn/]北京阀门[/url]
[url=http://www.famenbj.cn/]阀门[/url]
[url=http://www.xieziloubj.cn/]北京搬家[/url]
[url=http://www.jiuhuatijian.com.cn/baijinka.aspx]九华山庄体检中心[/url]
[url=http://www.mlpowerleveling.com/]wow gold[/url]
[url=http://www.Google0508.cn/yb/]月饼[/url]
[url=http://www.Google0508.cn/yb/]月饼团购[/url]
[url=http://www.yuesao58.cn/ys/]月嫂[/url]
[url=http://www.yuesao58.cn/ys/]北京月嫂[/url]

[url=http://www.ccckyb.com/]压力变送器[/url]
[url=http://www.ccckyb.com/]液位变送器[/url]
[url=http://www.mjxianhua.com/]北京鲜花[/url]
[url=http://www.mjxianhua.com/]鲜花订购[/url]
[url=http://www.mjxianhua.com/]鲜花[/url]
[url=http://www.mjxianhua.com/]鲜花预订[/url]
[url=http://www.ccckyb.com/]料位开关[/url]
[url=http://www.ccckyb.com/prohtml_2/cfb.htm]磁翻板液位计[/url]
[url=http://www.ccckyb.com/prohtml_2/fqywj.htm]浮球液位计[/url]
[url=http://www.piao180.com/piaolist.asp?id=28]中国国家大剧院[/url]
[url=http://www.piao180.com/piaolist.asp?id=2]保利剧院[/url]
[url=http://www.piao180.com/piaolist.asp?id=28]国家大剧院[/url]
[url=http://www.piao180.com/piaolist.asp?id=28]国家大剧院演出[/url]
[url=http://www.piao180.com/piaolist.asp?id=28]国家大剧院订票[/url]
[url=http://www.bjxhmj.com/ssyxyh.html]标志设计[/url]
[url=http://www.bjxhmj.com/ssyxyh.html]包装设计[/url]
[url=http://www.bjxhmj.com/]网页设计[/url]
[url=http://www.bjxhmj.com/]网站设计[/url]
[url=http://www.bjxhmj.com/]网站建设[/url]
[url=http://www.Google0508.cn/wzjs.html]Google优化[/url]
[url=http://www.Google0508.cn/wzjs.html]百度优化[/url]
[url=http://www.Google0508.cn/wzjs.html]整站优化[/url]
[url=http://www.Google0508.cn/]Google排名[/url]
[url=http://www.Google0508.cn/]网站推广[/url]
[url=http://www.xinyongka09.cn/]西班牙留学[/url]
[url=http://www.xinyongka09.cn/]韩国留学[/url]
[url=http://www.xinyongka09.cn/]留学韩国[/url]
[url=http://www.xinyongka09.cn/]日本留学[/url]
[url=http://www.xinyongka09.cn/fillbuy.asp]瑞士留学[/url]
[url=http://www.xinyongka09.cn/news.asp]法国留学[/url]
[url=http://www.xinyongka09.cn/news.asp]留学法国[/url]
[url=http://www.xinyongka09.cn/news.asp]澳洲留学[/url]
[url=http://www.xinyongka09.cn/news.asp]留学澳洲[/url]
[url=http://www.xinyongka09.cn/art.asp]澳大利亚留学[/url]
[url=http://www.xinyongka09.cn/art.asp]留学澳大利亚[/url]
[url=http://www.xinyongka09.cn/art.asp]加拿大留学[/url]
[url=http://www.xinyongka09.cn/art.asp]留学加拿大[/url]
[url=http://www.xinyongka09.cn/fillbuy.asp]留学瑞士[/url]
[url=http://www.xinyongka09.cn/fillbuy.asp]意大利留学[/url]
[url=http://www.xinyongka09.cn/fillbuy.asp]留学意大利[/url]
[url=http://www.gdstbj.cn/]管道疏通[/url]            
[url=http://www.gdstbj.cn/qxgd.htm]抽粪[/url]
[url=http://www.gdstbj.cn/qxgd.htm]北京抽粪[/url]
[url=http://www.gdstbj.cn/qxgd.htm]环卫抽粪[/url]
[url=http://www.gdstbj.cn/qxgd.htm]疏通马桶[/url]
[url=http://www.gdstbj.cn/fufw.htm]北京清理化粪池[/url]
[url=http://www.gdstbj.cn/fufw.htm]高压清洗[/url]
[url=http://www.gdstbj.cn/bjgdst.htm]北京疏通下水道[/url]
[url=http://www.gdstbj.cn/qxgd.htm]北京疏通马桶[/url]
[url=http://www.gdstbj.cn/gdst.htm]北京崇文区管道疏通[/url]
[url=http://www.gdstbj.cn/bjgdst.htm]北京宣武区管道疏通[/url]
[url=http://www.datang58.com/hq/]婚庆公司[/url]
[url=http://www.datang58.com/hq/]北京婚庆[/url]
[url=http://www.datang58.com/hq/]北京婚庆公司[/url]
12楼 [匿名]wqtb2na8 2009年11月12日 23:18:06 Says:
%E7%A6%BB%E5%AD%90%E6%B8%97%E7%A2%B3%E5%8C%96%E9%92%A8%E5%A4%84%E7%90%86%E5%B7%B2%E8%8D%A3%E8%8E%B7%E5%9B%BD%E5%AE%B6%E5%8F%91%E6%98%8E%E4%B8%93%E5%88%A9(ZL01113768.1)%E6%8A
11楼 [匿名]68legatz 2009年11月09日 23:27:56 Says:
%E7%A6%BB%E5%AD%90%E6%B8%97%E7%A2%B3%E5%8C%96%E9%92%A8%E5%A4%84%E7%90%86%E5%B7%B2%E8%8D%A3%E8%8E%B7%E5%9B%BD%E5%AE%B6%E5%8F%91%E6%98%8E%E4%B8%93%E5%88%A9(ZL01113768.1)%E6%8A
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类从设计上看还是个内部类),但是这里却要直接的灌入,破坏了设计思路.
发表评论
看不清楚，换一张