作為一個軟件開發(fā)者悬秉，最大的挑戰(zhàn)就是在不斷涌現(xiàn)的新技術(shù)中進行取舍，持續(xù)學習是從事這一行業(yè)的必備技能冰蘑。在這個領(lǐng)域里和泌，技術(shù)更新最快地又非前端莫屬了。各種框架的出現(xiàn)祠肥、版本的更新此起彼伏武氓，呈現(xiàn)出一派欣欣向榮之景。

在項目中必不可少的便是前端仇箱，它是系統(tǒng)的門面县恕、是用戶對系統(tǒng)最直接的體驗，顏值高低也是決定系統(tǒng)好壞的關(guān)鍵剂桥，那么作為一名軟件開發(fā)攻城獅忠烛，怎么能放棄這片藍海呢？沒準了解了解前端的世界权逗，就能多一項技能美尸、升職加薪冤议、贏取白(gao)富(fu)美(shuai)、走向人生巔峰呢师坎？

那么恕酸，在一個項目中，我們要回答的第一個問題就是“這么多的框架屹耐，該使用哪一個尸疆？”這篇文章將嘗試從項目實施相關(guān)方面入手，對目前大熱框架的特點進行分析惶岭，幫助你選擇最合適的一款寿弱。

由于篇幅有限、框架眾多按灶，在分析之前症革，我們從版本更新頻度和社區(qū)活躍度來進行初步的篩選。已經(jīng)出現(xiàn)了比較久的Backbone和Knockout, 目前流行度正在持續(xù)衰退鸯旁，說明市場已經(jīng)做出了選擇噪矛，市面上出現(xiàn)了更有競爭力的替代品; 還有aurelia這類的新涌現(xiàn)者，需要等待時間的檢驗铺罢。

但是在一個商業(yè)項目中艇挨，一個有活躍社區(qū)支撐，并能得到長期支持的框架無疑能給我們更大的信心韭赘。因此缩滨，Angular, Ember，Vue或者React都是理想的選擇泉瞻。

那么在項目實施中脉漏，我們一般會關(guān)注哪些方面呢？

有過前端開發(fā)經(jīng)驗的同僚們可能會想到：要有可復用的組件袖牙，要控制質(zhì)量做測試和靜態(tài)檢查侧巨，要有組件隔離的樣式方便實現(xiàn)Responsive，要打包部署方便鞭达，最好學起來不要太復雜司忱，方便能力建設、節(jié)省招聘成本等等畴蹭。

接下來烘贴，我們將從組件復用、測試和學習曲線這三個主要的方面對Angular4,Ember.js撮胧，Vue.js和React這四個當前最流行的框架來做更深入的分析，提供更具體的參考老翘。

1. 可復用的組件

組件復用是每個項目都會重點關(guān)注的一個維度芹啥。合適的锻离、職責單一的組件會大大提升新特性的開發(fā)效率和工程的可維護性，也能方便地進行測試墓怀。那么他們的表現(xiàn)都如何呢：

概括起來汽纠，就是Vue、Component的組件相對靈活傀履、輕量虱朵，添加依賴就可以無縫集成到遺留系統(tǒng)中。對于從0到1的系統(tǒng)钓账，也可以使用新的實踐來構(gòu)建工程碴犬，例如ES6、Webpack等技術(shù)梆暮。Angular4官方推薦使用TypeScript服协，這需要單獨構(gòu)建和打包，不方便與遺留系統(tǒng)集成啦粹。Ember.js自定義了一整套生態(tài)偿荷，基于CoC理念的設計，采用了前端工程中比較前沿的實踐和標準唠椭，很難與遺留系統(tǒng)集成跳纳，更適合在新項目中使用。至于數(shù)據(jù)綁定贪嫂，各有優(yōu)勢寺庄。雙向綁定在表單交互多的場景中更便捷，單向綁定在管理跟蹤記錄組件狀態(tài)時更高效撩荣。組件狀態(tài)更新铣揉，各有不同的實現(xiàn):

• Vue2.js通過定義setter來監(jiān)聽狀態(tài)變化，特殊場景需要特殊的API支持, 基于virtual DOM的視圖更新餐曹。
• React在組件的狀態(tài)或?qū)傩缘淖兓蠊涔埃彩腔趘irtual DOM的視圖更新。
• Angular4在引起狀態(tài)變化的時刻台猴，框架自動觸發(fā)臟檢查朽合，也可以手動執(zhí)行臟檢查，直接操作HTML DOM更新視圖饱狂。
• Ember.js提供數(shù)據(jù)模型曹步，所有數(shù)據(jù)的操作通過API執(zhí)行，使用Glimmer引擎進行HTML渲染和更新休讳。

其中讲婚，主要的區(qū)別是Angular4是通過事件監(jiān)聽，對比數(shù)據(jù)更新俊柔，直接操作DOM來更新視圖筹麸，而其它都通過Virtual DOM的思路來更新視圖活合。

2. 組件測試

測試是提高軟件質(zhì)量的有效手段，易于編寫測試的框架物赶，能降低編寫測試的成本白指，充足的測試也能提高我們交付軟件的信心。它們在組件測試方面的比較如下：

可見酵紫，Vue, React測試靈活告嘲，可以根據(jù)項目具體情況來定制，但是沒有統(tǒng)一的測試實踐規(guī)范奖地，對開發(fā)人員的能力有較大依賴橄唬。Angular4和Ember概念多，有官方推薦的實踐鹉动，要完全掌握難度大轧坎，優(yōu)勢是實現(xiàn)起來更規(guī)范。

3. 學習曲線

在技術(shù)選型過程中泽示，保證項目按時交付缸血，控制風險，團隊能力建設提升械筛，都是需要考慮的因素捎泻。作為一個軟件服務公司，如何快速的提升人員能力埋哟，選用學習曲線合適的框架笆豁，控制項目成本也是一門技術(shù)活。下面赤赊，對使用這些框架的難度進行了一些簡要分析：

總結(jié)

通過上面三個維度的分析闯狱，我們發(fā)現(xiàn)Vue.js和React的重點更側(cè)重于創(chuàng)建可復用、易于測試抛计、能靈活集成的組件哄孤。當然，通過其它擴展組件吹截，以及一些腳手架插件的支持瘦陈，也可以方便的搭建一個采用最新實踐的前端應用的構(gòu)建框架。它們最大的優(yōu)點是按需定制波俄，學習曲線平滑晨逝，構(gòu)建出來的應用小而精。

相對來說懦铺，Angular4和Ember是大而全的框架捉貌，它們更側(cè)重于大型前端工程的構(gòu)建，為開發(fā)人員屏蔽項目構(gòu)建底層的細節(jié)，提出了自己的一套解決方案昏翰。使用它們的難點是要度過前期曲線陡峭的學習期苍匆，優(yōu)點是由于使用了標準化的開發(fā)方式，后期能極大的提高開發(fā)生產(chǎn)力棚菊，提升開發(fā)效率。

最后叔汁，說了這么多统求，大家在具體選型時還是要首先分析自己的需求和現(xiàn)狀，然后再做選擇据块。不求最酷炫码邻，只求最合適！