本文将會讨論目前最為流行的用戶端JavaScript架構、類庫和工具以及它們之間的基本差異。也許本文無法告訴你哪個是最好的，但是最适合自己項目的，就是最好的。
類庫是一個有組織的功能集合。典型的類庫包括字元串處理、日期、HTML DOM元素、事件、Cookie、動畫、網絡請求等功能。你可以自己實作一個函數，以便選擇該函數被調用時是否需要傳回一個值。
類庫能夠使将開發時間縮短20％，開發者不必擔心細節實作。
但是也有缺點：
類庫中的錯誤難以定位和修複
開發團隊不能保證快速釋出更新檔
更新檔程式可能會更改API，導緻大量代碼必須更改
架構是應用程式的骨架。它要求以特定的方式來進行軟體設計，在某些節點上實作自己的邏輯。架構通常提供了事件、存儲和資料綁定等功能。
架構通常提供了比類庫更高層次的抽象，幫助快速建構項目的前80％。
架構的缺點：
如果你的應用程式超出了架構的範圍，最後20％可能會很難
架構更新很困難
核心架構代碼和概念很少更新
工具會幫助開發工作，但卻不是項目的組成部分。工具包括建構系統、編譯器、轉譯器、代碼分割器、圖像壓縮器、部署機制等。
類庫、架構和工具之間的差別很小。架構可以包括一個類庫，類庫可以實作類似架構的方法，項目中任何一種工具都是必不可少的。是以不需要明确的區分類庫、架構和工具。
以下是按照流行程度進行的排序：
jQuery
類型
類庫
網站
<a href="http://jquery.com/">jquery.com</a>
知識庫
<a href="https://github.com/jquery/jquery">github.com/jquery/jquery</a>
目前版本
3.2.1
開發人員
jQuery團隊
釋出日期
2006年8月
大小
最小30kb
用途
通用
使用度
<a href="https://w3techs.com/technologies/details/js-jquery/all/all">72.4％的網站</a>
随着WordPress、ASP.NET和一些其它架構的釋出，jQuery仍然是最常用的JavaScript類庫。它通過将CSS選擇器引入到DOM節點檢索加鍊來應用事件處理程式、動畫和Ajax調用，這徹底改變了用戶端的開發。
jQuery近年來備受青睐，對于需要少量JavaScript功能的項目來說，仍然是一個好選擇。
優點：
分布規模小
學習曲線平緩，豐富的線上幫助
簡潔的文法
容易拓展
缺點：
增加了原生API的速度開銷
浏覽器相容性不好，但已得到改善
用法扁平
一些行業反對使用
Lodash
<a href="https://lodash.com/">lodash.com/</a>
<a href="https://github.com/lodash/lodash/">github.com/lodash/lodash/</a>
4.17.4
John-David Dalton
2012年4月
最小4kb - 24kb
低
Underscore
<a href="http://underscorejs.org/">underscorejs.org/</a>
<a href="https://github.com/jashkenas/underscore">github.com/jashkenas/underscore</a>
1.8.3
Jeremy Ashkenas
2009年10月
最小6kb
Lodash和Underscore在本節一起談論。它們提供了數百個功能性的JavaScript實用程式來補充原生字元串、數字、數組和其它原始對象方法。雖然兩個類庫之間有一些重疊，但是不太可能在一個項目中同時使用這兩個類庫。
雖然兩個類庫在用戶端使用率很低，但是卻可以在伺服器端的Node.js應用程式中使用這兩個類庫。
小而簡單
良好的文檔易于學習
與大多數類庫和架構相容
不擴充内置對象
可以在用戶端或伺服器上使用
有些方法隻在ES2015及更高版本的JavaScript中可用。
AngularJS
架構
<a href="https://angularjs.org/">angularjs.org</a>
<a href="https://github.com/angular/angular.js">github.com/angular/angular.js</a>
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
<a href="https://angular.io/">angular.io</a>
4.1
2016年9月
最小450kb
單頁面應用
Angular 2.0于2016年9月釋出。這是一個完整的重寫，它引入了使用TypeScript建立的基于子產品化元件的模型。Angular 4.0于2017年3月釋出。
Angular 2.x與v1版本截然不同，也不與其它版本相容 - 也許Google應該給項目起一個不同的名字！
是标準MEAN棧的一部分，盡管隻有少量的教程可用
對于熟悉靜态類型語言（如C＃和Java）的開發人員，TypeScript提供了一些優勢。
不能從Angular 1.x更新
與1.x相比，Angular 2.x較難了解
React
<a href="https://facebook.github.io/react/">facebook.github.io/react/</a>
<a href="https://github.com/facebook/react">github.com/facebook/react</a>
15.5.4
Facebook和貢獻者
2013年3月
最小21kb
React是一個用于建構使用者界面的JavaScript類庫，也是去年最受關注的類庫。它專注于Model-View-Controller（MVC）開發的“View”部分，使用它可以輕松建立保留狀态的UI元件。它是實作虛拟DOM的首選類庫之一， 它的記憶體結構能夠有效地計算差異，頁面更新也更加有效。
統計顯示React的使用度似乎很低，因為它是在應用程式中使用而不是在網站。
小巧，高效，快捷靈活
簡單的元件模型
良好的文檔和線上資源
可實作伺服器端渲染
目前受歡迎，經曆了快速增長
需要學習新的概念和文法
建構工具很重要
需要其它類庫或架構提供model和Controller部分
與修改DOM的代碼和其它類庫不相容
Vue.js
<a href="https://vuejs.org/">vuejs.org</a>
<a href="https://github.com/vuejs/vue">github.com/vuejs/vue</a>
2.0
Evan You
2014年2月
最小19kb
Vue.js是一個用于建構使用者界面的輕量級漸進架構。它提供了一個類似React的虛拟DOM驅動視圖層，可以與其它類庫內建，用于建構強大的單頁面應用。該架構是由之前在AngularJS工作過的Evan You建立的，他提取了AngularJS中自己喜歡的部分。
Vue.js使用HTML模闆文法将DOM綁定到執行個體資料。Model是在資料改變時更新view的純JavaScript對象。
可以快速使用，并且日益普及
很容易提高高水準開發人員的滿意度
依賴性小，性能好
一個較新的項目 - 風險可能會更大
部分依賴開發人員進行更新
相比于其它架構，資源較少
<a href="http://backbone.js/">Backbone.js</a>
<a href="http://backbonejs.org/">backbonejs.org</a>
<a href="https://github.com/jashkenas/backbone/">github.com/jashkenas/backbone/</a>
1.3.3
最小8kb
Backbone.js是提供伺服器端架構中常見的MVC結構的最早用戶端選項之一。它唯一的依賴是Underscore.js。
Backbone.js聲稱是一個類庫，因為它可以與其它項目內建，但是我覺得大多數開發人員都認為它是一個架構。
體積小，重量輕，複雜度低
不添加HTML邏輯
檔案豐富
采用了許多應用，包括Trello、WordPress.com、LinkedIn和Groupon
與AngularJS等其它架構相比，抽象度較低
需要額外的元件來實作資料綁定等功能
最新的架構已經不采用MVC架構了
Ember.js
<a href="https://emberjs.com/">emberjs.com</a>
<a href="https://github.com/emberjs/ember.js">github.com/emberjs/ember.js</a>
2.15.0
Ember team
2011年12月
最小95kb
Ember.js是基于Model-View-ViewModel（MVVM）模式的架構之一。它在單個包中實作模闆化、資料綁定和類庫。
為用戶端應用程式提供了單一解決方案
開發人員可以立刻提高開發效率 - 它使用jQuery
良好的向後相容性和更新選項
采用了現代Web開發标準
大型配置設定式
與其它正在向較小元件結構發展的架構相比，它十分的龐大
<a href="http://knockout.js/">Knockout.js</a>
<a href="http://knockoutjs.com/">knockoutjs.com</a>
<a href="https://github.com/knockout/knockout">github.com/knockout/knockout</a>
3.4.2
Steve Sanderson
2010年7月
最小59kb
<a href="https://w3techs.com/technologies/details/js-knockout/all/all">低</a>
Knockout.js是最早的MVVM架構之一，它確定了UI與底層資料保持同步，具有模闆和依賴關系跟蹤。
小而輕便，無依賴
優秀的浏覽器支援，可以支援到IE6
良好的文檔資源
較大的項目可能變得很複雜
發展已經放緩
使用情況似乎在減弱
以下項目雖然不是特别流行，但值得考慮：
建構工具自動執行各種Web開發任務，例如預處理、編譯、優化圖像、縮小代碼、代碼分析和運作測試等。任務可以在一個可執行包中統一管理。
目前最受歡迎的工具如下：
Gulp.js
<a href="http://gulpjs.com/">gulpjs.com</a>
<a href="https://github.com/gulpjs/gulp">github.com/gulpjs/gulp</a>
3.9.1
每月下載下傳
300萬
雖然Gulp不是第一個任務執行工具，它卻很快成為了最受歡迎的。Gulp使用易于閱讀的JavaScript代碼，将源檔案加載到流中，并在将資料輸出到建構檔案夾之前，通過各種插件管理資料。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。
NPM
<a href="https://www.npmjs.com/">npmjs.com</a>
<a href="https://github.com/npm/npm">github.com/npm/npm</a>
4.5.0
Grunt
<a href="https://gruntjs.com/">gruntjs.com</a>
<a href="https://github.com/gruntjs/grunt">github.com/gruntjs/grunt</a>
1.0.1
200萬
Grunt是第一批被大規模采用的JavaScript任務執行工具之一，但其速度和複雜的JSON配置卻導緻了Gulp的興起。現在這些問題已經得到了解決，Grunt仍然是一個受歡迎的選擇。
WebPack
<a href="https://webpack.js.org/">webpack.js.org</a>
<a href="https://github.com/webpack/webpack">github.com/webpack/webpack</a>
2.5.1
600萬
Webpack支援所有流行的子產品選項，并已成為React開發的代名詞。雖然Webpack聲稱是一個子產品捆綁程式，但是已經可以用作通用任務運作程式了。
Browserify
<a href="http://browserify.org/">browserify.org</a>
<a href="https://github.com/substack/node-browserify">github.com/substack/node-browserify</a>
14.3.0
260萬
Browserify支援Node.js正在使用的CommonJS子產品，它将所有子產品編譯成單個浏覽器相容的檔案。
RequireJS
<a href="http://requirejs.org/">requirejs.org</a>
<a href="https://github.com/jrburke/r.js">github.com/jrburke/r.js</a>
2.3.3
百萬
RequireJS是一種浏覽器中的子產品加載器，它也可以在Node.js中使用。
代碼分析工具用于分析代碼中潛在錯誤或偏離文法的标準。一個未閉合括号或未聲明的變量一定會被檢測出。
ESLint
<a href="http://eslint.org/">eslint.org</a>
<a href="https://github.com/eslint/eslint">github.com/eslint/eslint</a>
3.19.0
ESLint是一種可插拔的代碼分析工具。每個規則都是一個插件，是以可以根據個人喜好進行配置。
JSHint
<a href="http://jshint.com/">jshint.com</a>
<a href="https://github.com/jshint/jshint">github.com/jshint/jshint</a>
2.9.4
JSHint是一個靈活的JavaScript代碼分析工具，它很好的平衡了真正的錯誤和老舊的文法。
JSLint
<a href="http://jslint.com/">jslint.com</a>
<a href="https://github.com/reid/node-jslint">github.com/reid/node-jslint</a>
0.10.3
50000
JSLint是最早的代碼分析工具之一，它實作了一套嚴格的預設規則。
Mocha
<a href="https://mochajs.org/">mochajs.org</a>
<a href="https://github.com/mochajs/mocha">github.com/mochajs/mocha</a>
3.3.0
500萬
Jasmine
<a href="https://jasmine.github.io/">jasmine.github.io</a>
<a href="https://github.com/jasmine/jasmine-npm">github.com/jasmine/jasmine-npm</a>
2.6.0
Jasmine是一個行為驅動的測試工具，可以在浏覽器中自動測試UI和互動。
QUnit
<a href="https://qunitjs.com/">https://qunitjs.com/</a>
<a href="https://github.com/kof/node-qunit">github.com/kof/node-qunit</a>
1.0.0
25000
QUnit是一個單元測試架構，可以在輸入特定參數時，檢查函數結果。它還上報測試結果，確定沒有錯過特定的代碼分支。
過去的十年，JavaScript經曆了革命性的發展。過去隻有少量基本的類庫可以選擇，但是現在可供選擇的類庫已經鋪天蓋地。也許無法确定哪個類庫、架構和工具是最好的，但是最适合自己項目的，就是最好的。
如果本文錯過了你最喜歡的JavaScript類庫，架構或工具？歡迎在文末評論。
轉載請注明出自：葡萄城控件
相關閱讀：
<a href="http://www.grapecity.com.cn/enterprise-solutions/activereports_server/activity/" target="_blank">【報表福利大放送】100餘套報表模闆免費下載下傳</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/Angular_Wijmo.html" target="_blank">開放才能進步！Angular和Wijmo一起走過的日子</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/top5_jqueryui_alternatives.html" target="_blank">這 5 個前端元件庫，可以讓你放棄 jQuery UI</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/angular_react.html" target="_blank">Angular vs React 最全面深入對比</a>