DOM 操作

　　上文中，您已經看到如何使用 JavaScript 框架的選擇器和 DOM 遍歷來簡化特定元素的選取。然而，要想改變 Web 頁面中的特定元素的外觀或內容，需要操作 DOM 并應用改變。如果使用純 JavaScript 將會非常繁瑣，幸運的是，大多數JavaScript 框架提供了有用的函數，簡化了這些操作。

　　假設您有一個 div 元素，其 id 是 the-box：

　　《div id=“the-box”》Message goeshere《/div》

　　如果要用 jQuery 改變 “Message goes here” 文本，方法如下：

　　$（‘the-box’）.html（‘This is the new message！’）;

　　實際上，可以在函數內部使用 HTML 代碼，它將由瀏覽器解析。例如：

　　$（‘the-box’）.html（‘This is the 《strong》new《/strong》message！’）;

　　在本例中，div 元素的內容在 DOM 中呈現為：

　　《div id=“the-box”》This is the《strong》new《/strong》 message！《/div》

　　當然，在一些情況下您需要使用特殊字符，如大于號或小于號。可以不指定專門的 HTML 實體代碼，而是使用 jQuery的 text 函數：

　　$（‘the-box’）.text（‘300 》 200’）;

　　這將把 div 元素更新為以下代碼：

　　《div id=“the-box”》300 》200《/div》

　　在上面的例子中，原有內容被新內容取代。如果只是想把消息添加到文本的后面，該怎么做呢？幸好，jQuery 提供了專門的 append 函數：

　　$（‘the-box’）.append（‘， here goes message’）;

　　將這個函數應用到初始的 div 元素，div 元素的內容就變成下面這樣：

　　《div id=“the-box”》Message goes here， heregoes message《/div》

　　除了附加以外，您還可以 “前置” 內容，即在已有內容的前面而不是末尾插入新內容。另外，jQuery 提供了在給定元素之外插入內容的函數，不管是在開頭還是在末尾。這類函數可以替換內容、清空內容、從 DOM 移除所有元素、克隆元素等等。

　　除了 DOM 操作函數，JavaScript 框架還包含一些用于以編程方式處理元素樣式和 CSS 類的函數。例如，假設您有一個表，您想要在鼠標移到某一行時高亮顯示該行。您創建了一個特定的名叫 hover 的 CSS 類，并且您想要將這個類動態添加到行中。在 YUI 中，可以使用以下代碼檢查行中是否已經具有 hover 類，如果已經有的話，則刪除它，如果沒有的話，則添加它：

　　if（row.hasClass（‘hover’）） row.removeClass（‘hover’）; elserow.addClass（‘hover’）;

　　而且，大多數 JavaScript 框架都有內置的 CSS 操作函數。

?

　　實用函數

　　很多 JavaScript 框架提供了大量實用函數，可使 JavaScript 開發變得很容易。由于這些函數非常多，因此本文無法一一介紹。我將只討論大多數框架都具備的一些比較重要的函數。

　　如果您曾經使用 JavaScript 處理過數組，你應該熟悉使用 for 循環來遍歷數組以處理數組值。例如，看一下清單 2 的代碼：

　　清單 2. 遍歷 JavaScript 數組的傳統方法

　　var fruit = ［‘apple’， ‘banana’， ‘orange’］;for（var i = 0;i 《 fruit.length; i++） { alert（fruit［i］）;}

　　清單 2 中的代碼沒有問題，但有些冗長。大多數 JavaScript 框架包含 each 函數，它會對數據組的每個元素調用一個指定的函數。使用 MooTools，可以用清單 3 的代碼執行與清單 2 相同的操作。

　　清單 3. 使用 MooTools 中的 each 函數

　　［‘apple’， ‘banana’， ‘orange’］.each（function（item） {alert（item）;}）;

　　清單 3 中的語法與 Prototype 和 jQuery 中的語法相同，而與 YUI 和 ExtJS 中的語法有細微差異。然而，當用于 hash映射或對象而不是數組時，各框架的語法都不一樣。例如在 MooTools 中，將用到清單 4 的代碼：

　　清單 4. 在 MooTools 中對基于鍵/值對的對象使用 each

　　var hash = new Hash（{name： “Joe Lennon”， email：“joe@joelennon.ie”}）;hash.each（function（value， key） { alert（key +“： ” + value）;}）;

　　在 Prototype 中，將用到清單 5 中的代碼。

　　清單 5. 在 Prototype 中對基于鍵/值對的對象使用 each

　　var hash = $H（{name： “Joe Lennon”， email：“joe@joelennon.ie”}）;hash.each（function（pair） { alert（pair.key +“： ” + pair.value）;}）;

　　每個框架都包含很多有用的函數，通常劃分為 String 函數、Number 函數、Array 函數、Hash 函數、Date 函數等等。更多信息，請查閱相關 JavaScript 框架的 API 參考資料。

?

　　事件處理

　　每個 JavaScript 框架都實現了跨瀏覽器事件處理支持，鼓勵您從舊式的內聯事件連接轉向一種流線化方法。看一下清單6 中的 jQuery 示例，其中在 hover 事件中高亮顯示 div 元素。

　　清單 6. 使用 jQuery 連接 hover Event

　　$（‘the-box’）.hover（function（） {$（this）.addClass（‘highlight’）;}， function（） {$（this）.removeClass（‘highlight’）;}）;

　　這是一個由 jQuery 實現的特殊事件，請注意它有兩個函數，觸發 onMouseOver 事件時調用第一個，觸發 onMouseOut 事件時調用第二個。這是因為 hover 沒有標準的 DOM 事件。讓我們查看一個更典型的事件，例如 click（查看清單 7）。

　　清單 7. 使用 jQuery 連接 click Event

　　$（‘the-button’）.click（function（） { alert（‘You pushed thebutton！’）;}）;

　　如您所見，本例中只有一個函數參數。jQuery 使用這種方式處理大多數 JavaScript 事件。在 jQuery 中使用事件處理函數時，上下文變量是指觸發事件的元素。有些框架并不使用這種處理方式。以 Prototype 為例，清單 8 顯示了用 Prototype 實現的與清單 7 等價的代碼。

　　清單 8. 使用 Prototype 連接 click Event

　　$（‘the-button’）.observe（‘click’， function（e） { alert（‘Youpushed the button！’）;}）;

　　您首先將注意到沒有 click 函數，而是使用了 observe 函數，該函數在引用它自身之前將事件作為參數。您還可能注意到該函數的參數 e。這就是指向觸發事件的元素的上下文變量。為了探究其工作原理，讓我們針對 Prototype 重寫 清單6 的代碼（請看清單 9）。

　　清單 9. 使用 Prototype 連接 hover Event

　　$（‘the-box’）.observe（‘mouseover’， function（e） { var el =Event.element（e）; el.addClassName（‘highlight’）;}）;$（‘the-box’）.observe（‘mouseout’，function（e） { var el = Event.element（e）; el.removeClassName（‘highlight’）;}）;

　　與 jQuery 中使用美元符號函數獲取上下文變量不同的是，在 Prototype 中需要使用 Event.element（） 函數。并且，您需要對 mouseover 和mouseout 使用不同的函數。

　　在閱讀本文的過程中，您也許會注意到函數使用內聯方式創建且都沒有命名。這意味著它們無法被重用。Prototype 的 hover 例子展示了如何使用已命名的函數作為替代方法。如清單 10 所示。

　　清單 10. Prototype 中改進的 hover 例子

　　function toggleClass（e） { var el = Event.element（e）;if（el.hasClassName（‘highlight’）） row.removeClassName（‘highlight’）; else row.addClassName（‘highlight’）;}$（‘the-box’）.observe（‘mouseover’，toggleClass）;$（‘the-box’）.observe（‘mouseout’， toggleClass）;

　　您會注意到，這次只定義了一個函數供 mouseover 和 mouseout 事件調用。該函數會判斷元素是否已經高亮顯示了類名，并根據查找結果執行添加或刪除。您也許會注意到 e 參數是隱式傳遞的。換句話說，不需要在 observe 函數中以參數形式顯式傳遞事件。

?

　　Ajax

　　使用 JavaScript 框架的另一個有說服力的理由是標準化的跨瀏覽器 Ajax 請求。Ajax 請求是一個異步 HTTP 請求，通常發送給服務器端腳本，后者返回 XML、JSON、HTML 或普通文本格式的響應。大多數 JavaScript 框架都有某種形式的Ajax 對象，以及一個以參數形式接受一組選項的請求方法。這些選項通常包含 callback 函數，當腳本一接收到來自Web 服務器的響應時，就會調用此函數。讓我們看一下 ExtJS、MooTools 和 Prototype 中的 Ajax 請求的樣子。

　　首先，看一下典型的 ExtJS Ajax 請求（請看清單 11）。

　　清單 11. 一個 ExtJS Ajax 請求

　　Ext.Ajax.request（{ url： ‘server_script.php’， params： {name1： ‘value1’， name2： ‘value2’ }， method： ‘POST’， success:function（transport） { alert（transport.responseText）; }}）;

　　ExtJS 中的 request 方法只有一個參數，這是一個包含 url、params、method 和 success 等不同字段的對象。url 字段包含服務器端腳本的 URL，該腳本將被 Ajax 請求調用。params 字段本身就是一個對象，包含有將被傳遞給服務器端腳本的鍵/值對。method 字段可以取兩個值：GET 或 POST。它的默認值為未定義，但如果請求中有 params，將會默認作為 POST 處理。最后一個字段 success 是 Web 服務器返回成功響應時調用的函數。在本例中，假設服務器端腳本返回普通文本，并且文本會通過警告框顯示給用戶。

　　下一步，我們看看同樣的請求在 MooTools 中是什么樣子（請看清單 12）。

　　清單 12. 一個 MooTools Ajax 請求

　　new Request（{ url： ‘server-script.php’， data： { name1：‘value1’， name2： ‘value2’ }， method： ‘post’， onComplete： function（response） {alert（response）; }}）.send（）;

　　如您所見，MooTools 與 ExtJS 非常相似。你也許注意到，與使用 params 不同，這里使用 data 字段傳遞變量，而且必須使用小寫指定方法。還有，沒有使用 success callback 函數，MooTools 使用了一個 onComplete 函數。最后，與 ExtJS 不同的是，在 MooTools 中，您需要使用Request 對象的 send（） 函數發送請求。

　　最后，讓我們看看 Prototype 中的請求是否具有顯著的不同（請看清單 13）。

　　清單 13. 一個 Prototype Ajax 請求

　　new Ajax.Request（‘server-script.php’， { params： { name1：‘value1’， name2： ‘value2’ }， method： ‘post’， onSuccess： function（transport） {alert（transport.responseText）; }}）;

　　同樣，Prototype 的工作方式基本一致，只是有些句法上的小差別。首先，Prototype 的 Request 對象為其構造函數獲取兩個參數。第一個參數是請求將被發送到的 URL，第二個參數是一個具有典型 Ajax 選項的對象，如前兩個例子所見。當然，由于 URL 現在作為單獨的參數傳遞，它沒有出現在選項列表中。同樣需要注意，與 MooTools 不同，Prototype Ajax Request 對象構造函數隱式地發送請求，因此不需要調用任何方法來實際發起 HTTP 請求。

　　大多數 JavaScript 框架中的 Ajax 支持要比此處演示的內容更加深入。重要的增強功能包括使用接收到的響應自動更新元素，而不需要任何特殊的 onSuccess 函數。一些庫甚至包含預建的自動完成功能，如您在 Google 搜索引擎中所看到的，在輸入時會出現常見搜索項。

　　在下一節中，您將學習 JavaScript 框架為 Web 開發人員提供的用戶體驗（UX）增強功能。

?

　　UX 增強功能

　　到目前為止，本文全部關注的是使用 JavaScript 框架的編程優勢以及它們如何簡化交互式應用程序的編寫。然而，對于大多數框架，還有另外一個更吸引人的方面：用戶界面（UI）組件以及用戶體驗增強，這些在以前需要付出很大努力構建的工作現在可以輕松完成。

　　本節將分別介紹以下框架的 UX 增強功能：Prototype、jQuery、YUI、ExtJS 和 MooTools。

　　Prototype

　　Prototype 是少數幾個不提供開箱即用 UI 組件和 UX 增強功能的 JavaScript 框架之一。它將這些內容轉移到其姊妹庫script.aculo.us（最新版本是 Scripty2）中。Script.aculo.us 還添加了對 Prototype 中的各種效果和行為的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us還提供拖放支持，例如滑塊、in-place Ajax 編輯器和 autocompleters。與其他框架不同，Script.aculo.us 將所有控件（例如滑塊和 autocompleters）的設計留給開發人員，并且未提供標準界面。

　　jQuery

　　與 Prototype 不同，jQuery 核心庫中包含一些基本的 UX 增強。這些增強與script.aculo.us 中的一些基本效果類似。例如 sliding 和 fading。然而，要獲得更高級的 UX 特性，就需要下載 jQuery UI 庫，它包含比 jQuery 核心庫更多的效果，以及交互特性，如拖放、調整大小和排序。與 script.aculo.us 不同的是，jQuery UI 還包含一些小部件或組件，它們使開發具有吸引力的界面變得更加容易。目前，這些組件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。這些小部件都可以劃分主題，并且 jQuery UI 包含各種各樣的主題，可以適合您自己的特定 Web 站點或 Web 應用程序的組件。圖 1 演示了 jQuery UIDatepicker 小部件的例子，該小部件的主題為 Cupertino。

　　圖 1. jQuery UI Datepicker Widget

　　YUI

　　Prototype 和 jQuery 不包含開箱即用的 UI 小部件，但是 Yahoo！ User Interface 庫 （YUI） 包含一個 bucketload。除了支持拖放和調整大小外，YUI 第二版還包含autocompleters、calendar 控件、carousel 組件、繪圖、對話框、進度條、富文本編輯器（所見即所得文本區）、滑塊、選項卡、樹等等。在撰寫本文時，上述小部件都沒有包含在 YUI 第三版中。圖 2 是結合使用這些組件的一個例子。

　　圖 2. 復雜的 YUI 應用程序示例

　　ExtJS

　　和 YUI 一樣，ExtJS 包含大量開箱即用的組件，其中有很多功能強大的網格控件，支持內聯編輯、分頁、篩選、分組、匯總、緩沖和數據綁定。ExtJS 組件具有非常專業的外觀，并且分門別類。其他小部件包括選項卡、圖表、窗口（對話框）、樹、布局管理器、增強的表單控件、工具欄和菜單、拖放操作和直接遠程功能（directremoting）。這僅僅是ExtJS 所提供的一小部分，如果要查找更多 RIA 組件，請登錄 ExtJS 網站。圖 3 是用 ExtJS 開發的 Web 桌面程序示例，展示了這個庫的豐富特性。

　　圖 3. ExtJS 桌面應用程序示例

　　MooTools

　　MooTools 和 Prototype、jQuery 一樣，也不包含開箱即用的 UI 控件和小部件。與 jQuery 一樣，它包含一組有限的效果。其更高級的 UX 增強包含在MooTools.More.js 擴展中。這個擴展不僅僅是簡單的 UX/UI 插件，而是包含對 Array、Date、Hash 和 String 類以及額外的 Element 擴展的一些有趣的附加功能。至于 UX 增強功能，MooTools.More.js包含拖放支持以及一些其他效果。這些附加功能還包括一些 UI 控件，如 accordion、可排序的HTML 表、scroller、工具提示和 Ajax spinneroverlays。然而，與 script.aculo.us 一樣，您需要自己設計這些控件。

?

　　Framework 比較

　　表 1 是本文介紹的五個框架所含特性的詳細比較。

　　表 1. 框架特性比較

　　其他重要框架

　　限于篇幅，本文只介紹了五個比較常見的 JavaScript 框架。這并不表示它們是最流行的、最好的或是功能最多的框架。

　　其他一些 JavaScript 框架也值得注意，包括：

　　· Cappuccino

　　· Dojo

　　· Glow

　　· GWT

　　· MochiKit

　　· Qooxdoo

　　· Rialto

　　· Rico

　　· SproutCore

　　· Spry

　　· UIZE

?

　　結束語

　　本文介紹了JavaScript中原型相關的概念，對于原型可以歸納出下面一些點：

　　所有的對象都有“［［prototype］］”屬性（通過__proto__訪問），該屬性對應對象的原型

　　所有的函數對象都有“prototype”屬性，該屬性的值會被賦值給該函數創建的對象的“__proto__”屬性

　　所有的原型對象都有“constructor”屬性，該屬性對應創建所有指向該原型的實例的構造函數

　　函數對象和原型對象通過“prototype”和“constructor”屬性進行相互關聯

　　還有要強調的是文章開始的例子，以及通過例子得到的一張“普通對象”，“函數對象”和“原型對象”之間的關系圖，當你對原型的關系迷惑的時候，就想想這張圖（或者重畫一張當前對象的關系圖），就可以理清這里面的復雜關系了。

　　通過這些介紹，相信一定可以對原型有個清晰的認識。

　　JavaScript 框架的概念以及它為什么會給 Web 網站和 Web 應用程序開發帶來好處。本文對這些框架的常見功能作了簡要描述，并舉例說明在較常見的庫中如何實現這些特性。本文還分別講解了作為這五個框架的一部分或作為單獨的附加功能的 UI 和 UX 增強。最后，還提供了一個直觀的特性對比圖表，其中列出了各個框架各自具備和缺乏的選項。有了這些知識，您應該就可以進行更深入的研究，然后明智地選擇適合您及您的開發團隊的框架。