王冠宇

北京青年政治學(xué)院 北京 100102

0 引言

大多數(shù)社區(qū)信息服務(wù)系統(tǒng)采用對(duì)現(xiàn)實(shí)的模擬對(duì)網(wǎng)站結(jié)構(gòu)進(jìn)行劃分，網(wǎng)站欄目復(fù)雜，頁面布局不科學(xué)，用戶操作界面不夠方便友好，操作方式不夠標(biāo)準(zhǔn)統(tǒng)一，數(shù)據(jù)交換格式不標(biāo)準(zhǔn)等問題，系統(tǒng)整體架構(gòu)和技術(shù)有待提升。用戶體驗(yàn)要求以用戶為中心進(jìn)行組織設(shè)計(jì)和提供服務(wù)， 從技術(shù)選擇和信息內(nèi)容組織考慮以適應(yīng)用戶需求和服務(wù)。這些問題的解決需要借助一些新的框架技術(shù)如ExtJs來實(shí)現(xiàn)。

1 ExtJs技術(shù)

1.1 ExtJs富客戶端技術(shù)

在富客戶端技術(shù)中，客戶端不僅僅是用戶進(jìn)行瀏覽的工具，而是作為整個(gè)系統(tǒng)的一部分，應(yīng)用客戶機(jī)的處理能力來處理數(shù)據(jù)，而不是將數(shù)據(jù)的處理都發(fā)往服務(wù)器端，由服務(wù)器端來進(jìn)行處理。在富客戶端的設(shè)計(jì)中，主要有三大基本要素。

(1) 客戶端是應(yīng)用而不是內(nèi)容

在傳統(tǒng)的Web應(yīng)用中，瀏覽器只是簡單視圖，負(fù)責(zé)顯示系統(tǒng)狀態(tài)，并收集用戶信息提交給服務(wù)器，瀏覽器沒有任何邏輯功能。當(dāng)然，在傳統(tǒng)的Web應(yīng)用中，也不允許瀏覽器中包含邏輯，因?yàn)槿绻撁嬷邪壿?，隨著用戶請求的提交，頁面將會(huì)被丟棄，所有的邏輯都將丟失。采用ExtJs則完全不同，因其無須刷新頁面即可完成內(nèi)容更新，瀏覽器不僅可以包含業(yè)務(wù)邏輯，還可以保存用戶會(huì)話狀態(tài)。

采用ExtJs應(yīng)用相對(duì)傳統(tǒng)Web應(yīng)用有效的減輕了服務(wù)器的負(fù)擔(dān)，節(jié)約了網(wǎng)絡(luò)帶寬，提高了用戶體驗(yàn)。

(2) 用戶交互的流暢和連續(xù)

而在富客戶端應(yīng)用中，由于數(shù)據(jù)的傳輸是一步的，用戶感覺不到這種數(shù)據(jù)傳輸操作，提高用戶的體驗(yàn)，同時(shí)富客戶端的實(shí)際中，加入防止重復(fù)提交的機(jī)制，防止了在傳統(tǒng)Web應(yīng)用程序中常見的由于用戶重復(fù)提交造成的系統(tǒng)錯(cuò)誤。

同時(shí)，富客戶端技術(shù)還可以捕獲用戶的操作，對(duì)用戶的客戶端狀態(tài)進(jìn)行保存，這就使得Web應(yīng)用的Ul體驗(yàn)可以全面提升到桌面應(yīng)用程序的高度。

1.2 ExtJs的特點(diǎn)

Ext的設(shè)計(jì)初衷就是，盡可能完善UI組件庫而不需要其他庫的幫忙；所有的UI組件都屬于基于觀察者(Observer)模式的事件驅(qū)動(dòng)型設(shè)計(jì)。Ext對(duì)頁面的要求本身就是Unobtrusive 的，有利于做到HTML腳本之間的分離。良好的兼容性，能在多種平臺(tái)下運(yùn)行。兼容四大瀏覽器；服務(wù)端方面，Ext是一種與服務(wù)器中立的語言，使得其它特定語言的庫亦可用于Ext處理Ajax服務(wù)。只要返回Ext能處理的數(shù)據(jù)，對(duì)任何一種類型的服務(wù)端是無要求的。

2 ExtJs框架在提高滿意度方面的應(yīng)用

2.1 單頁系統(tǒng)

單頁系統(tǒng)OPOA(One Page，One Application)，即一個(gè)頁面就是一個(gè)應(yīng)用系統(tǒng)，整個(gè)系統(tǒng)只有一個(gè)頁面。這樣，系統(tǒng)將不再彈出窗口，不再整個(gè)頁面進(jìn)行刷新，從而加快響應(yīng)速度，提高客戶體驗(yàn)。同時(shí)，由于RIA系統(tǒng)通常會(huì)有大量的js，css等，OPOA使系統(tǒng)只需下載一次這些文件即可。例如，Ext的核心包ext-all.js壓縮后仍達(dá)600 K，如果每打開一個(gè)頁面都要下載一次，客戶端的響應(yīng)速度必然會(huì)受到影響，而OPOA的使用則較好地避免了此種情況。

2.2 服務(wù)器響應(yīng)及時(shí)

傳統(tǒng)的Web應(yīng)用的每次請求都會(huì)生成整個(gè)頁面。在同一個(gè)應(yīng)用中，不同的頁面往往有大量一致的內(nèi)容，比如導(dǎo)航列表，修飾圖片等，這些重復(fù)內(nèi)容的多次下載無疑會(huì)加重服務(wù)器的負(fù)載。應(yīng)用ExJs后，網(wǎng)絡(luò)負(fù)載主要集中頁面的第一次下載。一旦頁面下載成功，就相當(dāng)于在客戶端部署了復(fù)雜的應(yīng)用?？蛻舳素?fù)責(zé)與服務(wù)器通信，從服務(wù)器獲取必須更新的部分?jǐn)?shù)據(jù)，而不是整個(gè)頁面內(nèi)容。因此，累積網(wǎng)絡(luò)流量比傳統(tǒng)的Web應(yīng)用要小得多。

在傳統(tǒng)客戶端的Web應(yīng)用程序中，服務(wù)器端傳給客戶端的是內(nèi)容，即：已經(jīng)組織好的整個(gè)頁面的數(shù)據(jù)，客戶端僅僅是負(fù)責(zé)顯示。而在富客戶端的應(yīng)用中，服務(wù)器端發(fā)給客戶端的僅僅是客戶端需要更新的數(shù)據(jù)，而所有的數(shù)據(jù)的組織和顯示都是在客戶端進(jìn)行的。

2.3 動(dòng)態(tài)加載JavaScript 代碼

對(duì)于一個(gè)ExtJs系統(tǒng)來說，需要在客戶端編寫許多JavaScript 代碼，對(duì)應(yīng)的 JavaScript 文件自然也會(huì)很多，如果將這些文件進(jìn)行全部加載到用戶的瀏覽器中，一方面在系統(tǒng)中用不到的加載會(huì)造成多余的網(wǎng)絡(luò)傳輸，另一方面瀏覽器解析大量的 JavaScript 代碼會(huì)導(dǎo)致性能下降，這兩方面都會(huì)極大的影響用戶的觀感，使得用戶需要等待，降低用戶的體驗(yàn)。所以我們在處理 JavaScript 的加載，是采取動(dòng)態(tài)加載的方式，即主要是采用以下兩種方式：

(1) 不需要加載的 JavaScript 文件就絕不加載。

(2) 需要加載的 JavaScript 文件直到需要時(shí)候加載，不需要的就絕不加載。

2.4 客戶端狀態(tài)保存

由于系統(tǒng)內(nèi)部的一些控件是可以隨意拖拽、各個(gè)窗口的位置、大小可以隨意變動(dòng)，在我們第一次進(jìn)入系統(tǒng)的時(shí)候?qū)ο到y(tǒng)內(nèi)部各個(gè)控件的狀態(tài)進(jìn)行了一次設(shè)置，那么我們下一次在進(jìn)入系統(tǒng)后便希望能繼續(xù)保留原來控件的狀態(tài)，這里就涉及了一個(gè)客戶端狀態(tài)保存的問題。這無疑是一個(gè)非常實(shí)用的功能。這里 ExtJs也包含提供了狀態(tài)保存機(jī)制，其主要的控件：GridPanel，F(xiàn)ormPanel 等，都提供了狀態(tài)保存的功能，這就提高了用戶體驗(yàn)。

2.5 ExtJs與后臺(tái)交互實(shí)現(xiàn)動(dòng)態(tài)樹

在社區(qū)信息服務(wù)系統(tǒng)中，樹形結(jié)構(gòu)是一種常用的展示方式，比如分類信息和地區(qū)信息等。在傳統(tǒng)的Web開發(fā)中，往往一次性將整棵樹傳送到前臺(tái)進(jìn)行構(gòu)造，對(duì)于節(jié)點(diǎn)數(shù)量比較龐大的樹，這樣的實(shí)現(xiàn)方式往往需要消耗大量的系統(tǒng)資源，同時(shí)客戶端的等待時(shí)間也比較漫長。結(jié)合用戶實(shí)際使用情況，大部分用戶只是用到樹形結(jié)構(gòu)中的某一些節(jié)點(diǎn)，并不需要用到所有節(jié)點(diǎn)。換句話說，大部分的樹節(jié)點(diǎn)用戶是不關(guān)心的，這些節(jié)點(diǎn)的是否加載并不會(huì)影響用戶使用，但是采用一次性全部加載的方式既消耗了系統(tǒng)資源，等待時(shí)間較長也無法提供良好的用戶體驗(yàn)。

在這樣的情況下，ExtJs動(dòng)態(tài)樹的實(shí)現(xiàn)是一個(gè)很好的解決方法，動(dòng)態(tài)樹的實(shí)現(xiàn)思路在于不是一次性加載所有樹節(jié)點(diǎn)，而是當(dāng)點(diǎn)擊樹中某個(gè)節(jié)點(diǎn)時(shí)才生成其子節(jié)點(diǎn)，這樣就避免了一次性加載整棵樹，這種樹節(jié)點(diǎn)異步加載的實(shí)現(xiàn)方式既節(jié)約了系統(tǒng)資源，也提高了執(zhí)行速度改善以獲得較好的用戶體驗(yàn)。

2.6 ExtJs分頁

在社區(qū)信息服務(wù)系統(tǒng)系統(tǒng)中，分頁是常見的一種技術(shù)，它在處理大數(shù)據(jù)量、提高用戶體驗(yàn)方面提供了很好的解決方案。

ExtJs技術(shù)分頁的方法是：根據(jù)Web客戶端提供的一些參數(shù)(如頁面大小、當(dāng)前頁來執(zhí)行查詢操作，以得到符合條件的一頁記錄，然后將查詢結(jié)果通過Web服務(wù)器最終交付給用戶。在數(shù)據(jù)持久層進(jìn)行分頁的優(yōu)勢在于：數(shù)據(jù)庫每次只需要返回用戶所請求的數(shù)據(jù)記錄，數(shù)據(jù)庫查詢效率高也不會(huì)產(chǎn)生冗余數(shù)據(jù)。從數(shù)據(jù)源頭就開始進(jìn)行分頁，減少整個(gè)執(zhí)行過程的數(shù)據(jù)流量，從而提高了Web應(yīng)用整體的查詢性能。

選擇使用在數(shù)據(jù)持久層進(jìn)行分頁的方式實(shí)現(xiàn)分頁。首先需要在表示層使用ExtJs構(gòu)建分頁組件。ExtJs框架實(shí)現(xiàn)表示層的另一好處在于局部刷新。頁面數(shù)據(jù)發(fā)生改變時(shí)，在使用ExtJs實(shí)現(xiàn)頁面分頁時(shí)，當(dāng)顯示數(shù)據(jù)發(fā)生改變，不用刷新整個(gè)頁面，只用局部刷新發(fā)生改變的位置，減少了數(shù)據(jù)傳輸量，同時(shí)在請求分頁數(shù)據(jù)時(shí)，用戶可以繼續(xù)操作頁面其他部分，改善了用戶體驗(yàn)。

2.7 統(tǒng)一Web程序的界面設(shè)計(jì)

ExtJs提供大量用戶界面元素，這些元素包括表單、對(duì)話框、選項(xiàng)卡、樹和網(wǎng)格、頁面布局等，用戶可以直接使用這些元素來快速開發(fā)自己的頁面，同時(shí)也可以擴(kuò)展自己的頁面元素以供使用。通過ExtJs技術(shù)可以使頁面效果達(dá)到桌面應(yīng)用程序的風(fēng)格，給用戶提供一個(gè)友好的人機(jī)交互界面，同時(shí)可以提高其操作的方便性，在Web界面設(shè)計(jì)和實(shí)現(xiàn)中應(yīng)用ExtJs技術(shù)來改善用戶體驗(yàn)。

一個(gè)系統(tǒng)的布局直接決定了所有頁面的組織結(jié)構(gòu)。設(shè)計(jì)一個(gè)系統(tǒng)布局需要從很多方面考慮，包括頁面組織方式、頁面實(shí)現(xiàn)的復(fù)雜度、用戶使用習(xí)慣、操作的易用性、弱化用戶工作強(qiáng)度、需求變更適應(yīng)性等等。當(dāng)然在一個(gè)系統(tǒng)中是不可能兼顧到所用這些特性的，它們之間有的本身就存在沖突，這就要求設(shè)計(jì)人員需要與客戶多進(jìn)行溝通從而做出取舍，比如系統(tǒng)如果需求變更性可能很大就需要多考慮系統(tǒng)變更的適應(yīng)性，如果某個(gè)頁面使用頻率更高，就需要考慮頁面的易用性方面的設(shè)計(jì)。

(1) Web頁面板塊分區(qū)的靈活性

ExtJs框架的viewport布局模式將整個(gè)系統(tǒng)布局劃分為上、下、左、右、中五個(gè)功能區(qū)域，適應(yīng)不同的系統(tǒng)布局要求，用戶布局時(shí)可以根據(jù)需要選擇其中的任意區(qū)域，每個(gè)區(qū)域都具有自己的主要功能，從而使系統(tǒng)結(jié)構(gòu)明晰，便于系統(tǒng)的使用。

(2) 布局能夠滿足用戶使用系統(tǒng)時(shí)的不同需要

為了方便用戶的操作，用戶可以調(diào)整每個(gè)區(qū)域的大小或者隱藏暫時(shí)不需要的功能區(qū)域，而其它區(qū)域的頁面結(jié)構(gòu)不會(huì)改變且操作的區(qū)域可以自動(dòng)適應(yīng)窗口的大小。

(3) 頁面的有狀態(tài)性

當(dāng)前技術(shù)本身不能保證頁面的狀態(tài)，比如用戶在頁面所做的操作如輸入的表單數(shù)據(jù)或以前訪問過的頁面等等，一旦頁面提交或訪問了新的鏈接，當(dāng)前頁面的狀態(tài)已經(jīng)不存在。這里布局將對(duì)頁面提供一個(gè)很好的組織結(jié)構(gòu)，可以使得用戶訪問新頁面時(shí)保證已經(jīng)訪問的頁面不丟失，直到用戶自己關(guān)閉該頁面窗口為止，同時(shí)可以保存用戶在這些頁面所做的操作。這樣可以大大提高用戶系統(tǒng)使用的方便性和減少用戶的工作量。

3 結(jié)束語

社區(qū)居民是使用社區(qū)信息服務(wù)應(yīng)用系統(tǒng)的主體，提高用戶體驗(yàn)，滿足社區(qū)居民的使用應(yīng)該是社區(qū)信息服務(wù)應(yīng)用系統(tǒng)的重要任務(wù)。針對(duì)傳統(tǒng)社區(qū)信息服務(wù)應(yīng)用系統(tǒng)不能滿足廣大社區(qū)用戶功能需求，不能給用戶帶來完美的界面體驗(yàn)的問題，通過應(yīng)用 ExtJs框架設(shè)計(jì)社區(qū)信息系統(tǒng)，突出了基于ExtJs 的富客戶端的優(yōu)越性，系統(tǒng)人機(jī)界面設(shè)計(jì)是設(shè)計(jì)、藝術(shù)、技術(shù)和人機(jī)交互科學(xué)的高度統(tǒng)一，使得社區(qū)信息服務(wù)系統(tǒng)功能豐富，操作方便，界面優(yōu)化，用戶體驗(yàn)良好，積極的用戶體驗(yàn)使得用戶輕松自如、高效地完成功能應(yīng)用，增加親切感、舒適感和成功感，大大提高了社區(qū)信息服務(wù)系統(tǒng)的用戶滿意度。

[1] 曹慶娟.基于用戶體驗(yàn)的政府網(wǎng)站用戶滿意度研究[D].情報(bào)科學(xué).2009.

[2] 鞠鳳娟,吳志峰.EXT技術(shù)在Web界面設(shè)計(jì)與實(shí)現(xiàn)中的應(yīng)用研究[D].計(jì)算機(jī)與現(xiàn)代化.2008.

[3] 何禮,陳俊.基于Ext的單頁系統(tǒng)設(shè)計(jì)與研究[D].成都大學(xué)學(xué)報(bào)(自然科學(xué)版).2009.

[4] 劉瑩瑩.社區(qū)信息服務(wù)顧客滿意度測評(píng)研究[D].湘潭大學(xué).2011.

[5] 王淵,懷自國,羅怡桂.基于Ext + Sp ring +Hi bernate的Web系統(tǒng)開發(fā)架構(gòu)的研究與應(yīng)用.計(jì)算機(jī)與現(xiàn)代化.2009.