摘 要：在當(dāng)今的Web富客戶端技術(shù)中，最為成熟、應(yīng)用最為廣泛的是JavaScript和Ajax技術(shù)。JavaScript作為簡單的腳本語言，提供了強大的功能，尤其是對DOM的操作能力，使頁面開發(fā)人員幾乎無所不能。JavaScript可以嵌入HTML頁面內(nèi)，也可以作為源代碼文件單獨出現(xiàn)，同時，JavaScript具有面向?qū)ο蟮奶匦?，這使JavaScript具有相當(dāng)?shù)哪K化和復(fù)用能力。Ajax是Web 2.0時代炙手可熱的技術(shù)，這不僅因為它可以提供良好的頁面效果和用戶體驗，更因為它可以與傳統(tǒng)的Web技術(shù)良好的結(jié)合。開發(fā)人員可以很容易的將Ajax技術(shù)植入到Web頁面，無論原來的Web應(yīng)用基于哪種平臺。雖然Ajax技術(shù)包含了JavaScript，但在大多數(shù)時候，開發(fā)人員要單獨使用JavaScript。實際上，JavaScript是Web富客戶端技術(shù)的基礎(chǔ)。

關(guān)鍵詞：Web富客戶端；JavaScript；Ajax

中圖分類號：TP311.52

1 JavaScript的設(shè)計及應(yīng)用

實際上，JavaScript在頁面層到處可見，這里只討論與Web富客戶端相關(guān)的、較為通用的一些設(shè)計方法。

2 基于表格的翻頁

首先說明一下，基于表格的頁面布局并不是最好的方式（很多專家提倡基于層的布局方式），但是，在某些情況下，基于表格的布局會提供一些便利。這中間的取舍需要在實際應(yīng)用中來判斷。

這里所說的翻頁是指Web前臺的翻頁，即所有的數(shù)據(jù)已經(jīng)傳送的到客戶端，翻頁只是對頁面顯示的控制。基本的設(shè)計思想是在頁面載入時執(zhí)行初始化函數(shù)，通過總數(shù)據(jù)行數(shù)、每頁要顯示的數(shù)據(jù)行數(shù)來計算相關(guān)的頁面參數(shù)，并通過傳入的回調(diào)函數(shù)來設(shè)置翻頁信息和應(yīng)顯示的行。當(dāng)用戶觸發(fā)翻頁事件時，同樣使用回調(diào)函數(shù)進行設(shè)置。使用回調(diào)函數(shù)的好處是，結(jié)構(gòu)不同的表格可以提供不同的回調(diào)函數(shù)，這樣可以重用其它部分的代碼。設(shè)置翻頁信息和應(yīng)顯示的行比較簡單，設(shè)置翻頁信息只需用計算出的數(shù)值替換原來的數(shù)值即可，設(shè)置應(yīng)顯示的行則要根據(jù)計算的數(shù)值將確定要顯示的行，并將這些行設(shè)置為可見，將原來可見的行設(shè)為隱藏。

3 基于表格的排序

排序的操作略顯復(fù)雜，先要將表格的所有行的引用放入到一數(shù)組中，然后對數(shù)組進行排序。這里需要注意的是，JavaScript的數(shù)組（Array）對象提供了sort方法，但需要提供一個比較函數(shù)。JavaScript提供的locale Compare可以對字符串進行字典順序的比較。當(dāng)然，這是不夠的，像數(shù)值、日期等這些比較函數(shù)幾乎是必需的。開發(fā)人員可以這些比較函數(shù)封裝到JavaScript源文件中，作為代碼庫使用。當(dāng)數(shù)組完成排序后，新建一個文檔碎片（Document Fragment）對象，并將數(shù)組內(nèi)表格行的引用依次插入其中。最后將此文檔碎片對象附加到表格體內(nèi)，即可完成排序的動作。需要說明的是，不使用文檔碎片對象而直接交換表格行位置的方法是不可取的，因為通常情況下，排序的交換次數(shù)是非常多的，如果直接交換表格行的位置將會增大客戶端的負擔(dān)，影響性能。

如果表格還需要翻頁功能的話，則在每次排序后要重新設(shè)置應(yīng)顯示的行。

4 基于表格的過濾

通過某列的值進行判斷來過濾表格的行是比較簡單的，通過遍歷表格的行，比較每行中該列的值來決定是否顯示該行。

另一個比較常見的場景是，通過搜索進行過濾。比較合理的方法是通過正則表達式來進行匹配，這樣可以以比較簡單的方法實現(xiàn)對簡單通配符“*”、“？”的支持。實現(xiàn)方法是：先使用replace（/（.）/g，\"[$1]\"）函數(shù)將查詢字符串的每個字符用中括號括起，這樣做的目的是所有字符在正則表達式中只表示字符本身，屏蔽其在正則表達式中的特殊含義，這樣就防止了用戶輸入的查詢字符串中的特殊符號影響正則表達式的匹配結(jié)果。接著，使用replace（/＼[＼*＼]/g，\".*\"）、replace（/＼[＼？＼]/g， \".\"）函數(shù)將經(jīng)過第一步處理的查詢字符串中的“*”、“？”替換為“.*”、“.”，這樣就使正則表達式與帶有“*”、“？”通配符的查詢字符串具有相同的意義。最后使用此正則表達式與表格中相應(yīng)列匹配即可。

5 簡單的拖拽動作

拖拽是現(xiàn)代Web應(yīng)用中比較流行的元素，但實際上沒有太大的意義。這里簡單介紹一下最簡單的拖拽的實現(xiàn)方法。首先使用被拖拽組件的onMouseDown事件初始化拖拽事件，需要做的包括：存儲鼠標(biāo)指針當(dāng)前位置以備拖拽函數(shù)使用；為被拖拽組件的onMouseMove事件應(yīng)用拖拽函數(shù)。拖拽函數(shù)的主要功能就是根據(jù)鼠標(biāo)指針位置計算被拖拽組件應(yīng)在的位置，并將被拖拽組件移動到那個位置。在這個過程中，可以加入邊界判斷來限制被拖拽組件的移動范圍。最后還要在onMouseUp事件發(fā)生時，將onMouseMove綁定的拖拽函數(shù)解除綁定。

6 JavaScript性能調(diào)優(yōu)

盡量減少對DOM的操作，因為對DOM的某些操作會導(dǎo)致瀏覽器重新呈現(xiàn)文檔，這就需要所有計算所有的布局參數(shù)，將會付出很大的代價。比如在創(chuàng)建一個DOM節(jié)點的時候，應(yīng)該將該節(jié)點的所有屬性都設(shè)置好，再將該節(jié)點插入到DOM，這樣只對DOM進行一次操作。

盡量減少點號操作符的使用，因為點號操作符會導(dǎo)致查找父變量的所有子變量，而且JavaScript是解釋執(zhí)行，JavaScript解釋器很難對此進行優(yōu)化。

移除不再需要的DOM節(jié)點，這樣可以盡快釋放內(nèi)存。

7 Ajax的設(shè)計及應(yīng)用

Ajax并不是一項很難掌握的技術(shù)，相反地，開發(fā)人員可以很容易地將Ajax技術(shù)引入到現(xiàn)有項目中。代碼被封裝在ajax.js文件中，開發(fā)人員只需要調(diào)用asynLoad函數(shù)，并提供相應(yīng)的URL地址和回調(diào)處理函數(shù)，即可實現(xiàn)跨瀏覽器的Ajax調(diào)用。這種方式在大部分應(yīng)用中可以起到良好的效果，但它并不是最好的方式，在這里并沒有引入面向?qū)ο蠛驮O(shè)計模式。在復(fù)雜的Web富客戶端應(yīng)用中，這是非常重要的。研究設(shè)計模式在Ajax中的應(yīng)用將是本文的后續(xù)工作之一。傳統(tǒng)的Web用戶登錄方式通常是通過一個頁面表單獲取用戶輸入的信息，提交到服務(wù)器進行認證，然后根據(jù)結(jié)果返回到不同的頁面，提示相應(yīng)的信息。這樣的一個過程顯得有些復(fù)雜了。而所有需要獲取用戶信息的頁面（比如一個可以顯示用戶信息的導(dǎo)航頁面），都需要變?yōu)镴SP或其它的動態(tài)頁面。這將影響它們的載入速度。

通過Ajax技術(shù)可以完全解決以上的問題。在服務(wù)器端應(yīng)設(shè)置三個登錄相關(guān)的方法，包括“登錄”、“注銷”和“獲取登錄信息”。在用戶登錄界面，使用Ajax異步地將用戶信息發(fā)送給登錄方法進行認證，此時登錄頁面通過JavaScript顯示請用戶等待的提示信息。登錄方法進行認證后，會將結(jié)果封裝在XML中，并作為響應(yīng)返回給瀏覽器。回調(diào)處理函數(shù)將分析XML中的數(shù)據(jù)，通過JavaScript在頁面中顯示結(jié)果。整個過程沒有離開登錄頁面，用戶甚至可以在第一次認證沒有完成的情況下，直接進行第二次認證（比如用戶認為第一次填入的信息有誤）。

在需要獲取用戶信息的頁面中，使用Ajax技術(shù)可以使它們以靜態(tài)頁面的形式出現(xiàn)（如果沒有其它需要）。比如上面提到的可以顯示用戶信息的導(dǎo)航頁面，使用Ajax技術(shù)調(diào)用“獲取登錄信息”方法，通過返回的XML數(shù)據(jù)即可使頁面知道當(dāng)前又沒有用戶登錄以及登錄用戶的具體信息。然后，可以根據(jù)獲取的信息使用JavaScript來對頁面進行調(diào)整，以顯示符合當(dāng)前登錄情況的信息。

參考文獻：

[1]IBM公司.IBM Tivoli操作系統(tǒng)部署解決方案[DB/OL].http：//www-900.ibm.com/cn/software/tivoli/products/tpmosd/index.shtml，2007.

[2]IBM公司.IBM Tivoli映像管理解決方案白皮書——加速部署Microsoft Windows Vista[DB/OL].http：//www-306.ibm.com/software/cn/tivoli/download/whitepapers/qdv.pdf，2007.

[3]BEA公司.BEA Weblogic Workshop Help[DB/OL].http：//dev2dev.bea.com.cn/download/school/workshop/WorkshopCNHelp/doc/zh/core/index.html，2005.

作者簡介：任衛(wèi)紅（1967.12-），女，新疆人，教師，高級講師，研究生，研究方向：網(wǎng)絡(luò)及多媒體。

作者單位：新疆鐵道職業(yè)技術(shù)學(xué)院，新疆哈密 839114