JavaScript框架比較：AngularJS vs ReactJS vs EmberJS

選擇最適合專案需求的JavaScript框架，可以提升你發佈有競爭力的web app的能力。

最後，你對基於JavaScript的app或網站找到了一個奇妙的想法。選擇正確的框架可能對你專案的成功有相當大的影響。它可以影響你按時完成專案並在將來維護程式碼的能力。 JavaScript框架，如Angular.js，Ember.js或React.js，為你的程式碼帶來結構，並保持其有序化，從而使您你的app更靈活，更具可擴展性，並更容易開發。

Javascript場景的易變性

Web開發的變更發生的很快。幾乎每個月都會引入一個新的JavaScript框架，現有的框架經常被更新。由於這些框架是開放原始碼的，因此世界各地的大型社群也都可以不斷地使之豐滿起來。因此，了解每個框架的優點和它們之間的區別並不是一件容易的事情。

深入Angular vs React vs Ember

許多開發人員因為JavaScript框架的種類繁多而感到眼花繚亂——框架外觀和功能非常不同。

讓我們來比較三個最受歡迎和廣泛使用的JavaScript框架的優勢：AngularJS，ReactJS和EmberJS。

http://www.php.cn/

框架	AngularJS	ReactJS
##Ember.js	是什麼?	超級JavaScript MVW框架	一個不只用於建立使用者介面的JavaScript庫
一個用於建立高要求的web應用程式的框架	#建立	由MiškoHevery建立於2009年	#創建者：Jordan Walke，2013年開源
最初由Yehuda Katz於2007年創立叫做SproutCore，後來被Facebook收購，並於2011年更名為EmberJS	#官方首頁	http://www.php.cn/	http://www.php.cn/
http://www.php.cn/	#Github	http://www.php.cn/	#http://www.php.cn/
http:/ /www.php.cn/	Bug 報告	http://www.php.cn/
	許可證	MIT	MIT
#BSD-3-Clause

##被使用的熱門網站############Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store########### ##Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog#############Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon####### ############最適合使用的地方############建立高度活躍且互動的網路應用程式。 ############資料設定頻繁更改的大型網頁應用程式#############動態SPA###############

AngularJS： 框架領域的冠軍

Angular.js是一個開源的Web應用程式框架，具有由Google提供的Model-View-Controller（MVC）架構（Angular 1）和Model-View- ViewModel（MVVM）架構（Angular 2）。它是上面提到的三個框架中最古老的。因此，它擁有最大的社區。 Angular.js透過使用指令擴充HTML的功能來解決開發SPA（單頁應用程式）的問題。此框架強調讓你的app快速完成和運行。

Angularjs的優缺點

優點：

• #建立自訂的文件物件模型（DOM）元素。

• 簡單的UI設計與變更。

• 在HTML文件中建立輸入欄位時，將為每個已渲染欄位建立單獨的資料綁定。 Angular傾向於在重新渲染之前檢查頁面上的每個單一綁定欄位的任何變更。

• 依賴注入。

• 簡單路由。

• 易於測試的程式碼。

• 此框架利於HTML語法的擴展，並透過指令建立可重複使用的元件。

• 強大的範本建置解決方案。在HTML屬性中使用綁定表達式來驅動模板功能。 Angular的模板引擎對DOM有著深入的理解，且其結構良好的模板減少了創建結果頁面所需的程式碼總量。

• 資料建模限於小資料模型的使用，以使程式碼簡單且易於測試。

• 在渲染靜態清單時速度快。

• 偉大的程式碼重用（Angular函式庫）。

缺點：

• 指令API的複雜性。

• 對於具有許多互動元素的頁面，Angular變得緩慢。

• 原始設計往往很慢。

• 由於許多DOM元素，效能方面有問題。

• 複雜的第三方整合。

• 陡峭的學習曲線。

• 範圍很容易使用，但很難除錯。

• 路由受限。

注意。 Angular 2的功能與上述不同。 Angular 2不是從Angular 1重新設計的，它被完全重寫了。兩個版本的框架之間的巨大變化在開發人員之間引起了相當大的爭議。

ReactJS： 在區塊上的新生兒

ReactJS是一個開源的JavaScript函式庫，用於建立高效能的使用者介面，專注於由Facebook引入和提供的驚人的渲染效能。 React專注於模型視圖控制器（Model View Controller）架構中的「V」。在React第一次發布後，它迅速吸引了大量用戶。它是為了解決與其他JavaScript框架的常見問題——大數據集的高效渲染而創建的。

Reactjs的優缺點

優點：

• #簡單的介面設計與學習API。

• 比其他JavaScript框架顯著的效能提升。

• 更快的更新。 React使用最新的資料創建新的虛擬DOM和修補機制，並有效地將其與先前的版本進行比較，創建一個最小的更新部分列表，使其與真正的DOM同步，而不是每次更改時重渲染整個網站。

• 伺服器端渲染允許建立同構/通用web app。

• 容易匯入元件，儘管具有很少的依賴性。

• 良好的程式碼重複使用。

• 非常適合JavaScript偵錯。

• 完全有可能用React增強Angular以增強麻煩的元件的效能。

• 完全基於元件的架構。

• JSX，一種JavaScript擴充語法，允許引用HTML並使用HTML標記語法來渲染子元件。

• React本機函式庫。

缺點：

• 不是一個完整的框架，而是一個函式庫。

• 非常複雜的視圖層。

• Flux架構不同於開發人員習慣的範例。

• 很多人不喜歡JSX。

• 陡峭的學習曲線。

• 將React整合到傳統的MVC框架，如Rails中需要一些設定。

EmberJS： 所有的繁重工作

EmberJS是一個用於建立單一頁面客戶端網頁應用程式的開源JavaScript應用程式框架，使用Model-View-Controller (MVC)模式。此框架提供通用資料綁定和URL驅動方法，用於建立不同的應用程序，重點放在可擴展性。

Ember在2007年最初被發佈時，叫做SproutCore。 2011年，它被Facebook收購，並重新命名為Ember。它結合了本地框架，例如Apple的Cocoa的經過驗證的概念以及輕量級的敏感度。

Embersjs的優缺點

優點：

• #約定優於設定。 Ember.js不是為應用程式中的各種路由提供詳細的配置，而是喜歡遵循命名約定並自動產生結果程式碼，僅在不遵守約定的情況下指定配置。

• 客戶端渲染和結構到可擴展的web應用程式超出視圖層。

• URL支援。

• Ember的物件模型利於鍵值觀測。

• 嵌套的UI。

• 最小化DOM。

• 適用於大型應用程式生態系統。

• 強資料層與Java整合良好。

• 完全成型的模板機制（Handlebars模板引擎建構在流行的Mustache 模板引擎上）減少了編寫的程式碼總量。它對DOM一無所知，而是依賴直接的文字操作，動態地建構HTML文件。

• 使用觀察者來改變值，這將導致僅渲染更改的值。

• 透過使用附件避免「髒檢查」。

• 更快的啟動時間和固有的穩定性。

• 效能焦點。

• 友善的文件和API。

缺點：

• Ember.js缺少控制器層級的元件重複使用。

• 有很多過時的不再工作的內容和範例。

• 陡峭的學習曲線。

• Handlebars使用許多<script>標記來污染DOM，用作標記以保持範本更新到模型。 </script>

• 當走出其典型用途時會很麻煩。

• Ember的物件模型實作膨脹Ember的整體大小並在偵錯時呼叫堆疊。

• 最有見地和最重的框架。

• 對於小專案而言過大。

• 測試案例似乎模糊/不完整。

比較Angularjs Vs Reactjs Vs Emberjs功能

##特性	## AngularJS	ReactJS	#Ember.js
##動態UI綁定	允許在純物件或甚至屬性層級使用UI綁定。可以同時更新多個綁定，而不需要耗時的DOM更新。	直截了當地將狀態直接連結到UI。狀態參數作為物件傳遞，並合併到React組件的內部參考狀態。	使用Handlebars預設模板引擎。你必須在模型上使用特定的setter方法來更新綁定到UI的值，在Handlebars渲染頁面的時候。其他綁定選項包括一個可能性以讓你的Model在View和甚至另一個Model之間用一種要么單向要么雙向的綁定模式。
可重複使用的元件	#Angular元件稱為“指令”，它們比Ember元件強大得多。它們能夠創造出你自己語意的和可重複使用的HTML語法。	在視圖和控制器層級使用mixin，因此元件不必UI相關，並且可能只包含一些實用程式或什至複雜的程式邏輯。	基於Widget的方法稱為Ember元件。 Handlebars佈局和Ember的後端基礎設施允許編寫你自己的特定於應用程式的HTML標籤。然後，可以在任何Handlebar模板中使用自訂元素。
路由	需要範本或控制器到其路由器配置，必須手動管理。	React不處理路由。但是有很多模組用於路由，如react-router，flow-router。	更強大的路由，以犧牲可增加的複雜性為代價。
意見	#靈活的意見。給出一點靈活性來實現你自己的客戶端堆疊。	靈活的意見。給出一點靈活性來實現你自己的客戶端堆疊。	靈活的意見。給出一點靈活性來實現你自己的客戶端堆疊。
資料綁定	#雙向	單向	雙向

定義你的需求並使選定的框架發揮最大的作用

確定哪個框架適合你，只需要評估應用程式的需求以及每個框架的優勢即可。這需要深入了解所考慮的每個框架的優點和缺點，以及它們如何在不同用例下競爭。所有框架都有許多共同點：開源，在許可證下發布，並創建具有MVC設計模式的SPA。它們都有視圖，事件，資料模組和路由。然而，不同的JavaScript框架更適合不同類型的應用程式。

如果你正在決策創建一個web app，對於長期支持和活躍的社區，Angular，React和Ember是最安全的。此外，目前Angular是這三個中最受歡迎的。你可以一站式使用。它是大型企業的首選框架。 Ember是尋求全工具包含框架方法的人的最佳解決方案。 Ember可以幫助你做許多決策，所以你不必花時間研究和膠合庫。由於Ember需要很長時間學習，所以它適合長期專案。 React是上面提名的三個框架中最輕量級的。它的偉大在於一件事：渲染UI元件。許多人甚至將其與前面提到的框架進行配對。如果你需要逐漸現代化現有的程式碼庫，那麼這是一個合適的選擇。

正如你所看到的，沒有明確的勝利者。有的框架比其他框架更適合特定的項目。當然，你也可以從幾個不同的角度檢查你的項目，包括成熟度，大小，依賴性，互通性，功能等，並聯繫專業的前端web開發公司來構建完美的網站架構和網站設計，以便於更好地滿足你的業務。

 以上就是JavaScript框架比較：AngularJS vs ReactJS vs EmberJS的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#