[[413833]]

根據 JavaScript 框架的優點和主要特點對許多 JavaScript 框架進行細分。

大約十年前，JavaScript 社區開始見證一場 JavaScript 框架的激戰。在本文中，我將介紹其中最著名的一些框架。值得注意的是，這些都是開源的 JavaScript 項目，這意味著你可以在 開源許可證 下自由地使用它們，甚至為它們的源代碼和社區做出貢獻。

不過，在開始之前，了解一些 JavaScript 開發者談論框架時常用的術語，將對后續的內容大有裨益。 

 

< 如顯示不全，請左右滑動 >

術語	釋義
文檔對象模型（DOM）	網站的樹形結構表示，每一個節點都是代表網頁一部分的對象。萬維網聯盟（W3C），是萬維網的國際標準組織，維護著 DOM 的定義。
虛擬 DOM	用戶界面（UI）以“虛擬”或“理想”的方式保存在內存中，并通過 ReactDOM 等一些庫與“真實” DOM 同步。要進一步探索，請閱讀 ReactJS 的虛擬 DOM 和內部文檔。
數據綁定	一個編程概念，為訪問網站上的數據提供一致的接口。Web 元素與 DOM 維護的元素的屬性property 或 特性attribute 相關聯（LCTT 譯注：根據 MDN 的解釋，Javascript 的屬性property是對象的特征，通常描述與數據結構相關的特征；特性attribute 是指元素所有屬性節點的一個實時集合）。例如，當需要在網頁表單中填寫密碼時，數據綁定機制可以用密碼驗證邏輯檢驗，確保密碼格式有效。

 

我們已經清楚了常用的術語，下面我們來探索一下開源的 JavaScript 框架有哪些。

框架	簡介	許可證	發布日期
ReactJS	目前最流行的 JavaScript 框架，由 Facebook 創建	MIT 許可證	2013-5-24
Angular	Google 創建的流行的 JavaScript 框架	MIT 許可證	2010-1-5
VueJS	快速增長的 JavaScript 框架	MIT 許可證	2013-7-28
MeteorJS	超乎于 JavaScript 框架的強大框架	MIT 許可證	2012-1-18
KnockoutJS	開源的 MVVM（模型-視圖-視圖模型Model-View-ViewModel） 框架	MIT 許可證	2010-7-5
EmberJS	另一個開源的 MVVM 框架	MIT 許可證	2011-12-8
BackboneJS	帶有 RESTful JSON 和模型-視圖-主持人Model-View-Presenter模式的 JavaScript 框架	MIT 許可證	2010-9-30
Svelte	不使用虛擬 DOM 的 JavaScript 開源框架	MIT 許可證	2016-11-20
AureliaJS	現代 JavaScript 模塊的集合	MIT 許可證	2018-2-14

為了說明情況，下面是每個框架的 NPM 包下載量的公開數據，感謝 npm trends。

Framework downloads graph

ReactJS

React page

ReactJS 是由 Facebook 研發的，它雖然在 Angular 之后發布，但明顯是當今 JavaScript 框架的領導者。React 引入了一個虛擬 DOM 的概念，這是一個抽象副本，開發者能在框架內僅使用他們想要的 ReactJS 功能，而無需重寫整個項目。此外，React 項目活躍的開源社區無疑成為增長背后的主力軍。下面是一些 React 的主要優勢：

• 合理的學習曲線 —— React 開發者可以輕松地創建 React 組件，而不需要重寫整個 JavaScript 的代碼。在 ReactJS 的 首頁 查看它的優點以及它如何使編程更容易。
• 高度優化的性能 —— React 的虛擬 DOM 的實現和其他功能提升了應用程序的渲染性能。請查看 ReactJS 的關于如何對其性能進行基準測試，并對應用性能進行衡量的相關 描述。
• 優秀的支持工具 —— Redux、Thunk 和 Reselect 是構建良好、可調式代碼的最佳工具。
• 單向數據綁定 —— 模型使用 Reach 流，只從所有者流向子模塊，這使得在代碼中追蹤因果關系更加簡單。請在 ReactJS 的 數據綁定頁 閱讀更多相關資料。

誰在使用 ReactJS？Facebook 自從發明它，就大量使用 React 構建公司首頁，據說 Instagram 完全基于 ReactJS 庫。你可能會驚訝地發現，其他知名公司如 紐約時報、Netflix 和 可汗學院 也在他們的技術棧中使用了 ReactJS。

更令人驚訝的是 ReactJS 開發者的工作機會，正如在下面 Stackoverflow 所做的研究中看到的，嘿，你可以從事開源項目并獲得報酬。這很酷！

Stackoverflow 的研究顯示了對 ReactJS 開發者的巨大需求——來源：2017 年開發者招聘趨勢——Stackoverflow 博客

ReactJS 的 GitHub 目前顯示超過 13,000 次提交和 1,377 位貢獻者。它是一個在 MIT 許可證下的開源項目。

React GitHub page

Angular

Angular homepage

就開發者數量來說，也許 React 是現在最領先的 JavaScript 框架，但是 Angular 緊隨其后。事實上，開源開發者和初創公司更樂于選擇 React，而較大的公司往往更喜歡 Angular（下面列出了一些例子）。主要原因是，雖然 Angular 可能更復雜，但它的統一性和一致性適用于大型項目。例如，在我整個職業生涯中一直研究 Angular 和 React，我觀察到大公司通常認為 Angular 嚴格的結構是一種優勢。下面是 Angular 的另外一些關鍵優勢：

• 精心設計的命令行工具 —— Angular 有一個優秀的命令行工具（CLI），可以輕松起步和使用 Angular 進行開發。ReactJS 提供命令行工具和其他工具，同時 Angular 有廣泛的支持和出色的文檔，你可以參見 這個頁面。
• 單向數據綁定 —— 和 React 類似，單向數據綁定模型使框架受更少的不必要的副作用的影響。
• 更好的 TypeScript 支持 —— Angular 與 TypeScript 有很好的一致性，它其實是 JavaScript 強制類型的拓展。它還可以轉譯為 JavaScript，強制類型是減少錯誤代碼的絕佳選擇。

像 YouTube、Netflix、IBM 和 Walmart 等知名網站，都已在其應用程序中采用了 Angular。我通過自學使用 Angular 來開始學習前端 JavaScript 開發。我參與了許多涉及 Angular 的個人和專業項目，但那是當時被稱為 AngularJS 的 Angular 1.x。當 Google 決定將版本升級到 2.0 時，他們對框架進行了徹底的改造，然后變成了 Angular。新的 Angular 是對之前的 AngularJS 的徹底改造，這一舉動帶來了一部分新開發者也驅逐了一部分原有的開發者。

截止到撰寫本文，Angular 的 GitHub 頁面顯示 17,781 次提交和 1,133 位貢獻者。它也是一個遵循 MIT 許可證的開源項目，因此你可以自由地在你的項目或貢獻中使用。

Angular GitHub page

VueJS

Vue JS page

VueJS 是一個非常有趣的框架。它是 JavaScript 框架領域的新來者，但是在過去幾年里它的受歡迎程度顯著增加。VueJS 由 尤雨溪 創建，他是曾參與過 Angular 項目的谷歌工程師。該框架現在變得如此受歡迎，以至于許多前端工程師更喜歡 VueJS 而不是其他 JavaScript 框架。下圖描述了該框架隨著時間的推移獲得關注的速度。

Vue JS popularity graph

這里有一些 VueJS 的主要優點：

• 更容易地學習曲線 —— 與 Angular 或 React 相比，許多前端開發者都認為 VueJS 有更平滑的學習曲線。
• 小體積 —— 與 Angular 或 React 相比，VueJS 相對輕巧。在 官方文檔 中，它的大小據說只有約 30 KB；而 Angular 生成的項目超過 65 KB。
• 簡明的文檔 —— VueJS 有全面清晰的文檔。請自行查看它的 官方文檔。

VueJS 的 GitHub 顯示該項目有 3,099 次提交和 239 位貢獻者。

Vue JS GitHub page

MeteorJS

Meteor page

MeteorJS 是一個自由開源的 同構框架，這意味著它和 NodeJS 一樣，同時運行客戶端和服務器的 JavaScript。Meteor 能夠和任何其他流行的前端框架一起使用，如 Angular、React、Vue、Svelte 等。

Meteor 被高通、馬自達和宜家等多家公司以及如 Dispatch 和 Rocket.Chat 等多個應用程序使用。您可以其在官方網站上查看更多案例。

Meteor case study

Meteor 的一些主要功能包括：

• 在線數據 —— 服務器發送數據而不是 HTML，并由客戶端渲染。在線數據主要是指 Meteor 在頁面加載時通過一個 WebSocket 連接服務器，然后通過該鏈接傳輸所需要的數據。
• 用 JavaScript 開發一切 —— 客戶端、應用服務、網頁和移動界面都可以用 JavaScript 設計。
• 支持大多數主流框架 —— Angular、React 和 Vue 都可以與 Meteor 結合。因此，你仍然可以使用最喜歡的框架如 React 或 Angular，這并不防礙 Meteor 為你提供一些優秀的功能。

截止到目前，Meteor 的 GitHub 顯示 22，804 次提交和 428 位貢獻者。這對于開源項目來說相當多了。

Meteor GitHub page

EmberJS

EmberJS page

EmberJS 是一個基于 模型-視圖-視圖模型（MVVM） 模式的開源 JavaScript 框架。如果你從來沒有聽說過 EmberJS，你肯定會驚訝于有多少公司在使用它。Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm 和 Chipotle 都將 EmberJS 作為公司的技術棧之一。你可以通過查詢 EmberJS 的官方頁面 來發掘所有使用 EmberJS 的應用和客戶。

Ember 雖然和我們討論過的其他框架有類似的好處，但這里有些獨特的區別：

• 約定優于配置 —— Ember 將命名約定標準化并自動生成結果代碼。這種方法學習曲線有些陡峭，但可以確保程序員遵循最佳實踐。
• 成熟的模板機制 —— Ember 依賴于直接文本操作，直接構建 HTML 文檔，而并不關心 DOM。

正如所期待的那樣，作為一個被許多應用程序使用的框架，Ember 的 GitHub 頁面顯示該項目擁有 19,808 次提交和 785 位貢獻者。這是一個巨大的數字！

EmberJS GitHub page

KnockoutJS

KnockoutJS page

KnockoutJS 是一個獨立開源的 JavaScript 框架，采用 模板-視圖-視圖模型（MVVM） 模式與模板。盡管與 Angular、React 或 Vue 相比，聽說過這個框架的人可能比較少，這個項目在開發者社區仍然相當活躍，并且有以下功能：

• 聲明式綁定 —— Knockout 的聲明式綁定系統提供了一種簡潔而強大的方式來將數據鏈接到 UI。綁定簡單的數據屬性或使用單向綁定很簡單。請在 KnockoutJS 的官方文檔頁面 閱讀更多相關信息。
• 自動 UI 刷新。
• 依賴跟蹤模板。

Knockout 的 GitHub 頁面顯示約有 1,766 次提交和 81 位貢獻者。與其他框架相比，這些數據并不重要，但是該項目仍然在積極維護中。

Knockout GitHub page

BackboneJS

BackboneJS page

BackboneJS 是一個具有 RESTful JSON 接口，基于模型-視圖-主持人Model-View-Presenter（MVP）設計范式的輕量級 JavaScript 框架。

這個框架據說已經被 Airbnb、Hulu、SoundCloud 和 Trello 使用。你可以在 Backbone 的頁面 找到上面所有這些案例來研究。

BackboneJS 的 GitHub 頁面顯示有 3,386 次提交和 289 位貢獻者。

BackboneJS GitHub page

Svelte

Svelte page

Svelte 是一個開源的 JavaScript 框架，它生成操作 DOM 的代碼，而不是包含框架引用。在構建時而非運行時將應用程序轉換為 JavaScript 的過程，在某些情況下可能會帶來輕微的性能提升。

Svelte 的 GitHub 頁面顯示，截止到本文撰寫為止，該項目有 5,729 次提交和 296 位貢獻者。

Svelte GitHub page

AureliaJS

Aurelia page

最后我們介紹一下 Aurelia。Aurelia 是一個前端 JavaScript 框架，是一個現代 JavaScript 模塊的集合。Aurelia 有以下有趣的功能：

• 快速渲染 —— Aurelia 宣稱比當今其他任何框架的渲染速度都快。
• 單向數據流 —— Aurelia 使用一個基于觀察的綁定系統，將數據從模型推送到視圖。
• 使用原生 JavaScript 架構 —— 可以用原生 JavaScript 構建網站的所有組件。

Aurelia 的 GitHub 頁面顯示，截止到撰寫本文為止該項目有 788 次提交和 96 位貢獻者。

Aurelia GitHub page

這就是我在查看 JavaScript 框架世界時發現的新內容。我錯過了其他有趣的框架嗎？