摘要:現代網站和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程式碼。每個庫在許多流行的最新版本的網頁瀏覽器經過了嚴格測試。因此,您完全可以相信,使用這些框架中的任何一個,您的基於JavaScript的RIA在不同的瀏覽器和平台中將大致一致。
除了瀏覽器相容性問題外,JavaScript框架可以更容易地編寫程式碼去取得、遍歷及操縱DOM元素。它們不僅能提供一個快速的函數來取得一個DOM元素的引用,而且還允許菊花式的DOM遍歷函數鏈尋找父母、子女或任何深度的兄弟節點元素。最後,框架提供了一系列的函數,使其更容易的操縱這些對象,允許其內容更改、添加、刪除,或操縱class的樣式而影響元素的外觀。
JavaScript框架的另一個重要特色就是能更好的支援事件處理。由於瀏覽器之間的不同實現,跨瀏覽器事件處理可以說是一個惡夢。因此,JavaScript框架通常會將瀏覽器事件包裝起來,並提供一系列有用的跨瀏覽器函數來處理它們。一些框架也提供了標準化的代表鍵盤鍵碼系列的事件(如Esc鍵、Enter鍵、遊標等等)。
所有這些功能是非常有用的,JavaScript框架已在其最近流行Ajax應用中發揮重要作用。和JavaScript其他方面一樣,每個網頁瀏覽器傾向於支援以不同的方式Ajax,使Ajax支援所有的瀏覽器將是很繁重的工作。幾乎所有的JavaScript框架都包括一定形式的Ajax函式庫,通常是提供Ajax請求和回應對象,在對回應作出評價後,更新DOM元素,輪詢一個特定的請求。
一個JavaScript框架的典型特徵
現在讓我們來看看大多數JavaScript框架都具有的一些功能。這些特色有:
為了更好的詮釋這些特色,我將從下面一個或多個JavaScript框架中列舉一個例子:Prototype, jQuery, YUI,ExtJS和MooTools。雖然每個框架的執行情況和語法不同,但其概念大致相同。每個框架都有一個詳細的API參考,你可以參考它來決定如何使用這些特定函式庫的特色功能。