網路城邦

上一篇 回創作列表 下一篇   字體:
10個加速Ajax開發的框架
2009/11/18 09:34:08瀏覽1876|回應0|推薦0

隨著Ajax盛行,許多網站紛紛採用這項技術,而這股時代趨力的背後,各式各樣的Ajax框架可說是最大的功臣,讓開發人員不用重造輪子,省去從JavaScript底層重新開始構造程式的工作。

不過開發人員也許會疑惑,Ajax不就是JavaScript嗎?簡單的腳本程式還需要框架?事實上,Ajax框架的確能帶來許多好處。

簡化JavaScript的使用難度
許多開發人員低估JavaScript的難度。過去JavaScript往往被當作是擾人的小玩意,不是彈跳出視窗,就是跑馬燈、動態文字等花俏的應用。然而JavaScript獨特的物件觀念與靈活的語法,賦予它深入操作文件物件模型(DOM)與操控CSS的強大能力,而能夠充分應用瀏覽器 XMLHttpRequest物件,更打下今日Ajax大片江山。

要全盤掌握這些應用,並沒有想像中容易,由於實作的方式充滿彈性,只要檢視各個框架語法,就可發現它們之間的差異性之大。但現存的各種框架致力於簡化JavaScript的應用難度,因此使用Ajax框架,能讓開發人員更快專注在開發工作上。

解決煩人的瀏覽器相容性問題
即使開發人員功力深厚,可以輕鬆駕馭JavaScript語法,然而一旦遇到琳瑯滿目的各式瀏覽器,通常也得敗下陣來。

不同瀏覽器對文件的解析與語法的支援並不一致,在各種作業系統或版本上有時也會表現出不同的行為(例如IE6與IE7的差異),讓許多JavaScript應用程式的瓶頸,都發生在相容性上。

使用Ajax框架的好處之一,便是它已經預先為開發人員解決瀏覽器相容性問題。

開發流程變得更單純
開發過非同步傳輸程式經驗的人,就一定能體會撰寫過程相當煩瑣,必須檢查回傳狀態、指定後端應用程式和回呼程式等細節,而這些流程,Ajax框架通常會予以簡化,減少開發人員與細節奮鬥的時間。

另外,許多Ajax框架都提供了拖曳元件、動畫效果、動態選單等,只需指定方法就能使用,節省不少開發力氣。

不過Ajax框架實作的方式各不相同,有些JavaScript語法開發,也有的用.NET或Java實作;除了在用戶端執行,也有利用伺服器端來實現的方式。我們特別選出十種Ajax框架,讓開發人員瞭解各項Ajax框架的適用性。

1. APS.NET的官方解決方案
ASP.NET AJAX
網址:ajax.asp.net

ASP.NET AJAX是微軟.NET平台上的解決方案,提供涵蓋伺服器端與用戶端所需的AJAX技術與JavaScript整合機制。

透過與下載與安裝ASP.NET AJAX到Visual Studio 2005當中,即可利用預設的控制項,開發出一些視覺特效與非同步傳輸的應用。

另外,ASP.NET AJAX也提供控制項的Toolkit,包含開發人員想自行開發AJAX應用時所需的基底類別與專案範本。

ASP.NET AJAX除了處理瀏覽器的相容性問題,也讓用戶端的JavaScript在開發時加入物件導向特性,例如型別系統、資料型別、命名空間、事件等,使得程式碼更容易除錯、維護與重複使用。

雖然ASP.NET AJAX提供伺服器與用戶端的解決方案,透過Visual Studio2005加持,也讓開發、除錯的難度降低,不過和其他AJAX框架相比,許多AJAX效果和功能都還在測試階段(在CTP版本中供用戶測試),可以應用的功能有限。

2.支援「上一頁」與加入「我的最愛」功能
Dojo
網址:dojotoolkit.org

一些輕巧的Ajax框架,用意在解決JavaScript遇到的易用性或特效問題,相較之下,Dojo更像是個面面俱到的JavaScript工具套餐,號稱可以降低網頁或網頁應用程式前端開發速度。

Dojo支援拖拉、淡出、淡入、移動、透明、操作SVG圖檔等動態效果,它的Widget也讓使用者可以輕易使用選單,分頁標籤(tab)、樹狀結構、日曆、文字編輯器等效果,當然也支援非同步處理的Ajax功能。

另外,Ajax由於以動態的方式操作文件物件,導致使用者習於使用上一頁、下一頁的功能無法使用,也無法利用像是「我的最愛」的功能,將使用者所需的頁面留下正確的書籤,但這些需求Dojo都已有解法。

比起其他輕巧型的Ajax框架,要摸熟Dojo顯然要下較多的功夫才能掌握,目前文件較少也是個問題。不過由於它的功能更為完整,因此開發人員需要自行加工的地方就相對較少。

3.可由JavaScript呼叫Java語法
DWR(Direct Web Remoting)
網址:www.getahead.ltd.uk/dwr

DWR是設計給Java語言的Ajax框架,讓開發人員可以利用JavaScript程式呼叫Java語法。

DWR的運作可分為兩個部分,一方面用在瀏覽器上,處理連接伺服器端Java程式,另一部分則是用來展示回傳資料。透過DWR呼叫Java的函式,它會處理連接處理的細節,而當資料被處理完成後,DWR就會執行回呼函式,以進行後續呈現的處理。

在安裝DWR時必須編輯Web應用程式的部署描述檔案,而且也要編輯DWR特定檔案。 DWR配置檔案指定了可以遠端建立和呼叫的類別。檔案中包含伺服器程式碼的JAR檔案,另外還有JavaScript檔案,提供一些輔助函式,處理互動呈現的效果。

DWR最大的好處就在於讓Java開發人員可以利用熟悉的語法來處理頁面與資料,並且能配合Struts、Tapestry來使用。不過從用戶端呼叫遠端伺服器的Java程式,仍存在一些安全上的疑慮,在使用時必須注意。

4.以易用性、簡化語法為目標
jQuery
網址:jquery.com

jQuery是最近大受矚目的Ajax框架,它以Prototype為本,簡化並提升JavaScript語法的功能。

jQuery有點像是將Prototype所做的事再推向極端,讓使用者改變原有撰寫JavaScript的方法。它最為人稱道的地方,就在於強大的存取頁面元素功能,無論是文件的節點、CSS的選取子或Xpath表達式,都能利用「$( )」函式快速存取,並賦予它更多的功能。

此外,它的chainable方法能將一串處理函式結合在一起,讓程式碼更為簡潔。另外jQuery也提供一些動態效果,不過和其他框架相比,這部分就顯得陽春許多。

jQuery的優劣其實都在同一件事情上,一方面它簡化JavaScript的語法,讓撰寫程式更為簡便,就好用的目的而言,的確是相當成功。然而這卻讓JavaScript的程式碼會發展成另一種樣子,對於初學者而言,一開始學習時,必須要花點時間去適應。

5.依功能需求,下載模組化工具
MooTools
網址:mootools.net

前身是以輕巧著稱的Moo.fx,與Prototype有著相似的概念和語法,但在物件導向上做得更為徹底,而且在動畫效果和互動行為上,提供更多的功能與應用,能讓使用者更快的寫出物件導向概念的JavaScript語法。

MooTools的下載檔依模組分為核心、類別、原生語法、網頁元素、瀏覽器視窗、動畫效果、拖曳、遠端傳輸與外掛程式,除了核心程式是必要下載之外,其他可依使用者需求,下載所需的JavaScript檔案,借此減少檔案的體積。

雖然MooTools將JavaScirpt物件導向化的結果做得更徹底,有利於程式的擴展與維護,不過也挑戰原先熟悉JavaScript物件觀的人,需要較多的時間適應。

不過無論是網站本身呈現、程式語法展示,甚至是模組下載介面,MooTools都展現相當精緻的動態效果,參與網站的示範,很快就能實作。

6.大大擴充JavaScript基本功能
Prototype
網址:prototype.conio.net

Prototype不像其他框架,有許多炫人耳目的動態效果,而是專注在改良JavaScript本身的功能,讓JavaScript更容易使用,也更具物件導向風格。

Prototype在簡化JavaScript方法上,提供許多方便的語法,最著名的如「$()」函式,只要將DOM節點的ID傳入這個函式,就能取得這個節點物件,簡化了DOM的操作方法。而這個方式也幾乎成為其他開發框架延用的功能。其他如「$F( )」函數能直接處理Web表單元件的值,「$A( )」函數能將列舉的字串轉換成陣列等,都是Prototype經典功能。

在非同步處理上,它也提供了Ajax.Request、Ajax.Updater等類別,讓開發人員在處理非同步運作時可以利用它提供的方法,讓溝通行為更為容易、正確。

雖然Prototype沒有太多花俏的功能,不過它簡化JavaScript的特性,仍讓許多Web開發人員衷情於它。

7.平順、豐富的動畫效果
Rico
網址:openrico.org

Rico是基於Prototype之上的Ajax框架,在西班牙文中,「rico」即為「rich」的意思,這也說明Rico的目標是提供開發人員利用JavaScript達到豐富的網頁元件與應用。

Rico提供非同步的Ajax應用,可讓非同步回應繞送到一個或多個回呼以操作DOM或JavaScript物件。在動畫效果方面,支援如拖曳功能、縮放、過場、進度指標和黃褪技術等,可立即套用豐富的效果。

由於Rico志在讓JavaScript也能表現出Flash般的動畫效果,因此像是網頁元件的顏色、形狀或下拉效果的變化都相當平滑,也能讓DIV方塊做出圓角的效果,讓視覺表現更具Web 2.0風格。

Rico的LiveGrid功能同樣是為人所稱道之處。它能讓表單資料產生更多元的表現方式,突破表格的檢視行為。例如它可以讓使用者在觸動捲動軸時,動態下載資料,利用這種方式,可以分段下載,就無需採用分頁檢視的手法。

8. RoR與CakePHP的指定框架
Script.aculo.us
網址:Script.aculo.us

Script.aculo.us是建立在Prototype之上的Ajax框架,是解決視覺效果與互動行為的輕巧框架,Ruby on Rails及PHP上的開發框架CakePHP等,都是使用Script.aculo.us作為Ajax的解決方案。

在視覺效果上,Script.aculo.us利用改變透明度、大小、位置以及結合以上三種元素,產生更多種變化,例如淡進、淡出、閃動、提示等數十種視覺效果,可讓頁面效果更具變化,引導使用者與介面程式互動等。

在互動介面方面,提供了拖曳元件、就地編輯元件(In-Place Editor)、水平、垂直拉動捲軸、自動完成、元件排序、購物車等,這些預先打包成套的功能,解決了瀏覽器相容性的問題,也讓使用者很容易可以直接導入在現有的專案功能中,節省自行開發的時間。

此外,Script.aculo.us包含單元測試(Unit Test)框架,可以利用本身的test物件,用來驗證程式執行的狀態,並且支援模擬滑鼠與鍵盤的功能。

9.有Yahoo!網站服務背書的框架
Yahoo! User Interface
網址:developer.yahoo.com/yui/

Yahoo! User Interface(YUI)是Yahoo!所提供的Ajax框架,提供便捷的開發方式與許多JavaScript函式庫,使用者可以利用它來開發互動式的介面與Ajax效果。 YUI可分為三大部分,包含工具、CSS和控制元件等函式庫,工具部分是核心物件,負責一些較底層的處理功能,CSS則提供像版面規畫、字體工具。而控制元件則有自動完成、月曆、樹狀結構這些工具。

由於YUI實際應用在Yahoo!的網站中,因此實作的可靠性相當不錯,在YUI網站上也提供不少範例與文件,能協助使用者快速上手。雖然YUI是由Yahoo!所推出,不過它遵循JavaScript的語法規則,並將樣式、內容與行為分離,開發人員如果要擴充功能,也相當容易。

一般Ajax框架都需要置放在網站的伺服器端,隨著頁面一起下載,YUI除了採取這種方式之外,也提供使用連結的方式,使用者只要在應用的頁面中將路徑指向YUI主機即可。

10.適合Java開發環境的企業級解決方案
ZK
網址:www.zkoss.org

ZK是基於Ajax、XUL(XML User Interface Language)、Java網頁應用程式的開發框架,讓網頁的操作行為可以像是桌面應用程式一般。

不同於用戶端的Ajax解決方案,ZK由伺服器端出發,利用ZK處理Ajax互動的引擎,處理用戶端的頁面行為,也因此大為降低利用JavaScript作為動態開發語法時,常遇到的瀏覽器相容問題。

ZK提供超過70個XUL組件及80個XHTML組件,因此一些網頁或應用程式常見的功能,ZK都提供現成的工具可讓使用者立即應用,只需利用ZK以XML為基礎的使用介面設計語言,即可產生這些組件。應用的人則可在後端利用Java語言進行來處理程式邏輯與資料傳遞。

由於ZK利用Java語言開發,屬於以伺服器為中心的解決方案,因此必須安裝支援Java的應用程式伺服器(如Tomcat)才能執行。

( 興趣嗜好電腦3C )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=maxmas&aid=3508155