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。

总结和推荐

版权声明

本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整连接。要获取包含以上信息的本文Markdown源文本，请点击这里。