【IT168 编译】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在过去的十年中发生了革命性的变化，几乎每隔几个月都会有热门框架的出现，所以很容易就掉进陷阱之中。所以，在选择时，就要考虑自己的实际需求，也要积极学习新的知识。