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