日历

2009 7.5 Sun
   1234
567891011
12131415161718
19202122232425
262728293031 
«» 2009 - 7 «»

文章搜索

日志文章

2008年02月04日 09:19:11

Ext架构分析(1)--理解Ext.util.Event

  由于Ext2.0中所有的组件都是由Observable继承而来,理解Ext就需要先从Ext.util.Observable说起,而Observable是对Event对象进行管理,从而理解Observable必须首先从Ext.util.Event说起。
  Ext.util.Event是一个封装的非常精致的对象,但和你想象的不同,Event同任何的HTML DOM元素没有任何的关系(尽管Ext是处理HTML元素的),实际上,它是一个通用的事件及其事件的处理的对象。 也许有朋友要问,HTML Element本身已经支持了事件,为什么还要再重新设计一套Event机制呢?其实,基本上所有的javascript框架都会实现自己的Event机制,原因很多,但是至少有一点:HTML元素对于事件的处理是通过简单的单一绑定实现,也就是说,如果不进行任何的封装,你的事件只能唯一的绑定到一个事件处理句柄,举个例子:
  var e=document.getElementById("test");
  e.onclick=function(){alert("handle1")};
  e.onclick=function(){alert("handle2")};
  运行的结果你回发现,只会弹出一个"handle2"的alert框,因为第一个事件已经被第二个事件重载了。而使用Ext框架,你可以放心的解决这个问题,同一个事件可以依次被绑定到多个事件处理句柄上。
  Ext.util.Event对象构建器需要传入两个对象:obj(处理事件的缺省对象),name(事件名称)。在构建Event对象时,Event对象会同时构建一个事件的处理函数的数组:listeners,通过这个数组实现了一个事件的多个事件句柄函数的处理。
Ext.util.Event = function(obj, name){
  this.name = name;
  this.obj = obj;
  this.listeners = [];
};

通过Event的fire方法就可以依次触发该数组中的处理函数。 实际上,fire方法在遍历listeners数组中的处理函数过程中,只要处理函数的返回值为false,则不再继续运行后续的处理函数。所以,可以通过检查fire方法的返回值得知事件处理函数是否完全被运行。
  fire : function(){
    var ls = this.listeners, scope, len = ls.length;
    if(len > 0){
      this.firing = true;//通过firing可以保证多个事件处理函数不会并发运行
      var args = Array.prototype.slice.call(arguments, 0);//slice方法可以有效的进行数组的克隆
      for(var i = 0; i < len; i++){
        var l = ls;
        //事件的处理,只要有一个处理函数返回false,整个事件处理就被停止
        if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
          this.firing = false;
          return false;
        }
      }
      this.firing = false;
    }
    return true;
  }

  Event可以通过addListener、removeListener、clearListeners(移除所有的事件处理函数)方法对listeners进行管理。但是,Listener中保存的事件处理函数实际上并不是addListener传递的函数,实际上,addListener传入的方法通过createListener对事件的处理函数进行了封装,通过封装,实现了对通一个重复事件的的三种不同处理方式:delay(延迟运行)、single(移除Listener中的处理函数,仅运行当前的处理函数)、buffer(避免重复运行处理函数)。
  createListener : function(fn, scope, o){
    o = o || {};
    scope = scope || this.obj;
    var l = {fn: fn, scope: scope, options: o};
    var h = fn;
    if(o.delay){
      h = createDelayed(h, o, scope);
    }
    if(o.single){
      h = createSingle(h, this, fn, scope);
    }
    if(o.buffer){
      h = createBuffered(h, o, scope);
    }
    l.fireFn = h;
    return l;
  }


  var createBuffered = function(h, o, scope){
    var task = new Ext.util.DelayedTask();
    return function(){
        task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
    };
  };

  var createSingle = function(h, e, fn, scope){
    return function(){
        e.removeListener(fn, scope);
        return h.apply(scope, arguments);
    };
  };

  var createDelayed = function(h, o, scope){
    return function(){
        var args = Array.prototype.slice.call(arguments, 0);
        setTimeout(function(){
          h.apply(scope, args);
        }, o.delay || 10);
    };
  };


Tags: Ext Event  

类别: Ext |  评论(14) |  浏览(5034) |  收藏
一共有 14 条评论
14楼 [匿名]9izwot5q 2009年06月19日 09:50:23 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
13楼 [匿名]wv1124 2009年04月29日 21:10:41 Says:
我没有办法处理监听到Ext.Panel的show事件,也监听不到render等非浏览器事件,这是为什么呢,请高手帮解答一下,谢谢了!
12楼 [匿名]的 2009年02月26日 12:32:30 Says:
没看太明白,EXT封装应该是比较隐秘的!!
11楼 [匿名]hehe 2008年10月17日 10:42:24 Says:
学习
10楼 [匿名]cfive 2008年07月26日 10:31:57 Says:
Ext util.Event 中的 name 似乎没有起到什么作用...
9楼 [匿名]cfive 2008年07月26日 10:30:35 Says:
如果不进行任何的封装,你的事件只能唯一的绑定到一个事件处理句柄
...这个说的有些过了吧...

ie 中可以使用 attachEvent
ff 中可以使用 addListener

Ext中实现的事件机制,完全是为了在组件中构造一个自己的事件系统,仅管最后也还是直接或间接的挂钩到 DOM 中的事件去...
8楼 [匿名]gis programmer 2008年07月03日 13:01:46 Says:
在Ext.util.Event在Observable.js中定义!
7楼 [匿名]clint 2008年06月25日 15:08:09 Says:
高手,这几篇文章非常好!
6楼 [匿名]yihj 2008年04月26日 15:54:52 Says:
我也没找到~~,不晓得在哪里找到的?
5楼 程序员 2008年04月25日 08:32:32 Says:
找到了
终于找到了 呵呵
4楼 程序员 2008年04月24日 18:07:34 Says:
真的是找不到啊
新手求教
3楼 程序员 2008年04月24日 18:06:41 Says:
在Ext2.0 API中找不到Ext.Event啊
2楼 [匿名]85732062 2008年03月26日 13:58:27 Says:
在Ext2.0 API中找不到Ext.Event啊
1楼 [匿名]xfan1982 2008年03月23日 09:13:42 Says:
楼主是个高手,这几篇文章非常好!
发表评论
看不清楚,换一张