J2EE架構之技術選型 - Javascript框架的選擇

 隨着AJAX的流行，在客戶機瀏覽器中運行JavaScript來調用後臺的遠程服務，使用界面的局部刷新，使達到體驗比較友好的界面變成一個趨勢。

直接使用Javascript來完成所需要的業務功能不失爲一個好的主意，但是如果想要客戶端Javascript代碼有清晰的體系結構，易於維護和擴展，提高開發效率，使用一些Javascript庫會更容易。

Google Web Toolkit(GTW)是通過寫Java源代碼來自動生成所需要的Javascript客戶端代碼，功能強大，模式新穎。拋開這類完全封裝和不透明的框架，最流行的Javascript框架當屬Dojo,JQuery和Prototype JS。下面我們就比較一下這3個框架。

Dojo

http://www.dojotoolkit.org/

BSD license/Academic Free License version 2.1, 可以隨意更改發佈，只需要在源代碼或者發佈包裏包含原有BSD協議。

Dojo是目前最強大的Javascript庫。 它包含三個部分dojo, digit和dojox。Dojo是這個類庫的基本實現，包括對象查詢遍歷，事件模型，類繼承， ajax等等。Digit是dojo的UI庫，包含很多種常見的Html UI界面組件。Dojox是一個擴展庫，包含很多實用組件和UI界面組件。這個擴展庫裏面包含了一個非常常用的DataGrid組件。Dojo封裝了ajax的實現，在XMLHttpRequest不可得的情況下，可以使用iframe實現相同的功能， 即支持平穩退化(graceful degradation)特性。Dojo模仿Java API的程序結構。

但是，Dojo文件體積比較大，客戶端下載速度比較慢。Dojo語法不夠簡潔明瞭。源代碼龐大複雜，不易於定位bug或者擴展。

JQuery

http://jquery.com/

MIT/GPL， MIT允許隨意修改發佈，只要包含原license。

JQuery也包含兩個部分JQuery JS和JQuery UI. JQuery JS是這個庫代碼的基本實現，包括基本的HTML元素的操作, ajax等等。JQuery UI包含常用的簡單的界面元素的實現。此庫代碼風格簡潔高效，最流行的就是它的$函數。 JQuery代碼體積小，下載速度快，代碼簡潔易讀，容易擴展。

但是， JQuery所支持的UI組件略微簡單，不夠強大。而且沒有Grid的組件實現。

Prototype JS

http://prototypejs.org/

MIT License，只需要把license文件一起發佈就可以做任何事情，包括更改，擴展和重新發布。

Prototype JS是一個基礎的Javascript庫，不包含UI界面的實現。這個庫採用類驅動的形式組織，即使用了javascript的prototype機制。同樣對ajax有較好的支持。代碼風格優雅，易讀，容易擴展。Prototype同樣有$方法，但是$方法沒有像JQuery那樣可以通過CSS進行查找HTML元素。

但是，缺少對UI組件的支持。

總結

在項目開發的過程中，當我們決定使用Javascript庫作爲前臺界面的開發框架，我們應該慎重考慮選用哪個框架， 畢竟每個框架都有自己的優點和缺點。Dojo的功能最強大，最完善，支持各種UI組件，如果使用Dojo，客戶端展示需要在界面加載時進行Dojo的客戶化初始化，如果頁面包含太多的Dojo UI組件，這樣會降低頁面的加載速度。考慮到Dojo本身的龐大性，導致下載Dojo代碼需要一定的時間，也會減低頁面加載效率。而且，Dojo源代碼龐大複雜，難於閱讀，如果需要對UI的組件進行客戶化，或者出現難以預料的bug, 將會很難通過讀或者修改源代碼來解決。我在項目中很少輕易使用Dojo. JQuery是個不錯的選擇，代碼簡潔高效，支持基本的UI組件，如果需要其他客戶化的組件可以在JQeury的基礎上繼續開發，JQeury本身也支持Plugin。JQeury的源代碼簡潔明瞭，也不算是複雜，出現問題可以通過讀其源代碼解決。我在項目中更多的就是使用JQuery。Prototype JS也是一個好的選擇，如果不需要動態的創建UI組件, 只需要使用Javascript進行客戶端的邏輯實現，prototype是個不錯的選擇，prototype源代碼短小精悍，容易修改和擴展。項目中曾經使用prototype實現相關組合框和多個Grid的刷新。