摘要：現代網站和web應用程序趨向於依賴客戶端的大量的javascript來提供豐富的交互。特別是通過不刷新頁面的異步請求來返回數據或從服務器端的腳本（或數據系統）中得到響應。在這篇文章中，你將會了解到javascript框架如何更快、更方便的創建互動性強、響應快得網站和web應用程序。
導言：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框架都具有的一些功能。這些特色有：
為了更好的诠釋這些特色，我將從下面一個或多個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”的行，這在對每行進行操作時很有用（交替變換表格每一行的顏色）。
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其它偽類元素的例子包括：
如前所述，並非所有的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對象，換句話說，找到與選定元素有父子和兄弟關系的元素。