譯文：JavaScript框架比較（一）

導言：JavaScript是一種面向對象的腳本語言，一直以來用作Web瀏覽器應用程序客戶端腳本接口的選擇。JavaScript允許Web開發人員編程與網頁上的對象的工作,為憑空操作這些對象提供了一個平臺。當JavaScript最初推出時，它通常用來提供一些微不足道的功能，如時鐘、在瀏覽器狀態欄中滾動文本。另外一個常用特色就是“rollover link”,即當用戶的鼠標滑過對象時，其文本的顏色或背景圖片發生改變。然而，近年來Ajax為網絡編程帶來了全新的互動，JavaScript幾經發展變得更加有用。在Ajax之前，任何服務器端處理或數據庫訪問都需要整頁面被“刷新”或由瀏覽器呈現新的頁面。這不僅緩慢，令用戶失望，而且也浪費了帶寬和資源。

Ajax就是異步的JavaScript和XML，雖然引用XML不在有效，但是Ajax能對除了XMl的其它幾種格式的數據作出響應，如JSON(JavaScript對象表示法)。 Ajax的工作原理是，以異步的方式提交一個 HTTP請求提交到web服務器，不刷新也不呈現整個頁面，僅呈現響應的內容。相反，開發人員通常使用DOM（文檔對象模型）操作修改網頁的一部分，HTTP響應返回的數據將反映這些改變。

什么是JavaScript框架？

JavaScript本身是一種非常強大的語言，你不需要任何額外的框架就可以創建由它支持的富互聯網應用系統（RIA）。但是，使用JavaScript并不是一件容易的事，主要是因為在試圖提供多種瀏覽器支持時各種并發癥的出現。和HTML和CSS一樣，不同的瀏覽器的JavaScript執行方式不同，那么確保您的JavaScript代碼跨瀏覽器兼容可以說是一個惡夢。

一個JavaScript框架或庫實際上是一系列工具和函數，它能更容易產生跨瀏覽器兼容的JavaScript代碼。每個庫在許多流行的最新版本的Web瀏覽器經過了嚴格測試。因此，您完全可以相信，使用這些框架中的任何一個，您的基于JavaScript的RIA在不同的瀏覽器和平臺中將大體一致。

除了瀏覽器兼容性問題外，JavaScript框架可以更容易地編寫代碼去獲取、遍歷及操縱DOM元素。它們不僅能提供一個快捷的函數來獲取一個DOM元素的引用，而且還允許菊花式的DOM遍歷函數鏈查找父母、子女或任何深度的兄弟節點元素。最后，框架提供了一系列的函數，使其更容易的操縱這些對象，允許其內容更改、添加、刪除，或者操縱class的樣式而影響元素的外觀。

JavaScript框架的另一個重要特色就是能更好的支持事件處理。由于瀏覽器之間的不同實現，跨瀏覽器事件處理可以說是一個惡夢。因此，JavaScript框架通常將瀏覽器事件包裝起來，并提供一系列有用的跨瀏覽器函數來處理它們。一些框架也提供了標準化的代表鍵盤鍵碼系列的事件（如Esc鍵、Enter鍵、光標等等）。

所有這些功能是非常有用的，JavaScript框架已在其最近流行Ajax應用中起重要作用。和JavaScript其他方面一樣，每個Web瀏覽器傾向于支持以不同的方式Ajax，使Ajax支持所有的瀏覽器將是很繁重的工作。幾乎所有的JavaScript框架都包括一定形式的Ajax庫，通常是提供Ajax請求和響應對象，在對響應作出評價后，更新DOM元素，輪詢一個特定的請求。

一個JavaScript框架的典型特征

現在讓我們看看大多數JavaScript框架都具有的一些功能。這些特色有：

選擇器
DOM遍歷
DOM操作
實用函數
事件處理
Ajax
為了更好的詮釋這些特色，我將從下面一個或多個JavaScript框架中列舉一個例子：Prototype, jQuery， YUI，ExtJS和 MooTools。雖然每個框架的執行情況和語法不同，但其概念大致相同。每個框架有一個詳細的API參考，你可以參考它決定如何使用這些特定庫的特色功能。

選擇器

大多數JavaScript框架可實現某種形式的快速元素選擇。一般來說，這些選擇器使獲取一個元素的引用更加快捷，并允許你通過ID、class、元素類型或一些偽類選擇符來選取元素。

例如，使用通常的JavaScript，你可以使用下面的代碼借助ID來取得DOM元素。

var theElement = document.getElementById('the_element');
與其他幾個框架一樣，MooTools提供了一個執行該操作的快捷方法。除了選擇元素，MooTools通過自己一系列的功能函數擴展了元素。

var theElement = $('the_element');
$函數在幾個流行的框架（并非全部）中可用，其語法大致相同。Prototype更深一層，通過ID在任何時候可以選擇多個元素，返回的是一個元素數組。與

MooTools一樣，這些元素利用Prototype的實用函數擴展。利用Prototype庫在任何時候選擇多個元素的語法是這樣的：

var elementArray = $('element_one', 'element_two', 'element_three');
在實用函數這一部分，你將了解到JavaScript框架提供的一些函數迭代我們的集合更加容易。

在前面的例子，你必須提供你欲選擇元素的ID。但是，你要選擇多個元素該怎么辦？所有image、擁有特定className的表格的每一行。MooTools（其它的幾個庫）提供了一個非常簡單的方法來做到這一點－－$$函數。除了元素的ID外，他還可以接受以下參數：元素的名字、類名以及偽類選擇器，其工作原理與$函數相似。例如，使用MooTools獲取頁面上所有的圖片，你可以使用下面的代碼：

var allImages = $$('img');
這將得到文檔中所有imag的數組，每一個通過$函數和其實用函數進行擴展。

通過tag標簽來選取對象是非常有用的，但如果你只想基于元素的class選取它的部分子集，遮蓋怎么辦？同樣很簡單。在下面的例子中，MooTools將選擇table中class為“odd”的行，這在對每行進行操作時很有用（交替變換表格每一行的顏色）。

pre class=”brush:javascript”>
var allOddRows = $$(‘tr.odd’);

事實上，MooTools提供了一個更好的方法執行行操作。在前面的例子中，假定table的奇數行授予了類名“odd”。那么下面的代碼不需要在table的每一行上定義任何類名。

var allOddRows = $$('tbody <IMG class=wp-smiley alt=:o src="http://www.denisdeng.com/wp-includes/images/smilies/icon_surprised.gif"> dd');
這是一個偽類選擇器的例子，它返回匹配規范的任何對象。在這個例子中，結果為頁面中tbody元素中所有奇數行的子元素。MooTools其它偽類元素的例子包括：

checked 所有被選中的元素（例如：選中的復選框）；
enabled 所有可用的元素；
contains 所有包含文本（作為參數傳遞給選擇器）的元素
如前所述，并非所有的JavaScript框架都使用$函數來選取DOM元素。在YUI（Yahoo用戶界面）的第三個版本中，下面的代碼是通過ID來選取元素的（注意：YUI3需要在ID前加上字符#）。

var theElement = Y.one('#the_element');
同樣，通過tag或class來選取元素也不是使用$$函數，在YUI中你要使用Y.all來代替。

var allOddRows = Y.all('tr.odd');
ExtJS以同樣的方式工作，通過ID選擇元素用下面的語法：

var theElement = Ext.get('the_element') ;
而通過tag和class來獲取元素則用下面的語法：

var allOddRows = Ext.select('tr.odd');
在下一章中，你將了解到如何使用JavaScript框架來輕松遍歷DOM對象，換句話說，找到與選定元素有父子和兄弟關系的元素。

轉載地址：http://www.denisdeng.com/?p=699

原文地址：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈