幾種常見前端開發框架的對比研究

閆海舟+賀秀麗

摘 要：隨著互聯網的飛速發展，大批優秀的前端開發框架如雨后春筍般進入開發者視野，開發素材不斷豐富，功能越來越強大，為開發工作者提供了極大的便利。文章對一些常用開發框架進行初步對比研究，為廣大開發者提供一些參考。

關鍵詞：PC端；移動端；開發框架；對比研究

0 引言

近年來，PC瀏覽器和各類移動端瀏覽器出現了許多非常出色的開發框架，在開發素材的多樣性和使用方便性上都有了極大提升，幾種常見的開發框架都有各自的特點，本文對這些前端開發框架各自的特點進行對比研究，為不同人群對各類普通PC網站及移動端Web網站開發提供一些幫助。

1 幾種覺前端開發框架

1.1 jQuery UI和jQuery Mobile開發框架

jQuery UI和jQuery Mobile，這兩種開發框架在布局、版式特效和控件方面非常出色，不但內置了多種風格可供用戶使用，而且用戶還可以根據需求通過可視化配置對其顯示效果進行自主配置，使用方便、效果出色。jQuery UI 是以jQuery為基礎的開源JavaScript網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。jQuery Mobile針對各類移動端擴展，目前主流的移動操作系統如蘋果公司的IOS系統、谷歌公司的Android系統、微軟的Windows Phone系統、黑莓的Black Berry系統等，都支持良好，和Codiqa配合使用可以實現界面的拖曳設計和生成代碼，是移動端開發框架的理想選擇。

1.2 Bootstrap開發框架

社交媒體Twitter采用 Bootstrap作為其PC端開發框架，其衍生品也可作為移動端開發框架。該框架的JavaScript處理基于jQuery技術，并在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，并兼容大部分jQuery插件。CSS 擴展可以使用 LESS，還可以使用Bootstrap-Sass增加兼容，以實現在開發框架內使用Sass。Bootstrap框架內置了功能非常豐富的Web組件，在頁面布局、版式、控件和特效等方面用戶有很大的自由度和開發空間，可以非常方便、快速地創建一個美觀且功能完善的網頁。Bootstrap框架兼容性也比較好，常用瀏覽器如IE8，Firefox，Safari，Chrome等都能很好地兼容。稍顯不足的地方是在IE瀏覽器的支持方面，其對IE6，IE7的支持并不是太好，在其新版本中甚至已經不再對IE老版本瀏覽器提供支持。據調查，IE瀏覽器仍是目前使用率最高的瀏覽器，而且其它瀏覽器中有一些還是使用的IE內核，這讓開發者使用該框架時還是有一些顧慮。目前該框架使用較為廣泛，針對其開發的各類插件也比較豐富，這使用戶在使用時有了更大的便利。

1.3 Sencha Ext JS開發框架

基于Ext JS開發的Sencha Ext JS有相當豐富的內置資源，在界面布局、版式、特效、各類控件方面表現不俗，能夠充分發揮用戶的想象力，用戶在制作特效和修改格式時非常方便。Sencha家族還有其他功能強大的開發產品，同時支持PC端和移動端的Sencha Animator，基于HTML5的Sencha Space等，其中Sencha Space更是跨平臺應用制作的利器。同時，該開發框架也支持大多數常用瀏覽器，為用戶提供了寬廣的創作空間。但Sencha Ext JS開發框架及其系列產品并不免費，其開發成本相對較高。

1.4 Sencha Touch開發框架

Sencha 面向移動端的開發框架Sencha Touch是基于HTML5技術的，其對大多數移動端有良好的支持性，也擁有豐富多樣的布局、特效和控件，Sencha Touch一個很突出的優點是對響應式有非常好的支持度，在移動端越來越多樣化的情況下，實現了對大多數移動設備的支持，并且顯示特性特別出眾，根據其控件的自適應特性，可以為設備提供橫、豎不同的顯示效果。該開發框架配合其他工具還可以用于混合式應用軟件開發，界面和效果由前端框架負責開發，其他配合工具如Cordova，PhoneGap等則允許通過JavaScript及其他接口調用手機設備，這是一種新的移動端開發模式，為跨平臺開發移動端提供了一種新的選擇。

1.5 Sencha GXT開發框架

Sencha GXT是Sencha對Google的Web Toolkit框架的擴展，可以與Java環境無縫集成。該開發框架能夠通過解析Java文件，生成HTML5頁面文件，同樣有著非常豐富的布局、版式、控件和特效，同時，該開發框架還可以調用Google應用，使用效果很好。雖然該開發框架在應用時不如其他開發框架直觀明了，但其效果并不亞于其他開發框架，甚至在某些方面還更勝一籌。

1.6 Dojo開發框架

Dojo是一款非常優秀的開發框架，該開發框架的風格設置不是在下載的時候指定的，而是通過引用不同的CSS格式來實現。其在頁面布局、版式、控件和特效等方面也非常豐富，相較于Sencha Ext JS也毫不遜色，其對多語言、圖表甚至地圖的擴展支持都很搶眼。雖然Dojo開發框架體量不小，但相較于Sencha Ext JS來說還是要好上不少。該開發框架有著自己的CDN機制，可以通過配置Dojo文件進行CDN。Dojo有著豐富的產品線和功能，如圖形化設計和開發工具Maqetta等，在IBM，Oracle等支持下，在與Spring等現有框架的支持方面也表現非常出色。Dojo推出的移動端開發框架Dojo Mobile在各方面也都有非常出色的表現，可以與開發平臺保持風格一致性，也可以通過CSS引用來實現其他效果。

1.7 Mootools開發框架

輕量化前端開發框架代表Mootools壓縮后框架內核只有8 kB大小，即使是完整版壓縮后也只有100 kB，名副其實的輕量級開發框架，但相較于其他一些開發框架來說，其功能相應的也要弱上不少，控件和特效數量有限。

1.8 YUI開發框架

YUI作為開源前端框架的鼻祖，該開發框架組織代碼縝密，結構嚴謹，功能完善，在頁面布局、版式、控件、特效和圖表等各方面表現都非常出色，擴展豐富，同時YUI產品線也非常豐富，測試框架YUITest，文檔生成框架 YUIDoc，自動構建框架YUI Build等都是旗下非常優秀的產品，能夠滿足開發者多樣化的工作需求。

1.9 Foundation開發框架

Foundation是主要面向移動端的開發框架，但同時其對桌面端也兼容良好，JavaScript基礎是jQuery和Zepto，組織代碼類似jQuery，擴展性良好，而且很輕量，控件、版式、布局等比較豐富，能夠滿足開發者日常使用，付費后可以提供更加豐富、完整的功能。

1.10 Kissy開發框架

阿里集團擁有強大的技術及資金優勢，自主研發了前端開發框架Kissy，并在其系列網站廣泛使用，Kissy開發框架的內核Kissy Core是參照jQuery編寫的，其對DOM和Ajax的解析處理與jQuery類似。Kissy控件數量不少，能實現較為豐富的動畫和特殊效果，與Bootstrap等框架較為相似，在國內各類開發框架中首屈一指，表現較為出色，但相對國外一些成熟的開發框架來說，還有要存在一些差距。Kissy abc是一個很有特點的項目工具，它能夠使開發者方便地實現自動化構建，而且也有許多擴展組件供用戶使用。

1.11 Qwrap和Tangram開發框架

同樣作為國內知名互聯網企業，百度公司研發了Qwrap和Tangram開發框架，Qwrap集合了多款國外成熟框架的特點，采用JavaScript模式封裝。Tangram也基于JavaScript開發，并做了很多擴展，Qwrap和Tangram這兩款開發框架還處于研發階段。同時，百度公司還先后推出了Magic和Baidu Template兩款基于Tangram的項目，針對桌面端和移動端增加控件和特效，兼容性良好。

對于開發者來說，Bootstrap和jQuery UI是兩款不錯的開發工具，大多數開發任務使用這兩款工具都能很好地完成，是目前業界廣泛使用的主流開發框架，操作和組織代碼比較簡潔，使用方便快捷。對于一些在某方面有特殊要求的開發任務，如對前端界面效果要求較高的開發任務，可以使用Dojo，對局域網應用有要求的可以使用Sencha Ext JS，考慮網絡速度影響的可以使用Mootools，主要針對移動端應用開發的可以選擇jQuery Mobile，Dojo Mobile等，總之要根據不同需求選擇一款合適的開發框架，對于出色地完成開發任務能起到事半功倍的效果。

2 結語

以上只是對國內外常用的前端開發框架中的一部分進行對比研究，隨著互聯網的高速發展和技術的不斷進步，還會出現更多、更優秀的前端開發框架，為開發者提供優質、高效的開發工具。

基金項目：2015年內蒙古化工職業學院院級科研項目；項目編號：HYZR1512。

作者簡介：閆海舟（1980— ），男，內蒙古呼和浩特，碩士，講師；研究方向：機械化及自動化。

[參考文獻]

[1]尹婷，趙思佳.基于jQuery框架的AJAX網站設計模式的研究[J].湖南環境生物職業技術學院學報，2010（3）：1-4.

[2]張露.移動多平臺跨平臺開發工具集的設計與實現[D].武漢：華中科技大學，2013.

Abstract： With the rapid development of the Internet， a large number of outstanding front-end development frameworks mushroomed into the developers visions， the development of materials continue to enrich， more and more powerful， for the development of workers to provide a great convenience. This paper makes preliminary comparative research on some common development framework， and provides some references for the majority of developers.

Key words： PC terminal； mobile terminal； development framework； comparative research