相比于JavaScript開發(fā)人員的數(shù)量，目前JavaScript框架、類庫(kù)和工具的數(shù)量似乎更多一些。本文將會(huì)討論目前最為流行的客戶端JavaScript框架、類庫(kù)和工具以及它們之間的基本差異。也許本文無(wú)法告訴你哪個(gè)是最好的，但是最適合自己項(xiàng)目的，就是最好的。

類庫(kù)

類庫(kù)是一個(gè)有組織的功能集合。典型的類庫(kù)包括字符串處理、日期、HTML DOM元素、事件、Cookie、動(dòng)畫、網(wǎng)絡(luò)請(qǐng)求等功能。你可以自己實(shí)現(xiàn)一個(gè)函數(shù)，以便選擇該函數(shù)被調(diào)用時(shí)是否需要返回一個(gè)值。類庫(kù)通常提供一種高級(jí)別的抽象方法，能夠幫助順利實(shí)現(xiàn)項(xiàng)目的細(xì)節(jié)部分。例如Ajax通常依賴于XMLHttpRequest API，只需要幾行代碼就實(shí)現(xiàn)功能，只是瀏覽器之間存在細(xì)微的差異。類庫(kù)提供了更簡(jiǎn)單的ajax()函數(shù)，因此開發(fā)者可以專注于更高級(jí)別的業(yè)務(wù)邏輯上。類庫(kù)能夠使將開發(fā)時(shí)間縮短20%，開發(fā)者不必?fù)?dān)心細(xì)節(jié)實(shí)現(xiàn)。但是也有缺點(diǎn)：

• 類庫(kù)中的錯(cuò)誤難以定位和修復(fù)
• 開發(fā)團(tuán)隊(duì)不能保證快速發(fā)布補(bǔ)丁
• 補(bǔ)丁程序可能會(huì)更改API，導(dǎo)致大量代碼必須更改

框架

框架是應(yīng)用程序的骨架。它要求以特定的方式來(lái)進(jìn)行軟件設(shè)計(jì)，在某些節(jié)點(diǎn)上實(shí)現(xiàn)自己的邏輯?？蚣芡ǔＬ峁┝耸录?、存儲(chǔ)和數(shù)據(jù)綁定等功能。框架通常提供了比類庫(kù)更高層次的抽象，幫助快速構(gòu)建項(xiàng)目的前80%。框架的缺點(diǎn)：

• 如果你的應(yīng)用程序超出了框架的范圍，最后20%可能會(huì)很難
• 框架更新很困難
• 核心框架代碼和概念很少更新

工具

工具會(huì)幫助開發(fā)工作，但卻不是項(xiàng)目的組成部分。工具包括構(gòu)建系統(tǒng)、編譯器、轉(zhuǎn)譯器、代碼分割器、圖像壓縮器、部署機(jī)制等。工具幫助實(shí)現(xiàn)一個(gè)更容易的開發(fā)過(guò)程。例如，對(duì)比于CSS，許多編碼者更喜歡Sass，因?yàn)樗峁┝舜a分離、嵌套、渲染時(shí)變量、循環(huán)和函數(shù)。瀏覽器不了解Sass / SCSS語(yǔ)法，因此在測(cè)試和部署之前，必須使用適當(dāng)?shù)墓ぞ邔⒋a編譯為CSS。

類庫(kù)、框架和工具的區(qū)別

類庫(kù)、框架和工具之間的區(qū)別很小?？蚣芸梢园ㄒ粋€(gè)類庫(kù)，類庫(kù)可以實(shí)現(xiàn)類似框架的方法，項(xiàng)目中任何一種工具都是必不可少的。所以不需要明確的區(qū)分類庫(kù)、框架和工具。

JavaScript框架和類庫(kù)

以下是按照流行程度進(jìn)行的排序：

jQuery

優(yōu)點(diǎn)：隨著WordPress、ASP.NET和一些其它框架的發(fā)布，jQuery仍然是最常用的JavaScript類庫(kù)。它通過(guò)將CSS選擇器引入到DOM節(jié)點(diǎn)檢索加鏈來(lái)應(yīng)用事件處理程序、動(dòng)畫和Ajax調(diào)用，這徹底改變了客戶端的開發(fā)。jQuery近年來(lái)備受青睞，對(duì)于需要少量JavaScript功能的項(xiàng)目來(lái)說(shuō)，仍然是一個(gè)好選擇。

• 分布規(guī)模小
• 學(xué)習(xí)曲線平緩，豐富的在線幫助
• 簡(jiǎn)潔的語(yǔ)法
• 容易拓展

缺點(diǎn)：

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

Lodash 和 Underscore

優(yōu)點(diǎn)：Lodash和Underscore在本節(jié)一起談?wù)摗Ｋ鼈兲峁┝藬?shù)百個(gè)功能性的JavaScript實(shí)用程序來(lái)補(bǔ)充原生字符串、數(shù)字、數(shù)組和其它原始對(duì)象方法。雖然兩個(gè)類庫(kù)之間有一些重疊，但是不太可能在一個(gè)項(xiàng)目中同時(shí)使用這兩個(gè)類庫(kù)。雖然兩個(gè)類庫(kù)在客戶端使用率很低，但是卻可以在服務(wù)器端的Node.js應(yīng)用程序中使用這兩個(gè)類庫(kù)。

• 小而簡(jiǎn)單
• 良好的文檔易于學(xué)習(xí)
• 與大多數(shù)類庫(kù)和框架兼容
• 不擴(kuò)展內(nèi)置對(duì)象
• 可以在客戶端或服務(wù)器上使用

缺點(diǎn)：

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

AngularJS 1.x

優(yōu)點(diǎn)：Angular是框架(或MVC應(yīng)用程序框架)類列表中的第一個(gè)。目前最流行的Angular版本是1.x，它使用雙向數(shù)據(jù)綁定擴(kuò)展HTML，同時(shí)解耦了DOM操作和應(yīng)用程序邏輯。盡管版本2(現(xiàn)在是版本4!)已經(jīng)發(fā)布了，但是Angular 1.x仍在開發(fā)中。

• 一些大公司正在使用的流行框架
• 開發(fā)現(xiàn)代Web應(yīng)用程序的解決方案
• 是標(biāo)準(zhǔn)MEAN棧(MongoDB，Express.JS，AngularJS，NodeJS)的一部分，有許多文章和教程可用

缺點(diǎn)：

• 學(xué)習(xí)曲線陡峭
• 大的代碼庫(kù)
• 無(wú)法升級(jí)到Angular 2.x

Angular 2.x(現(xiàn)在是Angular 4.x)

優(yōu)點(diǎn)：Angular 2.0于2016年9月發(fā)布。這是一個(gè)完整的重寫，它引入了使用TypeScript創(chuàng)建的基于模塊化組件的模型。Angular 4.0于2017年3月發(fā)布。Angular 2.x與v1版本截然不同，也不與其它版本兼容 – 也許Google應(yīng)該給項(xiàng)目起一個(gè)不同的名字!

• 開發(fā)現(xiàn)代Web應(yīng)用程序的解決方案
• 是標(biāo)準(zhǔn)MEAN棧的一部分，盡管只有少量的教程可用
• 對(duì)于熟悉靜態(tài)類型語(yǔ)言(如C#和Java)的開發(fā)人員，TypeScript提供了一些優(yōu)勢(shì)。

缺點(diǎn)：

• 學(xué)習(xí)曲線陡峭
• 大的代碼庫(kù)
• 不能從Angular 1.x升級(jí)
• 與1.x相比，Angular 2.x較難理解

React

優(yōu)點(diǎn)：React是一個(gè)用于構(gòu)建用戶界面的JavaScript類庫(kù)，也是去年最受關(guān)注的類庫(kù)。它專注于Model-View-Controller(MVC)開發(fā)的“View”部分，使用它可以輕松創(chuàng)建保留狀態(tài)的UI組件。它是實(shí)現(xiàn)虛擬DOM的首選類庫(kù)之一， 它的內(nèi)存結(jié)構(gòu)能夠有效地計(jì)算差異，頁(yè)面更新也更加有效。統(tǒng)計(jì)顯示React的使用度似乎很低，因?yàn)樗窃趹?yīng)用程序中使用而不是在網(wǎng)站。

• 小巧，高效，快捷靈活
• 簡(jiǎn)單的組件模型
• 良好的文檔和在線資源
• 可實(shí)現(xiàn)服務(wù)器端渲染
• 目前受歡迎，經(jīng)歷了快速增長(zhǎng)

缺點(diǎn)：

• 需要學(xué)習(xí)新的概念和語(yǔ)法
• 構(gòu)建工具很重要
• 需要其它類庫(kù)或框架提供model和Controller部分
• 與修改DOM的代碼和其它類庫(kù)不兼容

Vue.js

優(yōu)點(diǎn)：Vue.js是一個(gè)用于構(gòu)建用戶界面的輕量級(jí)漸進(jìn)框架。它提供了一個(gè)類似React的虛擬DOM驅(qū)動(dòng)視圖層，可以與其它類庫(kù)集成，用于構(gòu)建強(qiáng)大的單頁(yè)面應(yīng)用。該框架是由之前在AngularJS工作過(guò)的Evan You創(chuàng)建的，他提取了AngularJS中自己喜歡的部分。Vue.js使用HTML模板語(yǔ)法將DOM綁定到實(shí)例數(shù)據(jù)。Model是在數(shù)據(jù)改變時(shí)更新view的純JavaScript對(duì)象。

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

缺點(diǎn)：

• 一個(gè)較新的項(xiàng)目 – 風(fēng)險(xiǎn)可能會(huì)更大
• 部分依賴開發(fā)人員進(jìn)行更新
• 相比于其它框架，資源較少

Backbone.js

優(yōu)點(diǎn)：Backbone.js是提供服務(wù)器端框架中常見(jiàn)的MVC結(jié)構(gòu)的最早客戶端選項(xiàng)之一。它唯一的依賴是Underscore.js。Backbone.js聲稱是一個(gè)類庫(kù)，因?yàn)樗梢耘c其它項(xiàng)目集成，但是我覺(jué)得大多數(shù)開發(fā)人員都認(rèn)為它是一個(gè)框架。

• 體積小，重量輕，復(fù)雜度低
• 不添加HTML邏輯
• 文件豐富
• 采用了許多應(yīng)用，包括Trello、WordPress.com、LinkedIn和Groupon

缺點(diǎn)：

• 與AngularJS等其它框架相比，抽象度較低
• 需要額外的組件來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定等功能
• 最新的框架已經(jīng)不采用MVC架構(gòu)了

Ember.js

優(yōu)點(diǎn)：Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。它在單個(gè)包中實(shí)現(xiàn)模板化、數(shù)據(jù)綁定和類庫(kù)。

• 為客戶端應(yīng)用程序提供了單一解決方案
• 開發(fā)人員可以立刻提高開發(fā)效率 – 它使用jQuery
• 良好的向后兼容性和升級(jí)選項(xiàng)
• 采用了現(xiàn)代Web開發(fā)標(biāo)準(zhǔn)

缺點(diǎn)：

• 大型分配式
• 與其它正在向較小組件結(jié)構(gòu)發(fā)展的框架相比，它十分的龐大
• 學(xué)習(xí)曲線陡峭

Knockout.js

優(yōu)點(diǎn)：Knockout.js是最早的MVVM框架之一，它確保了UI與底層數(shù)據(jù)保持同步，具有模板和依賴關(guān)系跟蹤。

• 小而輕便，無(wú)依賴
• 優(yōu)秀的瀏覽器支持，可以支持到IE6
• 良好的文檔資源

缺點(diǎn)：

• 較大的項(xiàng)目可能變得很復(fù)雜
• 發(fā)展已經(jīng)放緩
• 使用情況似乎在減弱

更多的框架和類庫(kù)

以下項(xiàng)目雖然不是特別流行，但值得考慮：

• Polymer – 可以跨瀏覽器支持HTML5網(wǎng)頁(yè)組件的類庫(kù)
• Meteor – 一個(gè)用于Web應(yīng)用程序的全棧平臺(tái)
• Aurelia – 一種相對(duì)較新的，輕量級(jí)的跨平臺(tái)框架
• Svelte – 一個(gè)將框架源代碼轉(zhuǎn)換為干凈JavaScript的新項(xiàng)目
• Conditioner.js – 一個(gè)基于狀態(tài)自動(dòng)加載和卸載模塊的類庫(kù)

工具：執(zhí)行通用任務(wù)

構(gòu)建工具自動(dòng)執(zhí)行各種Web開發(fā)任務(wù)，例如預(yù)處理、編譯、優(yōu)化圖像、縮小代碼、代碼分析和運(yùn)行測(cè)試等。任務(wù)可以在一個(gè)可執(zhí)行包中統(tǒng)一管理。目前最受歡迎的工具如下：

Gulp.js

NPM雖然Gulp不是第一個(gè)任務(wù)執(zhí)行工具，它卻很快成為了最受歡迎的。Gulp使用易于閱讀的JavaScript代碼，將源文件加載到流中，并在將數(shù)據(jù)輸出到構(gòu)建文件夾之前，通過(guò)各種插件管理數(shù)據(jù)。在任何其它選項(xiàng)之前檢查Gulp.js是簡(jiǎn)單、快速和有趣的。

Gruntnpm是Node.js包管理器，但其腳本工具可用于運(yùn)行通用任務(wù)。對(duì)于具有少量依賴關(guān)系的簡(jiǎn)單項(xiàng)目來(lái)說(shuō)，這是一個(gè)很好的選擇。然而，更復(fù)雜的任務(wù)可能會(huì)變得不太適用。

工具：模塊綁定Grunt是第一批被大規(guī)模采用的JavaScript任務(wù)執(zhí)行工具之一，但其速度和復(fù)雜的JSON配置卻導(dǎo)致了Gulp的興起?，F(xiàn)在這些問(wèn)題已經(jīng)得到了解決，Grunt仍然是一個(gè)受歡迎的選擇。

多個(gè)JavaScript文件的管理已經(jīng)成為了一件繁瑣的事情。默認(rèn)情況下，瀏覽器文件不會(huì)被編譯，因此其依賴關(guān)系必須以適當(dāng)?shù)捻樞蜻M(jìn)行加載或連接。雖然有像ES6模塊和CommonJS這樣的選項(xiàng)，但是瀏覽器支持是有限的，因此模塊綁定變得十分重要。

WebPack

BrowserifyWebpack支持所有流行的模塊選項(xiàng)，并已成為React開發(fā)的代名詞。雖然Webpack聲稱是一個(gè)模塊捆綁程序，但是已經(jīng)可以用作通用任務(wù)運(yùn)行程序了。

RequireJSBrowserify支持Node.js正在使用的CommonJS模塊，它將所有模塊編譯成單個(gè)瀏覽器兼容的文件。

工具：代碼分析RequireJS是一種瀏覽器中的模塊加載器，它也可以在Node.js中使用。

代碼分析工具用于分析代碼中潛在錯(cuò)誤或偏離語(yǔ)法的標(biāo)準(zhǔn)。一個(gè)未閉合括號(hào)或未聲明的變量一定會(huì)被檢測(cè)出。

ESLint

JSHintESLint是一種可插拔的代碼分析工具。每個(gè)規(guī)則都是一個(gè)插件，因此可以根據(jù)個(gè)人喜好進(jìn)行配置。

JSLintJSHint是一個(gè)靈活的JavaScript代碼分析工具，它很好的平衡了真正的錯(cuò)誤和老舊的語(yǔ)法。

工具：?jiǎn)卧獪y(cè)試JSLint是最早的代碼分析工具之一，它實(shí)現(xiàn)了一套嚴(yán)格的默認(rèn)規(guī)則。

測(cè)試驅(qū)動(dòng)開發(fā)的任務(wù)要求需要編寫代碼來(lái)測(cè)試自己的代碼。目前有許多選擇，包括Ava, Tape 和Jest ，但目前最流行的三個(gè)工具是：

Mocha

JasmineMocha是一個(gè)JavaScript測(cè)試框架，可以在Node.js或?yàn)g覽器中運(yùn)行測(cè)試。它支持異步測(cè)試，并且經(jīng)常與Chai配合使用，這樣可以使測(cè)試代碼以可讀取的方式表達(dá)。

QUnitJasmine是一個(gè)行為驅(qū)動(dòng)的測(cè)試工具，可以在瀏覽器中自動(dòng)測(cè)試UI和交互。

總結(jié)與建議QUnit是一個(gè)單元測(cè)試框架，可以在輸入特定參數(shù)時(shí)，檢查函數(shù)結(jié)果。它還上報(bào)測(cè)試結(jié)果，確保沒(méi)有錯(cuò)過(guò)特定的代碼分支。目前最為流程的框架是React，同時(shí)其它的框架也在向著流行的趨勢(shì)發(fā)展。如果需要一個(gè)安全的、通用的Web應(yīng)用程序，可以考慮使用Vue.js。

整體框架已經(jīng)不再受歡迎了，如果你需要對(duì)一個(gè)較大型項(xiàng)目進(jìn)行嚴(yán)格的結(jié)構(gòu)管理，AngularJS是一個(gè)不錯(cuò)的選擇。目前大多數(shù)人堅(jiān)持使用Angular 1.0版本，但是長(zhǎng)遠(yuǎn)來(lái)講，如果你愿意學(xué)習(xí)TypeScript，Angular 4.x版本是個(gè)更好的選擇。

jQuery雖然現(xiàn)在并不十分流行，在技術(shù)新聞中也很少會(huì)被提到，但不可否認(rèn)它是積極開發(fā)的，同時(shí)也是網(wǎng)站和應(yīng)用程序的有力工具。jQuery具有平緩的學(xué)習(xí)曲線，全球許多開發(fā)人員能夠很好地理解。

如果你想要冒險(xiǎn)，可以試試Svelte這是一個(gè)有趣的客戶端/服務(wù)器框架，它可以在構(gòu)建時(shí)預(yù)先呈現(xiàn)JavaScript，并且可以改變我們開發(fā)的方式。

工具的選擇因項(xiàng)目而異。雖然目前使用Gulp的開發(fā)者占大多數(shù)，但WebPack卻越來(lái)越受歡迎。同時(shí)你也不能錯(cuò)過(guò)ESLint和Mocha等測(cè)試工具。

過(guò)去的十年，JavaScript經(jīng)歷了革命性的發(fā)展。過(guò)去只有少量基本的類庫(kù)可以選擇，但是現(xiàn)在可供選擇的類庫(kù)已經(jīng)鋪天蓋地。也許無(wú)法確定哪個(gè)類庫(kù)、框架和工具是最好的，但是最適合自己項(xiàng)目的，就是最好的。