作者： noeticsunil | 最后更新：2016.03.05 | 譯者：CoolTiger
原文鏈接

多年以來，我們苦逼地使用原生 JavaScirpt 和 jQuery 開發(fā)復(fù)雜的界面肄鸽，開發(fā)和維護的苦真是一言難盡卫病。

框架能夠讓開發(fā)者抽出更多的精力專注在交互功能上，不用太操心代碼的結(jié)構(gòu)和組織典徘。

大多數(shù)框架使用了 MVC 模式蟀苛，并增強了代碼的擴展性，重用性和可維護性烂斋。MVC 并不是唯一的準(zhǔn)則屹逛，還有一些其他的模式础废，比如 MV＊， MVVM罕模， MVP评腺。 要根據(jù)項目的需求應(yīng)用恰當(dāng)?shù)哪Ｊ健?/p>

最近一段時間 JavaScirpt 框架層出不窮，其中有十個最棒的淑掌，它們高端大氣蒿讥，功能豐富，廣受歡迎抛腕，讓我們可以搞定那些難搞的單頁應(yīng)用芋绸。

1. Angular.js

AngularJS，Google 的親兒子担敌，是 JavaScript 框架中一面旗幟摔敛，在2009年發(fā)布第一版，遵循 MIT 許可開源全封。發(fā)布以來马昙，Angular 的生態(tài)圈就以驚人的速度壯大。它自稱擁有最大的開發(fā)者社區(qū)刹悴，也是最常用的框架行楞。

Angular 為 HTML 增添了開發(fā)動態(tài)交互頁面時所需的全部功能，其中包括在 HTML 元素的屬性上添加 Angular 的指令土匀。用 Angular 擴展 HTML 太方便了子房，把默認(rèn)指令或者自定義指令放在某個 div 的屬性上就可以了。

Angular 負(fù)責(zé)編譯和渲染 HTML就轧，并生成用戶界面证杭， 在此過程中，它操作 DOM 并實現(xiàn)指令中的全部功能钓丰。不過躯砰，指令只是 Angular 強大功能的一部分。

雙向數(shù)據(jù)綁定是 Angular 的核心功能携丁。用戶在界面上戳戳點點或是輸入點什么的時候琢歇，改變了應(yīng)用中的 view，此時 model(JavaScript objects) 會跟隨著 view 一起發(fā)生變化梦鉴，model 中的代碼邏輯得到執(zhí)行李茫，最終將更新 DOM 結(jié)構(gòu)。

這個過程反過來也一樣的肥橙，當(dāng)某些因素引起 model 變化時（比如使用服務(wù)端的消息推送）魄宏，view 會重新渲染。這種方式大體上根治了手工維護 DOM 的痛苦存筏。

最近發(fā)布的 ReactJS 有超越 Angular 的勢頭宠互，不過 Angular 牢牢地把持著領(lǐng)先地位味榛，人們對它的需求有增無減。Angular 能夠不斷地成長是因為
每一個版本都會有優(yōu)化和先進的功能予跌。

我們可以訪問 Angular 的官方網(wǎng)張了解更多的信息-angularjs.org

2. React.js

Facebook 和 Instagram 的用戶界面為什么這么給力呢搏色？因為它們用的是 React.js。我們借此可以感受到 ReactJS 在創(chuàng)建大規(guī)模動態(tài)應(yīng)用方面的強大能力券册。

React 在 2013 年發(fā)布了第一個的開源版本频轿，它遵循 BSD 許可。一經(jīng)發(fā)布社區(qū)規(guī)模就迅速擴大烁焙，必須承認(rèn)它是當(dāng)今發(fā)展最快 JavaScript 框架航邢。隨手就可以找到非常多的資料，教程和 React 的組件庫骄蝇。

ReactJS 最擅長高效地渲染復(fù)雜的用戶界面膳殷。它的基本原理是一個稱為 virtual DOM 的東西。virtual DOM 可以在客戶端或服務(wù)端渲染乞榨，并進行通信秽之。

在數(shù)據(jù)處理變的復(fù)雜和動態(tài)之后，客戶端的 DOM 操作的性能受到影響。
React 的解決辦法是：

• 使用 virtual DOM 在服務(wù)端進行 DOM 渲染。
• 比較真實的 DOM 和 virtual DOM蛇数，并標(biāo)記兩者的差異躺酒。
• 只更新那些發(fā)生變化的 DOM 節(jié)點而不是重繪完整的 DOM 樹。

React 另一個優(yōu)勢在于響應(yīng)式組件帶來了很好的重用性冀惭，React 組件庫創(chuàng)建后可以在多個項目中共用震叙，也能供大眾使用。

一個很好的例子是 Material－UI散休，它用 React 組件實現(xiàn)了 Google 的 material design媒楼。

去 Instagram 看看會有更直觀的感受，它的界面完全由 React JS 生成戚丸。

官網(wǎng)有更多的信息－facebook.github.io/react

3. Ember.js

EmberJS 也是一個功能強大的 MVC 框架划址。Ember 由 Yehuda 在 2011 年發(fā)布了第一個開源版本，遵循MIT 許可限府。EmberJS 在創(chuàng)建交互應(yīng)用方面可以同 Angular夺颤，React 一較高下，也擁有非承采祝活躍的社區(qū)世澜。

Ember 和 Angular 一樣使用了雙向數(shù)據(jù)綁定，也就是說署穗，當(dāng) model 變化時更新 view寥裂；當(dāng) view 變化時更新 model嵌洼，view 和 model 一直保持同步。

Ember 可以躋身優(yōu)秀的框架之列封恰，是因為它不斷地增添強大的功能麻养。它引入的 Fastboot.js 模塊提供了服務(wù)端渲染的能力，這個思路有點類似 React俭驮。

Ember 想要將 Angular 雙向綁定和 React 服務(wù)端渲染的優(yōu)點繼承過來回溺。Ember 社區(qū)使用這種方式持續(xù)不斷地給它增加優(yōu)秀地功能，我十分確信 Ember 會一直流行下去混萝。

關(guān)于更多 Ember 的信息請看 emberjs.com

4. Aurelia.js

AureliaJS 由 Rob Eisenberg 為首的團隊創(chuàng)建遗遵，團隊中大部分的人來自 Angular 和 Durandal。它是 Durandal 公司旗下的一個開源的產(chǎn)品逸嘀。該公司是一個創(chuàng)業(yè)公司车要，提供下一代 web 開發(fā)所用的庫，工具和框架崭倘。

AureliaJS 是 2015 年 1 月發(fā)布的翼岁，不過已經(jīng)在用于生產(chǎn)環(huán)境。它是 Durandal 的繼承者司光，據(jù) Eisenberg 說其實就是 Durandal 的下一個版本琅坡。 Durandal，Angular 1還有Angualr 2 的開發(fā)者可以輕松地遷移到 Aurelia 残家。

雖然 AureliaJS 剛發(fā)布不久榆俺，但是如果你在尋找 JavaScript 框架，請認(rèn)真考慮它坞淮。因為它底蘊深厚茴晋，并由一只非常專業(yè)的團隊維護著。

AureliaJS 的模塊化程度非常高回窘，由眾多相互獨立的诺擅，規(guī)模較小的庫組成。我們可以在項目中使用整個框架啡直，也可以僅使用一些必備的庫烁涌，或者是擴展所用包來構(gòu)建自己的框架。

AureliaJS 不依賴其他的庫付枫，除了一些必要的 polyfill 沒有額外的依賴烹玉。

通過官網(wǎng)我們可以了解更多的信息－aurelia.io

5. Meteor.js

喜歡只使用 JavaScript 開發(fā)完整的 web 應(yīng)用嗎？MeteorJS 正是這個神奇的全棧開發(fā)平臺阐滩，讓我們可以迅速地開發(fā)移動應(yīng)用和網(wǎng)頁應(yīng)用二打。MeteorJS非常給力，擁有我們需要的所有功能掂榔，包括前端渲染继效，后端開發(fā)症杏，業(yè)務(wù)邏輯處理和數(shù)據(jù)庫管理。

Meteor 是 Meteor 開發(fā)組創(chuàng)造的瑞信，在 2012 年發(fā)布了一個開源版本厉颤，遵循 MIT 許可。

發(fā)布以來凡简，MeteorJS 的生態(tài)圈迅速的發(fā)展壯大逼友，它的社區(qū)業(yè)非常地活躍，相關(guān)的資料秤涩，教程和第三方的包很多帜乞，這些讓 MeteorJS 變的非常強力。

MeteorJS 最棒的地方是僅 javaScript 開發(fā)就夠了筐眷，不用花費時間去學(xué)習(xí)其他的語言黎烈。另外 MetrorJS 是模塊化的，包和庫可以按需加載匀谣。

服務(wù)端的代碼運行在 nodejs 上照棋，使用 MeteorJS 就能操作數(shù)據(jù)庫，全都是 JavsScript武翎， MeteorJS 是實時的 web 應(yīng)用烈炭。

性能方面，數(shù)據(jù)庫中的改變都會實時得反映在 UI 上宝恶，避免了不同語言間切換梳庆，減少了服務(wù)器的響應(yīng)時間。

我們在官網(wǎng)了解到更多的信息-meteor.com

6. Backbone.js

是不是想要一個輕量又包含所有功能的 JavaScript 框架呢卑惜？Backone.JS 正是這樣的。 Jeremy Ashkenas 在 2010 年發(fā)布了它的一個開源版本驻售，遵循 MIT 協(xié)議露久。

backbone 功能強大并應(yīng)用廣泛，Pinterest欺栗，F(xiàn)oursquare毫痕，Walmart，DIsqus 和 Delicious 這些大公司都在使用它迟几。這僅是用戶中的一小部分消请，由于用戶數(shù)量巨大，無法羅列出來类腮。

backbone 的優(yōu)勢是它比較簡單臊泰，很小并容易上手。使用 backbone 開發(fā)可以說干就干蚜枢。

backbone 非常靈活缸逃，因為它提供了一個最小的功能集合针饥，開發(fā)者在此基礎(chǔ)上二次開發(fā)，自己寫代碼或者使用第三方的庫都可以需频。還可以在 backbone 的基礎(chǔ)上構(gòu)建一個全功能的框架丁眼。

過去的幾個月中，backbone 使用者的增長速度緩慢昭殉，遠(yuǎn)遠(yuǎn)落后Angular苞七， Ember 還有新出道的 React 的增速。

主要是因為 backbone 版本迭代慢挪丢，缺少其他框架提供的強大功能蹂风。

盡管還有人使用 backbone，不過更多的作為輔助框架而不是主要的框架吃靠。

Backbone 的更多信息請看 backbonejs.org

7. Polymer.js

Polymer.js 是一個與眾不同的框架硫眨，由 google 在 2013 年發(fā)布。Polymer 使用了 web components 來增強 HTML 的功能巢块。

Web Components 是由 W3C 發(fā)布的一項瀏覽器技術(shù)礁阁，用來創(chuàng)建定制的 HTML 標(biāo)簽。比如 <audio> 是一個標(biāo)準(zhǔn)的 HTML5 元素族奢，通過使用 web components 和相關(guān)的技術(shù)可以生成一個自定義的標(biāo)簽姥闭，比如說<my-audio>。

Polymer 使用的是包含 web components 在內(nèi)的瀏覽器技術(shù)越走，它開創(chuàng)了自定義 HTML 標(biāo)簽的一套體系棚品。

有關(guān) Polymer 的更多信息請看 polymer-project.org

8.Knockout.js

knockoutJS 由 Steve Sanderson 在 2010 年發(fā)布了第一個開源版本，遵循 MIT 許可廊敌。Knockout 依照的是 MVVM 模式铜跑，這讓它變的與 Ember 還有 Angular 不太一樣。

Knockout 曾經(jīng)流行過骡澈，不過現(xiàn)在與 Angular, Ember 還有 Backbone 相比锅纺，用戶增速非常緩慢。原因很簡單肋殴，因為在增加新的功能和改進現(xiàn)有功能方面相差太多囤锉。

社區(qū)的開發(fā)者正在慢慢地轉(zhuǎn)向 React 還有 Angular 的方向發(fā)展。Knockout 底蘊深厚护锤，如果有人愿意接手它官地，并為它增加最新的技術(shù)，它還有希望重現(xiàn)輝煌烙懦。
我們可以了解更多的信息－knockoutjs.com

9.Vue.js

Vue.js 的開發(fā)者是尤小右驱入，2014 年發(fā)布了第一個開源版本，遵循 MIT 許可。

VueJs 是個小鮮肉沧侥，吸引了很多開發(fā)者關(guān)注可霎。VueJs 使用了 MVVM 模式，它的API 非常簡單宴杀。VueJs 的設(shè)計精簡至極癣朗，為開發(fā)者精心準(zhǔn)備了幾個必需的模塊。

VueJs 參考了 AngularJS, ReactiveJs, konckoutJS 和 RivetsJS旺罢，使用雙向的數(shù)據(jù)綁定更新 model 和 view旷余。

目前來說，Vue 并不能同 Angular 還有 Ember 一較高下扁达，但它很有潛力成為日后的主流框架正卧，屆時將獲得相應(yīng)的占有率。發(fā)布 10 個月以來它牢牢地站穩(wěn)了腳跟跪解，現(xiàn)在由尤小右維護炉旷。

關(guān)于 VueJs 的更多信息請看-vuejs.org

10.Mercury.js

我們身處 JavaScript 框架大發(fā)展的時期，這種狀況前所未有叉讥。我的 top ten 名單里也給新晉者留著一個位置窘行，這就是 Mercury.js，它剛剛發(fā)布但前景廣闊图仓。

Mercury 由Raynos 創(chuàng)建罐盔，遵循 MIT 許可。它迅速的火了起來救崔，吸引了大量的開發(fā)者關(guān)注惶看。

Mercury 應(yīng)該是借鑒 react 并使用了虛擬 DOM。它是現(xiàn)代化的框架六孵，完全模塊化纬黎，也可以按照需要擴展。

想一下這幾個概念劫窒，壓縮體積小莹桅，模塊化，高效還有廣受歡迎烛亦，Mercury 因此占據(jù)了當(dāng)今十佳 JavaScript 框架的一個位置。

了解更多請看-githubcom/Raynos/mercury

總結(jié)

雖然 JavaScript 框架出現(xiàn)的時間不長懂拾，但在過去的幾年中發(fā)展迅速煤禽。JavaScript 框架是創(chuàng)建復(fù)雜用戶界面的首選，尤其是創(chuàng)建單頁應(yīng)用時岖赋。

不同的框架間有不同的概念和方法檬果，但殊途同歸，都在試圖解決構(gòu)建復(fù)雜應(yīng)用時的通用問題，讓單頁應(yīng)用變的更易用和便捷选脊。

文章中提到的框架是當(dāng)今市場中最優(yōu)秀的框架杭抠。請在評論中寫下你的經(jīng)驗和你所用的框架。

關(guān)于作者：

Sunil 是 noeticforce.com 的創(chuàng)始人和特約編輯恳啥。他的文章里包含了所有能夠使移動應(yīng)用偏灿，web 應(yīng)用，網(wǎng)站變的更現(xiàn)代化钝的。是一位富有激情的開發(fā)者翁垂，他使用 Python, Swift, JavaScript, PHP, Java, Android & iOS ，也包括 HTML/CSS硝桩。

如果你喜歡這個文章沿猜，可以在 Twitter 上關(guān)注 noeticforce，也可以訂閱 RSS碗脊。