论坛首页 Web前端技术论坛

【Extjs学习四】Extjs2事件机制源码分析图解

浏览 5280 次
精华帖 (0) :: 良好帖 (12) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-09-09  
EXT将事件分为了两种:自定义事件与浏览器事件。

自定义事件:
按字面意思就是用户自己定义的事件,这个事件通常与组件相关。并且需要用户根据组件的状态自己触发。相关的类Ext.util.Observable 、Ext.util.Event(Observable.js)。Ext.util.Observable是所有组件(component)的父类,它使得所有的组件都可以任意的添加自定义事件,它的events属性对事件进行维护,这些事件实际都是Ext.util.Event对象,Ext.util.Event对象里的listeners属性对与该事件相关的处理器进行维护。Observable给所有的子类提供了一个统一的接口来发布事件以及管理事件,这一特性对于组件来说是至关重要的。

浏览器事件
即传统意义上的鼠标单击、移动等等事件,这些事件是由浏览器根据用户的动作自己触发的,与页面元素紧密关联。相关的类Ext.Element 、Ext.EventManager、Ext.EventObject、Ext.lib.Event 。Element包含了常见的DOM方法和属性,提供一个快捷的、统一的、跨浏览器的接口,内置了常用的DOM节点的动作,并且是跨浏览器的定位的位置、大小、动画、拖放等等。对事件的处理,Element实际将这一处理委托给了EventManager,由EventManager对页面所有的浏览器事件进行管理,例如增加事件处理器、移除事件处理器等等,另外EventManager还定义了几个很重要的方法:onDocumentReady、onWindowResize、onTextResize。其中onDocumentReady尤为重要,通常在页面需要通过它来启动我们的AJAX程序,它会在页面document渲染完毕而图片等还未下载时调用我们的启动函数。至于EventObject,它则是对原始的浏览器事件进行了封装,提供给事件处理器一个统一一致的事件接口。Ext.lib.Event呢?EventManager的很多功能其实是调用它完成的,它的listeners、unloadListeners维护着所有的事件处理器。统一维护的好处之一就是在页面unload的时候可以统一干掉它们,避免内存泄露。

 

我感觉理解得还不错;

 

ext代码机制核心部分只需要了解ext.util.event 和obserable 应该这2个类不像浏览器事件需要hack各个浏览器的差异。

 

对整个事件的分析见附件图片,经过分析,我感觉ext的事件机制有如下几个问题:

1、ext.lib.event 不支持一个元素同一事件监听多个函数,即不支持堆栈调用,举例如下:

el.on('click',fn1);

el.on('click',fn2);

我希望是执行function(){

fn1();

fn2();

}();

目前是执行function(){

fn2();

}();

 

但是我也不知道这个功能有没有必要。

 

2、ext.eventobject 虽说是针对ext.lib.event的扩展,抽象了keycode在各浏览器的表现,增加了一些方法,但是缺少event.lib.event的on和un方法,从代码分层的角度来看,感觉不好。

 

3、ext.eventobject依赖了ext.element上的方法,从ext整个代码的分层来看,最合理的方式应该是ext为基础,ext.util为基础2,ext.lib为基础3,element为基础4,其他widget应该是在这个基础上进行的扩展。现在ext的代码给我的感觉分层不是很清晰。

 

4、事件机制没有保持一致,Element其实可以继承obserable,如果不继承也可以保证两者接口一致

 

 

ps:javaeye怎么上传的emf格式图片firefox下看不到呢?

 

 

  • 大小: 21 KB
   发表时间:2008-09-11  
1、ext.lib.event 不支持一个元素同一事件监听多个函数,即不支持堆栈调用,举例如下:

el.on('click',fn1);

el.on('click',fn2);

我就是不喜欢EXT的这一特点,每次都被覆盖掉。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics