2017最好的JavaScript框架、庫和工具 — SitePoint

時間 2019-11-17

標籤最好 javascript 框架工具 sitepoint 欄目 JavaScript 简体版

原文原文鏈接

與開發者數量相比，可能有更多的JavaScript框架、庫和工具。截止到2017年5月，在GitHub上快速搜索能搜到超過110萬的JavaScript項目。在npmjs上有50萬的可用包，而且這些包每月的下載量將近100億次。javascript

2017.05.29: 更新了本文，旨在能正確的描述當前JavaScript生態的狀態。html

本文着重講述目前最流行的客戶端JavaScript框架、庫和工具之間的基本差別和他們的基本介紹。至因而不是你要尋找的最佳實踐那是另一個問題。你能夠選擇一個，並堅持使用一段時間，你要明白你最喜歡的那一個有可能被「更好」的所取代，而無論你是否選擇使用這個更好的。前端

提綱目錄

閱讀本文章前，請接受下列條款和條件…！

由於JavaScript的發展突飛猛進，因此本文發佈後可能馬上就過期了。
我所說的「最好」的意思是「最受歡迎和流行的項目」。我所列出的全部的免費/開源的項目可能沒有你喜歡使用的那個。
已經宣告死亡的項目，好比：YUI不在本文所列的列表中，即便它還有不少的使用者。
本文只討論客戶端的項目。一些能在服務端工做的純服務端框架，好比：Express.js 或者 Hapi不在本文的討論列表中。
關於每個項目的信息，我都是故意簡明扼要的概述，目的是爲了敦促你本身作進一步的研究。
每個項目都我提供了一個「普及度指標」，可是衆所周知統計數據每每都是不那麼準確的，並且也有可能會誤導別人，因此數據僅供參考。
我可能存在偏見，你也可能存在偏見，每一個人都有可能存在偏見。本文列舉的全部工具我並非都有使用過，但我會告訴你我最喜歡使用哪一個，可是你應該根據本身的需求作出本身的評估和選擇。
在此聲明，你的選擇致使的很差的結果，我和SitePoint不負任何責任。

複雜的術語

「框架（framework）」、「庫（library）」和「工具（tool）」這些詞語，對於不一樣的人在不一樣時間不一樣的語境下會有不一樣的理解，但對於這些詞語本文中使用的定義以下：

庫

一個庫是一個有組織的功能的集合。一個典型的庫應該包括字符串處理、日期處理、HTML DOM元素處理、事件處理、cookie處理、動畫、網絡請求處理等功能。每一個封裝好的API函數都能將值正確的返回給調用他的應用程序，該應用程序是根據您選擇的功能去看狀況實現的。這能夠當作汽車零部件的選擇：你能夠隨意的選擇零件來組裝一個能夠工做的完整車輛，可是你必須本身去建造你本身的引擎。

庫一般提供的是一個更高的抽象級別，這對於實現細節和差別性會更加平滑和優雅。例如：Ajax一般會依賴XMLHttpRequest API，可是這須要幾行代碼就能夠實現處理跨瀏覽器的細微的表現差異。庫會提供一個ajax()函數，而你能夠自由的專一的去實現你的更高級別的業務邏輯便可。

開發中使用一個庫，能夠節約20%的開發時間，由於你沒必要去關注某一功能具體的實現細節。然而缺點是：

若是你使用的庫存在bug，每每難以定位和修復
若是有bug，不能保證庫的開發團隊會很快的發佈補丁
一個補丁的更新可能會致使API的改變，進而會致使你的代碼要作重大的改變來適應這個補丁的更新。

框架

一個框架是一個應用程序的骨架。他要求你要以一種特殊的方式（約定好的方式）進行軟件的設計，必須特定的點加入你本身的邏輯。通常框架都會提供事件處理、存儲、數據綁定等功能。拿汽車類比的話，框架會提供汽車的底盤、車身和發動機。保證功能正常運行的狀況下你能夠添加、刪除和修改某些組件。

框架一般比庫提供更高的抽象級別，框架可以快速幫你構建你項目的80%的工做。然而肯定是：

若是你的剩下的20%的工做超出了框架的範圍限制，將會變得很難作下去。
框架的更新是很困難的 - 若是是可更新的話
框架的核心代碼和概念不多是發展成熟的。處理一樣的事情時開發者老是能找到更好的處理方式。

工具

一個簡單的工具可以提升開發效率，可是這並非項目中必不可少的一部分。通常工具都包含：構建系統、編譯器、轉換功能、代碼壓縮、圖像壓縮、部署機制等功能。

工具應該提供一個更容易的開發流程。例如：不少開發者喜歡用Sass去開發CSS，由於Sass提供了代碼分離、嵌套，渲染時變量、循環和函數。因爲瀏覽器沒法解析Sass/SCSS語法，因此在測試和部署以前代碼必須通過適當的工具編譯爲CSS代碼。

不要給我貼標籤

庫、框架和工具之間的區別每每是模糊的。框架可能會依賴於一個庫。庫也許可以實現相似於框架的方法。工具對於二者多是必不可少的。我試着給每一個項目加標籤進行分類，可是範圍可能會有所不一樣。

若是你聽起來以爲這太複雜的話，你能夠考慮使用vanilla JavaScript進行編碼。這聽上去很好，可是你將不可避免地編寫本身的庫或着框架代碼。JavaScript是瀏覽器和操做系統這兩層抽象之上的又一層抽象。

JavaScript 框架和庫

普及流行的項目…

jQuery

key	value
類型	庫
官網	jquery.com
倉庫地址	github.com/jquery/jquery
最新版本	3.2.1
開發者	jQuery team
發佈日期	2006年8月
文件大小	30kb min
用途	通用
使用率	全球72.4% 的網站在使用

在WordPress、ASP.NET和其餘幾個框架中jQuery仍然是被使用最多的一個庫。他引入了CSS選擇器的方式去選擇頁面DOM節點、鏈式的事件處理方式、動畫和Ajax調用的封裝在客戶端是一種具備革命性的開發方式。

jQuery近年來隨着前端技術的不斷髮展變得有點落寞的跡象，但對於須要使用JavaScript功能的項目來講，它仍然是一個可行的選擇。

優勢:

文件尺寸很小
入門簡單（漸進的學習曲線），便捷的線上學習答疑社區環境
簡潔的語法
易於擴展

缺點:

增長了個客戶端的API速度開銷
瀏覽器兼容性的改善，使得它變的不是那麼重要了
用法扁平
一些行業抵制反對沒必要要的使用.

React

key	value
類型	庫
官網	facebook.github.io/react/
倉庫地址	github.com/facebook/react
最新版本	15.5.4
開發者	Facebook and contributors
發佈日期	2013年3月
文件大小	21kb min
用途	單頁面應用
使用率	低

也許是過去一年中最受關注的JavaScript庫，React聲稱是一個構建用戶界面的JavaScript庫。React側重於MVC開發模式中的View的部分，而且能夠更輕鬆的建立保留狀態的UI組件。他是最早實現虛擬DOM的JavaScript庫之一，它在內存中計算結構的差異而後高效的更新頁面的顯示。

統計中顯示React的使用率並不高，多是由於他被用於應用程序而不是網站。大約38%的開發者聲稱會使用React。

優勢:

文件小, 高效, 性能高, 靈活
組件模型簡單
豐富的文檔和在線資源
支持服務端渲染
目前很流行，而且在告訴發展

缺點:

要學習新的概念和語法
必需要依賴構建工具
可能要求其餘庫或者框架來提供model和controller部分的功能
可能與修改DOM的代碼或者其餘庫不兼容

能夠經過咱們的精品課程學習瞭解更多React，React the ES6 Way。

Lodash and Underscore

Lodash

key	value
類型	庫
官網	lodash.com/
倉庫地址	github.com/lodash/lodash/
最新版本	4.17.4
開發者	John-David Dalton
發佈日期	2012年4月
文件大小	4kb – 24kb min
用途	通用
使用率	低

Underscore

key	value
類型	庫
官網	underscorejs.org/
倉庫地址	github.com/jashkenas/underscore
最新版本	1.8.3
開發者	Jeremy Ashkenas
發佈日期	2009年10月
文件大小	6kb min
用途	通用
使用率	低

Lodash 和 Underscore 在本節中合在了一塊，由於它們都提供了數百個功能性的JavaScript實用程序來擴充原生字符串，數字，數組和其餘原始對象的方法，他們是同一類的庫。他們之間的功能有一些重複，因此你不能也沒必要在同一個項目中同時使用這兩個庫。

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

優勢:

小且簡單
完善的文檔方便學習
和大部分的庫、框架都是兼容的
不擴展內置對象
客戶端和服務端均可以使用

缺點:

只有部分方法支持ES2015和更新的JavaScript版本

AngularJS 1.x

AngularJS

key	value
類型	框架
官網	angularjs.org
倉庫地址	github.com/angular/angular.js
最新版本	1.6.4
開發者	Google
發佈日期	2010年10月
文件大小	144kb
用途	單頁應用
使用率	低

Angular是第一個出如今本文列表中的MVC應用程序框架 。Angular的最流行的版本就是1.x版本，他支持HTML和數據的雙向綁定，並從業務邏輯中解耦DOM的操做。

Angular 1.x 版本仍在發展，儘管版本2（如今是版本4了）已經發布。不理解？往下看…

優勢:

被幾家大公司普遍使用的流行框架
構建現代web應用程序的單一解決方案
MEAN (MongoDB, Express.JS, AngularJS, NodeJS)技術棧的一部分，有大量的文章和教程可供學習

缺點:

相比其餘框架有着陡峭的學習曲線
代碼庫文件很大
沒法直接升級到Angular 2.x版本
儘管是谷歌項目，谷歌彷佛沒有使用它？

Angular 2.x (如今 4.x)

Angular

key	value
類型	框架
官網	angular.io
倉庫地址	github.com/angular/angular.js
最新版本	4.1
開發者	Google
發佈日期	2016年9月
文件大小	450kb min
用途	單頁應用
使用率	低

Angular 2.0 於2016年9月發佈。相比較以前的版本是徹底被重寫了，2.x版本引入了使用TypeScript（須要被編譯爲JavaScript）建立的基於模塊化組件的模型。更加混亂的是，在2017年的3月份發佈了4.0的版本（版本3直接被跳過，爲了不版本語義的問題）。

Angular 2+版本和v1版本之間有着根本的區別。二者互不兼容—— 或者 Google 應該給2+版本另外取一個不一樣的名字!

優勢:

構建現代web應用程序的單一解決方案
仍然是 MEAN 技術棧的一部分，儘管Angular 2+ 教程只有不多的一部分是可用的
TypeScript提供了一些相似於靜態語言（例如：C#、Java）的新特性。

缺點:

相比其餘框架有着陡峭的學習曲線
代碼庫文件很大
沒法從Angular 1.x版本直接升級
與1.x相比，Angular 2.x的使用率相對較低
儘管是谷歌項目，谷歌彷佛沒有使用它？

Vue.js

key	value
類型	框架
官網	vuejs.org
倉庫地址	github.com/vuejs/vue
最新版本	2.0
開發者	Evan You
發佈日期	2014年2月
文件大小	19kb min
用途	單頁應用
使用率	低

Vue.js是一個用於構建用戶界面的輕量級漸進式框架。Vue.js的核心是提供一個相似於React的虛擬DOM服務於視圖層，他不只能夠獨立的構建一個完整的單頁面應用，也能夠與其餘庫集成使用。該框架是由以前在AngularJS工做過的尤雨溪建立的。

Vue.js使用HTML模板的語法綁定DOM實例數據。模型就是普通的JavaScript對象，當數據被改變時，它會自動更新視圖。另外還提供了Vue.js生態工具，其中包括：腳手架（scaffolding）、路由（routing）、狀態管理（state management）、動畫（animations）等。

優勢:

快速發展普及，而且日益流行
很容易開發出高質量的項目，讓開發者頗有成就感
依賴性小，性能好

缺點:

新項目使用Vuejs——可能存在很大風險
依賴於單個開發者（目前此項目是尤小右一我的開發）的更新
相較於其餘框架，Vuejs的教程資源很少

Backbone.js

key	value
類型	框架
官網	backbonejs.org
倉庫地址	github.com/jashkenas/backbone/
最新版本	1.3.3
開發者	Jeremy Ashkenas
發佈日期	2010年10月
文件大小	8kb min
用途	單頁應用
使用率	低

Backbone.js是提供在服務器端框架中常見的MVC結構的最先的客戶端選項之一。Backbone.js只有Underscore.js一個依賴，並且Backbone.js和Underscore.js都是出自同一個開發者之手。

Backbone.js自稱是一個庫，由於他能夠與其餘項目集成。我猜大部分人都把他當作一個框架，儘管不像其餘人認爲的那樣。

優勢:

小, 輕量，簡單
不在HTML中添加業務邏輯
完善的文檔
不少應用程序使用，如：Trello, WordPress.com, LinkedIn 和 Groupon 等

缺點:

相較於其餘框架（如AngularJS）它的抽象級別很低（儘管這被看作一種優點）
須要依賴其餘組件來實現一些功能，例如：數據綁定功能
目前愈來愈多的框架已經再也不採用MVC結構了

Ember.js

key	value
類型	框架
官網	emberjs.com
倉庫地址	github.com/emberjs/ember.js
最新版本	2.15.0
開發者	Ember team
發佈日期	2011年12月
文件大小	95kb min
用途	單頁應用
使用率	低

Ember.js基於 Model-View-ViewModel (MVVM)模式最有異議的框架之一。他在單個包中實現了模板、數據綁定和庫。他的「約定優於配置」的概念對於Ruby on Rails 的使用者來講一點都不陌生。

優勢:

爲客戶端應用程序構建提供了單一的解決方案
開發者可以很快的上手開發程序並投入生產——它依賴於Jquery
良好的向後兼容和升級選項
採用了現代web開發的標準

缺點:

大量可分發（large distributable）
和那些朝着小組件結構的方向發展的框架相比他是龐大笨重的
陡峭的學習曲線——這是Ember學習的方法或者沒有方法學習

Knockout.js

key	value
類型	框架
官網	knockoutjs.com](http://knockoutjs.com))
倉庫地址	github.com/knockout/knockout
最新版本	3.4.2
開發者	Steve Sanderson
發佈日期	2010年7月
文件大小	59kb min
用途	單頁應用
使用率	低

一個較老的MVVM框架，Knockout.js採用觀察者模式去確保UI與底層數據是保持同步的。他的特性是：模板化和依賴追蹤。

優勢:

小，輕量，並且沒有依賴
優秀的瀏覽器支持（那怕是IE6）
完善的文檔

缺點:

大項目將會變得混亂複雜
發展很緩慢
使用率在縮水

其餘值得關注的

渴望更多？下面的這些項目雖然不是很流行可是很值得關注：

Polymer – 可以跨瀏覽器支持HTML5 web組件的庫。
Meteor – 一個用於web應用程序的全棧平臺。
Aurelia – 一個較新的，輕量級的，跨平臺的框架。
Svelte – 一個很是新的項目，這個項目能夠把框架的源碼解壓縮並格式化爲顯示友好的JavaScript。
Conditioner.js – 一個基於狀態自動決定加載或者卸載模塊的庫。

工具: 通用自動構建工具

構建工具能夠自動構建各類web開發任務，好比：預編譯、編譯、圖像壓縮優化、代碼壓縮、代碼校驗以及運行測試等。而且能夠在單一可執行的文件中管理所需的任務。最經常使用的工具以下所列：

Gulp.js

key	value
官網	gulpjs.com
倉庫地址	github.com/gulpjs/gulp
最新版本	3.9.1
月下載量	300萬

Gulp.js並非第一個自動構建工具，但他很快變成了最流行的，他也是我我的最喜歡用的。Gulp使用易於閱讀的JavaScript代碼，將源文件加載到流中，並在將數據輸出到構建文件夾以前經過各類插件管道處理數據。它簡單、快速、有趣——Gulp.js和以前任何一個可選項比較你都會發現這些特色（examine Gulp.js before any other option）。

npm

key	value
官網	npmjs.com
倉庫地址	github.com/npm/npm
最新版本	4.5.0
月下載量	300萬

npm是Node.js的包管理工具，可是他的腳本工具能夠被用於通用的自動構建工具。對於一個沒有不少依賴的簡單項目來講這是一個不錯的選擇。可是，用於很複雜的任務你會很快發現這是不現實的。

Grunt

key	value
官網	gruntjs.com
倉庫地址	github.com/gruntjs/grunt
最新版本	1.0.1
月下載量	200萬

Grunt是第一個實現批量處理的JavaScript任務自動構建工具之一，可是他的構建速度的瓶頸和複雜的JSON配置致使了Gulp的快速發展。如今最糟糕的問題已經被解決了，Grunt仍然是一個很好的工具可供選擇。

工具:模塊打包工具

管理愈來愈多的JavaScript文件將很快變成一個苦差事。通常狀況下，瀏覽器加載文件是不會被編譯的，因此文件之間的依賴關係必須經過合適的文件加載順序來保證。處理這種順序的方式有不少，好比： ES6 Modules 和 CommonJS，可是瀏覽器支持的限制，模塊打包工具變得必不可少。

Webpack

key	value
官網	webpack.js.org
倉庫地址	github.com/webpack/webpack
最新版本	2.5.1
月下載量	600萬

Webpack支持全部流行的模塊配置，並已成爲React開發的代名詞。雖然Webpack聲稱是模塊打包工具，Webpack也能夠用於通用的自動構建工具。

Browserify

key	value
官網	browserify.org
倉庫地址	github.com/substack/node-browserify
最新版本	14.3.0
月下載量	260萬

Browserify可讓你使用Node.js的CommonJS模塊方式來組織你的JavaScript代碼，經過編譯將全部模塊打包在一個瀏覽器兼容的文件中。

RequireJS

key	value
官網	requirejs.org
倉庫地址	github.com/jrburke/r.js
最新版本	2.3.3
月下載量	100萬

RequireJS是一個在瀏覽器端（客戶端）的模塊加載器，儘管他也能被用於Node.js端（服務端）。

工具: 代碼校驗工具

「代碼校驗工具（Linting）」會分析你的代碼，檢測代碼中潛在的錯誤和不規範的語法結構。這樣你的代碼中就不會再出現缺乏括號或者未聲明的變量這樣的錯誤。

ESLint

key	value
官網	eslint.org
倉庫地址	github.com/eslint/eslint
最新版本	3.19.0
月下載量	600萬

ESLint是一個可插拔的代碼校驗工具。每個校驗規則都是一個插件來實現，因此他能夠靈活配置成你所須要的樣子。

JSHint

key	value
官網	jshint.com
倉庫地址	github.com/jshint/jshint
最新版本	2.9.4
月下載量	200萬

一個靈活的JavaScript代碼校驗工具，他能夠很好的在真正的錯誤和嚴格的語法要求之間取得很好的平衡（既能夠發現代碼中的錯誤，又不至於嚴格的按照死板的語法標準來校驗代碼）。JSHint是我我的最喜歡用的一個校驗工具。

JSLint

key	value
官網	jslint.com
倉庫地址	github.com/reid/node-jslint
最新版本	0.10.3
月下載量	5萬

這是最早實現一套嚴格默認規則的代碼校驗工具之一，可是這對於我是使用場景貌似不太一致（我不喜歡使用這個工具）。

工具: 測試工具

TDD（測試驅動開發）須要你先編寫測試代碼（用來測試業務代碼），而後再開始寫業務代碼。固然若是你能編寫代碼去測試你的測試代碼那就更好了。

這樣的工具你會有不少選擇，好比：Ava, Tape 和 Jest ，可是最流行的三個以下所列：

Mocha

key	value
官網	mochajs.org
倉庫地址	github.com/mochajs/mocha
最新版本	3.3.0
月下載量	500萬

Mocha是一個既能夠在Node.js運行也能夠在瀏覽器運行的JavaScript測試框架。Mocha支持異步的測試方式，他一般和Chai一塊兒使用，爲了使測試代碼可以以一種可讀的方式被表示。

Jasmine

key	value
官網	jasmine.github.io
倉庫地址	github.com/jasmine/jasmine-npm
最新版本	2.6.0
月下載量	200萬

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

QUnit

key	value
官網	https://qunitjs.com/
倉庫地址	github.com/kof/node-qunit
最新版本	1.0.0
月下載量	2.5萬

毫無疑問，QUnit是一個單元測試框架，他能夠在傳遞特定參數時檢查函數結果。它還將反饋測試覆蓋率，以確保您沒有遺漏特定的代碼分支。

工具:其餘

儘管我盡了很大的努力，我仍是接受有人不喜歡JavaScript！也許編譯器好比：TypeScript, LiveScript 和 CoffeeScript可以讓你的開發生活變得有趣一點。另外，現代的轉換工具Babel可以將簡潔的 ES2015代碼轉換爲瀏覽器兼容的ES5代碼，也許又會讓你有更多的樂趣。

市面上如今存在幾十個JavaScript驅動的HTML模板引擎，好比：Mustache, Handlebars, Pug (Jade) 和 EJS。我比較傾向於選擇使用保持JavaScript語法的輕量模板，好比：EJS 和 doT。

最後, 能自動生成文檔的時候誰會願意本身手動的去寫呢？ES2015兼容的文檔生成器有： ESDoc, JSDoc, YUIdoc, documentation.js 和 Transcription。