閆海舟+賀秀麗

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

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

0 引言

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

1 幾種覺(jué)前端開(kāi)發(fā)框架

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

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

1.2 Bootstrap開(kāi)發(fā)框架

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

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

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

1.4 Sencha Touch開(kāi)發(fā)框架

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

1.5 Sencha GXT開(kāi)發(fā)框架

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

1.6 Dojo開(kāi)發(fā)框架

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

1.7 Mootools開(kāi)發(fā)框架

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

1.8 YUI開(kāi)發(fā)框架

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

1.9 Foundation開(kāi)發(fā)框架

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

1.10 Kissy開(kāi)發(fā)框架

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

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

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

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

2 結(jié)語(yǔ)

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

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

作者簡(jiǎn)介：閆海舟（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)多平臺(tái)跨平臺(tái)開(kāi)發(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