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

時間 2019-11-13

標籤頂級 javascript 框架工具及其使用欄目 JavaScript 简体版

原文原文鏈接

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

請注意：node

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

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

AngularJS

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

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

何時使用 AngularJS？當你正在創建一個複雜的 web 前端應用程序，而且須要一個模塊化的框架來處理一切時。canvas

React

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

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、Angular二、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 語言特性，同時繼續支持舊版瀏覽器時。