相比於JavaScript開發人員的數量，目前JavaScript框架、類庫和工具的數量似乎更多一些。截至2017年5月，GitHub上的快速搜尋顯示，有超過110萬個JavaScript專案。npmjs.org有50萬個可用的軟體包，每月下載量近100億次。
本文將會討論目前最為流行的客戶端JavaScript框架、類庫和工具以及它們之間的基本差異。也許本文無法告訴你哪個是最好的，但是最適合自己專案的，就是最好的。
類庫
類庫是一個有組織的功能集合。典型的類庫包括字串處理、日期、HTML DOM元素、事件、Cookie、動畫、網路請求等功能。你可以自己實現一個函式，以便選擇該函式被呼叫時是否需要返回一個值。
類庫通常提供一種高階別的抽象方法，能夠幫助順利實現專案的細節部分。例如，Ajax通常依賴於XMLHttpRequest API，只需要幾行程式碼就實現功能，只是瀏覽器之間存在細微的差異。類庫提供了更簡單的ajax（）函式，因此開發者可以專注於更高階別的業務邏輯上。
類庫能夠使將開發時間縮短20％，開發者不必擔心細節實現。
但是也有缺點：
- 類庫中的錯誤難以定位和修復
- 開發團隊不能保證快速釋出補丁
- 補丁程式可能會更改API，導致大量程式碼必須更改
框架
框架是應用程式的骨架。它要求以特定的方式來進行軟體設計，在某些節點上實現自己的邏輯。框架通常提供了事件、儲存和資料繫結等功能。
框架通常提供了比類庫更高層次的抽象，幫助快速構建專案的前80％。
框架的缺點：
- 如果你的應用程式超出了框架的範圍，最後20％可能會很難
- 框架更新很困難
- 核心框架程式碼和概念很少更新
工具
工具會幫助開發工作，但卻不是專案的組成部分。工具包括構建系統、編譯器、轉譯器、程式碼分割器、影象壓縮器、部署機制等。
工具幫助實現一個更容易的開發過程。例如，對比於CSS，許多編碼者更喜歡Sass，因為它提供了程式碼分離、巢狀、渲染時變數、迴圈和函式。瀏覽器不瞭解Sass / SCSS語法，因此在測試和部署之前，必須使用適當的工具將程式碼編譯為CSS。
類庫、框架和工具的區別
類庫、框架和工具之間的區別很小。框架可以包括一個類庫，類庫可以實現類似框架的方法，專案中任何一種工具都是必不可少的。所以不需要明確的區分類庫、框架和工具。
JavaScript框架和類庫
以下是按照流行程度進行的排序：
jQuery
| jQuery | |
| 型別 | 類庫 |
| 網站 | jquery.com |
| 知識庫 | github.com/jquery/jquery |
| 當前版本 | 3.2.1 |
| 開發人員 | jQuery團隊 |
| 釋出日期 | 2006年8月 |
| 大小 | 最小30kb |
| 用途 | 通用 |
| 使用度 | 72.4％的網站 |
隨著WordPress、ASP.NET和一些其它框架的釋出，jQuery仍然是最常用的JavaScript類庫。它通過將CSS選擇器引入到DOM節點檢索加鏈來應用事件處理程式、動畫和Ajax呼叫，這徹底改變了客戶端的開發。
jQuery近年來備受青睞，對於需要少量JavaScript功能的專案來說，仍然是一個好選擇。
優點：
- 分佈規模小
- 學習曲線平緩，豐富的線上幫助
- 簡潔的語法
- 容易擴充
缺點：
- 增加了原生API的速度開銷
- 瀏覽器相容性不好，但已得到改善
- 用法扁平
- 一些行業反對使用
Lodash 和 Underscore
| Lodash | |
| 型別 | 類庫 |
| 網站 | lodash.com/ |
| 知識庫 | github.com/lodash/lodash/ |
| 當前版本 | 4.17.4 |
| 開發人員 | John-David Dalton |
| 釋出日期 | 2012年4月 |
| 大小 | 最小4kb – 24kb |
| 用途 | 通用 |
| 使用度 | 低 |
| Underscore | |
| 型別 | 類庫 |
| 網站 | underscorejs.org/ |
| 知識庫 | github.com/jashkenas/underscore |
| 當前版本 | 1.8.3 |
| 開發人員 | Jeremy Ashkenas |
| 釋出日期 | 2009年10月 |
| 大小 | 最小6kb |
| 用途 | 通用 |
| 使用度 | 低 |
Lodash和Underscore在本節一起談論。它們提供了數百個功能性的JavaScript實用程式來補充原生字串、數字、陣列和其它原始物件方法。雖然兩個類庫之間有一些重疊，但是不太可能在一個專案中同時使用這兩個類庫。
雖然兩個類庫在客戶端使用率很低，但是卻可以在伺服器端的Node.js應用程式中使用這兩個類庫。
優點：
- 小而簡單
- 良好的文件易於學習
- 與大多數類庫和框架相容
- 不擴充套件內建物件
- 可以在客戶端或伺服器上使用
缺點：
- 有些方法只在ES2015及更高版本的JavaScript中可用。
AngularJS 1.x
| AngularJS | |
| 型別 | 框架 |
| 網站 | angularjs.org |
| 知識庫 | github.com/angular/angular.js |
| 當前版本 | 1.6.4 |
| 開發人員 | |
| 釋出日期 | 2010年10月 |
| 大小 | 144KB |
| 用途 | 單頁應用程式 |
| 使用度 | 低 |
Angular是框架（或MVC應用程式框架）類列表中的第一個。目前最流行的Angular版本是1.x，它使用雙向資料繫結擴充套件HTML，同時解耦了DOM操作和應用程式邏輯。
儘管版本2（現在是版本4！）已經發布了，但是Angular 1.x仍在開發中。
優點：
- 一些大公司正在使用的流行框架
- 開發現代Web應用程式的解決方案
- 是標準MEAN棧（MongoDB，Express.JS，AngularJS，NodeJS）的一部分，有許多文章和教程可用
缺點：
- 學習曲線陡峭
- 大的程式碼庫
- 無法升級到Angular 2.x
Angular 2.x（現在是Angular 4.x）
| Angular | |
| 型別 | 框架 |
| 網站 | angular.io |
| 知識庫 | github.com/angular/angular.js |
| 當前版本 | 4.1 |
| 開發人員 | |
| 釋出日期 | 2016年9月 |
| 大小 | 最小450kb |
| 用途 | 單頁面應用 |
| 使用度 | 低 |
Angular 2.0於2016年9月釋出。這是一個完整的重寫，它引入了使用TypeScript建立的基於模組化元件的模型。Angular 4.0於2017年3月釋出。
Angular 2.x與v1版本截然不同，也不與其它版本相容 – 也許Google應該給專案起一個不同的名字！
優點：
- 開發現代Web應用程式的解決方案
- 是標準MEAN棧的一部分，儘管只有少量的教程可用
- 對於熟悉靜態型別語言（如C＃和Java）的開發人員，TypeScript提供了一些優勢。
缺點：
- 學習曲線陡峭
- 大的程式碼庫
- 不能從Angular 1.x升級
- 與1.x相比，Angular 2.x較難理解
React
| React | |
| 型別 | 框架 |
| 網站 | facebook.github.io/react/ |
| 知識庫 | github.com/facebook/react |
| 當前版本 | 15.5.4 |
| 開發人員 | Facebook和貢獻者 |
| 釋出日期 | 2013年3月 |
| 大小 | 21kb分鐘 |
| 用途 | 單頁應用程式 |
| 使用度 | 低 |
React是一個用於構建使用者介面的JavaScript類庫，也是去年最受關注的類庫。它專注於Model-View-Controller（MVC）開發的“View”部分，使用它可以輕鬆建立保留狀態的UI元件。它是實現虛擬DOM的首選類庫之一， 它的記憶體結構能夠有效地計算差異，頁面更新也更加有效。
統計顯示React的使用度似乎很低，因為它是在應用程式中使用而不是在網站。
優點：
- 小巧，高效，快捷靈活
- 簡單的元件模型
- 良好的文件和線上資源
- 可實現伺服器端渲染
- 目前受歡迎，經歷了快速增長
缺點：
- 需要學習新的概念和語法
- 構建工具很重要
- 需要其它類庫或框架提供model和Controller部分
- 與修改DOM的程式碼和其它類庫不相容
瞭解更多關於React the ES6 Way
Vue.js
| Vue.js | |
| 型別 | 框架 |
| 網站 | vuejs.org |
| 知識庫 | github.com/vuejs/vue |
| 當前版本 | 2.0 |
| 開發人員 | Evan You |
| 釋出日期 | 2014年2月 |
| 大小 | 最小19kb |
| 用途 | 單頁面應用 |
| 使用度 | 低 |
Vue.js是一個用於構建使用者介面的輕量級漸進框架。它提供了一個類似React的虛擬DOM驅動檢視層，可以與其它類庫整合，用於構建強大的單頁面應用。該框架是由之前在AngularJS工作過的Evan You建立的，他提取了AngularJS中自己喜歡的部分。
Vue.js使用HTML模板語法將DOM繫結到例項資料。Model是在資料改變時更新view的純JavaScript物件。
優點：
- 可以快速使用，並且日益普及
- 很容易提高高水平開發人員的滿意度
- 依賴性小，效能好
缺點：
- 一個較新的專案 – 風險可能會更大
- 部分依賴開發人員進行更新
- 相比於其它框架，資源較少
Backbone.js
| Backbone.js | |
| 型別 | 框架 |
| 網站 | backbonejs.org |
| 知識庫 | github.com/jashkenas/backbone/ |
| 當前版本 | 1.3.3 |
| 開發人員 | Jeremy Ashkenas |
| 釋出日期 | 2010年10月 |
| 大小 | 最小8kb |
| 用途 | 單頁面應用 |
| 使用度 | 低 |
Backbone.js是提供伺服器端框架中常見的MVC結構的最早客戶端選項之一。它唯一的依賴是Underscore.js。
Backbone.js聲稱是一個類庫，因為它可以與其它專案整合，但是我覺得大多數開發人員都認為它是一個框架。
優點：
- 體積小，重量輕，複雜度低
- 不新增HTML邏輯
- 檔案豐富
- 採用了許多應用，包括Trello、WordPress.com、LinkedIn和Groupon
缺點：
- 與AngularJS等其它框架相比，抽象度較低
- 需要額外的元件來實現資料繫結等功能
- 最新的框架已經不採用MVC架構了
Ember.js
| Ember.js | |
| 型別 | 框架 |
| 網站 | emberjs.com |
| 知識庫 | github.com/emberjs/ember.js |
| 當前版本 | 2.15.0 |
| 開發人員 | Ember team |
| 釋出日期 | 2011年12月 |
| 大小 | 最小95kb |
| 用途 | 單頁面應用 |
| 使用度 | 低 |
Ember.js是基於Model-View-ViewModel（MVVM）模式的框架之一。它在單個包中實現模板化、資料繫結和類庫。
優點：
- 為客戶端應用程式提供了單一解決方案
- 開發人員可以立刻提高開發效率 – 它使用jQuery
- 良好的向後相容性和升級選項
- 採用了現代Web開發標準
缺點：
- 大型分配式
- 與其它正在向較小元件結構發展的框架相比，它十分的龐大
- 學習曲線陡峭
Knockout.js
| Knockout.js | |
| 型別 | 框架 |
| 網站 | knockoutjs.com |
| 知識庫 | github.com/knockout/knockout |
| 當前版本 | 3.4.2 |
| 開發人員 | Steve Sanderson |
| 釋出日期 | 2010年7月 |
| 大小 | 最小59kb |
| 用途 | 單頁面應用 |
| 使用度 | 低 |
Knockout.js是最早的MVVM框架之一，它確保了UI與底層資料保持同步，具有模板和依賴關係跟蹤。
優點：
- 小而輕便，無依賴
- 優秀的瀏覽器支援，可以支援到IE6
- 良好的文件資源
缺點：
- 較大的專案可能變得很複雜
- 發展已經放緩
- 使用情況似乎在減弱
更多的框架和類庫
以下專案雖然不是特別流行，但值得考慮：
- Polymer – 可以跨瀏覽器支援HTML5網頁元件的類庫
- Meteor – 一個用於Web應用程式的全棧平臺
- Aurelia – 一種相對較新的，輕量級的跨平臺框架
- Svelte – 一個將框架原始碼轉換為乾淨JavaScript的新專案
- Conditioner.js – 一個基於狀態自動載入和解除安裝模組的類庫
工具：執行通用任務
構建工具自動執行各種Web開發任務，例如預處理、編譯、優化影象、縮小程式碼、程式碼分析和執行測試等。任務可以在一個可執行包中統一管理。
目前最受歡迎的工具如下：
Gulp.js
| Gulp.js | |
| 網站 | gulpjs.com |
| 知識庫 | github.com/gulpjs/gulp |
| 當前版本 | 3.9.1 |
| 每月下載 | 300萬 |
雖然Gulp不是第一個任務執行工具，它卻很快成為了最受歡迎的。Gulp使用易於閱讀的JavaScript程式碼，將原始檔載入到流中，並在將資料輸出到構建資料夾之前，通過各種外掛管理資料。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。
NPM
| NPM | |
| 網站 | npmjs.com |
| 知識庫 | github.com/npm/npm |
| 當前版本 | 4.5.0 |
| 每月下載 | 300萬 |
npm是Node.js包管理器，但其指令碼工具可用於執行通用任務。對於具有少量依賴關係的簡單專案來說，這是一個很好的選擇。然而，更復雜的任務可能會變得不太適用。
Grunt
| Grunt | |
| 網站 | gruntjs.com |
| 知識庫 | github.com/gruntjs/grunt |
| 當前版本 | 1.0.1 |
| 每月下載 | 200萬 |
Grunt是第一批被大規模採用的JavaScript任務執行工具之一，但其速度和複雜的JSON配置卻導致了Gulp的興起。現在這些問題已經得到了解決，Grunt仍然是一個受歡迎的選擇。
工具：模組繫結
多個JavaScript檔案的管理已經成為了一件繁瑣的事情。預設情況下，瀏覽器檔案不會被編譯，因此其依賴關係必須以適當的順序進行載入或連線。雖然有像ES6模組和CommonJS這樣的選項，但是瀏覽器支援是有限的，因此模組繫結變得十分重要。
WebPack
| WebPack | |
| 網站 | webpack.js.org |
| 知識庫 | github.com/webpack/webpack |
| 當前版本 | 2.5.1 |
| 每月下載 | 600萬 |
Webpack支援所有流行的模組選項，並已成為React開發的代名詞。雖然Webpack聲稱是一個模組捆綁程式，但是已經可以用作通用任務執行程式了。
Browserify
| Browserify | |
| 網站 | browserify.org |
| 知識庫 | github.com/substack/node-browserify |
| 當前版本 | 14.3.0 |
| 每月下載 | 260萬 |
Browserify支援Node.js正在使用的CommonJS模組，它將所有模組編譯成單個瀏覽器相容的檔案。
RequireJS
| RequireJS | |
| 網站 | requirejs.org |
| 知識庫 | github.com/jrburke/r.js |
| 當前版本 | 2.3.3 |
| 每月下載 | 百萬 |
RequireJS是一種瀏覽器中的模組載入器，它也可以在Node.js中使用。
工具：程式碼分析
程式碼分析工具用於分析程式碼中潛在錯誤或偏離語法的標準。一個未閉合括號或未宣告的變數一定會被檢測出。
ESLint
| ESLint | |
| 網站 | eslint.org |
| 知識庫 | github.com/eslint/eslint |
| 當前版本 | 3.19.0 |
| 每月下載 | 600萬 |
ESLint是一種可插拔的程式碼分析工具。每個規則都是一個外掛，因此可以根據個人喜好進行配置。
JSHint
| JSHint | |
| 網站 | jshint.com |
| 知識庫 | github.com/jshint/jshint |
| 當前版本 | 2.9.4 |
| 每月下載 | 200萬 |
JSHint是一個靈活的JavaScript程式碼分析工具，它很好的平衡了真正的錯誤和老舊的語法。
JSLint
| JSLint | |
| 網站 | jslint.com |
| 知識庫 | github.com/reid/node-jslint |
| 當前版本 | 0.10.3 |
| 每月下載 | 50000 |
JSLint是最早的程式碼分析工具之一，它實現了一套嚴格的預設規則。
工具：單元測試
測試驅動開發的任務要求需要編寫程式碼來測試自己的程式碼。目前有許多選擇，包括Ava, Tape 和Jest ，但目前最流行的三個工具是：
Mocha
| Mocha | |
| 網站 | mochajs.org |
| 知識庫 | github.com/mochajs/mocha |
| 當前版本 | 3.3.0 |
| 每月下載 | 500萬 |
Mocha是一個JavaScript測試框架，可以在Node.js或瀏覽器中執行測試。它支援非同步測試，並且經常與Chai配合使用，這樣可以使測試程式碼以可讀取的方式表達。
Jasmine
| Jasmine | |
| 網站 | jasmine.github.io |
| 知識庫 | github.com/jasmine/jasmine-npm |
| 當前版本 | 2.6.0 |
| 每月下載 | 200萬 |
Jasmine是一個行為驅動的測試工具，可以在瀏覽器中自動測試UI和互動。
QUnit
| QUnit | |
| 網站 | https://qunitjs.com/ |
| 知識庫 | github.com/kof/node-qunit |
| 當前版本 | 1.0.0 |
| 每月下載 | 25000 |
QUnit是一個單元測試框架，可以在輸入特定引數時，檢查函式結果。它還上報測試結果，確保沒有錯過特定的程式碼分支。
總結與建議
目前最為流程的框架是React，同時其它的框架也在向著流行的趨勢發展。
如果需要一個安全的、通用的Web應用程式，可以考慮使用Vue.js。
整體框架已經不再受歡迎了，如果你需要對一個較大型專案進行嚴格的結構管理，AngularJS是一個不錯的選擇。目前大多數人堅持使用Angular 1.0版本，但是長遠來講，如果你願意學習TypeScript，Angular 4.x版本是個更好的選擇。
jQuery雖然現在並不十分流行，在技術新聞中也很少會被提到，但不可否認它是積極開發的，同時也是網站和應用程式的有力工具。jQuery具有平緩的學習曲線，全球許多開發人員能夠很好地理解。
如果你想要冒險，可以試試Svelte這是一個有趣的客戶端/伺服器框架，它可以在構建時預先呈現JavaScript，並且可以改變我們開發的方式。
工具的選擇因專案而異。雖然目前使用Gulp的開發者佔大多數，但WebPack卻越來越受歡迎。同時你也不能錯過ESLint和Mocha等測試工具。
過去的十年，JavaScript經歷了革命性的發展。過去只有少量基本的類庫可以選擇，但是現在可供選擇的類庫已經鋪天蓋地。也許無法確定哪個類庫、框架和工具是最好的，但是最適合自己專案的，就是最好的。
如果本文錯過了你最喜歡的JavaScript類庫，框架或工具？歡迎在文末評論。