ExtJs框架在社区信息服务系统满意度中的应用研究

王冠宇

北京青年政治学院 北京 100102

0 引言

大多数社区信息服务系统采用对现实的模拟对网站结构进行划分，网站栏目复杂，页面布局不科学，用户操作界面不够方便友好，操作方式不够标准统一，数据交换格式不标准等问题，系统整体架构和技术有待提升。用户体验要求以用户为中心进行组织设计和提供服务， 从技术选择和信息内容组织考虑以适应用户需求和服务。这些问题的解决需要借助一些新的框架技术如ExtJs来实现。

1 ExtJs技术

1.1 ExtJs富客户端技术

在富客户端技术中，客户端不仅仅是用户进行浏览的工具，而是作为整个系统的一部分，应用客户机的处理能力来处理数据，而不是将数据的处理都发往服务器端，由服务器端来进行处理。在富客户端的设计中，主要有三大基本要素。

(1) 客户端是应用而不是内容

在传统的Web应用中，浏览器只是简单视图，负责显示系统状态，并收集用户信息提交给服务器，浏览器没有任何逻辑功能。当然，在传统的Web应用中，也不允许浏览器中包含逻辑，因为如果页面中包含逻辑，随着用户请求的提交，页面将会被丢弃，所有的逻辑都将丢失。采用ExtJs则完全不同，因其无须刷新页面即可完成内容更新，浏览器不仅可以包含业务逻辑，还可以保存用户会话状态。

采用ExtJs应用相对传统Web应用有效的减轻了服务器的负担，节约了网络带宽，提高了用户体验。

(2) 用户交互的流畅和连续

而在富客户端应用中，由于数据的传输是一步的，用户感觉不到这种数据传输操作，提高用户的体验，同时富客户端的实际中，加入防止重复提交的机制，防止了在传统Web应用程序中常见的由于用户重复提交造成的系统错误。

同时，富客户端技术还可以捕获用户的操作，对用户的客户端状态进行保存，这就使得Web应用的Ul体验可以全面提升到桌面应用程序的高度。

1.2 ExtJs的特点

Ext的设计初衷就是，尽可能完善UI组件库而不需要其他库的帮忙；所有的UI组件都属于基于观察者(Observer)模式的事件驱动型设计。Ext对页面的要求本身就是Unobtrusive 的，有利于做到HTML脚本之间的分离。良好的兼容性，能在多种平台下运行。兼容四大浏览器；服务端方面，Ext是一种与服务器中立的语言，使得其它特定语言的库亦可用于Ext处理Ajax服务。只要返回Ext能处理的数据，对任何一种类型的服务端是无要求的。

2 ExtJs框架在提高满意度方面的应用

2.1 单页系统

单页系统OPOA(One Page，One Application)，即一个页面就是一个应用系统，整个系统只有一个页面。这样，系统将不再弹出窗口，不再整个页面进行刷新，从而加快响应速度，提高客户体验。同时，由于RIA系统通常会有大量的js，css等，OPOA使系统只需下载一次这些文件即可。例如，Ext的核心包ext-all.js压缩后仍达600 K，如果每打开一个页面都要下载一次，客户端的响应速度必然会受到影响，而OPOA的使用则较好地避免了此种情况。

2.2 服务器响应及时

传统的Web应用的每次请求都会生成整个页面。在同一个应用中，不同的页面往往有大量一致的内容，比如导航列表，修饰图片等，这些重复内容的多次下载无疑会加重服务器的负载。应用ExJs后，网络负载主要集中页面的第一次下载。一旦页面下载成功，就相当于在客户端部署了复杂的应用。客户端负责与服务器通信，从服务器获取必须更新的部分数据，而不是整个页面内容。因此，累积网络流量比传统的Web应用要小得多。

在传统客户端的Web应用程序中，服务器端传给客户端的是内容，即：已经组织好的整个页面的数据，客户端仅仅是负责显示。而在富客户端的应用中，服务器端发给客户端的仅仅是客户端需要更新的数据，而所有的数据的组织和显示都是在客户端进行的。

2.3 动态加载JavaScript 代码

对于一个ExtJs系统来说，需要在客户端编写许多JavaScript 代码，对应的 JavaScript 文件自然也会很多，如果将这些文件进行全部加载到用户的浏览器中，一方面在系统中用不到的加载会造成多余的网络传输，另一方面浏览器解析大量的 JavaScript 代码会导致性能下降，这两方面都会极大的影响用户的观感，使得用户需要等待，降低用户的体验。所以我们在处理 JavaScript 的加载，是采取动态加载的方式，即主要是采用以下两种方式：

(1) 不需要加载的 JavaScript 文件就绝不加载。

(2) 需要加载的 JavaScript 文件直到需要时候加载，不需要的就绝不加载。

2.4 客户端状态保存

由于系统内部的一些控件是可以随意拖拽、各个窗口的位置、大小可以随意变动，在我们第一次进入系统的时候对系统内部各个控件的状态进行了一次设置，那么我们下一次在进入系统后便希望能继续保留原来控件的状态，这里就涉及了一个客户端状态保存的问题。这无疑是一个非常实用的功能。这里 ExtJs也包含提供了状态保存机制，其主要的控件：GridPanel，FormPanel 等，都提供了状态保存的功能，这就提高了用户体验。

2.5 ExtJs与后台交互实现动态树

在社区信息服务系统中，树形结构是一种常用的展示方式，比如分类信息和地区信息等。在传统的Web开发中，往往一次性将整棵树传送到前台进行构造，对于节点数量比较庞大的树，这样的实现方式往往需要消耗大量的系统资源，同时客户端的等待时间也比较漫长。结合用户实际使用情况，大部分用户只是用到树形结构中的某一些节点，并不需要用到所有节点。换句话说，大部分的树节点用户是不关心的，这些节点的是否加载并不会影响用户使用，但是采用一次性全部加载的方式既消耗了系统资源，等待时间较长也无法提供良好的用户体验。

在这样的情况下，ExtJs动态树的实现是一个很好的解决方法，动态树的实现思路在于不是一次性加载所有树节点，而是当点击树中某个节点时才生成其子节点，这样就避免了一次性加载整棵树，这种树节点异步加载的实现方式既节约了系统资源，也提高了执行速度改善以获得较好的用户体验。

2.6 ExtJs分页

在社区信息服务系统系统中，分页是常见的一种技术，它在处理大数据量、提高用户体验方面提供了很好的解决方案。

ExtJs技术分页的方法是：根据Web客户端提供的一些参数(如页面大小、当前页来执行查询操作，以得到符合条件的一页记录，然后将查询结果通过Web服务器最终交付给用户。在数据持久层进行分页的优势在于：数据库每次只需要返回用户所请求的数据记录，数据库查询效率高也不会产生冗余数据。从数据源头就开始进行分页，减少整个执行过程的数据流量，从而提高了Web应用整体的查询性能。

选择使用在数据持久层进行分页的方式实现分页。首先需要在表示层使用ExtJs构建分页组件。ExtJs框架实现表示层的另一好处在于局部刷新。页面数据发生改变时，在使用ExtJs实现页面分页时，当显示数据发生改变，不用刷新整个页面，只用局部刷新发生改变的位置，减少了数据传输量，同时在请求分页数据时，用户可以继续操作页面其他部分，改善了用户体验。

2.7 统一Web程序的界面设计

ExtJs提供大量用户界面元素，这些元素包括表单、对话框、选项卡、树和网格、页面布局等，用户可以直接使用这些元素来快速开发自己的页面，同时也可以扩展自己的页面元素以供使用。通过ExtJs技术可以使页面效果达到桌面应用程序的风格，给用户提供一个友好的人机交互界面，同时可以提高其操作的方便性，在Web界面设计和实现中应用ExtJs技术来改善用户体验。

一个系统的布局直接决定了所有页面的组织结构。设计一个系统布局需要从很多方面考虑，包括页面组织方式、页面实现的复杂度、用户使用习惯、操作的易用性、弱化用户工作强度、需求变更适应性等等。当然在一个系统中是不可能兼顾到所用这些特性的，它们之间有的本身就存在冲突，这就要求设计人员需要与客户多进行沟通从而做出取舍，比如系统如果需求变更性可能很大就需要多考虑系统变更的适应性，如果某个页面使用频率更高，就需要考虑页面的易用性方面的设计。

(1) Web页面板块分区的灵活性

ExtJs框架的viewport布局模式将整个系统布局划分为上、下、左、右、中五个功能区域，适应不同的系统布局要求，用户布局时可以根据需要选择其中的任意区域，每个区域都具有自己的主要功能，从而使系统结构明晰，便于系统的使用。

(2) 布局能够满足用户使用系统时的不同需要

为了方便用户的操作，用户可以调整每个区域的大小或者隐藏暂时不需要的功能区域，而其它区域的页面结构不会改变且操作的区域可以自动适应窗口的大小。

(3) 页面的有状态性

当前技术本身不能保证页面的状态，比如用户在页面所做的操作如输入的表单数据或以前访问过的页面等等，一旦页面提交或访问了新的链接，当前页面的状态已经不存在。这里布局将对页面提供一个很好的组织结构，可以使得用户访问新页面时保证已经访问的页面不丢失，直到用户自己关闭该页面窗口为止，同时可以保存用户在这些页面所做的操作。这样可以大大提高用户系统使用的方便性和减少用户的工作量。

3 结束语

社区居民是使用社区信息服务应用系统的主体，提高用户体验，满足社区居民的使用应该是社区信息服务应用系统的重要任务。针对传统社区信息服务应用系统不能满足广大社区用户功能需求，不能给用户带来完美的界面体验的问题，通过应用 ExtJs框架设计社区信息系统，突出了基于ExtJs 的富客户端的优越性，系统人机界面设计是设计、艺术、技术和人机交互科学的高度统一，使得社区信息服务系统功能丰富，操作方便，界面优化，用户体验良好，积极的用户体验使得用户轻松自如、高效地完成功能应用，增加亲切感、舒适感和成功感，大大提高了社区信息服务系统的用户满意度。

[1] 曹庆娟.基于用户体验的政府网站用户满意度研究[D].情报科学.2009.

[2] 鞠凤娟,吴志峰.EXT技术在Web界面设计与实现中的应用研究[D].计算机与现代化.2008.

[3] 何礼,陈俊.基于Ext的单页系统设计与研究[D].成都大学学报(自然科学版).2009.

[4] 刘莹莹.社区信息服务顾客满意度测评研究[D].湘潭大学.2011.

[5] 王渊,怀自国,罗怡桂.基于Ext + Sp ring +Hi bernate的Web系统开发架构的研究与应用.计算机与现代化.2009.