前端框架不斷推新，眾多IT企業(yè)都面臨著“如何選擇框架”，“是否需要再造輪子”的抉擇。去哪兒網(wǎng)前端架構(gòu)師司徒正美分析了各主流行框架優(yōu)劣點(diǎn)、適用場(chǎng)景，并針對(duì)不同規(guī)模的公司、項(xiàng)目給出了相應(yīng)的前端技術(shù)選擇方案。
最近幾年，前端技術(shù)迅猛發(fā)展，差不多每年都會(huì)冒出一款主流的框架。 每次新開業(yè)務(wù)線或啟動(dòng)新項(xiàng)目時(shí)，首先第一件事就是糾結(jié)：使用什么框架，重造什么輪子？

RequireJS，前端技術(shù)發(fā)展分水嶺

在五六年前，移動(dòng)端還沒有興起，我們沒有什么選擇，就是jQuery。有人會(huì)說(shuō)，jQuery只是類庫(kù)，不是框架；但那時(shí)前端業(yè)務(wù)還沒有像今天這么繁重，原本是后端干的事，全部挪到前端來(lái)，因?yàn)楣馐莏Query就可以包打天下。jQuery不夠用，還有成千上萬(wàn)的jQuery的插件呢。于是問題就是這樣一一衍生出來(lái)了，一個(gè)頁(yè)面太多jQuery插件了，請(qǐng)求數(shù)太多了，于是我們得打包。打包需要我們對(duì)插件有規(guī)劃。于是這一需求在社區(qū)上逐漸形成了某些規(guī)則，其中最出名的是AMD規(guī)范，體現(xiàn)上RequireJS這個(gè)加載庫(kù)上。

RequireJS是前端技術(shù)發(fā)展上的一個(gè)分水嶺。JavaScript在ES6之前一直沒有自己的加載機(jī)制，RequireJS的出現(xiàn)意味著前端可以向更大規(guī)模發(fā)展。以后我說(shuō)的技術(shù)選型，一個(gè)非常重要的甄選點(diǎn)， 即是否存在加載器機(jī)制或符合某個(gè)模塊規(guī)范。

選擇前端框架應(yīng)綜合考慮框架本身與團(tuán)隊(duì)情況

回到原來(lái)的話題，選擇框架要從兩面看，一是看該框架的本領(lǐng)，二是看你們團(tuán)隊(duì)的能耐。

從框架的角度來(lái)看， 它的功能豐富不豐富、社區(qū)活躍度如何、國(guó)內(nèi)社區(qū)活躍度如何（有的在國(guó)外流行，但國(guó)內(nèi)只有初創(chuàng)公司或一些大公司的邊緣項(xiàng)目在試水）、文檔齊全與否、是否及時(shí)更新、測(cè)試覆蓋率如何、上手難易度如何，都是我們考量點(diǎn)。不過(guò)能進(jìn)我們視野內(nèi)的外國(guó)框架，基本是身經(jīng)百戰(zhàn)，在造輪子興盛的世界闖出來(lái)的領(lǐng)頭羊。jQuery、Angular、KnockOut、Emberjs、Polymer、React、Backbone、Zepto，我們基本是圍繞在這幾個(gè)上面轉(zhuǎn)了。當(dāng)然還有更大型的東西，如EXT、 YUI、Dojo、EasyUI、Bootstrap，這是UI庫(kù)層面的。

下面是2012年外國(guó)對(duì)當(dāng)時(shí)流行12個(gè)JavasScript MVC框架的純技術(shù)評(píng)估：

顯然，我們第一步就是圈定時(shí)下最流行的框架與庫(kù)作為評(píng)估對(duì)象，然后再根據(jù)自家公司的情況進(jìn)行篩選。貴公司是建站公司，還是有自己產(chǎn)品的公司呢？如果是建站公司，頁(yè)面不會(huì)復(fù)雜到哪里去，基本上jQuery+Bootstrap搞定，不要想得太多，就是它們。如果有自己產(chǎn)品， 要維護(hù)一大堆客戶數(shù)據(jù)，要與客戶打交道，不難想象存在非常復(fù)雜的CRM系統(tǒng)，按照中國(guó)人的特性，這東西只會(huì)越來(lái)越復(fù)雜，這就要慎重考慮了。這往往是持續(xù)十年的維護(hù)升級(jí)，我們需要看一下某框架是否有你們的產(chǎn)品那么長(zhǎng)壽，這框架的升級(jí)更新是否頻繁平緩。

大工程應(yīng)盡量避開谷歌產(chǎn)品

如果你的項(xiàng)目是一個(gè)跨度三年以上的大工程，用《人月神話》的術(shù)語(yǔ)來(lái)說(shuō)，90%就是個(gè)焦油坑。我們需要使用更穩(wěn)健成熟的技術(shù)方案，我們需要重點(diǎn)避開谷歌的產(chǎn)品，它的許多產(chǎn)品都是玩票性質(zhì)，GWT、Closure、Darty就是前車之鑒。Polymer基于許多新技術(shù)構(gòu)建，其中Object.observe()、 Custom Elements、HTML Imports、Shadow DOM、Model-Driven Views還遠(yuǎn)遠(yuǎn)沒被標(biāo)準(zhǔn)化， 許多還是獨(dú)家的，變數(shù)太大，因此才出現(xiàn)下圖所示的悲劇。 Angular不是我黑它，這東西也喜歡斷崖式升級(jí)，它在1.08時(shí)兼容IE6-8，1.2時(shí)需要打補(bǔ)丁兼容舊式IE，1.3摒棄了對(duì)舊式IE的兼容，直接在源碼中刪除了所有兼容代碼，因此所有補(bǔ)丁方案都無(wú)力回天，并且不支持全局Ctrl函數(shù)，許多模塊需要獨(dú)立引用，1.4不向下支持動(dòng)畫模塊，2.0由at改成ts構(gòu)建，由于使用Object.observe()，因此不支持IE6-11，Chrome30……

后臺(tái)系統(tǒng)可考慮EXT、EasyUI，avalon等國(guó)內(nèi)優(yōu)秀框架也值得考慮

如果你們的產(chǎn)品是后臺(tái)系統(tǒng)，那么就有兩個(gè)選擇，使用EXT、EasyUI這些重大的UI庫(kù)方案，其中EXT具有嚴(yán)重的排它性，它很難與其他前端解決方案并用。什么模塊組織、打包、數(shù)據(jù)可視化，它都已經(jīng)能全部幫你搞定。它文檔齊備漂亮，入門難度中等，但它要求你的團(tuán)隊(duì)非常穩(wěn)定，現(xiàn)在招一個(gè)專職EXT的前端是很難的。EasyUI是國(guó)內(nèi)比較大牌的UI框架，雖然閉源，不過(guò)想擴(kuò)展它不是難事。

此外，國(guó)內(nèi)的淘寶Kissy， 網(wǎng)易Nej也不錯(cuò)。還有更輕量的方案：MVVM。MVVM最擅長(zhǎng)做這些重交互的產(chǎn)品。舉例說(shuō)，為了對(duì)應(yīng)復(fù)雜交互的Gird，jQuery社區(qū)開發(fā)出各種龐大巨物DataGrid、jqGrid、FlexiGrid，還不如MVVM幾個(gè)循環(huán)綁定來(lái)得干脆利落，擴(kuò)展性又好。目前，KnockOut、Emberjs、Angular與我寫的avalon就是這一類框架。Angular雖然有點(diǎn)坑，但如果你是從1.3用起，并且不鳥IE，它還是一個(gè)不錯(cuò)的選擇，其活躍的社區(qū)為它帶來(lái)無(wú)限的可能。KnockOut在.Net人群中非常流行，微軟出品，前端MVVM框架的鼻祖，不過(guò)它需要對(duì)后端數(shù)據(jù)進(jìn)行過(guò)多的加工，因?yàn)樗旧硎遣恢С謱?duì)套嵌對(duì)象的綁定。Emberjs沒有一個(gè)好干爹，但有一個(gè)好親爹，作者Yehuda Katz是jQuery， Rails、SprouteCore、Merb、Handlebars這些著名框架的核心成員，虎父無(wú)犬子，Emberjs現(xiàn)在還是國(guó)外的第二大MVVM框架。avalon是比較適合國(guó)情的MVVM，有它專門兼容IE6的版本，易上手，性能高，視頻教程多，出了問題可以抓得著作者，是它的幾大賣點(diǎn)。

重SEO產(chǎn)品，可考慮jQuery+Bootstrap+RequireJS組合

如果你們的產(chǎn)品是商場(chǎng)這樣重演示類的產(chǎn)品，就對(duì)SEO有要求，MVVM就不適合了。目前也就Angular與avalon在搞后端渲染機(jī)制，但還不上了臺(tái)面。這時(shí)jQuery+Bootstrap+RequireJS就非常好用。RequireJS的作用不單單是提供了一個(gè)按需加載機(jī)制，它還能讓我們組織起更為龐大的代碼。如果不用RequireJS，國(guó)內(nèi)另一個(gè)選擇是SeaJS，它的規(guī)范是CMD。此外還有CommonJS規(guī)范，但這無(wú)法直接運(yùn)行于前端，需要借助fekit、FIS、Webpack這樣的構(gòu)建工具進(jìn)行合并了。不管怎么說(shuō)，你這時(shí)選用的框架必須存在AMD、CMD或CommonJS任一種加載規(guī)范，這方便你以后的橫向擴(kuò)展。至于插件，目前小插件們都趨向用UMD，它可以讓AMD、CMD、CommonJS任一種加載器加載。

移動(dòng)端技術(shù)較混亂，需多管齊下

如果你們的產(chǎn)品是移動(dòng)端，基本上是SPA架構(gòu)了，因?yàn)檫@會(huì)減少等待，整頁(yè)刷新與請(qǐng)求數(shù)。目前該領(lǐng)域非?；靵y，不同于PC端，要兼容的瀏覽器多出N倍，并且為了性能，瀏覽器商亂砍功能或改變一些瀏覽器特性的行為，往往引發(fā)一些奇怪的BUG，目前社區(qū)正在整理這些坑與解藥。但目前沒有一個(gè)框架能夠擺平所有問題，都需要多管齊下。我的見解是：

RequireJS（按需加載，移動(dòng)端上可以不打包，善用304緩存，騰訊搞出一個(gè)更牛叉的增量更新加載器MT，也可以試試）+Backbone（組織代碼與路由管理）+Zepto（輕量DOM操作） + fastclick.js（點(diǎn)擊穿透與延遲處理）+Hammer.js（各種觸屏事件）+iScroll5.js（滾動(dòng)條處理）+Animate.css（CSS3動(dòng)畫）+Enquire.js（處理響應(yīng)式布局）。

可見移動(dòng)端每個(gè)部件都爛到蕊了，每個(gè)部件都需要專門的工具進(jìn)行修復(fù)。移動(dòng)端是非常注重體驗(yàn)的，每一個(gè)小角落都存在著各種動(dòng)畫，但瀏覽器或自帶的WebView都很差勁，于是Native與Hybird的話題才一直這么火。有的人說(shuō)，既然DOM最吃性能，那么就干脆用Canvas來(lái)代替吧（請(qǐng)見：http://zhuanlan.zhihu.com/FrontendMagazine/19967854 與http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html ）。Facebook也推出了自己類似的方案React Native，自己實(shí)現(xiàn)了一套GUI，不過(guò)編寫語(yǔ)言是JavaScript。它是使用自己原來(lái)的超高性能輪子React實(shí)現(xiàn)的。這或者是一條道路。但優(yōu)缺點(diǎn)也明顯，正如Angular濃濃的Java風(fēng)，React是在邏輯中插入大段標(biāo)簽語(yǔ)言（JSX）。同時(shí)React的排它性也非常強(qiáng)，很難與其它庫(kù)搭配使用。同時(shí)，我們可以看到，出自jQuery名門的jQuery Mobile并沒有入圍，那個(gè)性能太糟了，連Sencha Touch也不及。上面說(shuō)的只是核心庫(kù)， 還沒有搬出UI庫(kù)呢。號(hào)稱Mobile First的UI庫(kù)不在少數(shù)，由于無(wú)視IE，可以大膽使用CSS3。目前比較出彩的有Foundation、Semantic，Refill、Ratchet。如果只是想運(yùn)行在平板上，性能問題就不會(huì)那么拮據(jù)了，我們還可以試試inoic、Sencha Touch， Kendo UI Mobile……

沒有最好，選擇最適合自己的

基本上，針對(duì)每個(gè)平臺(tái)，我都列出一些主流框架，但不意味著你們都能駕馭得住。小馬過(guò)馬，老牛沒過(guò)膝，松鼠淹個(gè)半死，就是這么回事。創(chuàng)業(yè)公司喜歡新框架，這與他們拿得起高薪招一兩個(gè)前端牛人所致，基本上所有頁(yè)面就是他們干的，因此用Angular或Ember都沒區(qū)別。小公司則小心，人員流失大，jQuery+RequireJS是萬(wàn)金油。大公司則基本上有自己的技術(shù)沉淀，換言之，應(yīng)該有自己的前端框架，除非那東西很陳舊，不建議再造輪子。對(duì)大公司的建議是搞自己的技術(shù)委員會(huì)，根據(jù)自己的人員配置來(lái)挑選的框架。有句話說(shuō)得好，不求最好，但求最合適。有些框架就屬于牛逼人手里牛逼閃閃，二逼人手里一團(tuán)亂麻。對(duì)于某些成長(zhǎng)特別快的中等公司來(lái)說(shuō)，這點(diǎn)最需防范，牛人是有的，但作戰(zhàn)的主體70%都是剛培訓(xùn)出來(lái)的實(shí)習(xí)生，難上手，中文文檔不全的框架就必須過(guò)濾掉。我也不排除造輪子的可能性，畢竟有些公司就是人才濟(jì)濟(jì)，能推出一些靠譜的開源產(chǎn)品來(lái)造福社區(qū)。

但無(wú)論我們選擇什么框架或決定自己動(dòng)手造輪子，都勿忘初心，技術(shù)必須讓我們工作生活更為輕松愉快——我們只選擇我們能駕馭住的框架，我們不能保證它在一年后是否會(huì)過(guò)時(shí)落后，但至少不會(huì)變成絆腳石。套用亞當(dāng)·斯密的話（稅收是一種必要的惡）來(lái)說(shuō)，框架是一種必要的惡，它是強(qiáng)約束的，因此必須慎重選擇。