近日，有小伙伴來問小編，Web前端開發(fā)框架那個比較好用？為了解答這個問題，今天,小編給大家?guī)砹薟eb前端開發(fā)框架的對比，一起來看看吧！希望對大家有所幫助！
  近幾年隨著jQuery、Ext以及CSS3的發(fā)展，以Bootstrap為代表的前端開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動端都涌現(xiàn)出很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點，本文對這些框架進(jìn)行初步的介紹與比較，希望能夠為大家選擇框架提供一點幫助，也為后續(xù)詳細(xì)研究這些框架的拋磚引玉。
  目前前端框架主要采用JavaScript+CSS模式，我們先來了解一下這兩者。
  預(yù)準(zhǔn)備之JavaScript
  目前主流的JavaScript框架排名中，jQuery和Ext可算是佼佼者，獲得了用戶的廣泛好評。國內(nèi)的一些框架很多也是仿照jQuery對JavaScript進(jìn)行了包裝，不過這些框架的鼻祖YUI還是堅持用自己的JavaScript類庫。
  jQuery是目前用的最多的前端JavaScript類庫，據(jù)初步統(tǒng)計，目前jQuery的占有率已經(jīng)超過46%，它算是比較輕量級的類庫，對DOM的操作也比較方便到位，支持的效果和控件也很多。同時，基于jQuery有很多擴(kuò)展項目，包括jQuery UI(jQuery支持的一些控件和效果框架)、jQuery Mobile(移動端的jQuery框架)、QUnit(JavaScript的測試框架)、Sizzle(CSS的選擇引擎)。這些補充使得jQuery框架更加完整，更令人興奮的是，這些擴(kuò)展與目前的框架基本都是兼容的，可以交叉使用，使得前端開發(fā)更加豐富。
  Ext是Sencha企業(yè)推崇的JavaScript類庫，相比jQuery，Ext JS更重量級，動輒數(shù)兆的文件，使得Ext在外網(wǎng)使用的時候會顧慮很多。但是，另一方面，在Ext JS龐大的文件背后是Ext JS強大的功能。Ext JS的控件和功能可以說強大和華麗到了讓人發(fā)指的程度。圖表、菜單、特效，Ext JS的控件庫非常豐富，同時它的交互也非常強大，獨立靠Ext JS幾乎就可以取代控制層完成于客戶的交互。強大的功能，豐富的控件庫，華麗的效果也使得Ext JS成為內(nèi)網(wǎng)開發(fā)利器。
  框架鼻祖YUI也有自己的JavaScript類庫，DOM操作和效果處理也還比較方便，功能和控件也很齊全，但是相比jQuery和Ext JS顯得比較中庸一些。隨著Yahoo!的沒落，YUI的呼聲也逐漸被新起的框架淹沒，想來也讓人惋惜。
  除了上述的三個JavaScript類庫，還有Dojo、Prototype、Mootools等眾多類庫，由于本文討論的框架多采用上述框架，所以其他框架暫不討論。
  預(yù)準(zhǔn)備之CSS
  隨著CSS3的推出，瀏覽器對樣式的支持更加上了一個層次，效果更加出眾。各框架也紛紛開發(fā)出基于CSS3的樣式，讓框架更加豐富。
  對于CSS3，更是推出了一些預(yù)編譯的擴(kuò)展框架，主要是LESS、Sass和Compass(Compass是基于Sass的擴(kuò)展)。可以方便地進(jìn)行變量定義，格式引用，函數(shù)定義等操作，并內(nèi)置了大量的效果。讓您的CSS開發(fā)效率提升一個檔次。根據(jù)Chris Coyier的比較，Sass+Compass幾乎完勝LESS。由于Sass是用Ruby開發(fā)的，所以也需要相應(yīng)的Ruby環(huán)境將文件編譯成CSS文件。
  國內(nèi)外前端開發(fā)框架對比
  首先我們先對目前國內(nèi)外主流前端開發(fā)框架做一個基本的了解，之后再對他們進(jìn)行一個直觀的對比。
  Bootstrap
  Bootstrap是目前桌面端最為流行的開發(fā)框架，一經(jīng)Twitter推出，勢不可擋。Bootstrap主要針對桌面端市場，Bootstrap3提出移動優(yōu)先，不過目前桌面端依然還是Bootstrap的主要目標(biāo)市場。Bootstrap主要基于jQuery進(jìn)行JavaScript處理，支持LESS來做CSS的擴(kuò)展。如果想要在Bootstrap框架中使用Sass，則需要通過Bootstrap-Sass（https://github.com/thomas-mcdonald/bootstrap-sass）項目增加兼容。Bootstrap框架在布局、版式、控件、特效方面都非常讓人滿意，都預(yù)置了豐富的效果，極大方便了用戶開發(fā)。在風(fēng)格設(shè)置方面，還需要用戶在下載時手動設(shè)置，可配置粒度非常細(xì)，相應(yīng)也比較繁瑣，不太直觀，需要對Bootstrap非常熟悉配置起來才能得心應(yīng)手。
  在瀏覽器兼容性方面，目前Firefox,Chrome,Opera,Safari,IE8+等主流瀏覽器Bootstrap都提供支持。但是在IE支持方面略顯短板，對IE6和IE7支持都不是特別理想。在Bootstrap3中甚至放棄了對IE6、IE7的支持。不過在國內(nèi)，根據(jù)CNZZ的統(tǒng)計，目前IE的占有率仍然達(dá)到46.98%，同時大量國內(nèi)瀏覽器也是采用IE內(nèi)核。這讓我們在使用Bootstrap的時候總是有所顧忌。在Bootstrap2上面，可以通過BSIE項目增加對IE6的支持，但是也不能支持全部效果。
  在框架擴(kuò)展方面，隨著Bootstrap的廣泛使用，擴(kuò)展插件和組件也非常豐富，涉及顯示組件、兼容性、圖表庫等各個方面。
  jQuery UI
  jQuery UI是jQuery項目組中對桌面端的擴(kuò)展，包括了豐富的控件和特效，與jQuery無縫兼容。同時，jQuery UI中預(yù)置了多種風(fēng)格供用戶選擇，避免了千篇一律。如果您對預(yù)置的風(fēng)格不滿意，還可以通過jQuery UI的可視化界面，自助對jQuery UI的顯示效果進(jìn)行配置，非常方便，夠高端大氣上檔次。
  jQuery Mobile
  jQuery Mobile是jQuery項目對移動端的擴(kuò)展，目前支持iOS,Android,Windows Phone,Black Berry等主流平臺。具體支持情況可以參見http://jquerymobile.com/gbs/。另外jQuery Mobile在布局，控件和特效方面都很慷慨。在風(fēng)格方面，與jQuery UI類似，除了預(yù)置的風(fēng)格效果之外，還支持用戶可視化配置的效果。
  可圈可點的是，jQuery Mobile還與Codiqa無縫連接，用戶可以直接通過拖拽實現(xiàn)對界面的設(shè)計，以及代碼的生成。
  Sencha Ext JS
  Sencha Ext JS是Sencha基于Ext JS開發(fā)的前端框架，內(nèi)容極其豐富，控件、特效等支持非常非常豐富，表格、圖畫、報告、布局、甚至數(shù)據(jù)連接，無所不包。只有您想不到，沒有它辦不到。基于Sass和Compass，使得用戶對格式的修改和特效制作更加方便。此外，Sencha有豐富的產(chǎn)品線，Sencha Desktop Packager可以讓您的應(yīng)用擁有桌面應(yīng)用的效果,Sencha Animator基于CSS3更加方便用戶對特效的制作，不光支持桌面端，移動端更是不在話下。在Sencha看來，用Animator做游戲都是輕松拿下。Sencha Space是基于HTML5，提供制作跨平臺應(yīng)用的利器。同時Sencha Ext JS對主流瀏覽器的支持也非常理想。
  Sencha Ext JS有著耀眼的光輝，但是光芒背后總歸有點陰影。除了之前提到的Ext JS太過重量級之外，商業(yè)化是Sencha的另一把利劍。幫助Sencha披荊斬棘之時，也把大把的碼農(nóng)砍在馬下。Sencha規(guī)定，凡是商業(yè)化的應(yīng)用，都需要付費。另外，Sencha的輔助產(chǎn)品也全部收費，否則只能是試用版。這里的輔助產(chǎn)品，其實包括了上面提到的所有產(chǎn)品。
  Sencha Touch
  Sencha Touch是Sencha面向移動端的開發(fā)框架，基于HTML5技術(shù)，了對大多數(shù)移動平臺的支持。Sencha Touch包括豐富的布局，控件和特效。并且Sencha Touch對響應(yīng)式支持的很好，在不同設(shè)備上，甚至在橫屏和豎屏?xí)r都會顯示不同的效果。這種效果是Sencha Touch控件自適應(yīng)的。Sencha Touch也實現(xiàn)了對大多數(shù)移動設(shè)備的支持。Sencha Architect是對移動端的可視化編輯工具，有著不朽的效果，但也有著不菲的身價。
  同時Sencha Touch也支持混合式App創(chuàng)建，也即是基于Web技術(shù)，配合PhoneGap(http://phonegap.com/)或者Cordova(http://cordova.apache.org/)之類的工具，就可以構(gòu)建移動應(yīng)用。Sencha Touch、jQuery Mobile、Foundation這些前端框架負(fù)責(zé)界面和效果的編寫，PhoneGap、Cordova框架則允許通過JavaScript和其他接口對手機設(shè)備的調(diào)用，開創(chuàng)了新的移動端開發(fā)模式，真正實現(xiàn)了移動端的跨平臺開發(fā)。
  Sencha GXT
  Sencha GXT是Sencha對Google的Web Toolkit框架的擴(kuò)展。可以支持通過Java文件的解析，生成HTML5頁面文件，可以與Java環(huán)境無縫集成。有著豐富的控件和特效，并且可以無縫調(diào)用Google地圖等Google應(yīng)用。雖然開發(fā)時不是特別直觀，但是效果還是非常豐富的。與Sencha Ext JS絲毫不顯弱勢。
  Dojo
  目前唯一能與Sencha Ext JS一較高下的框架就只有Dojo了。抱著IBM,VMWare等眾多大腿，Dojo的一顰一笑都額外惹人注目。Dojo項目的產(chǎn)品線和功能也特別豐富。首先，Dojo有自己的DOM解析器Nano，是DOM解析和處理的內(nèi)核。此外，Dojo的Web框架有非常豐富的布局、版式、控件以及特效，對多語言以及圖表的擴(kuò)展支持都非常好，并支持對地圖的操作。大家可以查看它的演示(http://demos.dojotoolkit.org/demos/)，與Ext JS的效果進(jìn)行比較。此外，Dojo還有自己的圖形化設(shè)計和開發(fā)工具M(jìn)aqetta，可以通過拖拽實現(xiàn)設(shè)計。Dojo的風(fēng)格設(shè)置不是在下載的時候指定的，而是通過引用不同的CSS格式來實現(xiàn)。
  Dojo雖然比jQuery重量級不少，但是比Ext JS還是輕量級一些，至少在文件大小上。另外，Dojo還有自己的CDN機制，只要通過配置，就可以對Dojo文件進(jìn)行CDN。由于有IBM,Oracle等大佬的支持，Dojo在與Spring等現(xiàn)有框架支持方面也表現(xiàn)得很理想。
  Dojo Mobile
  Dojo Mobile是Dojo推出的移動端框架，表現(xiàn)也很不俗。在布局，控件，特效方面都下了不少功夫。并支持與所用平臺匹配的風(fēng)格設(shè)置，如果您不喜歡還可以引用不同CSS文件來實現(xiàn)不同效果。
  除了可以在移動端的瀏覽器上使用，Dojo Mobile也支持與PhoneGap無縫連接，可以通過Dojo Mobile開發(fā)移動App應(yīng)用。同時也具有不錯的響應(yīng)性（在寬屏和窄屏上的顯示效果不同）。
  Mootools
  Mootools可以說是目前最輕量級的前端框架，內(nèi)核js壓縮完之后只有8k，完整版壓縮之后也不到100k，遠(yuǎn)比其他框架要小很多。Mootools有自己的面向?qū)ο笤O(shè)計的內(nèi)核Mootools Core。伴隨著最小的文件大小，框架的功能比其他框架也要弱不少，只有在控件和特效上有少量支持。
  Prototype JS
  Prototype JS也是一個簡潔的框架，有著豐富的對DOM操作的功能，對Ajax和JSON支持得都非常好，在使用上與jQuery相比也相差不多。作為Rails默認(rèn)的JavaScript框架，相信對廣大開發(fā)人員也很有借鑒意義的。
  在擴(kuò)展方面，Scriptaculous對Prototype JS進(jìn)行了豐富的擴(kuò)展，主要是在動畫特效、Ajax控制、DOM操作、單元測試方面等。
  YUI
  YUI作為開源前端框架的鼻祖，在框架上的功力非常之深。有著自己的解析DOM的核心框架，并且在特效、動畫、圖表等方面都有豐富的擴(kuò)展，并可以通過YQL直接訪問Yahoo！的數(shù)據(jù)。在用戶經(jīng)常使用的功能方面都有著不錯的表現(xiàn)。
  與jQuery靈活的語法相比，YUI顯得更加中規(guī)中矩，在代碼組織、結(jié)構(gòu)和模式方面都更加講究，更體現(xiàn)出工程師的嚴(yán)謹(jǐn)。同時YUI也有著豐富的產(chǎn)品線，擁有測試框架YUITest、文檔生成框架YUIDoc、自動構(gòu)建框架YUI Build，滿足項目開發(fā)各方面的需求。隨著Yahoo!的沒落，YUI也感覺逐漸步入暮年，但作為相當(dāng)嚴(yán)謹(jǐn)完整的前端框架鼻祖，足以秒殺其他。
  Foundation
  Foundation是ZURB旗下的主要面向移動端的開發(fā)框架，但是也保持對桌面端的兼容，目前已經(jīng)更新到Foundation4版本。框架主要采用jQuery和Zepto（語法酷似jQuery，但比jQuery更輕量級）作為JavaScript基礎(chǔ)，CSS則基于Sass、Compass，有著很好的擴(kuò)展性，并有著豐富的布局，版式和多種多樣的控件與特效，非常方便開發(fā)者使用。控件的響應(yīng)式效果也幫助用戶識別不同瀏覽器效果。
  ZURB作為一個完整的項目組，包括很多原型、設(shè)計、構(gòu)建、分析等一系列工具，為用戶提供完整的服務(wù)。當(dāng)然，有很多服務(wù)是要收費的。
  Kissy
  Kissy是阿里集團(tuán)自主開發(fā)的前端框架，目前在淘寶網(wǎng)、一淘網(wǎng)等阿里系網(wǎng)站上得到不少應(yīng)用。Kissy框架模仿jQuery編寫了自己的內(nèi)核Kissy Core，用于對DOM的解析，Ajax處理等。同時，有著豐富的控件，并實現(xiàn)了一些動畫效果和特效。同樣，在Kissy的控件中也可以看到Bootstrap等國外框架的影子。此外，Kissy abc項目工具可以幫助用戶實現(xiàn)自動化構(gòu)建，并有很多擴(kuò)展組件方便用戶使用。
  應(yīng)該說Kissy是目前國內(nèi)開發(fā)的的前端框架，在實際使用中也經(jīng)過了檢驗，但跟國外成熟框架相比還是有一定差距。
  Kissy Mobile
  Kissy Mobile是Kissy推出的移動版框架，意在開發(fā)出可以在移動瀏覽器和移動應(yīng)用上都可以使用的框架，不過目前項目內(nèi)容還比較少，控件和特效也比較少，也不具有響應(yīng)式的效果。
  Qwrap
  Qwrap是百度有啊團(tuán)隊推出的JavaScript框架，現(xiàn)在被收入360，被廣泛應(yīng)用與360產(chǎn)品中。Qwrap綜合jQuery、Prototype、YUI特點，對JavaScript進(jìn)行了封裝。但是，如果要把Qwrap算成一個前端開發(fā)框架還是有些牽強，因為除了JavaScript類庫之外，Qwrap基本乏善可陳，還處于發(fā)展階段。
  Tangram
  Tangram是百度推出的另一個JavaScript框架，被廣泛應(yīng)用于百度系旗下的產(chǎn)品，與Qwrap類似，Tangram也只能算是一個JavaScript框架，對JavaScript做了不少擴(kuò)展，但是作為前端開發(fā)框架還是顯得比較單薄。基于此，百度企業(yè)繼續(xù)推出了兩個基于Tangram的項目，Magic和Baidu Template。Magic項目基于Tangram對控件和特效都做了擴(kuò)展，增加了10個新的控件。Baidu Template則更多是針對移動端開發(fā)的擴(kuò)展，目前對于大多數(shù)主流移動設(shè)備和操作系統(tǒng)都有支持。
  由此我們可以看到，對于桌面端，目前Bootstrap和jQuery UI已經(jīng)可以滿足大多數(shù)的開發(fā)需求，也在業(yè)界得到了廣泛的應(yīng)用，有著豐富的組件和擴(kuò)展，以及相對簡潔的語法和操作。應(yīng)對我們的基本需求已經(jīng)足夠了。如果您對前端界面的效果有比較高的要求，希望可以應(yīng)用像結(jié)構(gòu)樹這樣比較復(fù)雜的控件，建議您考慮Dojo，抱了這多年的大腿也不是白抱的，效果還是很不錯的。對于，局域網(wǎng)的應(yīng)用，還可以考慮Sencha Ext JS框架，效果更加震撼，但是對網(wǎng)絡(luò)的要求也更高。如果這些還是不能滿足您內(nèi)心的狂野，那只能建議您使用Flex或者SilverLight了。相反，如果您對網(wǎng)絡(luò)速度非常敏感，希望找一個迷您并且功能不錯的框架，那Mootools會是您不錯的選擇。如果您很懷舊，也可以使用YUI，雖然曲線不夠性感，但是內(nèi)容很豐富。如果您是一個Ruby on Rails的開發(fā)人員，建議您可以先看一下Prototype框架，畢竟是默認(rèn)的框架。如果您對上面說到的框架都不滿意，那建議您體驗一下國內(nèi)的框架一段時間，然后再回過頭來看剛才說到的框架，相信您一定會有一種豁然開朗的感覺。
  對于移動端的應(yīng)用，jQuery Mobile,Foundation依然是輕量級選擇，Dojo Mobile和Sencha Touch會為您提供更加強大的功能。同時，您還可以與PhoneGap和Cordova框架結(jié)合使用，利用Web的技術(shù)開發(fā)移動應(yīng)用。不過這種混合式開發(fā)模式興起時間并不長，還在不斷發(fā)展中。
  結(jié)束語
  上面只是當(dāng)前涌現(xiàn)出的前端開發(fā)框架中的一部分，相信還有更多優(yōu)秀的框架還在研發(fā)中心，到此我們對“百花齊放”這一詞有了更直觀的感覺，也說明在沉寂了多年之后，前端開發(fā)的越來越獲得大家的重視，也注定會越來越繁榮。文中的建議只代表筆者個人的初淺意見，大家最終的選擇還要結(jié)合實際的開發(fā)需求。