 JavaScript框架，库和工具似乎比他们的开发人员多出很多。截至2017年5月，在 GitHub 上快速搜索 JavaScript 项目显示已经超过110万个。 npmjs.org 有 50 万个可用的软件包，每月下载量近100亿次。
本文将努力解释最流行的客户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说是否是 “最好的” 选择是另一个问题。选择一些东西，坚持一段时间。你需要知道的是：你最喜欢的选项终将被“更好”的东西取代，无论你选择什么！ 在阅读本文之前请接受以下术语和情况…！
棘手的术语术语“framework(框架)”，“library(库)”和“tool(工具)” 可以根据情境，在不同时期，对不同的人，意味着不同的东西。这里使用的一般定义如下： Libraries(库)库是有用功能的有组织的集合。一个库的典型功能包括处理字符串、日期、HTML DOM元素、事件、Cookie、动画、网络请求等等。每个函数都将值返回给调用应用程序，该应用程序可以在您选择的情况下实现。你可以把它想象成汽车零件的选择：你可以自由地使用任何零件来建造一辆能跑的车，但是你必须自己造一个引擎。 库通常是提供一个更高的抽象层，平滑的实现细节和矛盾。例如，Ajax通常依赖于 XMLHttpRequest API ，但这需要几行代码，并且在不同的浏览器之间存在细微的差异。但是库可以提供一个更简单的 一个库可以将开发时间缩短20%，因为您不必担心细节问题。但是它也不是没有缺点的：
Frameworks(框架)框架是一个应用程序的骨架。它要求您以一种特定的方式来处理软件设计，，并在某些点插入您自己的逻辑。通常为您提供诸如事件、存储和数据绑定之类的功能。使用汽车类比，那么框架提供了一辆车的底盘，车身和发动机。 为了让车辆始终保持运行状态，你可以添加、删除或修改某些组件。 框架通常比库提供更高的抽象层，并且可以帮助您快速构建项目的 80%。但它的缺点是：
Tools(工具)工具有助于开发，但不是项目的一个组成部分。工具包括系统构建、编译器、转译器、代码压缩、图像压缩、部署机制等等。 工具应该提供一个更容易的开发过程。 例如，许多程序员喜欢用 Sass 编译成CSS，因为它提供了代码分离，嵌套，渲染时变量，循环和函数。 浏览器不了解 Sass / SCSS 语法，因此在测试和部署之前，必须使用适当的工具将代码编译为 CSS。 不要去标记项目类型库，框架和工具之间的区别很少。框架可以包括一个库。库可以实施类似框架的方法。对于前面二者来说，工具又是必不可少的。 我试图标记每个提到的项目，看看他们属于库，框架还是工具，但尺度不同，标记的类型也可能会有所不同。 如果这听起来太复杂，可以考虑编写 vanilla JavaScript。没关系，但是您将不可避免地编写自己的库 和/或 框架代码。JavaScript 本身就是一种浏览器和操作系统抽象塔的抽象！ JavaScript 框架和库项目根据流行度排序… jQuery
jQuery 仍然是最常用的 JavaScript 库，WordPress，ASP.NET和其他几个框架的创建和分发都依赖于它。它彻底改变了客户端的开发，将 CSS 选择器引入到 DOM 节点检索加链接来应用事件处理程序、动画和Ajax调用。 虽然 jQuery 最近几年失宠，但对于需要少量 JavaScript 功能的项目来说，它仍然是一个可行的选择。 优点：
缺点：
React
React 也许是过去一年里最受关注的库了吧。React 是一个用于构建用户界面的 JavaScript 库，它专注于 MVC 模式(Model-View-Controller) 的 “View” 部分，并且可以轻松创建保留状态的 UI 组件。 它是实现虚拟 DOM 的第一个库， 内存结构计算差异，有效地更新页面。 从统计数据中看，反应的使用似乎很低，可能是因为它更多的在应用程序中使用，而不是网站上使用。38%的程序员表示他们正在使用该库(愚人码头注：译文)。 优点：
缺点：
Lodash 和 Underscore
本节将 Lodash 和 Underscore 放在一起，因为它们提供了数百个功能性的 JavaScript 实用程序来补充原生字符串，数字，数组和其他原始对象的方法。二者有一些功能性的重叠，所以你不太可能在一个项目中同事需要这两个库。 它在客户端使用率似乎很低，但是可以在服务器端的 Node.js 应用程序中使用这两个库。 优点：
缺点：
AngularJS 1.x
在这个列表中，Angular是第一个框架（或MVC应用程序框架）。最流行的版本是 1.x 版本，它使用双向数据绑定扩展 HTML ，同时将 DOM 操作与应用程序逻辑分离 。 尽管版本2（现在是版本4！）已经发布，Angular 1.x仍在开发中。 见下文… 优点：
缺点：
Angular 2.x (现在是 4.x)
Angular 2.0 于 2016 年 9 月发布。这是一次完全的重写，它引入了基于模块化组件的模型，使用 TypeScript（被编译为JavaScript ）创建。让人困惑的是，版本 4.0 于 2017 年 3 月发布（ v3 被跳过以避免语义版本的问题）。 Angular 2+ 与 v1 截然不同。与其他也不兼容 – 也许 Google 应该给该项目另外起一个名字。 优点：
缺点：
Vue.js
Vue.js 是一个用于构建用户界面的轻量级渐进式框架。core(核心) 提供了一个类似于 React 的虚拟 DOM 视图层，它可以与其他库集成，但它也能支持单页应用程序。该框架由以前在 AngularJS 工作过的 Evan You 创建，所以该框架提取了 AngularJS 中作者喜欢的部分。 Vue.js 使用 HTML 模板语法将 DOM 绑定到实例数据。模型是在更改数据时更新视图的纯 JavaScript 对象。附加工具提供了脚手架，路由，状态管理，动画等功能。 优点：
缺点：
Backbone.js
Backbone.js 是提供常见的服务器端框架MVC结构最早的客户端选项之一，它唯一的依赖是由同一开发人员创建的 Underscore.js 。 Backbone.js 声称是一个库，因为它可以与其他项目集成，但我认为大多数程序员都认为它是一个框架。 优点：
缺点：
Ember.js
Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。 它在单个包中实现模板化，数据绑定和库。如果 Ruby on Rails体验的用户，能够迅速熟悉其配置概念。 优点：
缺点：
Knockout.js
较早的MVVM框架之一，Knockout.js 使用观察者来确保 UI 与底层数据保持同步。它具有模板和依赖关系跟踪。 优点：
缺点：
值得注意的项目如果你希望了解更多项目？以下项目不太受欢迎，但值得考虑：
Tools(工具)：通用的任务执行工具构建工具可自动执行各种 Web 开发任务，例如预处理，编译，优化图像，压缩代码，代码检查，运行测试等。所有的任务都可以在一个可执行包中管理，最受欢迎的选择包括： Gulp.js
Gulp 虽然它不是第一个任务执行工具，但它很快就成为了最受欢迎的工具，也是我个人最喜欢的任务执行器。Gulp 使用易读的 JavaScript 代码，它将源文件加载到一个流中，并通过各种插件将数据输出到构建文件夹中。这是一种简单、快速和有趣的方式，所以我把 Gulp.js 放在其他工具选项之前。 npm
npm 是 Node.js 包管理器，但是它的 scripts 功能可以用于通用的任务执行。对于那些没有多少依赖性的简单项目来说，这是一个很不错的选择。然而，对于复杂的任务来说，它可能就有些力不从心。 Grunt
Grunt 是第一个实现批量执行的 JavaScript 任务执行器，但速度和复杂的JSON配置导致了 Gulp 的崛起。现在，最糟糕的问题已经解决，Grunt 仍然是一个不错的选择。 Tools(工具)：模块打包工具管理多个 JavaScript 文件是一件繁琐的事情。在默认情况下，浏览器文件未被编译，因此依赖关系必须以适当的顺序加载或连接。 Webpack
Webpack 支持所有流行的模块选项，并成为 React 开发的代名词。尽管他声称自己是一个模块打包工具，但是 Webpack 可以作为一个通用的任务执行工具使用。 Browserify
Browserify 支持 Node.js 使用的 CommonJS 模块，将所有模块编译成单个浏览器兼容的文件。 RequireJS
RequireJS 是一个浏览器中的模块加载器，它也可以在Node.js中使用。 Tools(工具)：代码检查工具(Linting)
“Linting” 是分析你的代码中潜在错误 或 偏离语法标准的隐患。有了这种工具，你永远不会遗漏一个结束括号 或 未声明一个变量！ ESLint
ESLint 是一种插件式的代码检查工具，每个规则都是一个插件，因此可以根据你的喜好进行配置。 JSHint
一个灵活的 JavaScript 代码检查工具，它能在真正的错误 和 看似错误的语法需求之间找到一个平衡点。JSHint是我个人最喜欢的。 JSLint
这是最先实现一套严格默认规则的代码校验工具之一，但是这对于我是使用场景貌似不太一致（我不喜欢使用这个工具）。 Tools(工具)：测试套件测试驱动开发(Test-Driven-Development) 需要求你在开始编写代码之前，首先编写测试代码来测试你的代码。也欢迎你编写代码来测试你的测试代码！ 代码测试的工具有很多，如 Ava ，Tape 和 Jest，但最流行的三个选项是： Mocha
Mocha 是一个 JavaScript 测试框架，可以在 Node.js 或 浏览器 中运行测试。js或浏览器。它支持异步测试，经常与 Chai 搭配，以使测试代码以一种可读的方式表达。 Jasmine
Jasmine 是一个行为驱动的测试套件，可以在浏览器中自动测试你的UI和交互。 QUnit
毫无疑问，QUnit是一个单元测试框架，它可以在传递特定参数时检查函数结果。它还将报告测试覆盖率，以确保您没有遗漏特定的代码分支。 Tools(工具)：其他测试工具尽管我尽了最大的努力，但我也不是每个人都喜欢 JavaScript ！诸如 TypeScript ，LiveScript 和 CoffeeScript 等编译器可以使你的开发生活更加愉快。或者，考虑一下 Babel 转译工具，它可以将现代的、简洁的 ES2015 源代码转译为跨浏览器兼容的 ES5 代码。 有几十种 JavaScript 驱动的 HTML 模板引擎，包括 Mustache ，Handlebars ，Pug (Jade) 和 EJS 。但就我而言，更喜欢保留 JavaScript 语法(如 EJS 和 doT )的轻量级选项。 最后，当你可以自动化生成文档时，为什么要自己编写呢？与ES2015兼容的文档生成器包括 ESDoc ， JSDoc （JSDoc 中文文档） ，YUIdoc ， documentation.js 和 Transcription 。 总结与建议如果你想跟上在技术的潮流，那么 React 以及和其相关的技术发展方向值得关注。如果你想要为Web应用程序选择一个安全、通用的选项，那么你可以考虑 Vue.js 。 虽然整体框架现在不再那么受欢迎，但是如果你是要做严格的大型项目结构，AngularJS 会是一个不错的选择。虽然，现在大多数人还在使用 1.0 版本，但是可能不是长久之计。从长远来看，学习一下 TypeScript ，选择 4.0 版本会更加安全。 不要贬损 jQuery 。它虽然已经不怎么流行了，在技术媒体上也很少提及，但它还在积极的开发维护，而且完全能够胜任网站和应用程序的开发。jQuery 学习曲线平缓，并且全世界的许多开发人员都可以很好的理解。 如果你敢于冒险，喜欢尝鲜，Svelte 是一个有趣的 客户端/服务器 选项它在构建时预先渲染 JavaScript，并可能改变我们开发的方式。 工具的选择会因项目而异。大多数使用的是 Gulp ，但是 WebPack 越来越受欢迎。你可以用 ESLint 和 Mocha 进行测试，但是有很多其他的选择。 也就是说，每个项目、团队和技能都是不同的。你的评估时间有限，所以你很容易使用你所知道的东西。这篇文章将会接受评论和建议，但是当你有一把锤子的时候，一切看起来都像钉子。 最后，不要忘记库、框架和工具是可选的！在过去的十年中，JavaScript 的开发已经发生了革命性的变化; 我们已经从几个简陋的辅助库选择的时代进入到了一个压倒性的选择的时代。所以很容易陷入日益复杂的陷阱，或者每隔几个月就切换到最新最热框架。对于小型的或简单的任务考虑使用轻量级的 JavaScript 库或框架。在为其他项目选择框架时，现有的知识不会变成无价之宝。 我是否错过了你最喜欢的JavaScript库、框架或工具？我当然有！欢迎评论… 原文链接：https://www./top-javascript-frameworks-libraries-tools-use/ |
|
|
来自： 火骑士大大 > 《JavaScript》
