 |
VOOZH | about |
|
VOOZH | about |
好像幾乎每隔一周就有一個新的 JavaScript 庫在網絡社區引起風暴！網絡社區越來越充滿活力，多樣化且在多個方面快速發展。調查每一個主流的 JavaScript 框架和庫是不可能完成的壯舉。因此，我將分享一些前端開發中最著名和最有影響力的框架和庫。讓我們看看最佳的 JavaScript web 前端框架，庫和工具以及何時使用它們。
另外：
如果我沒有包括你最喜歡的 JavaScript 框架，請不要生氣。
永遠記住持續更新你的框架和庫。最新版本的框架和庫通常具有最好的跨瀏覽器和跨設備的支持。你可以使用工具， 比如scanner 來幫助判斷一個舊版本是否兼容這一大批設備。
好了，讓我們進入列表！
AngularJS
Angular 是流行的企業級框架，許多開發人員都在使用它來構建和維護複雜的 web 應用程式。Angular 的人氣非常高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企業都在使用它。Angular 是一個由谷歌支持的開源框架。Angular 自稱是 HTML 的一個擴展，用來構建複雜的 web 應用程式。另外如果你熟悉 TypeScript， Angular 2就是用它構建的。
這個作者的更多文章
構建一個基於 Node.js 的聊天室 Web App：遠程調試
構建一個基於 Node.js 的聊天室 Web App：通過 WebSockets 連接
Angular 是一個 MVC 類型的框架。它提供了模型和視圖之間的雙向數據綁定。該數據綁定允許每當數據改變時，兩邊自動更新。 它使你能夠構建可復用的視圖組件。它提供了一個服務框架，使得後端-前端服務通信更容易。最後，它只是普通的 JavaScript。
何時使用 AngularJS？當你正在構建一個複雜的 web 前端應用程式，同時需要一個模塊化的框架來處理一切時。
GitHub: https://github.com/angular/angular.js
當前版本： 1.4.7/1.2.29
網址： angularjs.org
React
React 是今年最受歡迎的 JavaScript 項目！每個人都似乎在談論 ReactJS。去年我參加的每一個會議，至少有好幾個議題是關於 React 和同家族的其他庫（Flux, Redux）的。React 是開源軟件，主要由 Facebook 開發，其他大型科技公司也有貢獻。React 自稱是一個用於構建用戶界面的 JavaScript 庫。
React 主要是 MVC 中的 V。它的重點完全在 MVC 的 V 部分，忽視應用程式架構的其餘部分。它提供了一個組件層，使得創建 UI 元素，組合元素變得更容易。它使用虛擬 DOM，因此優化了渲染，且允許從 node.js 渲染 React。此外，它實現了單向響應的數據流，因此比其他框架更容易理解和使用。
作為 MVC 中的 V，很多項目將 React 結合 Angular 或 Ember 這樣的框架使用。
何時使用 React？當你想要一個強大的視圖層，但不需要在應用程式的其餘部分使用一個複雜的框架，或者你在 Angular、Backbone 或 Ember 應用上需要一個視圖層時。當你正試圖建立一個同構 web 框架時。
GitHub: https://github.com/facebook/react
當前版本: v0.14.0
網址: Facebook.github.io/react/
Backbone
Backbone 是一個著名的簡易框架，適合單個 JavaScript 文件。Backbone 已經存在有一段時間了，是以 CoffeeScript 和 Underscore 聞名的 Jeremy Ashkenas 所開發的。對於一些為小型 web 應用尋找一個結構簡單的框架，而不想引入如 Angular 或 Ember 這些大型框架的團隊，Backbone 特別受歡迎。
Backbone 提供一個完整的 MVC 框架以及路由。模型允許鍵-值綁定和數據變化的事件處理。模型（和集合）可以連接到RESTful API。視圖具有聲明式事件處理，路由在處理 URL 和狀態管理上做的很出色。它包含你創建一個單頁面應用程式所需要的一切，且沒有提供太多東西，沒有不必要的複雜度。
何時使用 Backbone？Backbone 是我創建簡單 web 應用程式的首選框架。
GitHub: https://github.com/jashkenas/backbone/
當前版本: 1.2.3
網站: backbonejs.org
Ember
Ember 是一個固執的 web 應用程式框架，關注程式設計師的工作效率。Ember 比較流行，它的核心團隊包括像曾是 Ruby on Rails 和 jQuery 核心團隊成員的 Yehuda Katz 的聰明人。Ember 自稱是「一個用於創建大規模 web 應用程式的框架」，且不浪費你的時間。它很固執，為你提供了很多選擇。
Ember 也是一個 MVC 框架。它包括一個模板和視圖引擎，當數據變化時自動更新，就像 Angular，Backbone 和 React 一樣。它包含 web組件 的思想，讓你使用自己標籤擴展 HTML（就像 Angular 一樣）。它也有一個知道如何與你的 RESTful API 一起工作的路由和模型引擎。
何時使用 Ember？當你只需要一個可以運行的框架時。當你因為預算緊張或工期很短而不需要靈活性時，請使用 Ember。
GitHub: https://github.com/emberjs/ember.js
當前版本: 2.1.0
網站: emberjs.com
jQuery
jQuery 是一個無需介紹的庫。它憑一己之力讓跨瀏覽器網站使用成為現實，同時把 web 帶到今天的位置。Web 標準已經被大多數瀏覽器製造商採納並真正地尊重，jQuery 是其中的原因之一。jQuery 基金會的使命是「通過開源軟件的開發和支持，以及開發社區的合作，改善開放的 web，讓每一個人都可以訪問它。」
jQuery 是世界上最常用的 JavaScript 庫，所有應用程式都應該使用它，除非你不在意程式設計師的工作效率。它使得 DOM 遍歷、事件處理、動畫、AJAX 在所有瀏覽器上變得更簡單、更容易。
何時使用 jQuery？一直使用，除非你想使用一個像 Zepto 的輕量級版本。
GitHub: https://github.com/jquery/jquery
當前版本: v1.11.3 or v2.1.4
網站: jquery.com
Underscore &lodash
有時候 JavaScript 內置的功能導致程式設計師的效率並不高。總是缺少一個工具函數或一個可以簡化代碼的函數。Underscore（和 lodash）是一個 JavaScript 庫，它提供了一整套工具函數，不需要對內置 JavaScript 對象打補丁。兩個庫均提供超過 100 個功能助手和其他專用功能，包括 map，filter，invoke，reduce，template, throttle, bind, extend, pick, clone 等更多的函數。
何時使用 Underscore？當你需要一個單獨的 JavaScript 文件，來立即提升程式設計師的工作效率時。
Underscore GitHub: https://github.com/jashkenas/underscore
Underscore 當前版本: 1.8.3
Underscore 網站: underscorejs.org
何時使用 lodash？當你需要模塊化和性能稍強版本的 Underscore，同時更容易地支持 AMD 和社區插件時。
LodashGitHub: https://github.com/lodash/lodash
Lodash 當前版本: v3.10.1
Lodash 網站: lodash.com
D3.js
數據可視化和圖表是一種常見的 web 應用程式需求。D3.js 是任何數據操作和可視化的事實標準。它是 GitHub上最受歡迎的項目之一，被數以百計的組織使用。大量的圖形，圖表和可視化庫在 D3 上構建。
D3 允許你操作任何來源的數據文檔，轉換成 DOM 或/和 SVG 或/和 CSS。D3 關注現代 web 標準，確保你不受任何專有格式的約束，比如 Flash 和 Silverlight。
何時使用 D3.js？在你需要任何形式的可視化的時候。
GitHub: https://github.com/mbostock/d3
當前版本: 3.5.6
網站: d3js.org
Babylon.js
想要構建完全符合現代 web 標準且跨瀏覽器的視頻遊戲嗎？看看 Babylon.js，它是基於 WebGL 和 JavaScript 的 3d 遊戲引擎。你可以創建令人難以置信的包含物理、音頻和粒子系統等等的高質量遊戲。
何時使用 Babylon.js？無論何時，只要你想做一個視頻遊戲或任何類型的複雜三維場景，都能用上。
GitHub: https://github.com/BabylonJS/Babylon.js
當前版本: 2.2
網站: babylonjs.com
Three.js
想要構建一個 3D 可視化場景，但不需要一個完整的遊戲引擎？three.js 提供了一個輕量級的 3d 庫，允許渲染 3d 為 HTML5 畫布、SVG 和 WebGL。它是相當簡單的庫，在 three.js 的展示里有數百個優美的例子。
何時使用Three.js？當你需要一個能輸出為 Canvas 的簡單的 3D 可視化場景時。
GitHub: https://github.com/mrdoob/three.js/
當前版本: r73
網站: threejs.org
Mocha& Chai
JavaScript 在很長一段時間內是非常煩人的。測試任何代碼通常都被認為是惱人的，但它卻是每個開發人員都應該做的事情。每個開發人員似乎總是蔑視和忽略它，而不測試他們的代碼。這個惱人的東西有一個解決辦法，那就是 Mocha 和 Chai。兩個庫的名字都來自美味的熱飲料，它們都能幫你測試代碼，但方式不同。
Mocha 是一個 JavaScript 測試框架，使得你在 node 模塊和瀏覽器 app 中測試異步代碼變得更容易。Mocha 測試可以串聯運行，可以為正確的測試用例添加異常跟蹤的能力。
Chai 是一個行為驅動開發/測試驅動開發的斷言庫，可以搭配 Mocha 使用。它可以把你需要測試的東西用可讀的風格簡單地表達出來。
何時使用 Mocha & Chai？總是！請測試你的代碼，讓世界變得更美好。
Mocha 當前版本: 2.3.3
Mocha 網址: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai 當前版本: v3.4.1
Chai 網址: chaijs.com
Karma
既然已經把 Mocha 和 Chai 包含在這個列表中了，如果不包含用來運行這些測試或設置持續集成測試的測試運行器，那將是不完整的。Karma 是一款旨在幫助你在不同的瀏覽器上自動運行測試的工具。它可以幫助你在所有瀏覽器上運行 Mocha 和 Chai 測試。
不是每個瀏覽器都運行在所有平台，但幸運的是可以使用一些免費工具來測試其他瀏覽器，看看 Browser Screenshots。如果你正在 OS X 上運行代碼，想測試 Edge 或 IE，可以 免費 使用這個工具。
何時使用 Karma？當你的應用程式有一個完善的測試套件，並希望確保測試在所有瀏覽器上通過時。
GitHub: https://github.com/karma-runner/karma
當前版本: v0.13
網址: karma-runner.github.io
PhantomJS
運行完整的瀏覽器來測試你的代碼比較耗內存和 CPU。PhantomJS 允許你運行一個輕量的 WebKit —— Safari 和Chrome（現在是 Blink）後台的渲染引擎。它允許你通過 JavaScript API 運行測試，捕捉截圖，監控網絡和自動瀏覽頁面。
何時使用 PhantomJS ?當你需要進行更多的測試，操作頁面和監視網絡請求時。
GitHub: https://github.com/ariya/phantomjs
當前版本: v2.0
網址: phantomjs.org
Grunt & Gulp
為生產環境構建網站，通常涉及到提高性能的任務，比如 JavaScript 和 CSS 的壓縮， CoffeeScript/TypeScript 的編譯，單元測試，語法檢查。也許你已經有一個為網站發佈到生產環境的工具鏈，如果沒有，你可以使用任務運行器，比如 Grunt 或Gulp。兩者都有大量關於網站的任何轉換的插件，為發佈到生產環境做好準備。
何時使用 Grunt？當你喜歡寫配置文件同時不介意你的任務運行器生成中間文件時。
Grunt GitHub: https://github.com/gruntjs/grunt
Grunt 當前版本: v0.4.5
Grunt 網址: gruntjs.com
何時使用 Gulp？當你喜歡在配置上寫代碼和利用 node.js 的流功能來加快任務執行時。
Gulp GitHub: https://github.com/gulpjs/gulp
Gulp 當前版本: v3.9.0
Gulp 網址: gulpjs.com
Babel
JavaScript 語言正在迅速發展。ECMAScript2015 於去年夏天發佈，它的許多新特性在最新的瀏覽器上實現了。如果你想看看 ECMAScript 2015 的兼容性，你可以看看來自 @kangax 的這個 表。你會注意到，最新版本的 Edge，Firefox 和 Chrome 已經幾乎完全兼容了。
我們並不是生活在一個完美的世界。作為開發人員，我們需要繼續支持舊的瀏覽器，它們沒有最新最好的 JavaScript 特性。我們要推進 web 和改善我們的代碼庫。Babel 是一個 JavaScript 編譯器，用於把最新的 JavaScript 標準編譯成可在 IE9 等老瀏覽器上運行的兼容ES5的 JavaScript。它有一些插件，使得 React 開發更容易，甚至可以使用一些不屬於該規範的特性（例如ES7）。
何時使用 Babel？當你想使用新的 JavaScript 語言特性，同時還要支持老版本瀏覽器時。
GitHub: https://github.com/babel/babel
當前版本: 6.1.2
網址: babeljs.io
更多 Web 開發實踐
本文來自微軟技術佈道師 Web 開發系列，裏面有實用的 JavaScript 學習，開源項目和互操作性的最佳實踐（包括與 微軟Edge 瀏覽器和新的 EdgeHTML渲染引擎）。
我們鼓勵你跨瀏覽器和設備進行測試，包括微軟的Edge——Windows 10的默認瀏覽器——在 dev.modern.IE 上有免費工具:
掃描你的網站中過時的庫，佈局問題和可訪問性
下載 Mac, Linux 和 Windows 下的免費虛擬機
跨瀏覽器檢查 Web 平台狀態，包括微軟 Edge 的路線圖
在你的設備上遠程測試微軟 Edge
來自我們工程師和佈道者的更深入學習：
GitHub 上的編碼實驗室： 跨瀏覽器測試和最佳實踐
2015 微軟 Edge Web 峰會 (來自我們的工程師團隊和JS社區)
很棒，我可以在 Mac 和 Linux 上測試 Edge 和 IE 了！ (來自Rey Bango)
推進 JavaScript 同時不破壞 Web (來自Christian Heilmann)
Edge 渲染引擎讓 Web 工作 (來自Jacob Rossi)
基於 WebGL 的 3D 渲染 (來自David Catuhe)
託管 web app 和 web 平台的革新 (來自Kevin Hill和Kiril Seksenov)
我們的社區開源項目：
vorlon.JS (跨設備遠程 JavaScript 測試)
manifoldJS (部署跨平台託管 web app)
babylonJS (讓 3D 圖形製作更簡單)
更多免費工具和後端web開發內容：
Linux, MacOS 和 Windows 下的 Visual Studio Code
使用 node.JS 編碼並在 Azure 上免費試用
【今日微信公號推薦↓】