2019年最佳JavaScript框架，庫和工具-js教程-PHP中文網

由於其高效的虛擬DOM和基於組件的架構，React仍然是構建用戶界面（特別是單頁應用程序）的首選。
Vue.js因其簡單性和靈活性而受到好評，使其成為尋求易於與其他庫集成的漸進式框架的開發人員的絕佳選擇。
Angular提供了一個全面的框架解決方案，尤其是在其最新版本（2 ）中，它得到了Google的大力支持，並專注於TypeScript，這吸引了熟悉靜態類型語言的開發人員。
jQuery儘管炒作有所下降，但在許多項目中仍然具有相關性和廣泛使用，因為它易於使用並且在各種Web平台上具有廣泛的兼容性。
Webpack和ESLint被強調為現代JavaScript開發中必不可少的工具，分別用於模塊捆綁和代碼質量保證。
Sencha Ext JS被認為是一個強大的企業級框架，它提供了廣泛的UI組件和工具，並具有強大的商業支持和培訓選項。

目錄
棘手的術語
庫
框架
工具
不要給我貼標籤！
JavaScript框架和庫
jQuery
React
AngularJS 1.x
Angular 2 （現在是7.x）
Vue.js
Sencha Ext JS
Lodash和Underscore
Backbone.js
Ember.js
Knockout.js
值得關注的項目
工具：通用任務運行器
Webpack
Gulp.js
npm
Grunt
工具：模塊捆綁器
Browserify
RequireJS
工具：代碼風格檢查
ESLint
JSHint
JSLint
工具：測試套件
Jest
Mocha
Jasmine
工具：其他工具
總結和建議
評論

請在閱讀本文之前接受以下條款和條件！ ……

JavaScript環境每天都在變化。這篇文章發布的那一刻就會過時！
我所說的“最佳”是指“最流行/使用/炒作的通用項目”。所有項目都有免費/開源選項，但列表中可能不包含您最喜歡的項目。
已停止的項目（例如YUI）未包含在內，即使它們在網絡上的使用率仍然很高。
只參考客戶端項目。有些可以在服務器端工作，但列表不包括純服務器端框架，例如Express.js或Hapi。
有關每個項目的資料有意簡短，以便提供進一步研究的概述。
每個項目都提供一個使用流行度指標，但統計數據眾所周知難以整理，而且可能具有誤導性。
我有偏見。你也有偏見。其他人也有偏見！我沒有嘗試過這裡的每個工具，並將聲明我最喜歡的工具，但您應該根據您的需求做出自己的評估。
我和SitePoint都不對您做出的任何災難性決定負責！

棘手的術語

術語“框架”、“庫”和“工具”在不同的時間對不同的人可能有不同的含義，具體取決於上下文。此處使用的通用定義：

庫

庫是有組織的有用功能集合。典型的庫可能包括處理字符串、日期、HTML DOM元素、事件、cookie、動畫、網絡請求等的函數。每個函數都會向調用應用程序返回值，您可以根據自己的選擇實現這些值。可以把它想像成一系列汽車組件：您可以隨意使用任何組件來幫助構建一輛能正常行駛的汽車，但您必須自己構建發動機。

庫通常提供更高層次的抽象，從而簡化了實現細節和不一致之處。例如，可以使用XMLHttpRequest API實現Ajax，但這需要幾行代碼，並且瀏覽器之間存在細微差別。庫可以提供更簡單的ajax()函數，因此您可以專注於更高級別的業務邏輯。

庫可以將開發時間縮短20%，因為您不必擔心更精細的細節。缺點：

庫中的錯誤可能難以查找和修復
開發團隊無法保證會快速發布補丁
補丁可能會更改API並導致代碼發生重大更改。

框架

框架是應用程序的骨架。它要求您以特定方式處理軟件設計，並在某些點插入您自己的邏輯。通常會為您提供事件、存儲和數據綁定等功能。使用汽車的類比，框架提供了一個工作的底盤、車身和發動機。您可以添加、刪除或調整某些組件，前提是車輛仍然可以運行。

框架通常比庫提供更高層次的抽象，並且可以幫助您快速構建項目的最初80%。缺點：

如果您的應用程序超出了框架的範圍，那麼最後的20%可能會很困難——如果不是不可能的話
框架更新或遷移可能很困難
核心框架代碼和概念很少能很好地適應時代。開發人員總是會發現一種更好的方法來做同樣的事情。

工具

工具可以輔助開發，但不是項目不可或缺的一部分。工具包括構建系統、編譯器、轉譯器、代碼壓縮器、圖像壓縮器、部署機制等等。

工具應該提供更簡單的開發過程。例如，許多程序員更喜歡Sass而不是CSS，因為它提供了代碼分離、嵌套、渲染時變量、循環和函數。瀏覽器不理解Sass/SCSS語法，因此必須在測試和部署之前使用合適的工具將代碼編譯為CSS。

不要給我貼標籤！

庫、框架和工具之間的區別很少明確。框架可能包含庫。庫可以實現類似框架的方法。工具對於兩者都可能至關重要。我已經嘗試對每個項目進行標記，但范圍可能會有所不同。

如果這聽起來太複雜，您可以考慮編寫原生JavaScript。這很好，但是您最終會編寫自己的庫和/或框架代碼，這些代碼必須維護。 JavaScript本身是對瀏覽器和操作系統抽象之上的抽象！

JavaScript框架和庫

按使用/流行度/炒作的近似順序排列的項目……

jQuery

jQuery 描述 type 庫website jquery.com repository github. com/jquery/jquery GitHub stars 50,000 當前版本3.3.1 開發者jQuery團隊發布日期2006年8月典型大小30kb min 典型用途通用用途使用率所有網站的73.5% jQuery仍然是有史以來使用最廣泛的JavaScript庫，並與WordPress、ASP.NET和其他一些框架一起分發。它通過將CSS選擇器引入DOM節點檢索以及鏈接來應用事件處理程序、動畫和Ajax調用，從而徹底改變了客戶端開發。

近年來，jQuery已逐漸不受開發人員青睞，但使用率仍然很高。對於需要少量JavaScript功能的項目，它仍然是一個可行的選擇。

優點：

分發大小小
學習曲線平緩，大量在線幫助
簡潔的語法
易於擴展

缺點：

為原生API增加了速度開銷
現在瀏覽器兼容性有所提高，因此不太重要了
使用率趨於平穩
行業對不必要使用的某些抵制。

React

React 描述 type 庫website facebook.github.io/ react/ repository github.com/facebook/react GitHub stars 115,000 當前版本16.6.3 開發者Facebook和貢獻者發布日期2013年3月典型大小21kb min 典型用途單頁應用程序使用率低可能是過去幾年中討論最多的庫，React聲稱是一個用於構建用戶界面的JavaScript庫。它專注於模型-視圖-控制器（MVC）開發中的“視圖”部分，並且可以輕鬆創建保留狀態的UI組件。它是首批實現虛擬DOM的庫之一；內存中的結構計算差異並有效地更新頁面。

React的使用率在統計數據中似乎很低，這可能是因為它用於應用程序而不是網站。近70%的開發人員聲稱他們有一些使用該庫的經驗。

優點：

小巧、高效、快速且靈活
簡單的組件模型
良好的文檔和在線資源
服務器端渲染是可能的
仍然很流行並且發展迅速
許多工作都為React開發人員做廣告

缺點：

需要學習新的概念和語法
構建工具是必不可少的
可能需要其他庫或框架來提供模型和控制器方面
可能與修改DOM的代碼和其他庫不兼容

AngularJS 1.x

AngularJS 描述 type 框架website angularjs.org repository github. com/angular/angular.js GitHub stars 60,000 當前版本1.7.5 開發者Google 發布日期2010年10月典型大小144kb 典型用途單頁應用程序使用率低Angular是此列表中出現的第一個框架——或MVC應用程序框架。最流行的版本仍然是1.x版本，它通過雙向數據綁定擴展了HTML，同時將DOM操作與應用程序邏輯分離。

儘管發布了2.0版（現在是4.0版！），但Angular 1.x仍在開發中。困惑？見下文……

優點：

幾家大型公司採用的一種流行框架
創建現代Web應用程序的單一解決方案
是“標準”MEAN堆棧（MongoDB、Express.JS、AngularJS、NodeJS）的一部分，因此有許多文章和教程可用

缺點：

比其他替代方案的學習曲線更陡峭
代碼庫龐大
無法升級到Angular 2.x
儘管是Google項目，但Google似乎沒有使用它？

Angular 2 （現在是7.x）

Angular 描述 type 框架website angular.io repository github. com/angular/angular GitHub stars 43,000 當前版本7.1 開發者Google 發布日期2016年9月典型大小450kb min 典型用途單頁應用程序使用率低Angular 2.0於2016年9月發布。這是一個完整的重寫，它引入了使用TypeScript（編譯為JavaScript）創建的模塊化組件模型。為了增加混淆，4.0版於2017年3月發布（跳過了v3以避免語義版本問題）。

Angular 2 與v1完全不同。兩者都不兼容——也許Google應該為該項目起一個不同的名字？！

優點：

創建現代Web應用程序的單一解決方案
仍然是MEAN堆棧的一部分，儘管可用的Angular 2 教程較少
對於熟悉靜態類型語言（如C#和Java）的人來說，TypeScript提供了一些優勢。

缺點：

比其他替代方案的學習曲線更陡峭
代碼庫龐大
無法從Angular 1.x升級
與1.x相比，Angular 2.x的採用率相對較低
儘管是Google項目，但Google似乎沒有使用它？

Vue.js

Vue.js 描述 type 框架website vuejs.org repository github.com/vuejs/vue GitHub stars 120,000 當前版本2.5.17 開發者Evan You 發布日期2014年2月典型大小19kb min 典型用途組件和單頁應用程序使用率低Vue.js是一個輕量級的漸進式框架，用於構建用戶界面。核心提供了類似React的虛擬DOM驅動的視圖層，可以與其他庫集成，但它也能夠驅動單頁應用程序。該框架由Evan You創建，他之前曾在AngularJS工作，但希望提取他喜歡的部分。

Vue.js使用HTML模板語法將DOM綁定到實例數據。當數據更改時，模型是更新視圖的普通JavaScript對象。其他工具提供用於腳手架、路由、狀態管理、動畫等的工具。

優點：

快速採用和日益普及
易於上手，開發人員滿意度高
輕量級、依賴性小、性能好

缺點：

可能被React所掩蓋
對單個開發人員的更新有所依賴
資源少於替代方案

Sencha Ext JS

Ext JS 描述 type 框架和組件庫website sencha. com/products/extjs/ 當前版本6.6.0 開發者Sencha 發布日期2007年12月典型大小取決於需求：85 – 500kb 典型用途組件和單頁應用程序使用率低Ext JS是從YUI-Ext發展而來的，在這個列表中擁有最長的歷史之一。雖然它最出名的是其廣泛的可配置、可訪問的跨瀏覽器UI組件和數據可視化工具，但Ext JS還提供了一個用於構建完整應用程序的框架。或者，您可以將組件庫與React或Angular一起使用。

Ext JS是此處唯一提供商業培訓和支持的框架。還可以選擇讓Sencha團隊幫助審查您的代碼、自動化測試以及遷移到其他平台。

優點：

廣泛的可用的組件
包含創建Web和移動應用程序所需的一切
腳本自定義、設計工具和快速原型
提供用於直觀構建和設置樣式的Web應用程序的工具
商業支持和優秀的文檔
30天免費試用版和適用於小型應用程序的社區版（每年收入低於10,000美元）

缺點：

截至目前，與React和Angular以外的框架的集成可能不切實際——請參閱Ext JS 7的路線圖計劃
深度自定義UI更改可能很困難

Lodash和Underscore

Lodash 描述 type 庫website lodash.com/ repository github .com/lodash/lodash/ GitHub stars 35,000 當前版本4.17.11 開發者John-David Dalton 發布日期2012年4月典型大小4kb – 24kb min 典型用途通用用途使用率低 Underscore 描述 type 庫website underscorejs.org/ repository github.com/jashkenas/underscore GitHub stars 24,000 當前版本1.8. 3 開發者Jeremy Ashkenas 發布日期2009年10月典型大小6kb min 典型用途通用用途使用率低本節將Lodash和Underscore組合在一起，因為它們提供了數百個功能性JavaScript實用程序，以補充本機字符串、數字、數組和其他原始對象方法。存在一些重疊，因此您不太可能在一個項目中同時需要這兩個庫。

客戶端使用率較低，但任一庫都可以用於服務器端Node.js應用程序。

優點：

小巧簡單
易於學習，文檔良好
與大多數庫和框架兼容
不擴展內置對象
可以在客戶端或服務器端使用

缺點：

ES2015及更高版本的JavaScript中提供了一些方法。

Backbone.js

Backbone.js 描述 type 框架website backbonejs.org repository github.com/jashkenas/backbone/ GitHub stars 37,000 當前版本1.3.3 開發者Jeremy Ashkenas 發布日期2010年10月典型大小8kb min 典型用途單頁應用程序使用率低Backbone.js是最早提供服務器端框架中常見的MVC結構的客戶端選項之一。它唯一的依賴項是Underscore.js，該庫由同一位開發人員創建。

Backbone.js聲稱是一個庫，因為它可以與其他項目集成。我懷疑大多數開發人員認為它是一個框架，儘管它不如其他一些框架那麼武斷。

優點：

小巧、輕量級且不太複雜
不向HTML添加邏輯
優秀的文檔
已被許多應用程序採用，包括Trello、WordPress.com、LinkedIn和Groupon

缺點：

比AngularJS等替代方案的抽象級別更低（但這可以被認為是一個優勢）
需要其他組件來實現諸如數據綁定之類的功能
最近的框架已經遠離MVC架構

Ember.js

Ember.js 描述 type 框架website emberjs.com repository github.com/emberjs/ember.js GitHub stars 20,000 當前版本3.6.0 開發者Ember團隊發布日期2011年12月典型大小95kb min 典型用途單頁應用程序使用率低Ember.js是基於模型-視圖-視圖模型（MVVM）模式的較大武斷框架之一。它在一個包中實現了模板、數據綁定和庫。對於那些有Ruby on Rails經驗的人來說，約定優於配置的概念會立即熟悉。

優點：

為客戶端應用程序提供單一解決方案
開發人員可以立即提高生產力——它使用jQuery
良好的向後兼容性和升級選項
採用了現代Web開發標準

缺點：

分發文件較大
與其他正在轉向更小組件結構的框架相比，它被認為是整體式的
學習曲線陡峭——這是Ember的方式，或者根本沒有方式

Knockout.js

Knockout.js 描述 type 框架website knockoutjs.com repository github.com/knockout/knockout GitHub stars 9,000 當前版本3.5.0 開發者Steve Sanderson 發布日期2010年7月典型大小59kb min 典型用途單頁應用程序使用率低Knockout.js是較舊的MVVM框架之一，它使用觀察者來確保UI與底層數據保持同步。它具有模板和依賴項跟踪功能。

優點：

小巧輕便，沒有依賴項
優秀的瀏覽器支持，可追溯到IE6
優秀的文檔

缺點：

大型項目可能會變得複雜
開發速度減慢
使用率似乎正在下降

值得關注的項目

渴望了解更多？以下項目不太流行，但值得考慮：

Polymer——一個啟用HTML5 Web組件跨瀏覽器支持的庫
Meteor——一個用於Web應用程序的全棧平台。
Aurelia——一個輕量級、跨平台的框架
Svelte——一個相當新的項目，它將框架源代碼轉換為類似原生的JavaScript
Conditioner.js——一個新的庫，它根據狀態自動加載和卸載模塊。

工具：通用任務運行器

構建工具自動化各種Web開發任務，例如預處理、編譯、模塊捆綁、圖像優化、代碼壓縮、代碼風格檢查和運行測試。任務通常在一個可執行包中一起管理。最流行的選項：

Webpack

Webpack 描述 website webpack.js.org repository github. com/webpack/webpack GitHub stars 45,000 當前版本4.25.1 每週下載量400萬Webpack支持所有流行的模塊選項，並且已成為React開發的代名詞。儘管聲稱是一個模塊捆綁器，但Webpack可以用作通用任務運行器。基於JavaScript對象的配置可能有點笨拙。生成器可用，但一些Webpack用戶已遷移到Parcel，以獲得更簡單的配置和更快的編譯時間。

Gulp.js

Gulp.js 描述 website gulpjs.com repository github. com/gulpjs/gulp GitHub stars 30,000 當前版本4.0.0（3.9.1仍在活躍）每週下載量750,000 雖然它不是第一個任務運行器，但Gulp很快就成為最流行的任務運行器之一，也是我個人最喜歡的。 Gulp使用易於閱讀的JavaScript代碼，該代碼將源文件加載到流中，然後將數據通過各種插件傳遞，然後再將其輸出到構建文件夾。它簡單、快速且有趣，但開發人員已遷移到Webpack。

npm

npm 描述 website npmjs.com repository github.com/ npm/npm GitHub stars 17,000 當前版本6.4.1 每週下載量100萬npm是Node.js包管理器，但其腳本工具可用於通用任務運行。對於依賴項較少的簡單項目，這是一個有吸引力的選擇。但是，更複雜的任務很快就會變得不切實際。

Grunt

Grunt 描述 website gruntjs.com repository github.com/ gruntjs/grunt GitHub stars 17,000 當前版本1.0.3 每週下載量425,000 Grunt是最早實現大規模採用的JavaScript任務運行器之一，但其速度和復雜的JSON配置導致了Gulp的興起。最糟糕的問題已得到解決，Grunt仍然是一個流行的選擇。

工具：模塊捆綁器

管理多個JavaScript文件可能會變得很麻煩。除非您可以本機採用相對較新的ES6模塊導入語法，否則必須按適當的順序加載或連接瀏覽器中的JavaScript依賴項。如果您需要支持舊版瀏覽器（2018年之前發布的任何瀏覽器），可以使用模塊捆綁器，但對這些工具的需求會隨著時間的推移而減少。

Browserify

Browserify 描述 website browserify.org repository github.com/ browserify/browserify GitHub stars 12,000 當前版本16.2.3 每週下載量480,000 Browserify支持Node.js使用的CommonJS模塊，將所有模塊編譯成單個瀏覽器兼容文件。

RequireJS

RequireJS 描述 website requirejs.org repository github.com/ requirejs/r.js GitHub stars 2,500 當前版本2.3.6 每週下載量230,000 RequireJS最初是一個瀏覽器內模塊加載器，儘管它也可以在Node.js中使用。它支持AMD語法。

工具：代碼風格檢查

代碼風格檢查分析您的代碼是否存在潛在錯誤或與語法標準的偏差。您將永遠不會錯過右括號或未聲明的變量！

ESLint

ESLint 描述 website eslint.org repository github.com/ eslint/eslint GitHub stars 12,000 當前版本5.9.0 每週下載量400萬ESLint是最流行的代碼風格檢查工具，大多數IDE、編輯器、捆綁器和任務運行器都支持它。每個規則都是一個插件，因此可以根據您的喜好進行配置。

JSHint

JSHint 描述 website jshint.com repository github.com/ jshint/jshint GitHub stars 8,000 當前版本2.9.6 每週下載量390,000 一個靈活的JavaScript代碼風格檢查器，它不如ESLint那麼可配置，但在真正的錯誤和死板的語法要求之間取得了良好的平衡。

JSLint

JSLint 描述 website jslint.com repository github.com/ reid/node-jslint GitHub stars 8,000 當前版本0.12.0 每週下載量11,500 最早的代碼風格檢查器之一，它實現了一套嚴格的默認規則。開發速度已減慢，對於某些開發人員來說，它可能有點不妥協。

工具：測試套件

測試驅動開發要求您在開始編寫代碼之前編寫代碼來測試您的代碼。歡迎您編寫代碼來測試您的測試代碼！

有很多選項，包括Ava、Tape和Jasmine，但目前三個最流行的選項是……

Jest

Jest 描述 website https://www .php.cn/link/50be28d343081a44df25869ab1e4502f repository github.com/kof/node-qunit GitHub stars 21,000 當前版本23.6.0 每週下載量200萬來自Facebook的測試框架，由於其與React和Webpack的緊密聯繫而越來越受歡迎。

Mocha

Mocha 描述 website mochajs.org repository github.com/ mochajs/mocha GitHub stars 16,500 當前版本5.2.0 每週下載量180萬Mocha可以在Node.js和瀏覽器中運行測試。它支持異步測試，並且通常與Chai配對使用，以便能夠以可讀的樣式表達測試代碼。多年來，它一直是最流行的選擇。

Jasmine

Jasmine 描述 website jasmine.github.io repository github. com/jasmine/jasmine-npm GitHub stars 300 當前版本3.3.0 每週下載量750,000 Jasmine是一個行為驅動測試套件，它可以自動化測試您在瀏覽器中的UI和交互。

工具：其他工具

儘管我盡了最大努力，但我承認並非每個人都喜歡JavaScript！ TypeScript、LiveScript和CoffeeScript等編譯器可以使您的開發生活更愉快一些。或者，考慮使用Babel將現代、簡潔的ES2015源代碼轉換為跨瀏覽器兼容的ES5代碼。

有許多JavaScript驅動的HTML模板引擎，包括Mustache、Handlebars、Pug（Jade）和EJS。我更喜歡保留JavaScript語法的輕量級選項，例如EJS和doT。

最後，為什麼編寫您自己的文檔，當您可以自動化它時？兼容ES2015的文檔生成器包括ESDoc、JSDoc、YUIdoc、documentation.js和Transcription。

總結和建議

如果您遵循大眾的智慧，那麼目前的勢頭是在React後面，其他庫也在朝著類似的技術方向發展。這是一個安全的職業選擇，但您也應該考慮Vue.js或與React兼容但更小的Preact。

整體式框架已不受歡迎，但是，如果您需要為大型項目提供嚴格的結構，AngularJS仍然是一個流行的選擇。大多數開發人員堅持使用1.0版，但這可能是出於必要而不是選擇。從長遠來看，2 版可能是更安全的選擇，但您需要學習TypeScript。

對於希望同時擁有框架和預構建的集成組件和工具（包括訪問商業支持）的公司（小型企業到企業），Sencha的Ext JS是一個不錯的選擇。 Ext JS還可以輕鬆地將其強大的組件庫與React和Angular集成，對於希望實現預構建組件而不是自己構建組件的開發人員來說，這是一個不錯的選擇。

不要忽視jQuery。它並不時尚，很少在技術新聞中提及，但它正在積極開發中，並且對於網站和應用程序來說綽綽有餘。 jQuery的學習曲線平緩，並且為全球許多開發人員所理解。

如果您想冒險，Svelte和Rawact等新的轉譯器選項會將框架代碼轉換為原生JavaScript。框架依賴項已刪除，代碼更小，運行速度更快。

工具的選擇不太重要，並且可能因項目而異。大多數Webpack、Gulp或npm腳本。對於測試，您可以使用ESLint和Jest，但還有許多其他替代方案可以嘗試。

也就是說，每個項目、團隊和技能組合都是不同的。您只有有限的時間來進行評估，因此使用您所知道的知識很誘人。這篇文章將收到評論，推薦FrameworkX，但是當您有錘子時，一切看起來都像釘子。

最後，永遠不要忘記庫、框架和工具是可選的！ 在過去十年中，JavaScript開發發生了革命性的變化；我們從幾個基本的輔助庫發展到令人難以置信的選擇。很容易陷入複雜性不斷增加的陷阱，或者每隔幾個月就切換到最新的熱門框架。始終考慮原生JavaScript——尤其是在小型和個人項目中。您獲得的知識不會過時，並且在為其他項目評估框架時將變得非常寶貴。

我是否遺漏了、駁回了或未能讚揚您最喜歡的JavaScript庫、框架和工具的優勢？當然，我做到了！ 歡迎評論……

關於頂級JavaScript框架、庫和工具的常見問題

Angular和React的主要區別是什麼？

Angular和React都是流行的JavaScript框架，但它們有一些關鍵區別。由Google開發的Angular是一個成熟的MVC框架，它提供了一套強大的功能來構建複雜的應用程序。它使用雙向數據綁定和真實DOM。另一方面，由Facebook開發的React是一個用於構建用戶界面的庫。它使用單向數據綁定和虛擬DOM，這使其在渲染大型列表和數據集時更快、更高效。