相比於JavaScript開發人員的數量，目前JavaScript框架、類庫和工具的數量似乎更多一些。截至2017年5月，上的顯示，有超過110萬個JavaScript專案。有近100億次。

本文將會討論目前最為流行的客戶端JavaScript框架、類庫和工具以及它們之間的基本差異。也許本文無法告訴你哪個是最好的，但是最適合自己專案的，就是最好的。

類庫

類庫是一個有組織的功能集合。典型的類庫包括字串處理、日期、HTML DOM元素、事件、Cookie、動畫、網路請求等功能。你可以自己實現一個函式，以便選擇該函式被呼叫時是否需要返回一個值。

類庫通常提供一種高階別的抽象方法，能夠幫助順利實現專案的細節部分。例如，Ajax通常依賴於XMLHttpRequest API，只需要幾行程式碼就實現功能，只是瀏覽器之間存在細微的差異。類庫提供了更簡單的ajax（）函式，因此開發者可以專注於更高階別的業務邏輯上。

類庫能夠使將開發時間縮短20％，開發者不必擔心細節實現。

但是也有缺點：

• 類庫中的錯誤難以定位和修復
• 開發團隊不能保證快速釋出補丁
• 補丁程式可能會更改API，導致大量程式碼必須更改

框架

框架是應用程式的骨架。它要求以特定的方式來進行軟體設計，在某些節點上實現自己的邏輯。框架通常提供了事件、儲存和資料繫結等功能。

框架通常提供了比類庫更高層次的抽象，幫助快速構建專案的前80％。

框架的缺點：

• 如果你的應用程式超出了框架的範圍，最後20％可能會很難
• 框架更新很困難
• 核心框架程式碼和概念很少更新

工具

工具會幫助開發工作，但卻不是專案的組成部分。工具包括構建系統、編譯器、轉譯器、程式碼分割器、影像壓縮器、部署機制等。

工具幫助實現一個更容易的開發過程。例如，對比於CSS，許多編碼者更喜歡，因為它提供了程式碼分離、巢狀、渲染時變數、迴圈和函式。瀏覽器不瞭解Sass / SCSS語法，因此在測試和部署之前，必須使用適當的工具將程式碼編譯為CSS。

類庫、框架和工具的區別

類庫、框架和工具之間的區別很小。框架可以包括一個類庫，類庫可以實現類似框架的方法，專案中任何一種工具都是必不可少的。所以不需要明確的區分類庫、框架和工具。

JavaScript框架和類庫

以下是按照流行程度進行的排序：

jQuery
型別	類庫
網站
知識庫
當前版本	3.2.1
開發人員	jQuery團隊
釋出日期	2006年8月
大小	最小30kb
用途	通用
使用度

隨著WordPress、ASP.NET和一些其它框架的釋出，jQuery仍然是最常用的JavaScript類庫。它透過將CSS選擇器引入到DOM節點檢索加鏈來應用事件處理程式、動畫和Ajax呼叫，這徹底改變了客戶端的開發。

jQuery近年來備受青睞，對於需要少量JavaScript功能的專案來說，仍然是一個好選擇。

優點：

• 分佈規模小
• 學習曲線平緩，豐富的線上幫助
• 簡潔的語法
• 容易擴充

缺點：

• 增加了原生API的速度開銷
• 瀏覽器相容性不好，但已得到改善
• 用法扁平
• 一些行業反對使用

 和 

Lodash
型別	類庫
網站
知識庫
當前版本	4.17.4
開發人員	John-David Dalton
釋出日期	2012年4月
大小	最小4kb - 24kb
用途	通用
使用度	低
Underscore
型別	類庫
網站
知識庫
當前版本	1.8.3
開發人員	Jeremy Ashkenas
釋出日期	2009年10月
大小	最小6kb
用途	通用
使用度	低

Lodash和Underscore在本節一起談論。它們提供了數百個功能性的JavaScript實用程式來補充原生字串、數字、陣列和其它原始物件方法。雖然兩個類庫之間有一些重疊，但是不太可能在一個專案中同時使用這兩個類庫。

雖然兩個類庫在客戶端使用率很低，但是卻可以在伺服器端的Node.js應用程式中使用這兩個類庫。

優點：

• 小而簡單
• 良好的文件易於學習
• 與大多數類庫和框架相容
• 不擴充套件內建物件
• 可以在客戶端或伺服器上使用

缺點：

• 有些方法只在ES2015及更高版本的JavaScript中可用。

AngularJS
型別	框架
網站
知識庫
當前版本	1.6.4
開發人員	Google
釋出日期	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 4.x）

Angular
型別	框架
網站
知識庫
當前版本	4.1
開發人員	Google
釋出日期	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
型別	框架
網站
知識庫
當前版本	15.5.4
開發人員	Facebook和貢獻者
釋出日期	2013年3月
大小	21kb分鐘
用途	單頁應用程式
使用度	低

React是一個用於構建使用者介面的JavaScript類庫，也是去年最受關注的類庫。它專注於Model-View-Controller（MVC）開發的“View”部分，使用它可以輕鬆建立保留狀態的UI元件。它是實現虛擬DOM的首選類庫之一， 它的記憶體結構能夠有效地計算差異，頁面更新也更加有效。

統計顯示React的使用度似乎很低，因為它是在應用程式中使用而不是在網站。

優點：

• 小巧，高效，快捷靈活
• 簡單的元件模型
• 良好的文件和線上資源
• 可實現伺服器端渲染
• 目前受歡迎，經歷了快速增長

缺點：

• 需要學習新的概念和語法
• 構建工具很重要
• 需要其它類庫或框架提供model和Controller部分
• 與修改DOM的程式碼和其它類庫不相容

瞭解更多關於

Vue.js
型別	框架
網站
知識庫
當前版本	2.0
開發人員	Evan You
釋出日期	2014年2月
大小	最小19kb
用途	單頁面應用
使用度	低

Vue.js是一個用於構建使用者介面的輕量級漸進框架。它提供了一個類似React的虛擬DOM驅動檢視層，可以與其它類庫整合，用於構建強大的單頁面應用。該框架是由之前在AngularJS工作過的Evan You建立的，他提取了AngularJS中自己喜歡的部分。

Vue.js使用HTML模板語法將DOM繫結到例項資料。Model是在資料改變時更新view的純JavaScript物件。

優點：

• 可以快速使用，並且日益普及
• 很容易提高高水平開發人員的滿意度
• 依賴性小，效能好

缺點：

• 一個較新的專案 - 風險可能會更大
• 部分依賴開發人員進行更新
• 相比於其它框架，資源較少

型別	框架
網站
知識庫
當前版本	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
型別	框架
網站
知識庫
當前版本	2.15.0
開發人員	Ember team
釋出日期	2011年12月
大小	最小95kb
用途	單頁面應用
使用度	低

Ember.js是基於Model-View-ViewModel（MVVM）模式的框架之一。它在單個包中實現模板化、資料繫結和類庫。

優點：

• 為客戶端應用程式提供了單一解決方案
• 開發人員可以立刻提高開發效率 - 它使用jQuery
• 良好的向後相容性和升級選項
• 採用了現代Web開發標準

缺點：

• 大型分配式
• 與其它正在向較小元件結構發展的框架相比，它十分的龐大
• 學習曲線陡峭

型別	框架
網站
知識庫
當前版本	3.4.2
開發人員	Steve Sanderson
釋出日期	2010年7月
大小	最小59kb
用途	單頁面應用
使用度

Knockout.js是最早的MVVM框架之一，它確保了UI與底層資料保持同步，具有模板和依賴關係跟蹤。

優點：

• 小而輕便，無依賴
• 優秀的瀏覽器支援，可以支援到IE6
• 良好的文件資源

缺點：

• 較大的專案可能變得很複雜
• 發展已經放緩
• 使用情況似乎在減弱

更多的框架和類庫

以下專案雖然不是特別流行，但值得考慮：

•  - 可以跨瀏覽器支援HTML5網頁元件的類庫
•  - 一個用於Web應用程式的全棧平臺
•   - 一種相對較新的，輕量級的跨平臺框架
•  - 一個將框架原始碼轉換為乾淨JavaScript的新專案
•   - 一個基於狀態自動載入和解除安裝模組的類庫

工具：執行通用任務

構建工具自動執行各種Web開發任務，例如預處理、編譯、最佳化影像、縮小程式碼、程式碼分析和執行測試等。任務可以在一個可執行包中統一管理。

目前最受歡迎的工具如下：

Gulp.js
網站
知識庫
當前版本	3.9.1
每月下載	300萬

雖然Gulp不是第一個任務執行工具，它卻很快成為了最受歡迎的。Gulp使用易於閱讀的JavaScript程式碼，將原始檔載入到流中，並在將資料輸出到構建資料夾之前，透過各種外掛管理資料。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。

NPM
網站
知識庫
當前版本	4.5.0
每月下載	300萬

npm是Node.js包管理器，但其指令碼工具可用於。對於具有少量依賴關係的簡單專案來說，這是一個很好的選擇。然而，更復雜的任務可能會變得不太適用。

Grunt
網站
知識庫
當前版本	1.0.1
每月下載	200萬

Grunt是第一批被大規模採用的JavaScript任務執行工具之一，但其速度和複雜的JSON配置卻導致了Gulp的興起。現在這些問題已經得到了解決，Grunt仍然是一個受歡迎的選擇。

工具：模組繫結

多個JavaScript檔案的管理已經成為了一件繁瑣的事情。預設情況下，瀏覽器檔案不會被編譯，因此其依賴關係必須以適當的順序進行載入或連線。雖然有像和CommonJS這樣的選項，但是瀏覽器支援是有限的，因此模組繫結變得十分重要。

WebPack
網站
知識庫
當前版本	2.5.1
每月下載	600萬

Webpack支援所有流行的模組選項，並已成為React開發的代名詞。雖然Webpack聲稱是一個模組捆綁程式，但是已經可以用作通用任務執行程式了。

Browserify
網站
知識庫
當前版本	14.3.0
每月下載	260萬

Browserify支援Node.js正在使用的CommonJS模組，它將所有模組編譯成單個瀏覽器相容的檔案。

RequireJS
網站
知識庫
當前版本	2.3.3
每月下載	百萬

RequireJS是一種瀏覽器中的模組載入器，它也可以在Node.js中使用。

工具：程式碼分析

程式碼分析工具用於分析程式碼中潛在錯誤或偏離語法的標準。一個未閉合括號或未宣告的變數一定會被檢測出。

ESLint
網站
知識庫
當前版本	3.19.0
每月下載	600萬

ESLint是一種可插拔的程式碼分析工具。每個規則都是一個外掛，因此可以根據個人喜好進行配置。

JSHint
網站
知識庫
當前版本	2.9.4
每月下載	200萬

JSHint是一個靈活的JavaScript程式碼分析工具，它很好的平衡了真正的錯誤和老舊的語法。

JSLint
網站
知識庫
當前版本	0.10.3
每月下載	50000

JSLint是最早的程式碼分析工具之一，它實現了一套嚴格的預設規則。

工具：單元測試

測試驅動開發的任務要求需要編寫程式碼來測試自己的程式碼。目前有許多選擇，包括,  和 ，但目前最流行的三個工具是：

Mocha
網站
知識庫
當前版本	3.3.0
每月下載	500萬

Mocha是一個JavaScript測試框架，可以在Node.js或瀏覽器中執行測試。它支援非同步測試，並且經常與配合使用，這樣可以使測試程式碼以可讀取的方式表達。

Jasmine
網站
知識庫
當前版本	2.6.0
每月下載	200萬

Jasmine是一個行為驅動的測試工具，可以在瀏覽器中自動測試UI和互動。

QUnit
網站
知識庫
當前版本	1.0.0
每月下載	25000

QUnit是一個單元測試框架，可以在輸入特定引數時，檢查函式結果。它還上報測試結果，確保沒有錯過特定的程式碼分支。

總結與建議

目前最為流程的框架是，同時其它的框架也在向著流行的趨勢發展。

如果需要一個安全的、通用的Web應用程式，可以考慮使用。

整體框架已經不再受歡迎了，如果你需要對一個較大型專案進行嚴格的結構管理，是一個不錯的選擇。目前大多數人堅持使用Angular 1.0版本，但是長遠來講，如果你願意學習TypeScript，Angular 4.x版本是個更好的選擇。

雖然現在並不十分流行，在技術新聞中也很少會被提到，但不可否認它是積極開發的，同時也是網站和應用程式的有力工具。jQuery具有平緩的學習曲線，全球許多開發人員能夠很好地理解。

如果你想要冒險，可以試試這是一個有趣的客戶端/伺服器框架，它可以在構建時預先呈現JavaScript，並且可以改變我們開發的方式。

工具的選擇因專案而異。雖然目前使用的開發者佔大多數，但卻越來越受歡迎。同時你也不能錯過和等測試工具。

過去的十年，JavaScript經歷了革命性的發展。過去只有少量基本的類庫可以選擇，但是現在可供選擇的類庫已經鋪天蓋地。也許無法確定哪個類庫、框架和工具是最好的，但是最適合自己專案的，就是最好的。

如果本文錯過了你最喜歡的JavaScript類庫，框架或工具？歡迎在文末評論。

JavaScript 開發工具介紹：

純前端表格控制元件是基於HTML5的JavaScript電子表格和網格功能控制元件，提供了完備的公式引擎、排序、過濾、輸入控制元件、資料視覺化、Excel匯入/匯出等功能，適用於.NET、Java和移動端等各平臺線上編輯類Excel功能的表格程式開發。

原文連結：

轉載請註明出自：葡萄城控制元件