譯文：JavaScript框架比較（一）

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

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

什么是JavaScript框架？

JavaScript本身是一種非常強(qiáng)大的語(yǔ)言，你不需要任何額外的框架就可以創(chuàng)建由它支持的富互聯(lián)網(wǎng)應(yīng)用系統(tǒng)（RIA）。但是，使用JavaScript并不是一件容易的事，主要是因?yàn)樵谠噲D提供多種瀏覽器支持時(shí)各種并發(fā)癥的出現(xiàn)。和HTML和CSS一樣，不同的瀏覽器的JavaScript執(zhí)行方式不同，那么確保您的JavaScript代碼跨瀏覽器兼容可以說(shuō)是一個(gè)惡夢(mèng)。

一個(gè)JavaScript框架或庫(kù)實(shí)際上是一系列工具和函數(shù)，它能更容易產(chǎn)生跨瀏覽器兼容的JavaScript代碼。每個(gè)庫(kù)在許多流行的最新版本的Web瀏覽器經(jīng)過(guò)了嚴(yán)格測(cè)試。因此，您完全可以相信，使用這些框架中的任何一個(gè)，您的基于JavaScript的RIA在不同的瀏覽器和平臺(tái)中將大體一致。

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

JavaScript框架的另一個(gè)重要特色就是能更好的支持事件處理。由于瀏覽器之間的不同實(shí)現(xiàn)，跨瀏覽器事件處理可以說(shuō)是一個(gè)惡夢(mèng)。因此，JavaScript框架通常將瀏覽器事件包裝起來(lái)，并提供一系列有用的跨瀏覽器函數(shù)來(lái)處理它們。一些框架也提供了標(biāo)準(zhǔn)化的代表鍵盤(pán)鍵碼系列的事件（如Esc鍵、Enter鍵、光標(biāo)等等）。

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

一個(gè)JavaScript框架的典型特征

現(xiàn)在讓我們看看大多數(shù)JavaScript框架都具有的一些功能。這些特色有：

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

選擇器

大多數(shù)JavaScript框架可實(shí)現(xiàn)某種形式的快速元素選擇。一般來(lái)說(shuō)，這些選擇器使獲取一個(gè)元素的引用更加快捷，并允許你通過(guò)ID、class、元素類(lèi)型或一些偽類(lèi)選擇符來(lái)選取元素。

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

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

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

MooTools一樣，這些元素利用Prototype的實(shí)用函數(shù)擴(kuò)展。利用Prototype庫(kù)在任何時(shí)候選擇多個(gè)元素的語(yǔ)法是這樣的：

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

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

var allImages = $$('img');
這將得到文檔中所有imag的數(shù)組，每一個(gè)通過(guò)$函數(shù)和其實(shí)用函數(shù)進(jìn)行擴(kuò)展。

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載地址：http://www.denisdeng.com/?p=699

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

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)