[EXTJS中基于事件的编程探究] 2018黑天鹅事件
摘要：随着Web2.0时代的到来和AJAX技术的普及，出现了各种基于Javascript的面向对象的开发框架，为开发者带来了很大的便利。以ExtJS为例，结合实际案例对如何利用以基于事件的方式进行结构清晰、耦合性低和重用性强的编程进行了解析。
关键词：Javascript；面向事件；ExtJS
中图分类号：TP312文献标识码：A文章编号：16727800（2012）008005003
作者简介：刘怀北(1960-)，男，福建省科学技术信息研究所工程师，研究方向为计算机应用。0引言
随着Web2.0时代的到来和AJAX技术的普及，Javascript得到了各种浏览器的广泛支持，并在Web应用开发中起着越来越重要的作用。近年来，出现了各种基于Javascript所衍生出来的面向对象的开发框架，例如jQuery、ExtJS等，为开发者提供了面向对象的编程方式，很大程度地降低了开发者使用Javascript进行Web应用开发的难度。通过使用这些框架，开发者能够改善之前Javascript代码难以阅读和维护的状况。然而，如何使用这些框架开发出结构清晰、耦合性低和重用性高的代码仍然是大多数开发者所要面对的一个问题。为此，本文将以ExtJS为例，对如何利用以基于事件的方式进行编程来解决这些问题进行解析。
1ExtJS简介
ExtJS是一款搭建在Javascript基础之上的开源编程框架，由Sencha公司推出，目前版本已更新至4.0，其具有以下特点：①面向对象编程；②完善的事件监听与响应机制；③跨浏览器支持；④丰富的可扩展控件支持；⑤高效美观的图表和绘图组件。
ExtJS由于其实用性、开源协议以及对于跨浏览器和图表等高级功能的良好支持，越来越受到开发者的青睐，成为进行大型Web项目前端开发的重要工具。同时，开发者也可以通过Adobe公司的AIR平台整合使用ExtJS框架进行传统客户端的开发。
2基于事件的编程
ExtJS对于事件监听和响应有着一套良好的机制，相关接口与通信过程主要由类Ext.util.Observable来定义与实现。Ext.util.Observable处在其类层次结构中的底层，被所有界面元素组件类继承。任何Ext.util.Observable类及其子类拥有fireEvent和addListener两个方法，分别用于触发事件和添加事件响应。
2.1事件的触发与响应
在ExtJS中，触发一个事件需要调用fireEvent方法，该方法具体如下：
fireEvent(String eventName, Object... args): Boolean
其中，第一个参数为要触发事件的名称，之后可以跟有0个或多个参数，由开发者根据事件的需求自行定义，这些参数将传给任意一个该事件监听者的回调函数。方法的返回值为Boolean类型，返回true，仅当某个该事件监听者的回调函数返回false时，则返回false，并停止将事件传递到下一个监听者。
在ExtJS中，定义一个事件的响应动作通过调用addListener方法来实现，该方法具体如下：
addListener(String eventName, Function handler, \[Object scope\], \[Object options\]):void
其中，第一个参数为要监听的事件名称；第二个参数为事件响应时的回调函数，该函数的传入参数为事件触发时所发出的参数；第三个和第四个参数可选，分别表示回调函数的Scope对象和额外添加给回调函数的一个传入参数，该参数将添加至最后。
2.2案例
接下来，本文将列举一个实际的案例来解析面向事件的编程方式的优点及其所能避免的问题。
图1Feed阅读器案例
图1为ExtJS开发包中的一个示例程序，是一个基于浏览器的简易的feed阅读器。从界面上来看，可以将该界面分成3个部分：①论坛列表：已订阅的论坛列表，对应FroumList类；②帖子列表：已选中论坛中的帖子，对应ThreadList类；③帖子内容：已选中帖子的内容，对应ThreadContent类。
当用户从“论坛列表”界面中选择一个论坛时，在“帖子列表”的界面部分会相应地加载该论坛中的所有帖子，用户选中某一个帖子后，则进一步在“帖子内容”界面中加载该帖子的完整内容。这一系列的动作反应了3个类之间的相互关系，可以通过下图2体现出来。
图2各类间的关联
显而易见，当FroumList中的某项froum被选中时，需要通过调用ThreadList类中的showThreads(froum)方法来显示相应的帖子列表；当ThreadList中的某项thread被选中时，又需要调用ThreadContent类中的showContent(thread)方法来显示帖子的内容。面对这样的问题，开发者通常会很自然地想到通过基于引用的方式来实现。在ExtJS编程过程中，要实现这种关系有如下几种不同的方式。
2.2.1基于引用的方式
(1)在实例化时，设置id进行引用，例如在实例化ThreadList时：
var threadList = new ThreadList({
id:’mythreadlist’});
而在定义FroumList类的显示选中论坛所有帖子的方法时：
Ext.extend(FroumList, ‘Ext.grid.Panel’, {
showThreadOfSelectedFroum: function(selectedFroum){
//通过预设置的id获得引用
var threadList = Ext.getCmp(‘mythreadlist’);