JS+库+框架+工具
JS+库+框架+工具
要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念：
HTML负责结构，网页想要表达的内容由html书写。
CSS负责样式，网页的美与丑由它来控制
JS负责交互，用户和网页产生的互动由它来控制。
JavaScript框架，库和工具似乎比他们的开发人员多出很多。在2018年底，对GitHub的快速搜索显示了 230 万个JavaScript项目。 npm 已经成为世界上最大的模块系统，在 npmjs.com 上有70万个可用包，每个月下载数十亿。
术语“framework(框架)”，“library(库)”和“tool(工具)” 可以根据情境，在不同时期，对不同的人，意味着不同的东西。这里使用的一般定义如下：
Libraries(库)
库是有用功能的有组织的集合。一个库的典型功能包括处理字符串、日期、HTML DOM元素、事件、Cookie、动画、网络请求等等。每个函数都将值返回给调用应用程序，该应用程序可以在您选择的情况下实现。你可以把它想象成汽车零件的选择：你可以自由地使用任何零件来建造一辆能跑的车，但是你必须自己造一个引擎。
Frameworks(框架)
框架是一个应用程序的骨架。它要求您以一种特定的方式来处理软件设计，，并在某些点插入您自己的逻辑。通常为您提供诸如事件、存储和数据绑定之类的功能。使用汽车类比，那么框架提供了一辆车的底盘，车身和发动机。 为了让车辆始终保持运行状态，你可以添加、删除或修改某些组件。
Tools(工具)
工具有助于开发，但不是项目的一个组成部分。工具包括系统构建、编译器、转译器、代码压缩、图像压缩、部署机制等等。
工具应该提供一个更容易的开发过程。 例如，许多程序员喜欢用 Sass 编译成CSS，因为它提供了代码分离，嵌套，渲染时变量，循环和函数。 浏览器不了解 Sass / SCSS 语法，因此在测试和部署之前，必须使用适当的工具将代码编译为 CSS。
库，框架和工具之间的区别很少。框架可以包括一个库。库可以实施类似框架的方法。对于前面二者来说，工具又是必不可少的。
我试图标记每个提到的项目，看看他们属于库，框架还是工具，但尺度不同，标记的类型也可能会有所不同。
如果这听起来太复杂，可以考虑编写原生 JavaScript。没关系，但是您将不可避免地编写自己的库 和/或 框架代码。JavaScript 本身就是一种浏览器和操作系统抽象塔的抽象！
框架和库
D3: Data-Driven Documents
D3(或D3.js)是一个强大的JavaScript库，可以使用SVG、HTML和CSS等web标准生成交互式可视化。与其他可视化库不同，D3对最终的可视化结果提供了更好的控制。
Bootstrap
Bootstrap，让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件，还有强大的支持JavaScript、jQuery插件以及组件定制等。
Layui
layer是一款口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
Layui官网地址：https://www.layui.com/
Element-Ul
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。适合于Vue的UI框架；
官网地址：http://element-cn.eleme.io/#/zh-CN
Mint UI
Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库，Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
官网地址：http://mint-ui.github.io/
jQuery
jQuery 仍然是最常用的 JavaScript 库，WordPress，ASP.NET和其他几个框架的创建和分发都依赖于它。它彻底改变了客户端的开发，将 CSS 选择器引入到 DOM 节点检索加链接来应用事件处理程序、动画和Ajax调用。虽然 jQuery 最近几年失宠，但对于需要少量 JavaScript 功能的项目来说，它仍然是一个可行的选择。
React
React 也许是过去一年里最受关注的库了吧。React 是一个用于构建用户界面的 JavaScript 库，它专注于 MVC 模式(Model-View-Controller) 的 “View” 部分，并且可以轻松创建保留状态的 UI 组件。 它是实现虚拟 DOM 的第一个库， 内存结构计算差异，有效地更新页面。
从统计数据中看，反应的使用似乎很低，可能是因为它更多的在应用程序中使用，而不是网站上使用。70%的程序员表示他们正在使用该库。
Angular
Angular是第一个框架（或MVC应用程序框架）。最流行的版本是 1.x 版本，它使用双向数据绑定扩展 HTML ，同时将 DOM 操作与应用程序逻辑分离 。
尽管版本2（现在是版本7！）已经发布，Angular 1.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 对象。附加工具提供了脚手架，路由，状态管理，动画等功能。
Est.js
Ext JS是从YUI-Ext演化而来的，它是这个列表中历史最悠久的一个。尽管Ext JS以其广泛的可配置、可访问、跨浏览器的UI组件和数据可视化工具而闻名，但它也提供了构建完整应用程序的框架。或者，您可以使用React或Angular的组件库。
Ext JS是这里提供商业培训和支持的唯一框架。 Sencha团队还可以帮助您查看代码，自动化测试以及迁移到其他平台。
Lodash+Underscore
本节将 Lodash 和 Underscore 放在一起，因为它们提供了数百个功能性的 JavaScript 实用程序来补充原生字符串，数字，数组和其他原始对象的方法。二者有一些功能性的重叠，所以你不太可能在一个项目中同事需要这两个库。
它在客户端使用率似乎很低，但是可以在服务器端的 Node.js 应用程序中使用这两个库。
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 与底层数据保持同步。它具有模板和依赖关系跟踪。
MeteorJS
MeteorJS 发布于2012年，涵盖了开发周期的所有阶段，包括后端开发、前端开发、数据库管理。它是一个由NodeJS编写的开源框架。MeteorJS是一个简单和容易理解的框架，所有的包和框架都可以轻松使用。代码层的所有改变能够立即更新到UI界面，服务端和客户端都只需要用javascript开发。他主要用于IKEA和马自达等公司的实时应用开发。不建议用于大型或复杂的程序。
Tools(工具)：通用的任务执行工具
构建工具可自动执行各种 Web 开发任务，例如预处理，编译，优化图像，压缩代码，代码检查，运行测试等。所有的任务都可以在一个可执行包中管理，最受欢迎的选择包括：
Webpack
Webpack 支持所有流行的模块选项，并成为 React 开发的代名词。尽管他声称自己是一个模块打包工具，但是 Webpack 可以作为一个通用的任务执行工具使用。基于JavaScript对象的配置可能有点笨拙。生成器是可用的，但是一些Webpack用户为了更容易的配置和改进的编译时间已经迁移到Parcel 。
Gulp.js
Gulp 虽然它不是第一个任务执行工具，但它很快就成为了最受欢迎的工具。Gulp 使用易读的 JavaScript 代码，它将源文件加载到一个流中，并通过各种插件将数据输出到构建文件夹中。这是一种简单、快速和有趣的方式，所以我把 Gulp.js 放在其他工具选项之前。
npm
npm 是 Node.js 包管理器，但是它的 scripts 功能可以用于通用的任务执行。对于那些没有多少依赖性的简单项目来说，这是一个很不错的选择。然而，对于复杂的任务来说，它可能就有些力不从心。
Grunt
Grunt 是第一个实现批量执行的 JavaScript 任务执行器，但速度和复杂的JSON配置导致了 Gulp 的崛起。现在，最糟糕的问题已经解决，Grunt 仍然是一个不错的选择。
Tools(工具)：模块打包工具
管理多个 JavaScript 文件是一件繁琐的事情。在默认情况下，浏览器文件未被编译，因此依赖关系必须以适当的顺序加载或连接。
虽然有很多选项，如 ES6 Modules 和 CommonJS ，但浏览器支持是有限的，因此模块打包工具变得至关重要。
Browserify
Browserify 支持 Node.js 使用的 CommonJS 模块，将所有模块编译成单个浏览器兼容的文件。
RequireJS
RequireJS 是一个浏览器中的模块加载器，它也可以在Node.js中使用。
Tools(工具)：代码检查工具(Linting)
“Linting” 是分析你的代码中潜在错误 或 偏离语法标准的隐患。有了这种工具，你永远不会遗漏一个结束括号 或 未声明一个变量！
ESLint
ESLint 是一种插件式的代码检查工具，每个规则都是一个插件，因此可以根据你的喜好进行配置。
JSHint
一个灵活的 JavaScript 代码检查工具，它能在真正的错误 和 看似错误的语法需求之间找到一个平衡点。
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 代码。
最后，当你可以自动化生成文档时，为什么要自己编写呢？与ES2015兼容的文档生成器包括 ESDoc ， JSDoc ，YUIdoc ， documentation.js 和 Transcription 。
原文链接：https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/
参考：Top 5 JavaScript Frameworks
参考：5大JavaScript前端框架简介
参考：2019年最佳JavaScript框架,库和工具
参考：你应该了解的基本JavaScript库和框架
参考：github上值得关注的前端项目
参考：awesome-javascript + github
JS+库+框架+工具相关推荐
- IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
- javascript框架库_2019年使用的最佳JavaScript框架，库和工具
javascript框架库 似乎有比开发人员更多JavaScript框架,库和工具. 在2018年底, 在GitHub上的快速搜索显示230万个JavaScript项目. npm已成为全球最大的模块系 ...
- 一系列令人敬畏的.NET核心库，工具，框架和软件
内容 一般 框架,库和工具 API 应用框架 应用模板 身份验证和授权 Blockchain 博特 构建自动化 捆绑和缩小 高速缓存 CMS 代码分析和指标 压缩 编译器,管道工和语言 加密 数据库 ...
- uni-app框架+app端+ethers.js库+以太坊开发+常见错误
uni-app框架常见错误解决方案: app端如果不使用兼容的ethers.js库,uni-app框架会报错: * reportJSException > ...
- 顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...
- html易上手的UI库,LayUI-极易上手拿来即用的前端 UI 框架-工具-站长头条
前端框架和思想一直在不停变化,当前主流的前端框架基本是基于 MVVM 底层的,难免会令一些开发者感到不适应,尤其是对于前端开发较为陌生的后端人员.Layui,重新回到"经典模块化" ...
- 18个我最推荐的Node.js Web框架和工具
Node.js是一个底层平台.为了方便开发者的工作变得简单高效,社区诞生了超过上千个库. 随着时间的推移,有很多优秀的库可以供大家选择,下面是不完全选择列表: ExpressExpressExpres ...
- MV* 框架 与 DOM操作为主 JS库 的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比 案例(MV* 框架 与 DOM操作 JS库 实例对比) 购物车页面 ...
- 使用模块化工具Rollup打包自己开发的JS库
使用模块化工具Rollup打包自己开发的JS库 打包JS库demo项目地址:https://github.com/Miazzy/xdata-utils-btools 背景 最近有个需求,需要为小程序写 ...
最新文章
- PDF数据提取------1.介绍
- 图像滤镜艺术---图像滤镜晕影调节算法研究
- MyBatis魔法堂：ResultMap详解
- Jmeter学习笔记三_操作数据库（MySQL）
- SQLPlus 在连接时通常有四种方式
- (二)流--递归算法
- 最速下降法（梯度下降法）
- latex插入gif_如何将照片和GIF插入Google幻灯片
- CoreJava 笔记总结-第三章 Java的基本程序设计结构
- java 字符串包含某个字符_java中判断字符串中是否包含某个特定字符串的方法有哪些...
- 常用的变量值交换方法总结(C++实现)
- Power BI Desktop中的“提问”功能
- Java网络编程基础
- yum安装docker指定版本
- OKR | 我们的目标是称霸全国！
- C#实例.net_经典例子400个
- absolute 宽度自适应
- shopNC开发手册
- 2022年湖南省临床执业医师考试二单元随机真题
- div的display和visible的区别