论文代写网可分享到:0
代写硕士毕业论文 > 计算机论文 > EXTJS中基于事件的编程探究

EXTJS中基于事件的编程探究

作者:2016-10-08 22:13阅读:文章来源:论文代写
  随着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’);
  threadList.showThreads(
  selectedFroum);
  };
  });
  (2) 在实例化时,直接传入引用变量:
  var threadList = new ThreadList();
  var froumList = new FroumList({
  //引用变量通过构造函数直接传入
  myThreadList: threadList
  });
  在定义FroumList类的显示选中论坛的所有帖子的方法时:
  Ext.extend(FroumList, ‘Ext.grid.Panel’, {
  showThreadOfSelectedFroum: function(selectedFroum){
  //通过保存的引用变量调用
  this.myThreadList.showThreads(selectedFroum);
  };
  });
  以上这2种方法都可以实现我们预期的功能,但是从代码的耦合性和重用性的角度来讲存在较大问题。首先,采用这2种方式编程会使得ForumList类难以获得重用,因为在ForumList的方法中需要直接引用ThreadList的实例变量,使得ForumList与ThreadList出现耦合联系,从而无法作为一个独立的控件独立地在其它地方得到重用;其次,如果采用上述的第一种方式,则还有可能面临出现由于id重复引起的问题。
  2.2.2基于事件的方式
  采用基于事件的方式可以很好地避免上述2种方式所导致的问题,其具体实现方式如下:
  在定义FroumList类的显示选中论坛所有帖子的方法时:
  Ext.extend(FroumList, ‘Ext.grid.Panel’, {
  showThreadOfSelectedFroum: function(selectedFroum){
  //触发相应的事件
  this.fireEvent(‘selectfroum’, selectedFroum);
  };
  });
  在实例化时:
  var froumList = new FroumList();
  var threadList = new ThreadList();
  froumList.addListener(‘selectfroum’, threadList.showThreads, threadList);
  上述代码,通过fireEvent和addListener这2个由ExtJS框架所提供的接口,有效地避免了在FroumList中对ThreadList的引用,从而使得FroumList可以方便地在其它程序中进行重用。同时,采用fireEvent的方式也使得开发者在编程时能够为其添加更多的事件响应,而无需修改FroumList类的代码,从很大程度上增强了代码的简洁性和易扩展性。
  3结语
  本文简要介绍了ExtJS框架中的事件监听与响应机制,并通过一个实际的案例解析了基于事件编程的优势及其所能避免的问题,探讨了Web开发人员在编程过程中应关注的代码耦合性与重用性等问题。
  参考文献:
  \[1\] 袁中旺,宋绍云,王晓燕,等.ExtJS事件机制的探究\[J\].电脑知识与技术,2011(9).
  \[2\]陈道鑫,宋绍云.ExtJS框架在Web软件开发中的应用\[J\].电脑知识与技术,2011(9). 硕士代写论文网文章地址:/jsjlw/2061.html

相关阅读

最新更新

毕业论文代写

写作技巧

认准本站唯一联系方式

论文代写: 78312064

论文发表: 78312674

咨询电话:13281127927

haoyiceo@163.com

安排论文送知网报告

检测结果与学校一致

扫一扫咨询官方微信