【JavaScript】前端開發框架三劍客—AngularJS VS. Backone.js VS.Ember.js

摘要：透過對Github，StackOverflow，YouTube等社區進行數據收集後可知，AngularJS在各大主流社區中都是最受歡迎的，Backbone.js與Ember.js則不相伯仲。本文將對當前三款流行的Web開發框架做個簡單比較。

是否選擇了合適的框架進行Web開發對項目是有重大影響的。咱們都但願找到一個穩健的易維護的框架結構。接下來，咱們一塊兒來對當前三款流行Web開發框架做個簡單比較認識。

初步認識

AngularJS誕生於2009年，是商業產品GetAngular的一部分。後來，GetAngular創造者之一的MisKoHevry對其進行精簡，並隨後得到了Google的大力支持，進而發展成今天的樣子。Angular最獨特最有創造性的特性莫過因而雙向(two-way)數據綁定以及HTML擴展能力。

問世於2010年的Backone.js是一個輕量級的MVC框架，崇尚精簡的團隊對其青睞有加。Pinterest，Flixster，AirBNB等都是使用該框架進行開發的。

Ember的首個足跡印於2007年。剛開始時是做爲SproutCore的MVC框架，以後被Sproutlt和Apple接手。Ember的重量級用戶包括Yahoo，Groupon以及ZenDesk。

此外，是否具有一個完善的社區支援網絡也是重要的考量因素。透過對Github，StackOverflow，YouTube等社區進行數據收集後可知，AngularJS在各大主流社區中都是最受歡迎的，Backbone.js與Ember.js則不相伯仲。

框架大小

頁面的加載速度是網站受歡迎與否的重要因素。用戶如今變得愈來愈缺少耐心了，特別是在同類型網站之間進行選擇時，哪一個加載得更快或許就會先入爲主了。所以，咱們必須充分考慮這個需求，儘量地爲咱們的頁面進行瘦身提速。這裏有兩個考量因素：框架的大小和引導加載過程的快慢。

下表列出了這三個框架各自的淨大小以及結合依賴物以後的大小(已壓縮)：

模板

Angular和Ember已包含各自的模板引擎，Backbone則須要用戶自行選擇。如下將結合HTML代碼實例進行對比分析。

1.AngularJS

Angular的模板引擎是使用表達式綁定的HTML格式，綁定格式是使用兩對大括號：

 

 

2.Backbone.js

Backbone可與不少其它第三方模板引擎進行整合，默認的選擇是Underscore。若是你已經採用了Underscore，屬於Backbone依賴之一的Undersocre無須額外的操做，咱們即可使用它的模板引擎。美中不足的是該引擎功能較簡單，咱們一般須要加入其它的javascript代碼來實現其它功能，例以下面的例子：

3.Ember.js

Ember目前採用的模板引擎是屬於Mustache模板引擎擴展的Handlebars。目前出現的一個新Handlebars變種名爲HTMLBars。相對於Handlebars，HTMLBars增添了對DOM的支援，不過HTMLBars暫尚未正式推出。如下例子是基於Handlebars的：

 

 

AngularJS的強項

雙向數據綁定節省了大量公式化的代碼，先看看下面的jQuery代碼：

而若是使用Angular，咱們能夠省卻這些代碼，而只需在HTML模板進行綁定聲明：

Angular不只擁有最大的在線社區支持，並且Google一直在推廣它。不少創新的工具不斷涌現，極大地提升了工做效率，例如：Protractor，Batarang，Zone.js等。此外，Angular還與社區進行普遍合做，不斷進行改進。有關Angular 2.0的設計文檔，能夠點擊這裏進行了解,任何人均可以直接在上面發表意見。

Angular可以幫助咱們有條不紊地把程序生成區塊進行分類：控制器，指令，裝配器，篩選器，服務和視圖(模板)等。這些都是以模塊化方式進行組織的，互相造成依賴。不一樣區塊有不一樣的角色，視圖負責UI，控制器負責UI身後的邏輯管理，指令負責組件複用以及HTML擴展等。

自動化的髒數據檢查(Dirty Checking)機制可以使咱們進行任意的對象屬性修改，angular會自動識別出這些變動，而後通知全部與該屬性有關的觀察者。

Angular還提供了不少即用的功能強大的基本內建服務，例如$http和$timeout。

AngularJS的弱項

嵌入包含和原型繼承的概念會讓很多開發者感到迷惑，咱們須要花必定時間才能領悟其中的含義。在視圖層即可普遍使用的Angular表達式，不可謂不強大，甚至是過於強大了。開發者能夠在視圖模板中使用複雜的邏輯甚至是進行操做委派和計算，這不啻增長了測試的難度。例以下面的代碼：

 

<button ng-click="(oldPassword && checkComplexity(newPassword) && oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) && (oldPassword=(newPassword=''))) : (errorMessage='Please input a new password matching the following requirements: ' + passwordRequirements)">Click me</button>

 

 

Backbone.js的強項

Backbone是一款輕量級的產品，容易上手，新概念很少，而且有豐富的文檔資源與代碼示例資源。基於Backbone的第三方框架有Aura,BackboneUI,Chaplin,Geppetto,Marionette等。

Backbone.js的弱項

Backbone暫時還沒提供程序架構方面的支援，取而代之的是提供了一些基本的工具來讓咱們本身進行架構建設，例如內存管理等都是須要親力親爲的。視圖生命週期管理方面的欠缺，更使得程序容易在路徑/狀態發生變動時出現內存泄漏問題，除非咱們能把全部應該清除乾淨的對象處理好。

不少沒能從Backbone中得到的功能都是由第三插件來提供的。這樣一來，咱們有可能須要花時間進行一番測試摸索才能肯定哪一個插件纔是適合本身的，從而增長了額外的開發用時。

Backbone沒有提供雙向數據綁定，咱們必須本身手寫代碼來進行相關處理。Backbone中的視圖是直接操做DOM的，這增長了單元測試的難度，對程序穩健性和複用性也有必定影響。

Ember.js的強項

Ember擁有不俗的配置管理能力，能夠省卻很多的人工代碼。例如Ember.js會經過路由器的名字，判斷出相應的路由和控制器的名字。Ember中有一個卓越的路由層、數據層，名字是ember data。它封裝了一個完備的數據模塊，與Ruby-On-Rails或其它RESTful JSON API很好地整合在一塊兒。

性能指標是Ember.js的設計重點，例如事件處理循環和程序預編譯等方面，Ember都作了很多努力。

Ember.js的弱項

 Ember API 經歷了一段時間才最終造成如今比較穩定的版本。所以，初初接觸Ember的開發者可能會對一些老舊的文檔和例子感動迷惑，具體能夠看看它的更新日誌，請點擊這裏。

Handlebars的使用，使得DOM中充滿了<script>標記，有時很難分辨出哪些代碼是本身的，對CSS樣式和其它框架的整合也形成了必定影響。

寫在最後

Angular在HTML擴展方面有不少獨到的作法，有強大的支援資源。Backbone是小巧的，入門門檻相對較低的。基於MVC結構的Ember，對有面向對象編程基礎的開發者來講很是親切，自身也有強大的配置管理能力。三者各有特點各有長短，咱們不妨好好對比學習，找到適合本身的那杯茶。

英文出自：Airpair.com

 

http://www.csdn.net/article/2014-08-27/2821409-javascript-framework-comparison