2017年前端框架、類庫、工具大比拼

相比於JavaScript開發人員的數量，目前JavaScript框架、類庫和工具的數量彷佛更多一些。截至2017年5月，GitHub上的快速搜索顯示，有超過110萬個JavaScript項目。npmjs.org有50萬個可用的軟件包，每個月下載量近100億次。

本文將會討論目前最爲流行的客戶端JavaScript框架、類庫和工具以及它們之間的基本差別。也許本文沒法告訴你哪一個是最好的，可是最適合本身項目的，就是最好的。

類庫

類庫是一個有組織的功能集合。典型的類庫包括字符串處理、日期、HTML DOM元素、事件、Cookie、動畫、網絡請求等功能。你能夠本身實現一個函數，以便選擇該函數被調用時是否須要返回一個值。

類庫一般提供一種高級別的抽象方法，可以幫助順利實現項目的細節部分。例如，Ajax一般依賴於XMLHttpRequest API，只須要幾行代碼就實現功能，只是瀏覽器之間存在細微的差別。類庫提供了更簡單的ajax（）函數，所以開發者能夠專一於更高級別的業務邏輯上。

類庫可以使將開發時間縮短20％，開發者沒必要擔憂細節實現。

可是也有缺點：

• 類庫中的錯誤難以定位和修復

• 開發團隊不能保證快速發佈補丁

• 補丁程序可能會更改API，致使大量代碼必須更改

• 學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣
  343599877，咱們一塊兒學前端！

框架

框架是應用程序的骨架。它要求以特定的方式來進行軟件設計，在某些節點上實現本身的邏輯。框架一般提供了事件、存儲和數據綁定等功能。

框架一般提供了比類庫更高層次的抽象，幫助快速構建項目的前80％。

框架的缺點：

• 若是你的應用程序超出了框架的範圍，最後20％可能會很難

• 框架更新很困難

• 核心框架代碼和概念不多更新

工具

工具會幫助開發工做，但卻不是項目的組成部分。工具包括構建系統、編譯器、轉譯器、代碼分割器、圖像壓縮器、部署機制等。

工具幫助實現一個更容易的開發過程。例如，對比於CSS，許多編碼者更喜歡Sass，由於它提供了代碼分離、嵌套、渲染時變量、循環和函數。瀏覽器不瞭解Sass / SCSS語法，所以在測試和部署以前，必須使用適當的工具將代碼編譯爲CSS。

類庫、框架和工具的區別

類庫、框架和工具之間的區別很小。框架能夠包括一個類庫，類庫能夠實現相似框架的方法，項目中任何一種工具都是必不可少的。因此不須要明確的區分類庫、框架和工具。

JavaScript框架和類庫

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

jQuery

jQuery
類型	類庫
網站	jquery.com
知識庫	github.com/jquery/jquery
當前版本	3.2.1
開發人員	jQuery團隊
發佈日期	2006年8月
大小	最小30kb
用途	通用
使用度	72.4％的網站

隨着WordPress、ASP.NET和一些其它框架的發佈，jQuery仍然是最經常使用的JavaScript類庫。它經過將CSS選擇器引入到DOM節點檢索加鏈來應用事件處理程序、動畫和Ajax調用，這完全改變了客戶端的開發。

jQuery近年來備受青睞，對於須要少許JavaScript功能的項目來講，仍然是一個好選擇。

優勢：

• 分佈規模小

• 學習曲線平緩，豐富的在線幫助

• 簡潔的語法

• 容易拓展

缺點：

• 增長了原生API的速度開銷

• 瀏覽器兼容性很差，但已獲得改善

• 用法扁平

• 一些行業反對使用

Lodash 和 Underscore

Lodash
類型	類庫
網站	lodash.com/
知識庫	github.com/lodash/lodash/
當前版本	4.17.4
開發人員	John-David Dalton
發佈日期	2012年4月
大小	最小4kb – 24kb
用途	通用
使用度	低
Underscore
類型	類庫
網站	underscorejs.org/
知識庫	github.com/jashkenas/underscore
當前版本	1.8.3
開發人員	Jeremy Ashkenas
發佈日期	2009年10月
大小	最小6kb
用途	通用
使用度	低

Lodash和Underscore在本節一塊兒談論。它們提供了數百個功能性的JavaScript實用程序來補充原生字符串、數字、數組和其它原始對象方法。雖然兩個類庫之間有一些重疊，可是不太可能在一個項目中同時使用這兩個類庫。

雖然兩個類庫在客戶端使用率很低，可是卻能夠在服務器端的Node.js應用程序中使用這兩個類庫。

優勢：

• 小而簡單

• 良好的文檔易於學習

• 與大多數類庫和框架兼容

• 不擴展內置對象

• 能夠在客戶端或服務器上使用

缺點：

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

AngularJS 1.x

AngularJS
類型	框架
網站	angularjs.org
知識庫	github.com/angular/angular.js
當前版本	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 2.x（如今是Angular 4.x）

Angular
類型	框架
網站	angular.io
知識庫	github.com/angular/angular.js
當前版本	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較難理解

• 
  學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣
  343599877，咱們一塊兒學前端！

React

React
類型	框架
網站	facebook.github.io/react/
知識庫	github.com/facebook/react
當前版本	15.5.4
開發人員	Facebook和貢獻者
發佈日期	2013年3月
大小	21kb分鐘
用途	單頁應用程序
使用度	低

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

統計顯示React的使用度彷佛很低，由於它是在應用程序中使用而不是在網站。

優勢：

• 小巧，高效，快捷靈活

• 簡單的組件模型

• 良好的文檔和在線資源

• 可實現服務器端渲染

• 目前受歡迎，經歷了快速增加

缺點：

• 須要學習新的概念和語法

• 構建工具很重要

• 須要其它類庫或框架提供model和Controller部分

• 與修改DOM的代碼和其它類庫不兼容

瞭解更多關於React the ES6 Way

Vue.js

Vue.js
類型	框架
網站	vuejs.org
知識庫	github.com/vuejs/vue
當前版本	2.0
開發人員	Evan You
發佈日期	2014年2月
大小	最小19kb
用途	單頁面應用
使用度	低

Vue.js是一個用於構建用戶界面的輕量級漸進框架。它提供了一個相似React的虛擬DOM驅動視圖層，能夠與其它類庫集成，用於構建強大的單頁面應用。該框架是由以前在AngularJS工做過的Evan You建立的，他提取了AngularJS中本身喜歡的部分。

Vue.js使用HTML模板語法將DOM綁定到實例數據。Model是在數據改變時更新view的純JavaScript對象。

優勢：

• 能夠快速使用，而且日益普及

• 很容易提升高水平開發人員的滿意度

• 依賴性小，性能好

缺點：

• 一個較新的項目 – 風險可能會更大

• 部分依賴開發人員進行更新

• 相比於其它框架，資源較少

Backbone.js

Backbone.js
類型	框架
網站	backbonejs.org
知識庫	github.com/jashkenas/backbone/
當前版本	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

Ember.js
類型	框架
網站	emberjs.com
知識庫	github.com/emberjs/ember.js
當前版本	2.15.0
開發人員	Ember team
發佈日期	2011年12月
大小	最小95kb
用途	單頁面應用
使用度	低

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

優勢：

• 爲客戶端應用程序提供了單一解決方案

• 開發人員能夠馬上提升開發效率 – 它使用jQuery

• 良好的向後兼容性和升級選項

• 採用了現代Web開發標準

缺點：

• 大型分配式

• 與其它正在向較小組件結構發展的框架相比，它十分的龐大

• 學習曲線陡峭

Knockout.js

Knockout.js
類型	框架
網站	knockoutjs.com
知識庫	github.com/knockout/knockout
當前版本	3.4.2
開發人員	Steve Sanderson
發佈日期	2010年7月
大小	最小59kb
用途	單頁面應用
使用度	低

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

優勢：

• 小而輕便，無依賴

• 優秀的瀏覽器支持，能夠支持到IE6

• 良好的文檔資源

缺點：

• 較大的項目可能變得很複雜

• 發展已經放緩

• 使用狀況彷佛在減弱

更多的框架和類庫

如下項目雖然不是特別流行，但值得考慮：

• Polymer – 能夠跨瀏覽器支持HTML5網頁組件的類庫

• Meteor – 一個用於Web應用程序的全棧平臺

• Aurelia  – 一種相對較新的，輕量級的跨平臺框架

• Svelte – 一個將框架源代碼轉換爲乾淨JavaScript的新項目

• Conditioner.js  – 一個基於狀態自動加載和卸載模塊的類庫

工具：執行通用任務

構建工具自動執行各類Web開發任務，例如預處理、編譯、優化圖像、縮小代碼、代碼分析和運行測試等。任務能夠在一個可執行包中統一管理。

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

Gulp.js

Gulp.js
網站	gulpjs.com
知識庫	github.com/gulpjs/gulp
當前版本	3.9.1
每個月下載	300萬

雖然Gulp不是第一個任務執行工具，它卻很快成爲了最受歡迎的。Gulp使用易於閱讀的JavaScript代碼，將源文件加載到流中，並在將數據輸出到構建文件夾以前，經過各類插件管理數據。在任何其它選項以前檢查Gulp.js是簡單、快速和有趣的。

NPM

NPM
網站	npmjs.com
知識庫	github.com/npm/npm
當前版本	4.5.0
每個月下載	300萬

npm是Node.js包管理器，但其腳本工具可用於運行通用任務。對於具備少許依賴關係的簡單項目來講，這是一個很好的選擇。然而，更復雜的任務可能會變得不太適用。

Grunt

Grunt
網站	gruntjs.com
知識庫	github.com/gruntjs/grunt
當前版本	1.0.1
每個月下載	200萬

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

工具：模塊綁定

多個JavaScript文件的管理已經成爲了一件繁瑣的事情。默認狀況下，瀏覽器文件不會被編譯，所以其依賴關係必須以適當的順序進行加載或鏈接。雖然有像ES6模塊和CommonJS這樣的選項，可是瀏覽器支持是有限的，所以模塊綁定變得十分重要。

WebPack

WebPack
網站	webpack.js.org
知識庫	github.com/webpack/webpack
當前版本	2.5.1
每個月下載	600萬

Webpack支持全部流行的模塊選項，並已成爲React開發的代名詞。雖然Webpack聲稱是一個模塊捆綁程序，可是已經能夠用做通用任務運行程序了。

Browserify

Browserify
網站	browserify.org
知識庫	github.com/substack/node-browserify
當前版本	14.3.0
每個月下載	260萬

Browserify支持Node.js正在使用的CommonJS模塊，它將全部模塊編譯成單個瀏覽器兼容的文件。

RequireJS

RequireJS
網站	requirejs.org
知識庫	github.com/jrburke/r.js
當前版本	2.3.3
每個月下載	百萬

RequireJS是一種瀏覽器中的模塊加載器，它也能夠在Node.js中使用。

工具：代碼分析

代碼分析工具用於分析代碼中潛在錯誤或偏離語法的標準。一個未閉合括號或未聲明的變量必定會被檢測出。

ESLint

ESLint
網站	eslint.org
知識庫	github.com/eslint/eslint
當前版本	3.19.0
每個月下載	600萬

ESLint是一種可插拔的代碼分析工具。每一個規則都是一個插件，所以能夠根據我的喜愛進行配置。

JSHint

JSHint
網站	jshint.com
知識庫	github.com/jshint/jshint
當前版本	2.9.4
每個月下載	200萬

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

JSLint

JSLint
網站	jslint.com
知識庫	github.com/reid/node-jslint
當前版本	0.10.3
每個月下載	50000

JSLint是最先的代碼分析工具之一，它實現了一套嚴格的默認規則。

工具：單元測試

測試驅動開發的任務要求須要編寫代碼來測試本身的代碼。目前有許多選擇，包括Ava, Tape 和Jest ，但目前最流行的三個工具是：

Mocha

Mocha
網站	mochajs.org
知識庫	github.com/mochajs/mocha
當前版本	3.3.0
每個月下載	500萬

Mocha是一個JavaScript測試框架，能夠在Node.js或瀏覽器中運行測試。它支持異步測試，而且常常與Chai配合使用，這樣可使測試代碼以可讀取的方式表達。

Jasmine

Jasmine
網站	jasmine.github.io
知識庫	github.com/jasmine/jasmine-npm
當前版本	2.6.0
每個月下載	200萬

Jasmine是一個行爲驅動的測試工具，能夠在瀏覽器中自動測試UI和交互。

QUnit

QUnit
網站	https://qunitjs.com/
知識庫	github.com/kof/node-qunit
當前版本	1.0.0
每個月下載	25000

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

總結與建議

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

若是須要一個安全的、通用的Web應用程序，能夠考慮使用Vue.js。

總體框架已經再也不受歡迎了，若是你須要對一個較大型項目進行嚴格的結構管理，AngularJS是一個不錯的選擇。目前大多數人堅持使用Angular 1.0版本，可是長遠來說，若是你願意學習TypeScript，Angular 4.x版本是個更好的選擇。

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

若是你想要冒險，能夠試試Svelte這是一個有趣的客戶端/服務器框架，它能夠在構建時預先呈現JavaScript，而且能夠改變咱們開發的方式。

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