轮子已经够多了，不要再造啦 - 前端工具库大全

大家好，我是斌少。

前端开发中，我们会经常遇到一个较为棘手的功能，比如复杂动画、轮播、各种工具函数等，如果每个都要自己去封装，不仅多余、不便于复用，还会让我们需求完成的时间遥遥无期。

好在，业界已经有了非常多已经封装好了的工具库，遵循能用的轮子就不要重复造的原则，我们一起来看看吧！

动画库

Animate.css(推荐)

一个纯粹的CSS动画库，它提供了一系列预定义的CSS类，可以轻松地将动画效果应用到HTML元素上，而无需编写JavaScript代码。

• Github Star: 78.8k
• 适用于简单的动画效果场景
• Vue版本：v-animate-css
• React版本：react-animated-css

Anime.js

是一个基于JavaScript的动画库，它允许您以编程方式创建复杂的动画效果，包括颜色变化、路径动画、缓动函数、循环和更多。

• Github Star: 47.3k
• 适用于更高级、自定义的动画效果，或者需要与用户交互的场景
• Vue版本：vue-animejs
• React版本：react-anime

时间日期处理

Moment

用于解析、验证、操作和格式化日期的 JavaScript 日期库.应该属于前端使用最广的日期处理库了。

• Github Star: 47.5k
• 包含许多本地化数据，例如本地化语言、时区，导致包体积较大
• Vue版本：vue-moment
• React版本：react-moment

Day.js（推荐）

一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，和 Moment.js 的 API 设计保持完全一样。如果你曾经用过 Moment.js ，那么你已经知道如何使用 Day.js 。大有赶超day.js的趋势。

• Github Star: 44.5k
• 更加轻量，性能更好，包体积更小
• Vue版本：vue-moment
• React版本：react-dayjs

函数库

Underscorejs

是一个一致性、模块化、高性能的JavaScript 实用工具库。通俗来说，就是类似于Java中的Hutool、common-lang等一样对Javascript的相关函数做进一步封装，降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单.

• Github Star: 27.1k
• 功能相对较少，适用于小型项目或对功能需求不高的场景

Lodash（推荐）

作为underscore的后继者，对 Underscore 现有 API 功能使用上进行扩充外，在性能上也更为出彩，已成为日常项目开发的标配

• Github Star: 57.8k
• 适用于需要更广泛的功能和性能优化的场景

Ramda

一个只针对函数式范式的库，强调纯函数风格，不变性和无副作用是它的设计核心，这能让你通过简单的优雅的代码来完成工作。如果你喜欢函数式编程风格，你会更喜欢它。

• Github Star: 23.3k
• 适用于强调函数式编程和不可变性的场景，但是理解比较麻烦，有一定学习成本
• 风格示例

import { compose, head, sort, descend, prop } from "ramda";
 
const teams = [
    {name: 'A', score: 5},
    {name: 'B', score: 4},
    {name: 'C', score: 6},
    {name: 'D', score: 2},
 ];
 
const sortByScoreDesc = sort(descend(prop("score")));

模版引擎

pug

一个用JavaScript 实现的高性能的模板引擎，支持Node.js 和浏览器运行环境

• Github Star: 21.4k
• 通常用于服务器端渲染 (SSR) 和 Node.js 环境中
• 风格示例

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5);
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!

handlebars.js

JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。 它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。

• Github Star: 17.4k
• 可以在浏览器端和服务器端都使用，因此适用于各种场景，包括单页面应用和多页面应用
• 风格示例：使用双花括号 {{}} 作为占位符

var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
             "{{kids.length}} kids:</p>" +
             "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);

art-template

是一个简单且超快速的模板引擎，可通过范围预先声明的技术优化模板渲染速度。它实现了接近JavaScript极限的运行时性能。同时，它支持NodeJS和浏览器。

• Github Star: 9.8k
• 适用于追求性能和扩展性，并且需要在不同环境中使用的场景

轮播图

Swiper（推荐）

纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

• Github Star: 37k
• 适用于功能丰富、支持触摸事件、适用于移动端的轮播库，并且有一些复杂的设计需求场景
• Vue版本：vue-awesome-swiper
• React版本：swiper/react，用的较少

Slick

响应式轮播组件库，号称最后一个轮播插件。提供了平滑的过渡效果、自定义的外观和丰富的API选项。它易于使用，适用于各种项目，并且具有良好的文档和活跃的社区支持。

• Github Star: 28.1k
• 适用于只需要一个简单、轻量级的轮播库的场景
• Vue版本：vue-slick
• React版本：react-slick

富文本编辑器

wangeditor-team/wangEditor

开源 Web 富文本编辑器，开箱即用，配置简单。支持 JS Vue React 。

• Github Star: 16.3k
• 适用于需要创建一个具有富文本编辑功能的应用

bytemd

字节出品的Markdown编辑器，虽然star不多，但对于喜欢md风格的人来说，非常的好用，掘金的编辑器就是使用的它。

• Github Star: 50
• 官方持续维护，支持react和vue
• 适用于博客平台、写作工具或技术文档编辑器等场景,建议可以跟wangeditor搭配使用

文件操作

FileSaver.js

在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web 应用程序。

• Github Star: 20.8k

sheetjs

非常受欢迎的用于多种电子表格格式的解析器和编写器

• Github Star: 33.7k

图片懒加载

vue-lazyload

支持vue2的懒加载图片或组件的库，如果是vu3需要使用 vue-lazyload@3.x

• Github Star: 7.9k

react-lazyload

延迟加载react的组件、图像或任何与性能有关的内容。

• Github Star: 5.8k

lazysizes

高性能且 SEO 友好的懒加载库，适用于图像（响应式和普通）、iframe 等。

• Github Star: 17.1k

表单验证器

validator.js

轻量级的JavaScript表单验证，字符串验证。没有依赖，支持UMD，~3kb。

• Github Star: 22k

vee-validate

支持vue的简单、灵活、速度快的表单验证器。

• Github Star: 10.2k

react-hook-form

用于表单状态管理和验证的 React Hooks，支持Web + React Native

• Github Star: 37.3k

页面调试库

vConsole

腾讯出品的轻量、可拓展、针对手机网页的前端开发者调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。

• Github Star: 16.1k
• 支持查看 console 日志、网络请求、页面 element 结构、Cookies 和 localStorage，可以手动执行 JS 命令行和自定义插件。
• 适用于只需要快速查看控制台日志和错误信息场景

Eruda

跟vConsole不相上下的另一个工具，专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版

• Github Star: 16.3k
• 主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie信息、浏览器特性检测等
• 适用于需要更全面的开发工具，以便进行更深入的调试和性能分析场景

手势库

AlloyFinger

针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持

• Github Star: 3.4k

颜色选择器

react-colorful

用于 React 和 Preact 应用程序的小型颜色选择器组件。

• Github Star: 2.8k

vue-color

使用 Vue.js(vue2.0) 用于 Sketch、Photoshop、Chrome 等的颜色选择器。

• Github Star: 2.5k

视频播放器

hls.js

可在支持 MSE 的浏览器中播放 HLS。因为safari只支持hls，如果你的应用是需要考虑兼容ios系统的话，最好使用它。

• Github Star: 13.5k

flv.js

B站出品的HTML5 Flash视频(FLV)播放器，它通过纯JavaScript编写，没有使用Flash。

• Github Star: 22.4k
• 在PC端特别受欢迎

videojs-player

支持vue3和react的视频播放器。

• Github Star: 4.9k

拖拽插件

react-draggable

使用最广泛的react拖拽插件。

• Github Star: 8.5k

Vue.Draggable

基于Sortable.js支持vue2的拖拽插件.如果是vue3需要使用vue.draggable.next

• Github Star: 2.9k

二维码

qrcode.react

react二维码生成器.

• Github Star: 3.5k

qrcode.vue

二维码生成器，支持vue2和vue3.

• Github Star: 594

上传文件插件

vue-upload-component

简单易用的 Vue.js 文件上传组件，提供了多个事件钩子和选项来自定义上传行为。该组件支持单文件和多文件上传，并可通过 AJAX、Fetch、Iframe 和 Axios 等方式发送请求。

• Github Star: 2.6k

react-dropzone

基于 React 的简单易用的HTML5上传文件组件.

• Github Star: 10k

前端国际化

vue-i18n-next

支持vue3的国际化插件，如果是需要支持vue2，需要使用vue-i18n

• Github Star: 1.7k

react-i18next

强大的国际化框架for react /react native,基于 i18next.

• Github Star: 8.6k

数据可视化框架

Echarts

使用 JavaScript 实现的开源前端数据可视化框架，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），应该是国内使用最广泛的数据可视化框架了。

• Github Star: 56.7k
• 适用于需要在快速开发交互性图表的项目中使用，或者不具备深厚的数据可视化开发经验场景
• vue使用vue-echarts
• react使用echarts-for-react

D3

也是非常受欢迎的一款免费、开源 JavaScript 库，用于可视化数据。 其基于 Web 标准构建的低级方法为创作动态、数据驱动的图形提供了无与伦比的灵活性.

• Github Star: 106k
• 适用于需要更高度的自定义、复杂的数据可视化，以及愿意花时间学习和开发场景

图标库

Font-Awesome

是一套绝佳的图标字体库和CSS框架，提供可缩放矢量图标,可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

• Github Star: 72.4k
• 适用于需要大量高质量的图标，并且愿意付费以获取更多的图标和风格选择的场景

Iconfont

国内功能强大且图标内容很丰富的矢量图标库，阿里巴巴出品，并且在官网上可以非常方便的搜索、下载各种格式的图标。

• 适用于需要灵活性更高的自定义图标的场景

数据Mock

Mock.js

一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型

• Github Star: 19.2k
• 适用于希望在本地开发环境中生成假数据，并且更愿意编写自定义模拟数据生成逻辑场景

easy-mock

是一个基于Mock.js实现的可视化、且能快速生成模拟数据的Mock平台。不同的是不用在本地存储文件，直接远程访问接口。接口完成后只需要改变url地址即可。

• 适用于更喜欢在线平台，希望以可视化方式管理模拟API和与团队协作的场景

---

我是斌少，十年经验大厂全栈开发，多年一线leader，分享编程经验、技术干货，帮你少走弯路、快速成长。欢迎 点赞 + 评论，也欢迎添加我个人的公众号，感谢大家！❤️