作為一個(gè)軟件開發(fā)者，最大的挑戰(zhàn)就是面對(duì)不斷涌現(xiàn)的新技術(shù)塘秦，持續(xù)地學(xué)習(xí)是從事這個(gè)行業(yè)的必備技能讼渊。在這個(gè)領(lǐng)域里，技術(shù)更新最快地又非前端莫屬了嗤形。各種框架的出現(xiàn)精偿，版本的更新此起彼伏，熱火朝天赋兵，一派欣欣向榮笔咽。而且在項(xiàng)目中，哪里會(huì)少的了前端霹期，它是系統(tǒng)的門面叶组，是用戶對(duì)系統(tǒng)最直接的體驗(yàn)，顏值高低也是決定系統(tǒng)好壞的關(guān)鍵历造，那么作為一名軟件開發(fā)攻城獅甩十，怎么能放棄這片藍(lán)海船庇，不了解了解前端的世界，多一項(xiàng)技能侣监，升職加薪鸭轮，贏取白(gao)富(fu)美(shuai)，走向人生巔峰呢橄霉？

那么窃爷，在一個(gè)項(xiàng)目中，我們要回答的第一個(gè)問題就是這么多的框架姓蜂，該使用哪一個(gè)按厘？在這篇文章中，將嘗試從項(xiàng)目實(shí)施相關(guān)的一些方面入手钱慢，對(duì)目前大熱框架的特點(diǎn)進(jìn)行分析逮京，幫助你選擇最合適的一款。

由于篇幅有限束莫、框架眾多懒棉，在分析之前，我們從版本更新頻度和社區(qū)活躍度來進(jìn)行初步的篩選麦箍。已經(jīng)出現(xiàn)了比較久的Backbone和Knockout, 目前的流行度持續(xù)衰退漓藕，說明市場已經(jīng)做出了選擇，市面上出現(xiàn)了更有競爭力的替代品挟裂；也有新涌現(xiàn)的如aurelia享钞。 但是在一個(gè)商業(yè)項(xiàng)目中，一個(gè)有活躍社區(qū)支撐诀蓉，并能得到長期支持的框架無疑能給我們更大的信心栗竖，因此，Angular, Ember渠啤，Vue或者React都是一個(gè)理想的選擇狐肢。那么在項(xiàng)目實(shí)施中，我們一般會(huì)關(guān)注哪些方面呢沥曹？ 有過前端開發(fā)經(jīng)驗(yàn)的同僚們可能會(huì)想到份名，要有可復(fù)用的組件，要控制質(zhì)量做測試和靜態(tài)檢查妓美，要有組件隔離的樣式方便實(shí)現(xiàn)Responsive僵腺，要打包部署方便，最好學(xué)起來不要太復(fù)雜壶栋，方便能力建設(shè)辰如、節(jié)省招聘成本等等。接下來贵试，我們將從組件復(fù)用琉兜，測試和學(xué)習(xí)曲線這三個(gè)主要的方面對(duì)Angular4, Ember.js凯正，Vue.js和React這四個(gè)當(dāng)前最流行的框架來做更深入的分析，提供更具體的參考豌蟋。

1. 可復(fù)用的組件

組件復(fù)用是每個(gè)項(xiàng)目都會(huì)重點(diǎn)關(guān)注的一個(gè)維度廊散。合適的，職責(zé)單一的組件會(huì)大大提升新特性的開發(fā)效率和工程的可維護(hù)性梧疲，也能方便地進(jìn)行測試奸汇。那么他們的表現(xiàn)都如何呢：

概括起來，就是Vue, Component的組件相對(duì)靈活往声、輕量，添加依賴就可以無縫集成到遺留系統(tǒng)中戳吝。對(duì)于從0到1的系統(tǒng)浩销，也可以使用新的實(shí)踐來構(gòu)建工程，例如ES6听哭、Webpack等技術(shù)慢洋。Angular4官方推薦使用TypeScript, 如果使用TypeScript，需要單獨(dú)構(gòu)建和打包陆盘，不方便與遺留系統(tǒng)集成普筹。Ember.js由于自定義了一整套生態(tài)，基于CoC理念的設(shè)計(jì)隘马，并采用了前端工程比較前沿的實(shí)踐和標(biāo)準(zhǔn)太防，很難與遺留系統(tǒng)集成，在新項(xiàng)目更適合使用酸员。至于數(shù)據(jù)綁定蜒车，各有優(yōu)勢(shì)。雙向綁定在表單交互多的場景中更便捷幔嗦，單向綁定在管理跟蹤記錄組件狀態(tài)時(shí)更高效酿愧。組件狀態(tài)更新，各有不同的實(shí)現(xiàn):

Vue.js通過定義setter來監(jiān)聽狀態(tài)變化邀泉，特殊場景需要特殊的API支持, 通過virtual DOM重新渲染視圖嬉挡。

React通過setState, 觸發(fā)組件數(shù)據(jù)/屬性發(fā)生變化，通過virtual DOM重新渲染視圖汇恤。

Angular4在引起狀態(tài)變化的時(shí)刻庞钢，框架自動(dòng)觸發(fā)臟檢查，也可以手動(dòng)執(zhí)行臟檢查屁置。

Ember.js提供數(shù)據(jù)模型焊夸，所有數(shù)據(jù)的操作通過API執(zhí)行，數(shù)據(jù)產(chǎn)生變化就更新視圖蓝角。

其中阱穗，主要的區(qū)別是Angular4是通過事件驅(qū)動(dòng)饭冬，對(duì)比數(shù)據(jù)更新，直接操作DOM來更新視圖揪阶，而其它都通過Virtual DOM來更新視圖昌抠。

2. 組件測試

測試是提高軟件質(zhì)量的有效手段，易于編寫測試的框架鲁僚，能降低編寫測試的成本炊苫，充足的測試也能提高我們交付軟件的信心。它們?cè)诮M件測試方面的比較如下：

可見冰沙，Vue, React測試靈活侨艾，根據(jù)項(xiàng)目具體情況來定制，但是沒有統(tǒng)一的測試實(shí)踐規(guī)范拓挥，對(duì)開發(fā)人員的能力有較大依賴唠梨。Angular4和Ember, 概念多，有官方推薦的實(shí)踐侥啤，要完全掌握的難度大当叭，優(yōu)勢(shì)是實(shí)現(xiàn)起來更規(guī)范。

3. 學(xué)習(xí)曲線

在技術(shù)選型過程中盖灸，保證項(xiàng)目按時(shí)交付蚁鳖，控制風(fēng)險(xiǎn)，團(tuán)隊(duì)能力建設(shè)提升赁炎，都是需要考慮的因素醉箕。作為一個(gè)軟件服務(wù)公司，如何快速的提升人員能力徙垫，選用學(xué)習(xí)曲線合適的框架琅攘，控制項(xiàng)目成本也是一門技術(shù)活。下面松邪，對(duì)使用這些框架的難度進(jìn)行了一些簡要分析：

總結(jié)

通過上面三個(gè)維度的分析坞琴，我們發(fā)現(xiàn)Vue.js和React的重點(diǎn)更側(cè)重與創(chuàng)建可復(fù)用，易于測試逗抑，能靈活集成的組件剧辐。當(dāng)然，通過其它擴(kuò)展組件邮府，以及一些腳手架插件的支持荧关，也可以方便的搭建一個(gè)采用最新實(shí)踐的前端應(yīng)用的構(gòu)建框架。他們最大的優(yōu)點(diǎn)是按需定制褂傀，學(xué)習(xí)曲線平滑忍啤，構(gòu)建出來的應(yīng)用小而精。相對(duì)來說，Angular4和Ember是大而全的框架同波，他們目標(biāo)是針對(duì)大型前端工程的構(gòu)建鳄梅，為開發(fā)人員屏蔽項(xiàng)目構(gòu)建底層的細(xì)節(jié)，提出了自己的一攬子解決方案未檩。使用它們的難點(diǎn)是要度過前期曲線陡峭的學(xué)習(xí)期戴尸，優(yōu)點(diǎn)是由于使用了標(biāo)準(zhǔn)化的開發(fā)方式，后期能極大的提高開發(fā)生產(chǎn)力冤狡，提升開發(fā)效率孙蒙。

最后，說了這么多悲雳，大家在具體選型時(shí)還是首先要分析自己的需求和現(xiàn)狀挎峦，然后再做選擇。不求最酷炫合瓢，只求最合適浑测！