2010-08-13 15:54:50 來源：InfoQ
目前的Web應(yīng)用開發(fā)基本上都是圍繞富互聯(lián)網(wǎng)應(yīng)用（Rich Internet Application，RIA）展開。RIA的實現(xiàn)技術(shù)有很多種：Ajax、Flash、JavaFX和Sliverlight等。Ajax技術(shù)的優(yōu)點在于它是構(gòu)建在開放標(biāo)準(zhǔn)之上，不存在廠商鎖定的問題；同時也不需要額外的瀏覽器插件支持。Ajax應(yīng)用對搜索引擎也比較友好。對開發(fā)者來說，Ajax所需技術(shù)的學(xué)習(xí)曲線也較平滑，容易上手。本文簡要介紹了Ajax應(yīng)用開發(fā)的各個方面以及相關(guān)的最佳實踐，但對一些細(xì)節(jié)內(nèi)容沒有展開討論。
Ajax簡介
Ajax 技術(shù)的出發(fā)點在于改變傳統(tǒng)Web應(yīng)用使用時的“操作-等待頁面加載-操作”的用戶交互模式。這種交互模式會打斷用戶正常的使用流程，降低用戶的工作效率。Ajax技術(shù)的交互模式是“操作-操作-操作”。用戶并不需要顯式地等待頁面重新加載完成，而是可以不斷地與頁面進(jìn)行交互。頁面上的某個局部會動態(tài)刷新來給用戶提供反饋。整個交互過程更加平滑和順暢。這是Ajax技術(shù)得以流行的一個重要原因。
Ajax構(gòu)建于一系列標(biāo)準(zhǔn)技術(shù)之上，包括HTML、JavaScript和CSS等。在這些技術(shù)中，HTML是作為應(yīng)用的骨架而存在的，展示給用戶最基本的內(nèi)容。CSS則為HTML表示的內(nèi)容提供易于用戶閱讀的樣式。JavaScript則為應(yīng)用添加豐富的交互行為，為用戶提供良好的使用體驗。
Ajax技術(shù)的出現(xiàn)使得應(yīng)用中一部分的邏輯從服務(wù)器端遷移到了瀏覽器端。瀏覽器的作用從簡單的渲染頁面和表單處理，上升到了處理一部分業(yè)務(wù)邏輯。
一般來說有兩種類型的Ajax應(yīng)用風(fēng)格，一種是僅少量使用Ajax技術(shù)來適當(dāng)增強用戶體驗（Ajax Lite），另外一種則是大量使用Ajax技術(shù)來達(dá)到與桌面應(yīng)用相似的用戶體驗（Ajax Deluxe），提供諸如鼠標(biāo)右鍵、拖拽和級聯(lián)菜單等。開發(fā)人員應(yīng)該根據(jù)應(yīng)用的特征選用合適的風(fēng)格。
瀏覽器兼容性
開發(fā)Ajax應(yīng)用的時候要面對的一個重要問題就是瀏覽器兼容性。雖然Ajax技術(shù)基于HTML、JavaScript和CSS等標(biāo)準(zhǔn)技術(shù)，但是不同的瀏覽器廠商對于這些標(biāo)準(zhǔn)的實現(xiàn)程度有著很大的差別。同一瀏覽器的不同版本之間也會有一些不同。新版本可能會修復(fù)舊版本上的問題，也可能會帶來新的問題。不過總體的趨勢是瀏覽器的實現(xiàn)越來越向標(biāo)準(zhǔn)靠攏。
解決瀏覽器兼容性的第一步是確定應(yīng)用要支持的瀏覽器種類和版本。這個決策取決于應(yīng)用的目標(biāo)用戶和特定的應(yīng)用需求。對于一般的通用Ajax應(yīng)用來說，可以按照瀏覽器的市場份額和支持某種瀏覽器所需的代價來確定。雅虎提出的分級式瀏覽器支持（Graded Browser Support）是一個很好的參照，從其中給出的A級瀏覽器開始是一個不錯的選擇。從特定的應(yīng)用需求來說，某些使用了ActiveX控件的Ajax應(yīng)用就只能在IE上運行；而開發(fā)針對iPhone的應(yīng)用則只需要考慮移動版WebKit就可以了。
就 Ajax應(yīng)用的三個組成部分來說，HTML的兼容性問題比較少，畢竟目前主流的HTML 4.01規(guī)范已經(jīng)有10年的歷史了；在JavaScript方面，JavaScript語言核心部分基本上沒什么問題，而文檔對象模型（DOM）和瀏覽器對象模型（BOM）部分的兼容性問題相對較多，這主要是因為瀏覽器長生對規(guī)范的支持程度不同以及各自添加了私有實現(xiàn)。使用一個流行的JavaScript庫就可以解決這些問題；CSS方面的兼容性目前是問題最多的，而且沒有比較好的庫的支持。在下面會著重介紹CSS的兼容性問題。
富含語義的HTML
HTML 語言本身上手比較簡單，只是一些元素的集合，只需要了解這些元素及其屬性的含義即可。這些元素既有與文檔結(jié)構(gòu)相關(guān)和富含語義的元素，也有與頁面的展示相關(guān)的元素。一個好的實踐是只使用與文檔結(jié)構(gòu)相關(guān)和富含語義的元素。從HTML語言規(guī)范的歷史也可以看到這個趨勢。HTML語言規(guī)范的歷史比較長。在HTML最初的草案和HTML 2.0中，HTML只包含描述文檔結(jié)構(gòu)的元素。在HTML 3.2中，很多與展示相關(guān)的元素被引入進(jìn)來。HTML 4.01規(guī)范試圖解決這個問題，許多與展示相關(guān)的元素被標(biāo)記為廢棄的，不推薦使用。HTML 5更進(jìn)一步，引入了更多的富含語義的元素，同時移除了一些在HTML 4.01中被廢棄的元素。應(yīng)用這種實踐進(jìn)一步劃分清楚了HTML和CSS在Ajax應(yīng)用中的職責(zé)。
編寫HTML文檔的時候首先需要選用合適的文檔類型聲明（DTD）。目前來說最合適的HTML 4.01過渡型，即<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。在編寫HTML文檔的時候，需要使用合適的元素。HTML規(guī)范中的一些元素，如<em>、<strong>、<abbr>、<blockquote>、<cite> 和<code>等，對開發(fā)人員來說比較陌生。但是這些元素富含語義，有適合它們使用的場景。如果使用的是<div> 和<span>等通用元素，需要使用富含語義的class屬性來增加語義，說明元素的作用。在HTML文檔編寫完成之后，最好使用W3C提供的HTML文檔驗證器來驗證文檔。
CSS
CSS的語法非常簡單，包含的元素也非常少，其中最主要的是樣式規(guī)則集。樣式規(guī)則集是一系列樣式聲明規(guī)則的集合。每個樣式規(guī)則由選擇器和聲明兩部分組成。選擇器用來選擇文檔中的元素。這些元素將被應(yīng)用上與選擇器對應(yīng)的樣式聲明。CSS不同版本規(guī)范所支持的選擇器類型不同，盡量使用常用并且簡單的選擇器以獲得更好的瀏覽器兼容性，如ID選擇器、class選擇器和元素選擇器。
使用CSS的時候會遇到的一個很大的問題是瀏覽器兼容性。經(jīng)常會遇到的情況是某種樣式在A和C瀏覽器上應(yīng)用正常，而在B瀏覽器上則使用不正常。等到把B瀏覽器調(diào)好了之后，卻發(fā)現(xiàn)C瀏覽器上顯示出現(xiàn)錯誤。解決這個問題的基本原則是要首先確定幾個基準(zhǔn)的瀏覽器和開發(fā)基本的布局樣式表?；鶞?zhǔn)瀏覽器一般是所要支持的瀏覽器中對CSS規(guī)范支持較好的瀏覽器?；镜牟季謽邮奖肀ＷC在基準(zhǔn)瀏覽器上應(yīng)用的頁面布局是正確的。目前的瀏覽器在CSS頁面布局這一塊的兼容性最差，尤其在盒模型（box model）、浮動定位等方面。而在顯示樣式，如字體大小和顏色等方面，則基本上沒有什么問題。
接下來要做的是讓基本的布局樣式表在除基準(zhǔn)瀏覽器外的其它瀏覽器上正確工作。這個時候就需要對某種版本的瀏覽器來應(yīng)用特殊的樣式，從而修正樣式上的不一致。一種做法是利用一些招數(shù)（hack）。招數(shù)是利用瀏覽器本身對CSS規(guī)范支持的不完善或是實現(xiàn)上的bug來識別瀏覽器并應(yīng)用樣式。另外一種做法是通過JavaScript來檢測當(dāng)前瀏覽器并應(yīng)用樣式。招數(shù)可能會隨著瀏覽器的版本更新而變得不可用，因此盡量少使用。
在一般Ajax應(yīng)用，最常被應(yīng)用招數(shù)的是IE 6。因為IE 6對CSS規(guī)范支持不完善，而且存在比較多的bug，但是IE 6的用戶目前還是數(shù)量眾多，還是有支持的必要。對IE瀏覽器應(yīng)用特殊樣式的更好做法是使用IE獨有的條件注釋。
當(dāng)應(yīng)用所包含的CSS文件比較多的時候，開發(fā)和維護(hù)這些CSS文件就成為一件比較困難的事情。一個解決辦法是把面向?qū)ο蟮乃枷胍氲紺SS的編寫過程中。兩種重要的原則是組件化和單一職責(zé)。組件化的做法是開發(fā)出針對頁面上某類元素的樣式組件。這些樣式組件可以在不同的頁面中任意組合使用。單一職責(zé)指的是把表示結(jié)構(gòu)和外觀的樣式分開。與結(jié)構(gòu)相關(guān)的樣式包括大小和位置，外觀的樣式包括字體大小、顏色和背景圖片等。
DOM查詢與操作
DOM 操作是Ajax應(yīng)用中頁面動態(tài)和局部刷新的實現(xiàn)基礎(chǔ)。DOM定義了文檔的邏輯結(jié)構(gòu)，以及對文檔進(jìn)行訪問和操作的方式。通過DOM，開發(fā)人員可以在文檔中自由導(dǎo)航，也可以添加、更新和刪除其中的元素和內(nèi)容。通過DOM規(guī)范提供的API就可以完成對文檔的查詢與操作。不過DOM的原生API使用起來比較繁瑣，最好使用JavaScript庫來完成查詢和操作。
通過DOM操作對當(dāng)前頁面進(jìn)行修改一般都是通過響應(yīng)用戶的事件而發(fā)生的。這些DOM操作中一部分是純?yōu)g覽器端實現(xiàn)的，另外一部分則需要服務(wù)器端的支持。服務(wù)器端可以選擇返回數(shù)據(jù)或HTML片段。返回數(shù)據(jù)的好處是傳輸?shù)臄?shù)據(jù)量小，易于與第三方應(yīng)用集成。不足之處在于瀏覽器端需要額外的操作來完成展示。瀏覽器端可以使用DOM操作或是模板技術(shù)來生成HTML片段。服務(wù)器端也可以通過JSP和Apache Velocity等模板技術(shù)來生成HTML片段，并直接返回給瀏覽器。瀏覽器只需要直接使用即可。這種做法的好處是瀏覽器端實現(xiàn)簡單。不足之處在于與展示相關(guān)的邏輯同時存在于服務(wù)器端和瀏覽器端，不容易維護(hù)。
有一些比較好的實踐可以提高DOM操作的性能。首先是使用文檔片段（document fragment）。當(dāng)需要插入大量節(jié)點的時候，首先把這些節(jié)點添加到一個文檔片段中，再把此文檔片段添加到文檔上。這樣可以減少頁面的重新排列。其次是使用innerHTML來更新文檔內(nèi)容，速度比使用DOM API要快。最后是通過cloneNode()來創(chuàng)建多個結(jié)構(gòu)相同的元素。
事件處理
Ajax 應(yīng)用與用戶的交互是通過響應(yīng)用戶事件的方式來完成的。瀏覽器負(fù)責(zé)捕獲用戶的行為并產(chǎn)生各種不同的事件，應(yīng)用處理這些事件。瀏覽器中可以產(chǎn)生的事件種類比較多。事件產(chǎn)生之后，會按照一定的過程在當(dāng)前文檔樹中傳播。事件所產(chǎn)生的節(jié)點稱為目標(biāo)節(jié)點。完整的事件傳播流程是從文檔的根節(jié)點開始向下傳播到目標(biāo)節(jié)點（捕獲階段），然后再往上傳播回根節(jié)點（冒泡階段）。當(dāng)事件傳播到某個節(jié)點上的時候，就會觸發(fā)此節(jié)點上綁定的處理方法。（IE只支持冒泡階段。）需要注意的是事件處理方法中this所指向的對象的值，有可能是當(dāng)前節(jié)點或是window對象。通過JavaScript庫提供的支持來綁定事件處理方法，可以避免這些不一致。
在綁定事件處理方法的時候，可以利用事件的傳播機制來減少事件監(jiān)聽器的數(shù)量。如當(dāng)需要為一系列<li>元素添加鼠標(biāo)點擊的事件時，可以把該事件添加到其父節(jié)點<ul>上。在完成對事件的處理之后，可以終止事件的傳播，還可以阻止瀏覽器的默認(rèn)行為。
選用合適的JavaScript框架
目前存在非常多的JavaScript框架，有開源的也有商業(yè)的。比較流行的有jQuery、Dojo、YUI、ExtJs、MooTools和Prototype等。選用流行框架的好處是有比較大的社區(qū)支持，遇到問題的時候容易獲得幫助。流行框架的文檔和示例也比較豐富。使用不同的框架會給應(yīng)用帶來不同的實現(xiàn)風(fēng)格。jQuery的使用者對方法的級聯(lián)情有獨鐘，Dojo的愛好者則傾向于把頁面上的不同部分劃分成dijit來實現(xiàn)。
選用什么樣的框架的因素很多，技術(shù)的和非技術(shù)的都有。一般來說，輕量級的框架，如jQuery和Prototype，上手比較容易，但是可復(fù)用的組件較少；而比較龐大的框架，如Dojo和ExtJs，則學(xué)習(xí)曲線較陡，但是可復(fù)用的組件非常多，適合快速開發(fā)復(fù)雜的Ajax應(yīng)用。
免責(zé)聲明：本網(wǎng)站（http://www.www.gypb.net/）內(nèi)容主要來自原創(chuàng)、合作媒體供稿和第三方投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性，但不保證有關(guān)資料的準(zhǔn)確性及可靠性，讀者在使用前請進(jìn)一步核實，并對任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏，概不負(fù)任何法律責(zé)任。
本網(wǎng)站刊載的所有內(nèi)容（包括但不僅限文字、圖片、LOGO、音頻、視頻、軟件、程序等）版權(quán)歸原作者所有。任何單位或個人認(rèn)為本網(wǎng)站中的內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時，請及時通知本站，予以刪除。
搶沙發(fā)
