《ExtJS 3详解与实践》阅读补充资料：capture()捕获事件

最新推荐文章于 2023-04-27 14:26:11 发布

原创最新推荐文章于 2023-04-27 14:26:11 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #firebug #function #aop #ext #编程

本文介绍了ExtJS中使用capture()方法捕获和跟踪事件的技巧。通过具体示例展示了如何观察组件事件调用过程，以及如何利用AOP概念进行事件拦截。

静态方法Ext.util.Observable.capture()是一项有趣的功能，它能够将一项事件进行捕获，跟踪该事件发生的经过。捕获事件就是观察Ext JS事件的调用过程。只要是继承了 Ext.util.Observable的组件，调用capture()，便可得知该组件何时何地怎样响应事件，也算是调试组件时的技巧。

// 假设已有一个名为'myWindow'的UI组件，用Ext.getCmp()返回该对象。 Ext.util.Observable.capture(Ext.getCmp('myWindow'), function(e){ try{ console.info(e); }catch(e){ alert(e); } });

在Firebug中运行例程如上图，运行就会有跟踪事件的效果。function(e) {console.info(e);}的作用是控制台输出事件信息（须安装有Firebug）。进入其源码，您会发现实现该功能非常简单，capture函数内只有单独一行o.fireEvent=o.fireEvent. createInterceptor(fn, scope);就是整个capture()的过程。它表示执行原事件函数后，紧接着执行fn函数，近乎于AOP(Aspect Oriented Programming)的概念。AOP 是一种编程技术，更是一种编程思想。Ext框架支持利用回调函数的概念实现了某一时刻的前、后置两个横切点的操作，Ext对Function.prototoype的原型扩展就方便了开发人员在每个切入点上自行编写扩展机制的代码，加入进行多个切入动作。若要取消捕获事件，可以执行相反的方法Ext.util.Observable. releaseCapture()将捕获的事件释放。

另外还有一个彻底的方法捕获事件，那便是用Function.createInterceptor定义新函数，然后修改到Observable 类的原型。

// 这下所有的Ext事件都被捕获了: Ext.util.Observable.prototype.fireEvent = Ext.util.Observable.prototype.fireEvent.createInterceptor(function(){ console.log(this.name); console.log(arguments); return true; });

此处披露的内容是《ExtJS 3详解与实践》的补充内容，完整的资料敬请参阅《ExtJS 3 详解与实践》一书的全面介绍。