值得收藏!最佳JavaScript框架，库和工具

JavaScript的框架、库和工具的冒出似乎有点超出大家的想象，截止到2017年5月，在GitHub上搜索JavaScript项目，你会发现其已经超过了110万；npmjs.org上有50万个可用的软件包，每月下载量近100亿次。

为了帮助大家更好地选择JavaScript框架、库和工具，本文将对流行的框架、库和工具进行一些对比，但是由于篇幅有限，可能并不能包含到所有的框架、库和工具，所以欢迎大家在下方补充评论，共同学习进步。

为了让大家的讨论在共同的水平线上，首先我们先来确定一下框架、库和工具的概念。可能每个人对于这三者都有自己的理解，但是本文是基于以下的概念来进行讨论的。

库

库是有用功能的有组织的集合。库的典型功能包括处理字符串、日期、HTML DOM元素、事件、Cookie、动画、网络请求等。每个函数将值返回给调用应用程序，但是你可以从中选择参数来应用。如果用汽车来做比喻，那就是你可以任意使用所有的零部件来搭建汽车，但是你必须自行构建引擎。

库通常是提供一个更高的抽象层，平滑的实现细节和矛盾。例如，Ajax通常依赖于XMLHttpRequest API，但是由于各浏览器之间的差异，你可能需要修改几行代码来实现。但是库可以提供一个更简单的ajax()函数，让程序员更专注于高层次的业务逻辑。

因为库不必在意更多的细节，所以开发时间可能会缩短20%，但是它也不是没有缺点的：

• 库内的错误可能难以定位和修复

• 开发团队不能保证快速发布补丁

• 修补程序可能会更改API，并对您的代码进行重大更改。

框架

框架是一个应用程序的骨架，它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。 通常框架提供事件、存储和数据绑定等功能。 如果我们还是用汽车了来做类比，那么框架就是一辆车的底盘、车身和发动机，为了让车辆始终保持运行状态，你可以添加、删除或修改某些组件。

框架通常会提供比库更高的抽象层，并且帮助用户快速构建项目的08%，但它的缺点是：

• 如果应用程序超出了框架的范围，那么剩下的20%可能会很难完成；

• 框架更新可能很困难 ；

• 框架核心代码和概念很少更新，但是同样的事情，程序员往往都会在短时间内发现一个更好的解决方式；

工具

工具有助于开发，但并不是项目的组成部分。 工具包括系统构建，编译器， transpilers，代码分割器，图像压缩器等。

工具的应用使得开发过程变得更加容易，例如很多程序员都喜欢将Sass to CSS，因为它提供了代码分离，嵌套，渲染时间变量，循环和函数。 浏览器不了解Sass / SCSS语法，因此在测试和部署之前，必须使用适当的工具将代码编译为CSS。

JavaScript框架和库

jQuery

jQuery是最常用的JavaScript库，它革命性的在客户端开发，将CSS选择器引入到DOM节点检索加链接来应用事件处理程序、动画和Ajax调用。jQuery近年来备受青睐，对于一个很需要JavaScript功能的项目来说，jQuery绝对是一个可行的选择。

优点：

• 分布规模小；

• 学习曲线平缓，在线帮助多；

• 语法简洁；

• 容易延伸；

缺点：

• 增加了本机API的速度开销

• 浏览器兼容性的改善降低了它的重要性；

• 用法扁平

• 有些行业反馈有很多不必要的使用。

React

React可能是去年一年最受关注的库了吧。React声称是一个用于构建用户界面的JavaScript库，它专注于MVC开发的“View”部分，并且可以轻松创建保留状态的UI组件。 它是实现虚拟DOM的第一个库， 内存结构计算差异，有效地更新页面。

从使用情况来看，React的情况似乎有些不好，但这是因为它是在应用程序中使用而不是网站，38%的程序员表示他们正在使用该库。

优点：

• 小巧，高效，快捷灵活；

• 简单的组件模型；

• 良好的文档和在线资源；

• 服务器端渲染；

• 处于高速发展期；

缺点：

• 需要学习新的概念和语法；

• 构建工具必不可少；

• 要求其他库或框架提供Model和Control；

• 与修改DOM的代码和其他库不兼容；

Lodash and Underscore

Lodash和Underscore提供了数百个功能性的JavaScript实用程序来补充本地字符串，数字，数组和其他原始对象方法。 它在客户端使用率较低，但是可以在服务器端的Node.js应用程序中使用很频繁。

优点：

• 小而简单；

• 拥有优质文档，易于学习；

• 与大多数库和框架兼容；

• 不扩展内置对象；

• 可以在客户端或服务器上使用；

缺点：

• 有些方法只适用于ES2015及更高版本的JavaScript。

AngularJS 1.x

Angular最流行的版本是1.x版本，它使用双向数据绑定扩展HTML，同时将DOM操作与应用程序逻辑脱钩。尽管版本2已经发布（当然现在已经到了版本4），但是Angular 1.x仍在开发中。

优点：

• 众多大公司采用；

• 以单一的解决方案来生产现代Web应用程序；

• 一个解决方案来生产现代Web应用程序；

• MEAN堆栈（MongoDB，Express.JS，AngularJS，NodeJS），有众多文档和教程可用来参考；

缺点：

• 学习曲线更加陡峭；

• 大代码库

• 不能升级到Angular 2.x

Angular 2.x (now 4.x)

Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript（被编译为JavaScript）创建的基于模块化组件的模型。 Angular 4.0版本于2017年3月发布。

Angular2+和1.0版本截然不同，与其他也不兼容，所以也许谷歌应该给该项目另外起一个名字。

优点：

• 单一的解决方案来生产现代Web应用程序；

• 尽管Angular 2+的可用文档较少，但它仍是MEAN堆栈的一部分；

• 对于熟悉静态类型语言（如C＃和Java）的人员，TypeScript提供了一些优势。

缺点：

• 更陡峭的学习曲线；

• 大代码库；

• 不能从Angular 1.x升级；

• 与1.x相比，Angular 2.x的使用率相对较低；

• 尽管是Google的项目，但Google似乎并没有使用它？

Vue.js

Vue.js是一个用于构建用户界面的轻量级渐进框架。 该核心提供了一个React-like 的虚拟 DOM-powered层，它可以与其他库集成，也可以支持单页应用程序。

Vue.js使用HTML模板语法将DOM绑定到实例数据。 模型是在更改数据时更新视图的纯JavaScript对象。 附加工具提供了scaffolding，路由，状态管理，动画等功能。

优点：

• 易于上手，普及度高；

• 起点简单，但完成满意度高；

• 依赖性小，性能好；

缺点：

• 是一个新项目，所以风险可能会很大；

• 依赖开发人员来更新；

• 相对同类框架，资源较少；

Backbone.js

Backbone.js是提供常见的服务器端框架MVC结构最早的客户端选项之一，它唯一的依赖是由同一开发人员创建的Underscore.js。

Backbone.js声称是一个库，因为它可以与其他项目集成，但我认为大多数程序员都认为它是一个框架。

优点：

• 体积小，重量轻，复杂度低；

• 不添加HTML的逻辑；

• 文档丰富；

• 采用了许多应用，包括Trello，WordPress.com，LinkedIn和Groupon；

缺点：

• 与AngularJS等相比，抽象度较低；

• 需要额外的组件来实现数据绑定等功能；

• 新的框架基本已经不再采用MVC架构；

Ember.js

Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。 它在单个包中实现模板化，数据绑定和库。如果 Ruby on Rails体验的用户，能够迅速熟悉其配置概念。

优点：

• 为客户端应用程序提供单一解决方案；

• 程序员可以快速开发—其使用jQuery；

• 良好的向后兼容性和升级选项；

• 采用了现代Web开发标准；

缺点：

• 与其他正在向较小组件结构移动的框架相比，被认为是单一的；

• 陡峭的学习曲线 ；

Knockout.js

较早的MVVM框架之一，Knockout.js使用观察者来确保UI与底层数据保持同步，它具有模板和依赖关系跟踪。

优点：

• 小而轻便，无依赖

• 支持回溯到IE6

• 优质文档；

缺点：

• 较大的项目可能变得复杂；

• 发展速度已经放缓；

• 使用情况正在下降；

值得注意，下面这些项目虽然不如上面的受欢迎，但还是值得一试的：

Polymer- 可以跨浏览器支持HTML5网页组件的库

Meteor - 一个用于Web应用程序的全栈平台。

Aurelia - 一种相对较新的，轻量级的跨平台框架

Svelte - 一个将框架源代码转换为JavaScript的新项目

Conditioner.js - 一个基于状态自动加载和卸载模块的库。

工具：General-Purpose Task Runners

构建工具可以自动执行各种Web开发任务，例如预处理，编译，优化图像，缩小代码，运行测试等等。所有的任务都可以在一个可执行包中管理，比较受欢迎的工具包括：

Gulp.js

Gulp虽然不是第一个工具，但是它是最受欢迎的工具，Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前通过各种插件管理数据。

npm

npm是Node.js包管理器，但其脚本工具可用于运行通用任务。 对于具有很少依赖关系的简单项目来说，这是一个有吸引力的选择，但是对于复杂的任务来说，它可能就有些有心无力。

Grunt

Grunt是第一个实现批量采用的JavaScript任务的工具，但其速度和复杂的JSON配置，使得Gulp异军突起。如今，这些问题解决了，Grunt仍然是一个不错的选择。

工具：Module Bundlers

多个JavaScript文件的管理成为了程序员们的烦恼，在默认情况下，浏览器文件未被编译，因此依赖关系必须以适当的顺序加载或连接。虽然有各种选项，如ES6模块和CommonJS，但浏览器支持毕竟是有限的，因此Module Bundlers就变得至关重要。

Webpack

Webpack支持所有流行的模块选项，并已成为React开发的代名词。 虽然它声称是一个Module Bundlers，但是也可以用作通用任务运行程序。

Browserify

Browserify支持Node.js使用的CommonJS模块，将所有模块编译成单个浏览器兼容的文件。

RequireJS

RequireJS是一种浏览器中的模块加载器，它也可以在Node.js中使用。

Tools: Linting

“Linting”是分析你的代码的潜在错误或偏离语法标准。 有了这种工具，你永远不出现只有一半括号或者未声明变量的情况。

ESLint

ESLint是一种可插拔的Linting工具，每个规则都是一个插件，因此可以根据您的喜好进行配置。

JSHint

一个灵活的JavaScript linter，在真正的错误和迂腐的语法需求之间取得了很好的平衡！

JSLint

JSLint是最早的Linter之一，遵循一套严格的默认规则。

Tools: Test Suites

在应用程序的编写过程中有一个很重要的步骤那就是代码测试。代码测试的工具有很多，如Ava、Tape和Jest。下面，我们就为大家介绍最受欢迎的三个选择：

Mocha

Mocha是一个JavaScript测试框架，可以在Node.js或浏览器中运行测试。 它支持异步测试，并且经常与Chai配对，以使测试代码能够以可读取的方式表达。

Jasmine

Jasmine是一个行为驱动的测试套件，可以在浏览器中自动测试您的UI和交互。

QUnit

QUnit是一个单元测试框架，可以通过特定参数检查函数结果。

Tools: Miscellaneous

虽然JavaScript比较常见常用，但是也并不是每个程序员都喜欢JavaScript，例如TypeScript，LiveScript和CoffeeScrip这些也可以使得程序员的开发过程很愉快。

JavaScript-powered HTML的引擎模板有数十种，其中包括Mustache，Handlebars，Pug（Jade）和EJS。但在我而言， 更喜欢保留JavaScript语法（如EJS和doT）的轻量级选项。

如何自己来编写文档呢？ES2015兼容的文档生成器包括ESDoc，JSDoc，YUIdoc，documentation.js和Transcription。

写在最后

如果你想要走在技术的前端，那么React以及和其相关的技术发展方向值得关注。如果你想要为Web应用程序选择一个安全的选项，那么你可以考虑Vue.js。

虽然整体框架现在不再那么受欢迎，但是如果你是要做严格的大型项目结构，AngularJS会是一个不错的选择。虽然，现在大多数人还在使用1.0版本，但是从长远来看，学习一下TypeScript，选择4.0版本会更加安全。

jQuery虽然在技术新闻中很少被提到，但是它的学习曲线平缓，几乎所有的程序员都可以理解，而且它现在还在积极开发。

工具的选择会因项目而异，但是不可否认，大多数项目都会选择Gulp和WebPack。每个项目和团队的技能都是不同的，所以你在选择的时候要在有限时间内准确评估。

最后，永远不要忘记库，框架和工具是可选的！ JavaScript在过去的十年中发生了革命性的变化，几乎每隔几个月都会有热门框架的出现，所以很容易就掉进陷阱之中。所以，在选择时，就要考虑自己的实际需求，也要积极学习新的知识。