通過(guò)選擇合適的JavaScript框架來(lái)更好適配你的項(xiàng)目需求，這有利于提高你的開(kāi)發(fā)能力與web apps的競(jìng)爭(zhēng)力。

然后，你可以為基于JavaScript的應(yīng)用或者網(wǎng)站想個(gè)***的主意。選擇合適框架應(yīng)該對(duì)你項(xiàng)目的成功有顯著效果。它可以推到你及時(shí)完成項(xiàng)目，并且有助于你將來(lái)維護(hù)代碼。JavaScript框架，比如Angular.js，Ember.js，或者React.js，能提供很好的代碼框架，并且保持代碼的組織性，從而使得你的app更具靈活性與可擴(kuò)展性，開(kāi)發(fā)過(guò)程更加容易。

JavaScript場(chǎng)景的波動(dòng)

Web開(kāi)發(fā)變化速度非?？?。幾乎每個(gè)月都有一個(gè)JavaScript框架誕生，并且已存在的框架也在頻繁更新。這些框架和開(kāi)源代碼一樣，世界各大社區(qū)可以對(duì)它們進(jìn)行完善。到頭來(lái)，比較每個(gè)框架的優(yōu)點(diǎn)與不同點(diǎn)，成了一件不容易的事情。

Angular Vs React Vs Ember.Deep Dive

許多開(kāi)發(fā)者都對(duì)JavaScript框架有著困惑，因?yàn)榭蚣芡獗砼c功能差異很大。

下面，讓我們來(lái)比較三大廣泛應(yīng)用于web的流行JavaScript框架的優(yōu)點(diǎn)：AngularJs、ReactJs和EmberJs。

框架概覽

AngularJS.框架空間的王者

Angular.js是一個(gè)應(yīng)用模型-視圖-控制器(MVC)結(jié)構(gòu)(Angular 1)的開(kāi)源web應(yīng)用框架，模型-視圖-視圖模型(MVVM)結(jié)構(gòu)(Angular 2)，版權(quán)歸谷歌所有。它是以上最老的三大框架命名。因此，他擁有最龐大的社區(qū)。Angular.js通過(guò)徑向擴(kuò)展HTML功能，解決了開(kāi)發(fā)SPA的問(wèn)題(單頁(yè)應(yīng)用)?？蚣艿耐怀鎏攸c(diǎn)是快速啟動(dòng)與運(yùn)行你的app。

AngularJs 的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

• 自定義文檔對(duì)象模型(DOM)元素的創(chuàng)建。
• 明確的UI設(shè)計(jì)與替換。
• 當(dāng)在一個(gè)HTML文檔創(chuàng)建輸入屬性時(shí)，會(huì)為每個(gè)渲染屬性創(chuàng)建一個(gè)獨(dú)立的數(shù)據(jù)綁定。在發(fā)生變化需要重渲染之前，Angula先檢測(cè)r頁(yè)面的每一個(gè)明確屬性。
• 依賴注解。
• 簡(jiǎn)單路徑。
• 代碼容易測(cè)試。
• 框架支持HTML語(yǔ)法的擴(kuò)展，直接創(chuàng)建可復(fù)用的組件。
• 穩(wěn)健的模板生成方案。在HTML屬性使用綁定表達(dá)式來(lái)驅(qū)動(dòng)模板功能。Angular的模板引擎擁有一個(gè)深度理解的DOM，它的優(yōu)越結(jié)構(gòu)模板減少了創(chuàng)建生成頁(yè)面所需的代碼量。
• 數(shù)據(jù)模型對(duì)于小規(guī)模數(shù)據(jù)的使用有所限制，其目的為了使得代碼簡(jiǎn)單容易測(cè)試。
• 快速渲染靜態(tài)列表。
• 良好的代碼復(fù)用(Angular庫(kù))。

痛點(diǎn)：

• API指令的復(fù)雜度高。
• 對(duì)于有元素相互調(diào)用的頁(yè)面，Angular速度變得很慢。
• 初始設(shè)計(jì)變得慢起來(lái)。
• 由于大量DOM元素，影響性能。
• 復(fù)雜的第三方集成。
• 曲折的學(xué)習(xí)路線。
• 域容易使用，但是難以調(diào)試。
• 路徑具有局限性。

提示：Angular 2 的功能與上述有所不同。Angular 2 沒(méi)有沿用Angular 1 的設(shè)計(jì)，它徹底重寫了。該框架兩個(gè)版本有翻天覆地的變化，在開(kāi)發(fā)商之間引起很大的爭(zhēng)議。

ReactJS. 領(lǐng)域中的新生代

ReactJS是一個(gè)開(kāi)源庫(kù)，利用其驚人的渲染性能來(lái)構(gòu)建持久的用戶接口，由Facebook推出與發(fā)布。React在模型視圖控制器結(jié)構(gòu)中專注“V”層。React***發(fā)布之后，它迅速達(dá)到頂峰。它的出現(xiàn)是為了解決其他JavaScript框架的共同問(wèn)題——渲染大數(shù)據(jù)集合的效率。

ReactJs 的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

• 接口設(shè)計(jì)與學(xué)習(xí)API容易。
• 與其他JavaScript框架相比，具有顯著性能。
• 更新速度快。React創(chuàng)建一個(gè)新的虛擬DOM，利用最近數(shù)據(jù)與比較上個(gè)版本的差異提供完善修復(fù)機(jī)制，創(chuàng)建一個(gè)最小的更新列表構(gòu)成真正的DOM使其同步，而不是每次發(fā)生變化都進(jìn)行重復(fù)渲染。
• 服務(wù)端渲染允許創(chuàng)建同構(gòu)/通用的web apps。
• 容易導(dǎo)入組件，雖然有一些依賴。
• 更好的代碼復(fù)用。
• 方便JavaScript的調(diào)試。
• 在提高復(fù)雜組件性能方面，Angular與React難分高低。
• 基于層次的全系組件。
• JSX，一個(gè)JavaScript擴(kuò)展語(yǔ)法，允許引用HTML與使用HTML標(biāo)簽語(yǔ)法來(lái)渲染子組件。
• React Native 庫(kù)。

痛點(diǎn)：

• 它不是完整框架，它是一個(gè)庫(kù)。
• 非常傳統(tǒng)的視圖層。
• Flux結(jié)構(gòu)是開(kāi)發(fā)者使用過(guò)的一個(gè)與眾不同的范例。
• 大量開(kāi)發(fā)者不喜歡JSX。
• 曲折學(xué)習(xí)路線。
• 集成React到傳統(tǒng)MVC框架，猶如鐵軌一樣需要一些配置。

EmberJS. 挑起重?fù)?dān)

EmberJS 是一個(gè)開(kāi)源的JavaScript框架，用以創(chuàng)建單頁(yè)客戶端web應(yīng)用，使用模型-視圖-控制器(MVC)模式。該框架提供通用數(shù)據(jù)綁定，基于網(wǎng)址驅(qū)動(dòng)的方法用于構(gòu)建不同應(yīng)用，重點(diǎn)放在可擴(kuò)展性上。

在2007年，Ember起源于SproutCore。在2011年，它被Facebook收購(gòu)，重命名為Ember。它從本地框架例如蘋果的Cocoa使用輕量靈敏性中，結(jié)合了成熟概念。

EmberJs 的優(yōu)缺點(diǎn)

優(yōu)勢(shì)：

• 約定優(yōu)于配置。Ember.js支持跟隨命名約定于自動(dòng)生成代碼，而不是在你的應(yīng)用不同路徑提供詳細(xì)配置，?？顚Ｓ玫那闆r下，不遵守公共約定。
• 客戶端渲染，在視圖層之外擴(kuò)展web應(yīng)用結(jié)構(gòu)。
• 支持URL。
• Ember的對(duì)象模型有利于鍵值對(duì)的觀察。
• 嵌套的UIs。
• 最小化DOM。
• 在龐大應(yīng)用生態(tài)系統(tǒng)運(yùn)行良好。
• 很好地集成java與強(qiáng)大數(shù)據(jù)層。
• 完全成熟模板機(jī)制(處理板模板引擎構(gòu)建基于流行的Mustache模板引擎)，減少了代碼編寫。它并不知道什么是DOM，而是直接依賴文本操作，構(gòu)建動(dòng)態(tài)的HTML文檔。
• 使用觀察者來(lái)觀察內(nèi)容的變化，只需要重新渲染改變的部分。
• 使用配件避免“臟檢查”。
• 更快的啟動(dòng)時(shí)間與固有的穩(wěn)定性。
• 性能專注。
• 友好的文檔API接口。

痛點(diǎn)：

• Ember.js在控制等級(jí)上缺乏組件復(fù)用。
• 有許多再也不用的過(guò)時(shí)內(nèi)容與例子。
• 曲折學(xué)習(xí)曲線。
• 處理板有大量<腳本>標(biāo)簽會(huì)污染DOM，它被用作標(biāo)志，保持模板與您的模型同步更新。
• 它的典型用法會(huì)很繁瑣。
• Ember的對(duì)象模型安裝后體積過(guò)度膨脹與調(diào)試時(shí)調(diào)用棧。
• 框架中***爭(zhēng)議的并且是最笨重的。
• 對(duì)于小項(xiàng)目有點(diǎn)大材小用。
• 測(cè)試手段似乎是模糊的，不夠完整。

清楚你的需求并且選擇最有前途的框架

到底哪個(gè)框架適合你，取決于對(duì)你的應(yīng)用程序需求評(píng)估與框架性能的匹配度。這需要深入剖析每個(gè)框架的優(yōu)勢(shì)與不足，它們?nèi)绾螒?yīng)用于不同場(chǎng)合。所有框架有許多共同點(diǎn)：它們都是開(kāi)源的，擁有發(fā)布版本證書(shū)，也是使用MVC設(shè)計(jì)模式來(lái)創(chuàng)建SPAs。它們都有視圖，事件，數(shù)據(jù)模塊與路徑。但是，不同JavaScript框架能更好地適合不同類型的應(yīng)用程序。

假如你正在決定創(chuàng)建一個(gè)web app，Angular，React和Ember是最安全提供長(zhǎng)期支持并且活躍的社區(qū)。另外，最近Angular是三者中***的(框架)。你可以把它當(dāng)做一站式服務(wù)商店來(lái)使用。大企業(yè)傾向選擇它作為框架。Ember則是提供框架中工具齊全的***解決方案，所以你不必花費(fèi)反復(fù)查詢與合并庫(kù)。由于Ember需要花很長(zhǎng)時(shí)間來(lái)學(xué)習(xí)，它比較適合長(zhǎng)期的項(xiàng)目。React是以上框架中最輕量級(jí)的。它在這方面做得尤為出色：渲染UI組件。許多場(chǎng)合甚至把它應(yīng)用于上述的框架。假如你需要逐步改善存在的代碼，它將是一個(gè)合適的選擇。

如你所見(jiàn)，沒(méi)有絕對(duì)的王者。對(duì)于特定工程，一些框架比其他更加適合。從幾個(gè)角度檢查你的項(xiàng)目，包括：成熟度、大小、依賴、互相操作性與特征等等。聯(lián)系專業(yè)的web開(kāi)發(fā)公司來(lái)構(gòu)建***的網(wǎng)站架構(gòu)和網(wǎng)站設(shè)計(jì)，以達(dá)到最適合你的業(yè)務(wù)需求。