用于 Web 前端開發的 9 個 JavaScript 開源框架

作者：佚名 2021-07-28 14:14:09

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

根據 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 雖然和我們討論過的其他框架有類似的好處，但這里有些獨特的區別：