JavaScript 即未來：介紹 14 個 JavaScript 的框架和庫

JavaScript 即未來趨勢所在。

Javascript 得到了眾多的技術領導者的擁護和支援，其中一位就是 WordPress 的作者 Matt Mullenweg , 他表示 WordPress 開發者 應該學習 JavaScript , 這也清晰地向 WordPress 社群傳達了 JavaScript 在未來的重要性。 同時，這一觀點也被普遍接受。向著更先進的技術靠攏與過渡也同時保證了 WordPress 在未來的挑戰中不會落於人後。

JavaScript 同時也是眾多站在開源立場的技術中的佼佼者。與現在所流行的觀點相反，JavaScript 不是一個工程，而是一個由其核心團隊共同制定和維護的開放標準。ECMAScript , 這是另一個和 JavaScript 相關的名字, 它雖然不是開源的，但它也有一個開放的標準。

當你在瀏覽 GitHub 的時候你就可以發現 JavaScript 在當今有多麼流行了。而且就倉庫的數量 而言，JavaScript 絕對位於所有的程式語言當中最頂尖的那一層次。 同時，在 Livecoding.tv 上你也能看出 JavaScript 有多麼突出，這裡的使用者釋出的關於 JavaScript 的視訊的數量比其他的話題多得多。在寫這篇文章的時候（2016 年底），Livecoding.tv 上已經有 45,919 個 使用者原創的 JavaScript 視訊教程 。

熱門的開源 JavaScript 框架和庫

迴歸到主題， 龐大的社群是 JavaScript 的一個得天獨厚的優勢，同時這也推動了 JavaScript 的蓬勃發展。這裡有數以百千計的成熟的 JavaScript 框架和庫供開發者使用，同時這些最優秀的框架和庫都是開源的。對當前的 JavaScript 開發者來說，能夠使用這些優秀的框架和庫來進行快速開發已經是必須技能了。當今的市場需要快速開發，但是，重複造輪子是沒有必要的。不論你是一個 JavaScript 新手還是一個資深的 JavaScript 開發者，使用框架和庫都能極大提高你的工作效率。

好了，讓我們開始吧！

1. Angular.js

Angular.js 是目前最熱門的 JavaScript 框架之一。它用於開發者構建複雜的 web 應用。Angular.js 背後的思想是它的單頁應用 model。同時它 也支援 MVC 架構。在 Angular.js 中 ，開發者可以在前端中使用 JavaScript 程式碼，並從字面上擴充套件 HTML 詞彙。

Angular.js 自 2009 年出現以來已經有了很大的改進。Angular 1 當前的穩定版本是 1.5.8/1.2.30 。你也可以試一試 Angular 2 ，相對於 Angular 1 來說它有了重大的改進，但這個新版本仍未在全球範圍內被普遍使用。

在 Angular.js 中，資料繫結是完成工作的一個重要概念。在使用者與介面的互動中，當互動完成，view 就會自動更新，隨即新值與 model 互動以確保一切都是同步的。底層的邏輯在 model 中執行完成後，DOM 也會隨即更新。

2. Backbone.js

複雜 web 應用並不適用於所有場景。一些較簡單的 web 應用框架例如 Backbone.js 就非常適合學習 web app 開發。Backbone.js 是一個簡單的框架，可以快速方便地構建簡單的 web 應用。和 Angular.js 一樣，Backbone.js 也支援 MVC 。Backbone.js 還有一些其它關鍵特性如路由，RESTful API 支援，適當的狀態管理等等。你甚至還可以用 Backbone.js 來構建單頁應用。

當前的穩定版本是 1.3.3，可以在 GitHub 中找到。

3. D3.js

D3.js 是一個優秀的 JavaScript 庫，它允許開發者建立具有資料處理功能的富 web 頁面。D3.js 使用 SVG、HTML 和 CSS 來實現這一切功能。使用 D3.js ，你可以更輕鬆地將資料繫結到 DOM 及啟用資料驅動事件。使用 D3.js ，你還可以建立高質量的資料驅動的 web 頁面來提供一個更易於理解的視覺效果來呈現資料。檢視示例 ： LCF 符號哈密頓圖 ，由 D3.js 強力驅動。

4. React.js

React.js 是一個使用起來很有趣的 JavaScript 框架。和其它的 JavaScript 框架不同，React.js 志在構建一個高可擴充套件的前端使用者介面。React.js 出現於 2013 年，它採用了 BSD 開源協議。它因其能夠開發複雜且漂亮的使用者介面所帶來的優勢而迅速發展壯大。

React.js 背後的核心思想是虛擬 DOM 。虛擬 DOM 在客戶端和服務端之間扮演著一箇中間人的角色並帶來了顯著的效能提升。虛擬 DOM 的改變和伺服器端 DOM 一樣，只需要更新所需的元素，相對於傳統的 UI 渲染來說極大提升了渲染速度。

你還可以使用 Recat 來實現 meterial 風格的設計，使你能夠開發具有無與倫比的效能的 web 應用。

5. jQuery

jQuery 是一個非常流行的 JavaScript 庫，它擁有眾多特性例如事件處理、動畫等。當你在做一個 web 專案的時候，你不會想要把時間浪費在為一些簡單的功能寫程式碼上。jQuery 為減少你的工作量提供了一些易於使用的 API 。這些 API 在所有的常見的瀏覽器中都能夠使用。使用 jQuery, 你可以無縫地控制 DOM 以及 Ajax 這樣在近幾年來擁有大量需求的任務。使用 jQuery，開發者不必擔心一些低階的互動，同時可以使他們的 web 應用的開發更加容易與迅速。

jQuery 同時便於分離 HTML 和 JavaScript 程式碼，使開發者能夠編寫簡潔而跨瀏覽器相容的程式碼。並且使用 jQuery 建立的 web 應用在將來也易於改善和擴充套件。

6. Ember.js

Ember.js 是一個 Angular.js 和 React.js 的功能混合體。當你在瀏覽社群的時候你能明顯地感受到 Ember.js 的熱門程度。Ember.js 的新特性也不斷地在新增。它在資料同步方面與 Angular.js 很像。 雙向的資料交換可以確保應用的快速性和可擴充套件性。同時，它還能夠幫助開發者建立一些前端元素。

和 React.js 的相似之處在於，Ember.js 提供了同樣的伺服器端虛擬 DOM 以確保高效能和高可擴充套件。同時， Ember.js 提倡簡化程式碼，提供了豐富的 API。Ember.js 還有非常優秀的社群。

7. Polymer.js

如果你曾想過建立你自己的 HTML5 元素，那麼你可以使用 Polymer.js 來做這些事。 Polymer 主要集中於通過給 web 開發者提供建立自己的標籤的功能來提供擴充套件功能。例如，你可以建立一個和 HTML5 中的 <video> 類似的具有自己的功能的 <my_video> 元素。

Polymer 在 2013 年被 Google 引入並以 三句版 BSD 協議釋出。

8. Three.js

Three.js 又是另一個 JavaScript 庫，主要用於 3D 效果開發。如果你在做遊戲開發的動畫效果，那麼你可以利用 Three.js 的優勢。Three.js 在底層中使用 WebGL 使 Three.js 可以輕鬆地被用於在螢幕上渲染 3D 物體。舉一個比較知名的使用 Three.js 的例子就是 HexGLA，這是一個未來派賽車遊戲。

9. PhantomJS

使用 JavaScript 工作就意味著和不同的瀏覽器打交道，同時，當提及瀏覽器的時候，就不得不討論資源管理。在 PhantomJS 中，由於有 Headless WebKit 的支援，所以你可以隨時監測你的 web 應用。Headless WebKit 是 Chrome 和 Safari 使用的渲染引擎中的一部分。

這整個過程是自動化的，你所需要做的只是使用這個 API 來構建你的 web 應用。

10. BabylonJS

BabylonJS 與 Three.js 不相伯仲， 提供了建立平滑而強大的 3D web 應用的 JavaScript API。它是開源的，且基於 JavaScript 和 WebGL 。建立一個簡單的 3D 物體，比如一個球體是非常簡單的，你只需要寫短短几行程式碼。通過這個庫提供的 文件，你可以很好地掌握它的內容。 同時 BabylonJS 的主頁上也提供了一些優秀的 demo 來當作參考。在其官網上你可以找到這些 Demo。

11. Boba.js

Web 應用總是有一個共通的需求，那就是分析。如果你還在苦於將資料的分析與統計插入到 JavaScript 的 web 應用中，那麼你可以試一下 Boba.js。Boba.js 可以幫助你將分析的資料插入到你的 web 應用中並且支援舊的 ga.js 。你甚至可以把資料指標和 Boba.js 整合在一起，只需要依賴 jQuery 即可。

12. Underscore.js

Underscore.js 解決了 “當我面對一個空白 HTML 頁面並希望即刻開始工作，我需要什麼” 這個問題。當你剛開始一個專案，你可能會感到失落或者重複一系列你在之前專案中常做的步驟。 為了簡化開啟一個專案的過程和給你起個頭，Underscore.js 這個 JavaScript 庫給你提供了一系列的方法。例如，你可以使用你在之前專案中常用的 Backbone.js 中的 suspender 或者 jQuery 的一些方法。

一些實用的幫助例如 “filter” 和 “invoke the map” 可以給你起個好頭，以助於你儘可能快的投入到工作中。 Underscore.js 同時還自帶了一個套件來簡化你的測試工作。

13. Meteor.js

Meteor.js 是一個快速構建 JavaScript 應用的框架。它是開源的且它能夠用於構建桌面應用、移動應用和 web 應用。Meteor.js 是一個全棧的框架同時允許多平臺的端到端開發。 你可以使用 Meteor.js 來實現前端和後端功能，同時它也能密切監視應用的效能。Meteor.js 的社群非常龐大，所以它會有不斷的新特性更新或者是 bug 修復。Meteor.js 也是模組化的，同時它能配合一些其它的優秀的 API 使用。

14. Knockout.js

Knockout.js 在這些庫中可能是最被低估的一個。它是一個基於 MIT 開源協議的開源 JavaScript 框架。作者是 Steve Sanderson。它基於 MVVM 模式。

值得注意的是: Node.js

Node.js 是一個強有力的 JavaScript 執行時環境。它可以被用於使用真實世界資料來構建快速且可擴充套件的應用。它既不是一個框架也不是一個庫，而是一個基於 Google Chrome 的 V8 引擎的執行時環境。你可以用 Node.js 來建立多元化的 JavaScript 應用，包括單頁應用、即時 web 應用等等。從技術層面上來講，由於它的事件驅動式架構，所以 Node.js 支援非同步 I/O 。這種做法使得它成為開發高可擴充套件應用的一個極好的解決方案的選擇。檢視 Node.js在 livecoding.tv 上的視訊。

總結

JavaScript 是 web 開發中的通用語言。它之所以快速發展不僅僅是因為它所提供的內容，更多的是因為它的龐大的開源社群的支援。以上提到的框架和庫對任何一個 JavaScript 開發者來說都是必須知道的。它們都提供了一些途徑來探索 JavaScript 和前端開發。上面提及的大部分框架和庫頻繁地在 Livecoding.tv 上出現，其大部分來自對 JavaScript 及其相關技術感興趣的軟體工程師。

---

via: https://opensource.com/article/16/11/15-javascript-frameworks-libraries

作者：Dr. Michael J. Garbade 譯者：chenxinlong 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出