頂級的JavaScript框架、庫、工具及其使用

本文轉載自查看原文 2016-10-09 12:16 4052

幾乎每隔一個星期，就有一個新的 JavaScript 庫席卷網絡社區！Web 社區日益活躍、多樣，並在多個領域快速成長。想要研究每一個重要的 JavaScript 框架和庫，是個不可能完成的任務。接下來，我會分享一些前端開發的最著名和最有影響力的框架和庫。下面，就讓我們一起來看看，頂級的 JavaScript web 前端框架、庫和工具及其使用。

請注意：

如果沒有包括你最喜歡的 JavaScript 的框架和庫，請多包涵。
請實時更新你的框架和庫，最新版本往往有更好的跨瀏覽器和跨設備支持。可以使用檢測設備一樣的工具，來幫助確定一個舊版本，是否可以和配置最好的設備兼容。

接下來，讓我們看看下面的列表！

AngularJS

AngularJS 是一種流行的企業框架，許多開發人員使用其構建和維護復雜的 Web 應用程序。AngularJS 是十分受歡迎的，許多公司都使用它，像達美樂披薩、瑞安航空、iTunes Connect，PayPal 支付，谷歌等。AngularJS 是由谷歌支持的開源框架。AngularJS 把自己描述為一個 HTML 的擴展，可用來構建復雜的 Web 應用程序。此外，如果你熟悉 TypeScript，將會很清楚 AngularJS 是如何編寫的。

AngularJS 是一個 MVC 類型的框架，它提供了雙向的數據模型和視圖之間的綁定。這種數據綁定，允許在雙方只要有一個數據變化時，自動進行更新。它使你可以構建可重用的 View 組件。同時，它也提供了一個服務框架，以便前后端服務的輕松通信。最后，它只是普通的 JavaScript。

什么時候使用 AngularJS？當你正在建立一個復雜的 web 前端應用程序，並且需要一個模塊化的框架來處理一切時。

React

React 是今年最受喜愛的 JavaScript 的工程！每個人似乎都在談論 ReactJS。每一個會議上，去年出席的會議，至少有兩個人是在討論 React。React 是開源的，主要是由 facebook 借助其它公司的主要技術開發出來的。React 描述自己是一個 JavaScript 庫，用於構建用戶界面。

React 在 MVC 中，主要是 View。它完全專注於 MVC 那部分，無視應用程序的其它部分。它提供了一個成分層，可以更容易使用UI元素，並將它們組合在一起。它抽象了 DOM，使其擅長於優化渲染，並允許使用 node.js 來表述 React ; 它實現了一個單向靈活的數據流，使得它更容易理解和使用其它框架。

作為在 MVC 中的 V，許多工程結合 React 和 AngularJS 或 Ember 一起使用。

什么時候使用 React？當你想要一個強大的 View 層，但應用的其它部分卻不需要詳盡的框架時，或者當你的應用中想要一個結合了Angular、Backbone 或 Ember 的視圖層時，又或者是創建一個同構的 Web 框架時。

Backbone

Backbone 是一個很著名的簡單的框架，融入了一個單一的 JavaScript 文件。Backbone 流行了一段時間。由 Jeremy Ashkenas 從CoffeeScript 和 Underscore 框架中開發出來的。對於追尋小型架構的團隊來說，Backbone 是特別受歡迎的。因為他們小型的 Web 應用是不需要使用像 AngularJS 和 Ember 這樣的大型框架的。

Backbone 提供了一個完整的 MVC 框架和路由。該模型允許鍵-值綁定和處理數據變化的事件。Models（和 Collections）可以連接到 RESTful API 中。Views 可以聲明事件處理，而路由器則可以非常出色地處理 URL 和狀態管理。在建立一個不提供太多功能和非必要復雜功能的單頁面應用時，能提供你所需的所有功能。

什么時候使用 Backbone？Backbone 是適用於簡單 Web 應用的 GOTO 框架。

Ember

Ember 是一個獨立的 Web 應用程序框架，專注於編碼效率。Ember 是比較受歡迎的，核心團隊包括牛人 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心團隊之一。Ember 描述自己為一個不浪費你的時間，能用於創建偉大 Web 應用程序的框架。這是非常有主見，這也使你有了很多選擇。

Ember 也是一個 MVC 框架。它包括一個模板和視圖引擎，保證了數據變化時的自動更新，就像 AngularJS，Backbone 和 React 一樣。它包括的概念 web 組件，讓你用自己的標簽來擴展 HTML（就像 AngularJS）。它也有一個路由和模型引擎，能夠和 RESTful API 協同工作。

什么時候使用 Ember？如果你只是想要一個能夠工作的框架時、或者你的預算緊張、又或者最后期限將近時，不追求太多的靈活性，可以使用 Ember。

JQuery

jQuery 是一個不需要過多介紹的框架。它憑一己之力使得跨瀏覽器站點成為現實並促使 Web 發展到今天。Web 標准被大多數主要瀏覽器廠商所采納真正的尊重，jQuery 是其原因之一。jQuery 的基金會的使命是“通過開發和支持開源軟件，提高開放的網絡，使之為所有人開放，並與開發社區合作。”

jQuery 是世界上最常用的 JavaScript 庫，沒有應用程序不去使用它，除非不在乎編碼效率。它使得在所有瀏覽器中，DOM traversal、事件處理、動畫、AJAX 是如此的簡單和容易。

什么時候使用 jQuery？除你想使用像 Zepto 這樣的輕量級版本之外，都可以使用 jQuery。

Wijmo

Wijmo Enterprise 是為企業應用程序開發而推出的一系列包含 HTML5 和 JavaScript 的開發控件集。包含有先進的 JavaScript 控件、經典的 jQuery 小部件、金融圖標、以及 FlexSheet 和 OLAP，能夠滿足移動端、PC 端和支持 IE6 等應用程序的需求。同時，Wijmo 還支持其它流行的框架，如 Angular、Angular2、KnockOut、Vue、React 等。

什么時候使用 Wijmo？當你想為應用程序構建具有良好用戶體驗的用戶界面時。

Underscore＆lodash

對於程序開發者來說，一些 JavaScript 的內置，效率是不夠高的。總有缺少實用的功能或將代碼化簡的函數。Underscore（和 lodash）是一個 JavaScript 庫，提供了實用功能，同時不需要 JavaScript 對象內置的猴子補丁。這兩個庫提供超過 100 個幫助函數和其它特別好用的功能;，包括像地圖，過濾器，調用，縮減，模板，調節，綁定，擴展，挑選，克隆和更多的功能。

什么時候使用 Underscore？當你需要一個單一 JavaScript 文件來提高編碼效率時。

什么時候使用 lodash？當你需要一個模塊和輕量高效的，容易被 AMD 和社區插件支持 Underscore 版本時。

D3.js

數據可視化和圖表是 Web 應用程序的常見需求。當涉及到任何數據操作和可視化，D3.js 是事實上的標准。它是在 GitHub 上最受歡迎的項目之一，並在被數百個組織使用。大量的圖形，圖表和可視庫建立在 D3 上。

D3 允許操作任何數據源的文件，並且可以轉換為 DOM、SVG 或 CSS。D3 專注於現代網絡標准，並確保像 Flash 或 Silverlight 等專有格式的免費。

什么時候使用 D3.JS？當你需要任何形式的可視化時。

Babylon.js

想要創建一個完全運行在現代 Web 標准和跨瀏覽器上的視頻游戲？可以考慮 Babylon.js，Babylon.js 是一個建立在 WebGL 和 JavaScript 上的 3D 游戲引擎。你可以創建一個難以置信的高質量的游戲引擎，包括物理，音頻和粒子系統。

什么時候使用 Babylon.js？當你正在構建一個包含任何復雜 3D 場景的視頻游戲時。

three.js

想要創建一個 3D 可視化，卻又不需要完整的游戲引擎？Three.js 提供了一個輕量的 3D 庫來將 3D 渲染成一個 HTML5 canvas、SVG 和 WebGL。這確實是一個明確的庫，在 Three.js 的用例展示中，有幾百個效果很好的例子。

什么時候使用 three.js？每當你需要一個簡單的三維可視化，可以輸出到畫布上時。

Mocha & Chai

在很長一段時間里，JavaScript 的測試令人難以置信的煩惱。從頭開始，測試任何代碼通常被視為令人討厭的，但它是每一個開發者應該做的。同時，測試他們的代碼，每個開發者似乎總是很不屑，而選擇忽略它。有一個辦法來改善這個問題，就是使用 Mocha & Chai 的形式。雖然這兩個庫從美味的熱飲中得名的，但是它們都可以以不同的方式測試你的代碼。

Mocha 是一個 JavaScript 測試框架，可以很輕松地在 node 模型和瀏覽器應用程序中測試異步代碼。Mocha 測試可以串聯運行，並且對於正確的測試用例具有高質量的跟蹤異常。

Chai 是一個行為驅動的開發/測試驅動開發斷言庫，可以與 Mocha 配套使用。它使得可以很容易的以一種可讀的方式去表達你的測試內容。

什么時候使用 Mocha 和Chai？永遠都可以！請測試你的代碼，使世界變得更美好。

Karma

這個列表上包含了 Mocha 和 Chai，如果不包含運行這些測試和設定持續集成測試的運行者，那么這將是不完整的。Karma 是一個旨在幫助針對不同的瀏覽器自動運行測試的工具。這將幫助你在所有的瀏覽器上運行 Mocha 和 Chai。

並不是每一個瀏覽器都可以在每個平台上運行，幸運的是，有一些免費的工具，你可以用來測試其他瀏覽器，例如瀏覽器截圖。如果你在 OS X 上運行，並希望測試 Edge 或 Internet Explorer，您可以使用這種免費工具。

什么時候使用 Karma？當你的應用程序有一個完整的測試套件，並想要確保在所有的瀏覽器上測試通過時。

PhantomJS

運行全功能瀏覽器，以測試你的代碼內存和 CPU 密集型。PhantomJS 允許你在 Safari 和 Chrome 上運行 headless WebKit 的渲染引擎。這樣你就可以運行你的測試，捕捉屏幕截圖，監視網絡，使用 JavaScript API 自動瀏覽頁面。

什么時候使用 PhantomJS? 當你需要做更多的測試，操作頁面並監視網絡請求時。

Grunt & Gulp

產品網站建設通常會涉及到一些提高性能的任務，例如縮小 JavaScript 和 CSS，CoffeeScript/TypeScript 的編譯，單元測試，性能 lintin。也許你已經為產品網站准備好了工具鏈，但是如果還沒有，那么你可以使用 Grunt 和 Gulp 這樣的工具。這兩個工具都有很多插件，來幫助你完善產品網站。

什么時候使用 Grunt？如果你喜歡寫配置文件，並且不介意任務運行期間產生中間文件時。

什么時候使用 Gulp？如果對比於寫配置文件，你更喜歡寫代碼，並且想要使用 node.js 的流媒體功能來更快的執行任務時。

Babel

JavaScript 作為一門語言，發展地很快。2015年夏天的 ECMAScript 發布了它的許多在最新的瀏覽器中實現的新功能。如果你想看看2015年的 ECMAScript 兼容，你可以看看來自原 @kangax 的列表。你會發現最新版本的 Edge，Firefox 和 Chrome，具有近乎完全的兼容性。

我們不是生活在一個完美的世界。作為開發人員，我們需要繼續支持那些沒有最新 JavaScript 特性的舊版瀏覽器。我們要推進網絡並提高我們的代碼庫。Babel 是一個 JavaScript 編譯器，可以將最新的 JavaScript 標准編譯成 ES5 兼容的 JavaScript，這樣就允許在像 IE9 這樣較老的瀏覽器上運行。它有一些插件，使得很容易的使用 React 去開發，甚至使用一些規格之外的特性去開發。

什么時候使用 Babel？當你要使用新的 JavaScript 語言特性，同時繼續支持舊版瀏覽器時。