前端开发者路线图

前端学习之路，记录前端新手成长历程、学习总结、工具汇总，打造开箱即用的学习体验，欢迎点击 issue 推荐/自荐项目。

常用 JavaScript 库汇总

前端因入行门槛低，更新换代很快，每年都会有大量新的框架和库出现，也有大量库被淘汰（比如 JQuery，但学习它的设计思想很有必要）。所以我们大可不必担心，保持自己的学习步伐，按需学习即可。比如说你对移动端比较感兴趣，工作中也刚好涉及到一些技术的应用，那么可以专门研究移动端相关的技术和框架；又或者你对企业后台/中台产品感兴趣，比较喜欢开发 PC 端项目，那么我们可以专门研究这种类型的 JavaScript 库或者框架。接下来笔者也是按照不同前端业务的需求，来整理一份能快速应用到工作中的 JavaScript 库，以提高大家的开发效率。

相关开发者路线图

• React 学习必备
• AI+文档知识库
• 可视化营销工具

更多技术干货和技术社群，请关注公众号 趣谈前端。

JavaScript 项目库

JavaScript 常用工具类

1. lodash 一个一致性、模块化、高性能的 JavaScript 实用工具库。
2. xijs 一款面向复杂业务场景的 JavaScript 工具库
3. ramda 一个很重要的库，提供了许多有用的方法，每个 JavaScript 程序员都应该掌握这个工具
4. day.js 一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，体积只有 2kb
5. big.js 一个小型、快速的 JavaScript 库，用于任意精度的十进制算术运算
6. qs 一个 URL 参数转化（parse 和 stringify）的轻量级 JavaScript 库
7. decimal.js 实现 JavaScript 的任意精度的十进制类型库
8. immutability-helper 改变数据副本而不改变原始来源的 JavaScript 操作库

表单校验

1. Validator.js 一个强大的 JavaScript 表单校验库
2. Validate.js 致力于提供一种验证数据的跨框架和跨语言方式的 JavaScript 库，已通过 100％代码覆盖率的单元测试

DOM 库

1. JQuery 封装了各种 DOM/事件操作，设计思想值得研究借鉴
2. zepto jQuery 的轻量级版本，适合移动端操作
3. fastclick 一个简单易用的库，它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。目的就是在不干扰你目前的逻辑的同时，让你的应用感觉不到延迟，反应更加灵敏。

文件处理

1. file-saver 一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用程序
2. js-xlsx 一个强大的解析和编写Excel文件的库

网络请求

1. Axios 一个基于Promise的HTTP库，可用于Node.js和浏览器上发起HTTP请求，支持所有现代浏览器，甚至包括IE8+
2. Superagent 基于Ajax的优化，可以与Node.js HTTP客户端搭配使用
3. fly.js 一个基于Promise的HTTP请求库，可以用于Node.js、Weex、微信小程序、浏览器、React Native中

动画库

1. Anime.js 一个JavaScript动画库，可以处理CSS属性、单个CSS转换、SVG或任何DOM属性以及JavaScript对象
2. Velocity 一个高效的Javascript动画引擎，与jQuery的$.animate()有相同的API，同时还支持彩色动画、转换、循环、画架、SVG支持和滚动等效果
3. Vivus 一个零依赖的JavaScript动画库，可以让我们用SVG制作动画，使其具有被绘制的外观
4. GreenSock JS 一个JavaScript动画库，用于创建高性能、零依赖、跨浏览器动画，已在超过400万个网站上使用，并且可以在React、Vue、Angular项目中使用
5. Scroll Reveal 零依赖，为Web和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容
6. Kute.js 一个强大高性能且可扩展的原生JavaScript动画引擎，具有跨浏览器动画的基本功能
7. Typed.js 一个轻松实现打字效果的JS插件
8. fullPage.js 一个可轻易创建全屏滚动网站的JS滚动动画库，兼容性无可替代
9. iscroll 移动端使用的一款轻量级滚动插件
10. swiper.js 一款强大的JS跨端触摸滑动插件
11. MixItUp 是用于DOM操作的高性能，无依赖库，使您能够使用精美的动画过滤，排序，添加和删除DOM元素的JS动画库
12. Lottie 一个用于Android、iOS、Web和Windows的库，用于解析使用Bodymovin导出为JSON的Adobe After Effects动画，并在移动设备和网络上呈现它们

鼠标/键盘相关

1. KeyboardJS 一个在浏览器中使用的库（与Node.js兼容）。它使开发人员可以轻松设置键绑定和使用组合键来设置复杂的绑定。
2. SortableJS 功能强大的JavaScript拖拽库

图形/图像处理库

1. html2canvas 一个强大的使用 JavaScript 开发的浏览器网页截图工具
2. dom-to-image 一个可以将任意 DOM 节点转换为用 JavaScript 编写的矢量（SVG）或光栅（PNG 或 JPEG）图像的库
3. pica 一个在浏览器中快速调整图像大小且不会出现像素失真的图片处理库
4. Lena.js 一个轻量级的可以为图像添加各种滤镜的 JavaScript 库
5. Compressor.js 一个使用本地 canvas.toBlob API 进行图像有损压缩的 JavaScript 库
6. Fabric.js 一个易于使用的基于 HTML5 canvas 元素的图片编辑器
7. merge-images 一个将多张图片合并成一张图的 JavaScript 插件
8. cropperjs 一款强大的图片裁切库，支持灵活的图片裁切方式
9. Grade 一个基于图像中的前两种主要颜色生成互补渐变背景的库

可视化

1. chartist 非常轻量的可视化图表库

表单表格

1. x-spreadsheet 一个基于网页的简单易用的表格插件
2. rc-table 高性能可扩展的表格组件库
3. grid.js 支持多框架的高级表格插件

CSS 相关库

1. Bulma 简洁的现代 CSS 框架
2. Materialize 基于 Material Design 的 CSS 框架
3. Pure CSS 轻量级的 CSS 库
4. Tailwind CSS 实用的原子化 CSS 框架

React 相关库

react-cropper-pro | 图片一键上传/裁切/压缩

Vue 相关库

Node.js 相关库

优秀开源项目集合<Badge>学习进阶必备</Badge>

以上这些库不必每一个都去了解和深究，技术都是为业务服务的，所以我们按需使用和学习即可。至于像 React 或者 Vue 这种框架的相关生态，笔者这里就不一一介绍了，官方文档上都有非常详细的生态集，感兴趣的朋友自行了解即可。

合作项目

• Blink - 一款自定义的生成故障艺术动画的组件库
• H5-Dooring | 一个所见即所得的H5编辑器

持续更新

每周定期更新，敬请期待...

技术反馈和交流

微信：beautifulFront

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/87e9ca38-86fe-4104-b72f-92283fcd4183.png" width="180px" />