來源于:https://github.com/RubyLouvre/agate/issues/8

最近幾年，前端技術(shù)迅猛發(fā)展，差不多每年都會(huì)冒出一款主流的框架。 每次新開業(yè)務(wù)線或啟動(dòng)新項(xiàng)目時(shí)，是第一件事就是糾結(jié)：使用什么框架，重造什么輪子？我很高興應(yīng)CSDN的邀請(qǐng)談我的看法。

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

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

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

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

顯然，我們第一步就是圈定時(shí)下最流行的框架與庫，作為評(píng)估對(duì)象，然后再根據(jù)自家公司的情況進(jìn)行篩選。貴公司是建站公司，還是有自己產(chǎn)品的公司呢？如果是建站公司，頁面不會(huì)復(fù)雜到哪里去，基本上jQuery+bootstrap 搞定，不要想得太多，就是它們。如果有自己產(chǎn)品， 要維護(hù)一大堆客戶數(shù)據(jù)要與客戶打交道，不難想象是存在非常復(fù)雜的CRM系統(tǒng)，按照中國人的特性，這東西只會(huì)越來越復(fù)雜，這就要慎重考慮了。這往往是持續(xù)十年的維護(hù)升級(jí)，我們需要看一下這框架是否有你們的產(chǎn)品那么長壽，這框架的升級(jí)更新是否頻繁平緩。
如果你的項(xiàng)目是一個(gè)跨度三年以上的大工程，用《人月神話》的術(shù)語來說，90%就是個(gè)焦油坑。我們需要使用更穩(wěn)鍵成熟的技術(shù)方案，我們需要重點(diǎn)避開谷歌的產(chǎn)品，它的許多產(chǎn)品都是玩票性質(zhì)， GWT、Closure、Darty就是前車之鑒。polymer是基于許多新技術(shù)構(gòu)建(http://www.csdn.net/article/2013-05-27/2815450-google-polymer)，其中Object。observe()，%EF%BC%8C%E5%85%B6%E4%B8%ADObject%E3%80%82observe()%EF%BC%8C) Custom Elements， HTML Imports，Shadow DOM， Model-Driven Views是遠(yuǎn)遠(yuǎn)沒被標(biāo)準(zhǔn)化， 許多還是獨(dú)家的， 變數(shù)太大，因此才出現(xiàn)如下的悲劇 http://weibo.com/1712131295/CfB7X336J?type=comment#_rnd1430880258836。 angular不是我黑它， 這東西也喜歡斷崖式升級(jí)， 它在1.08時(shí)兼容IE6-8， 1.2時(shí)需要打補(bǔ)丁兼容舊式IE， 1.3摒棄對(duì)舊式IE的兼容，直接在源碼中刪除所有兼容代碼，因此所有補(bǔ)丁方案都無力回天，并且不支持全局Ctrl函數(shù)，許多模塊需要獨(dú)立引用，1.4不向下支持動(dòng)畫模塊， 2.0由at改成ts構(gòu)建，由于使用Object.observe，因此不支持IE6-11，chrome30

如果你們的產(chǎn)品是后臺(tái)系統(tǒng)，那么就有兩個(gè)選擇，使用EXT， easyui這些重大的UI庫方案，其中EXT具有嚴(yán)重的排它性，它很難與其他前端解決方案并用。什么模塊組織，打包，數(shù)據(jù)可視化，它都已經(jīng)全部幫你搞定。它文檔齊備漂亮， 入門難度中等， 但它要求你的團(tuán)隊(duì)非常穩(wěn)定，現(xiàn)在招一個(gè)專職EXT的前端是很難的。easyui是國內(nèi)比較大牌的UI框架，雖然閉源，不過想擴(kuò)展它不是難事。此外，國內(nèi)的淘寶kissy， 網(wǎng)易nej也不錯(cuò)。還有更輕量的方案，MVVM。MVVM最擅長做這些重交互的產(chǎn)品。舉例說，為了對(duì)應(yīng)復(fù)雜交互的gird，jquery社區(qū)開發(fā)出各種龐大巨物 datagrid， jqgrid， flexigrid，還不如MVVM幾個(gè)循環(huán)綁定來個(gè)干脆利落，擴(kuò)展性又好。目前，knockout， emberjs， angular與我寫的avalon就是這一類框架。angular雖然有點(diǎn)坑，但如果你是從1.3用起，并且不鳥IE，它還是一個(gè)不錯(cuò)的選擇，其活躍的社區(qū)為它帶來無限的可能。knockout在。net人群中非常流行，微軟出品，前端MVVM框架的鼻祖，不過它需要對(duì)后端數(shù)據(jù)進(jìn)行過多的加工，因?yàn)樗旧硎遣恢С謱?duì)套嵌對(duì)象的綁定。emberjs沒有一個(gè)好干爹，但有一個(gè)好親爹，作者Yehuda Katz是jQuery， rails， Sproutecore， Merb， Handlebars這些著名框架的核心成員， 虎父無犬子，emberjs現(xiàn)在還是國外的第二大MVVM框架。avalon是比較適合國情的MVVM，有它專門兼容IE6的版本，易上手，性能高，視頻教程多，出了問題可以抓得著作者，是它的幾大賣點(diǎn)。

如果你們的產(chǎn)品是商場(chǎng)這樣重演示類的產(chǎn)品，就對(duì)SEO有要求，MVVM就不適合了。目前也就angular與avalon在搞后端渲染機(jī)制，但還不上了臺(tái)面。這時(shí)jQuery+bootstrap+requirejs就非常好用。requirejs的作用不單單是提供了一個(gè)按需加載機(jī)制,它還能讓我們組織起更為龐大的代碼。如果不用requirejs，國內(nèi)另一個(gè)選擇是seajs，它的規(guī)范是CMD。此外還有commonjs規(guī)范， 但這無法直接運(yùn)行于前端，需要借助fekit， fis， webpack這樣的構(gòu)建工具進(jìn)行合并了。不管怎么說，你這時(shí)選用的框架必須存在AMD，CMD或commonjs任一種加載規(guī)范，這方便你以后的橫向擴(kuò)展。至于插件，目前小插件們都趨向用UMD（ https://github.com/umdjs/umd ），它可以讓AMD，CMD，commonjs任一種加載器加載。
如果你們的產(chǎn)品是移動(dòng)端，基本上是SPA架構(gòu)了，因?yàn)檫@會(huì)減少等待，整頁刷新與請(qǐng)求數(shù)。目前該領(lǐng)域非常混亂了，不同于PC端，這要兼容的瀏覽器是多出N倍，并且為了性能，瀏覽器商亂砍功能或改變一些瀏覽器特性的行為，這往往引發(fā)一些奇怪的BUG，目前社區(qū)正在整理這些坑與解藥（ https://github.com/jtyjty99999/mobileTech ）。但目前沒有一個(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的話題才一直這么火。有的人說，既然dom是最吃性能，那么就干脆用canvas來代替吧（ http://zhuanlan.zhihu.com/FrontendMagazine/19967854 與http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html ）。facebook也推出自己類似的方案， react native，自己實(shí)現(xiàn)一套GUI，不過編寫語言是javascript。它是使用自己原來的超高性能輪子react實(shí)現(xiàn)的。這或者是一條道路。但優(yōu)缺點(diǎn)也明顯，正如angular濃濃的java風(fēng)，react是在邏輯插入大段標(biāo)簽語言（jsx）。同時(shí)react的排它性也非常強(qiáng)，很難與其他庫搭配使用。同時(shí)，我們可以看到，出自jQuery名門的jQuery mobile并沒有入圍，那個(gè)性能太糟了，連sencha touch。上面說的只是核心庫， 還沒有搬出UI庫呢。號(hào)稱mobile first的UI庫不在少數(shù)，由于無視IE，可以大膽使用CSS3。目前比較出彩的有，foundation，semantic，refill， ratchet。如果只是想運(yùn)行在平板上，性能問題就不會(huì)那么拮據(jù)了，我們還可以試試inoic， sencha touch， Kendo UI Mobile……
基本上，針對(duì)每個(gè)平臺(tái)，我都列出一些主流框架了，但不意味著你們都能駕馭得住。小馬過馬，老牛沒過膝，松鼠淹個(gè)半死，就是這么回事。創(chuàng)業(yè)公司喜歡新框架，這與他們拿得起高薪招一兩個(gè)前端牛人而致，基本上所有頁面就是他們干的，因此用angular或ember都沒區(qū)別。小公司則小心，人員流失大，jQuery+requirejs是萬金油。大公司則基本上有自己的技術(shù)沉淀，換言之，應(yīng)該有自己的前端框架，除非那東西很陳舊，不建議再造輪子。大公司建議是搞自己的技術(shù)委員會(huì)，根據(jù)自己的人員配置來挑選的框架。有句話說得好，不求最好，但求最合適．有些框架就屬于牛逼人手里牛逼閃閃，二逼人手里一團(tuán)亂麻的。對(duì)于某些成長特別快的中等公司來說，這點(diǎn)最需防范 ，牛人是有的，但作戰(zhàn)的主體70%都是剛培訓(xùn)出來的實(shí)習(xí)生，難上手，中文文檔不全的框架就必須過濾掉。我也不排除造輪子的可能性，畢竟有些公司就是人才濟(jì)濟(jì)，能推出一些靠譜的開源產(chǎn)品來造福社區(qū)。
但無論我們選擇什么框架或決定自己動(dòng)手造輪子，都勿忘初心，技術(shù)必須讓我們工作生活更為輕松愉快——我們只選擇我們能駕馭住的框架，我們不能保證它在一年后會(huì)過時(shí)落后，但至少不會(huì)變成絆腳石。套用亞當(dāng)·斯密的話(稅收是一種必要的惡)來說，框架是一種必要的惡，它是強(qiáng)約束的，因此必須慎重選擇。

（轉(zhuǎn)自http://www.mamicode.com/info-detail-1685899.htmls）