iT邦幫忙

DAY 20
2

Javascript面面觀系列 第 20

Javascript面面觀:網頁篇《Frameworks/Libraries》

  • 分享至 

  • xImage
  •  

星期天,就輕鬆一點吧。之前介紹的jQuery算是Javascript Frameworks/Libraries中的後起之秀,也是我比較熟悉的。其實還有很多好用的framework,底下只就我有接觸過的第一印象做簡單的介紹。
YUI3
http://developer.yahoo.com/yui/3/

yui3最讓人印象深刻的就是組織良好的模組與關係,並且引用了一個continuation passing style的callback來使用它。最基本的語法就像這樣:

 YUI().use("module1 module2", function(Y) {
 ...
 });

YUI3會自動根據dependency載入需要用到的模組,並且在網頁內容載入完成後,執行後面傳進去的函數,並且把載入的東西使用Y這個參數傳進函數來使用。所有載入的東西就可以透過這個參數來取用。仔細觀察它的結構,還會發現許多很好的設計:所有要載入的東西會放進一個queue裡面,保證他可以依照定義好的dependency來載入,而且還可以載入自訂的模組,載入時同樣可以定義dependency。YUI3會維護一個內部的module cache,所以需要的東西不必載入第二次。用這種方式,YUI3可以只載入非常小的核心,其他部份只有在需要時才載入,大幅提昇了彈性與速度。

prototypejs
http://www.prototypejs.org/

prototype的開創者也是Ruby的使用者,他也把很多Ruby好用的語法加進Javascript來。相較於jQuery及YUI3,prototype的組織是比較鬆散的,但是也因為鬆散,他比較容易與現有的javascript做整合。prototype的pattern是把大量的功能直接加到native javascript object上,讓使用更方便。在無法直接加上功能的狀況下,他也可以透過一個類似proxy的方式把物件包裝起來,這樣就可以用同樣的方式使用。

另外一個讓人印象深刻的是他的Class物件,他提供了比較像class base的物件導向機制,讓你可以自己新增物件、繼承物件、擴充物件,提昇需要用物件導向的方式使用Javascript這個語言的方便性,這也是許多人選擇使用prototype的重要原因。

另外一個好用的東西是template,使用這個在需要大量動態產生html/xml的時候很好用,也可以減少重複的程式碼。

extjs
http://www.extjs.net/

我會用extjs是為了找一個純client的工具做出操作介面的原型,以提供給廠商做需求分析的參考。

ext最早是YUI的延伸,後來獨立成一個完整的framework。如果在意GUI的話,我想ext是最快入手的framework,他提供大量的GUI component,而且內建一個bridge可以立刻與YUI或jQuery做整合。如果仔細看這些GUI component,會發現要做這樣的東西需要花非常大的功夫,除了在程式上做好元件的包裝,還需要做大量的美工與UI設計的功夫,還得解決許多CSS外觀的問題。

他的文件與範例非常完整,API的組織也很清晰直覺,所以很好上手,幾乎所有的GUI元件透過他的範例做基礎再參考API手冊微調一下就可以立刻使用了,如果想要快速做出一個GUI prototype,我想extjs是一個非常好的選擇。

dojo
http://www.dojotoolkit.org/

dojo大概是最「古老」的framework之一。累積了多年的開發,他大概是功能最多最全面的framework了。如果要使用javascript做大型的開發,使用dojo還是主要的選擇。他還特別支援像是web service這類的服務,在圖形、動畫這方面的支援也很強(這是我早期的印象)。他的UI framework叫做dijit,也是一個以template為基礎的可以抽換外觀主題的元件庫。

其他
其實還有很多著名的Javascript Framework/Library:
* mootools http://mootools.net/
* script.aculo.us http://script.aculo.us/
* mochikit http://www.mochikit.com/
* Rico http://openrico.org/

網頁篇小結
之前去聽Kiang講的CakePHP課程,他覺得學習framework只要有緣份,看對眼後一門深入就對了。我想學習Javascript的framework也是這樣,先找一種順手的深入學習就對了。但是重要的還是要理解幾件事情:Javascript這個語言的核心觀念、Framework設計的緣由以及要解決的問題。這樣不論是學習哪一種framework,都會有所得,也可以在決定要在不同狀況下使用哪個framework時,做比較好的判斷。


上一篇
Javascript面面觀:網頁篇《jQuery inside - plugin》
下一篇
Javascript面面觀:應用篇《測試》
系列文
Javascript面面觀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言