幾種常見前端開發(fā)框架的對比研究

閆海舟+賀秀麗

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

關(guān)鍵詞：PC端；移動(dòng)端；開發(fā)框架；對比研究

0 引言

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

1 幾種覺前端開發(fā)框架

1.1 jQuery UI和jQuery Mobile開發(fā)框架

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

1.2 Bootstrap開發(fā)框架

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

1.3 Sencha Ext JS開發(fā)框架

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

1.4 Sencha Touch開發(fā)框架

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

1.5 Sencha GXT開發(fā)框架

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

1.6 Dojo開發(fā)框架

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

1.7 Mootools開發(fā)框架

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

1.8 YUI開發(fā)框架

YUI作為開源前端框架的鼻祖，該開發(fā)框架組織代碼縝密，結(jié)構(gòu)嚴(yán)謹(jǐn)，功能完善，在頁面布局、版式、控件、特效和圖表等各方面表現(xiàn)都非常出色，擴(kuò)展豐富，同時(shí)YUI產(chǎn)品線也非常豐富，測試框架YUITest，文檔生成框架 YUIDoc，自動(dòng)構(gòu)建框架YUI Build等都是旗下非常優(yōu)秀的產(chǎn)品，能夠滿足開發(fā)者多樣化的工作需求。

1.9 Foundation開發(fā)框架

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

1.10 Kissy開發(fā)框架

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

1.11 Qwrap和Tangram開發(fā)框架

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

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

2 結(jié)語

以上只是對國內(nèi)外常用的前端開發(fā)框架中的一部分進(jìn)行對比研究，隨著互聯(lián)網(wǎng)的高速發(fā)展和技術(shù)的不斷進(jìn)步，還會出現(xiàn)更多、更優(yōu)秀的前端開發(fā)框架，為開發(fā)者提供優(yōu)質(zhì)、高效的開發(fā)工具。

基金項(xiàng)目：2015年內(nèi)蒙古化工職業(yè)學(xué)院院級科研項(xiàng)目；項(xiàng)目編號：HYZR1512。

作者簡介：閆海舟（1980— ），男，內(nèi)蒙古呼和浩特，碩士，講師；研究方向：機(jī)械化及自動(dòng)化。

[參考文獻(xiàn)]

[1]尹婷，趙思佳.基于jQuery框架的AJAX網(wǎng)站設(shè)計(jì)模式的研究[J].湖南環(huán)境生物職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2010（3）：1-4.

[2]張露.移動(dòng)多平臺跨平臺開發(fā)工具集的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢：華中科技大學(xué)，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