前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • JavaScript
  • 常用工具类
  • 常用框架
  • 表单校验类
  • 图形图像处理
  • 文件处理
  • 动画库
  • 鼠标/键盘相关
  • 其他
  • CSS
  • React
  • Vue
  • 富文本/JSON/可视化编辑器
  • 地图
  • 数据可视化
  • 其他
  • 参考资料

这有帮助吗?

  1. Frontend

02 常用前端库概览

上一页01 前端知识概览下一页基础 00 前端常见问题01

最后更新于1年前

这有帮助吗?

本文根据一些资料和日常开发,整理了 GitHub上一些优秀的前端库,包括常用工具、图片处理、文件处理、编辑器、数据可视化、React 相关、Vue 相关等库。

JavaScript

常用工具类

  • : 是一个一致性、模块化、高性能的 JavaScript 实用工具库,通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单;

  • : 专门为函数式编程风格而设计,特性如下:

    • Ramda 强调更加纯粹的函数式风格。数据不变性和函数无副作用是其核心设计理念;

    • Ramda 函数本身都是自动柯里化的;

    • Ramda 函数参数的排列顺序更便于柯里化;

  • : 一个JavaScript 日期处理类库;

  • : day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样,是 moment.js 的 2kB 轻量化方案;

  • : 一个用于任意精度十进制和非十进制算术的 JavaScript 库;

  • : 一个用于任意精度十进制类型计算的 JavaScript 库;

  • : 一个用于任意精度十进制算术的小型快速 JavaScript 库();

  • : 一个查询字符串解析和字符串化库,增加了一些安全性;

  • : 一个解析和字符串化 URL查询字符串的库;

常用框架

表单校验类

图形图像处理

  • 注意: 该包仍处于实验性的状态,因此不建议在生产环境中使用它,也不要用它构建应用程序,因为后面可能进行重大更改。

文件处理

动画库

鼠标/键盘相关

其他

CSS

React

Vue

富文本/JSON/可视化编辑器

地图

数据可视化

其他

参考资料

: 一个基于 Promise 的 HTTP 库,可用在 Node.js 和浏览器上发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+;

: 一个生成随机数据和拦截 Ajax 请求的生成器,帮助前端开发和原型与后端进度分离,减少一些单调,特别是在编写自动化测试时;

: 一个小型渐进式客户端 HTTP 请求库,与具有相同 API 的 Node.js 模块,支持许多高级 HTTP 客户端功能;

: 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库,目前支持:Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器,这些平台的 JavaScript 运行时都是不同的。

: 一个强大的 js 跨端触摸滑动库;

: 一个简单易用的库,可创建全屏滚动网站(也称为单页网站或单页网站)并在网站的各个部分中添加横向滑块;

: 一个移动端使用的滚动插件;

: 一个简单易用的 JavaScript 库,用于消除 click 移动端浏览器上物理点击和触发事件之间的 300 毫秒延迟。

: 一个用于移动端网页的轻量级、可扩展的前端开发调试工具,可以在 Vue、React、微信小程序及任何其他框架应用程序中使用它。

: jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单,它具有易于使用的 API,可在多种浏览器中使用;

: Zepto 是一个用于现代浏览器的极简 JavaScript 库,具有很大程度上与 jQuery 兼容的 API,是JQuery 的轻量级版本, 适合移动端;

: 一个基于 Laravel 5.2 验证的客户端 JavaScript 校验库;

: 一个校验和处理字符串的强大的 Javascript 库,仅用于字符串;

: 一个提供跨框架和跨语言的数据验证方式的 Javascript 库;

: 一个用于验证个人身份证号码(中国)的 Javascript 库;

: 一个强大的使用 Js 开发的浏览器网页截图工具,通过读取 DOM 和应用于元素的不同样式将当前页面呈现为 canvas 图像。

: 一个可以将任意 DOM 节点转换为用 JavaScript 编写的矢量(SVG)或光栅(PNG 或 JPEG)图像的库;

: 一个在浏览器中调整图像大小,而不会出现像素失真,处理速度非常快的图片处理库;

: 一个轻量级的可以给你图像加各种滤镜的 js 库;

: 一个使用本地 canvas.toBlob API 进行图像有损压缩的 js 库,在不同的浏览器有不同的压缩效果。

: 一个强大的 Javascript 库,它让使用 HTML5 画布变得轻而易举;

: 一个可以组合多张图片的 Javascript 库;

: 一款强大的图片裁切库, 支持灵活的图片裁切方式;

: 一个基于图像中的前 2 种主要颜色生成互补渐变背景的库;

: 一个在客户端保存文件的解决方案,非常适合在客户端上生成文件的 Web 应用程序;

: 一个强大的解析和编写 excel 文件的库;

: 一个基于 Javascript 生成 PDF 的库;

: 一个面向服务器端和客户端的可移植文档格式 (PDF) 生成库;

: 一个基于 pdf.j s和 jQuery 的 web|h5|移动端的支持手势缩放的 PDF 预览库。

: 一个基于 JavaScript 快速构建 Web Excel 的库;

: 一个使用 Svelte 构建的用于预览文件的自定义组件(Web 组件),可以在任何地方使用,无论框架如何,技持文件格式:.ppt, .pptx, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .jpeg, .gif,类似的有 ;

: 一个用于转换 HTML 为 Markdown 的工具;

: 一个用于解析 Markdown 的低级编译器;

: 一个快速且易于扩展的 Markdown 解析器;

,一个结合了数据网格特性的 JavaScript组件,类似于 Excel 编辑表格。

: 一个跨浏览器的脚本,使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形库;

: 一个轻量级的 JavaScript 动画库,具有简单但功能强大的 API,适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

: 一个动画引擎,其 API 与 jQuery 的 $.animate() 相同。它可以使用和不使用 jQuery。它的速度非常快,并且具有彩色动画、变换、循环、缓动、SVG 支持和滚动。它是 jQuery 和 CSS 过渡组合中最好的。

: 一个零依赖的 JavaScript 动画库,可以让 SVG 具有被绘制的效果;

: 一个 JavaScript 动画库,用于创建高性能、零依赖、跨浏览器动画,已在超过 400 万个网站上使用,并且可以在 React、Vue、Angular 项目中使用;

: 一个 JavaScript 库,用于在元素进入/离开视口时轻松设置动画;

: 一个基于 ES6+ 标准的现代 JavaScript 动画引擎,具有强大的 TypeScript 定义和最重要的 Web 功能,以及易于使用的方法来设置高性能、跨浏览器动画;

: 一个轻松实现打字效果的 JavaScript 库;

: 一个用于动画 DOM 操作的高性能、无依赖库,使您能够过滤、排序、添加和删除带有漂亮动画的 DOM 元素;

: 一个用于 Android,iOS,Web 和 Windows 的库,用于解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画,并在移动设备和网络上呈现它们;

: 一个强大的 Javascript 库,用于捕获键盘输入和输入的组合键,无需其他依赖关系;

: 一个用于可重新排序的拖放列表的 JavaScript 库;

: 一个用于创建 RFC4122 uuid 的库;

: 一个用于生成 MD5 散列消息的 JavaScript 函数;

: 一个用于加密的 JavaScript 库;

: 一款功能强大的免费 JavaScript 混淆器,包含多种功能,可为您的源代码提供保护;

:一个用 Node.js 发送电子邮件的库;

: 一个 JS 实现的剪贴板功能,没有 flash,压缩后只有 3kb;

: 一个二维码/二维条码生成器;

: 一个顶部进度条组件;

: 一个基于 React 的表情库,类似的还有 、、;

: 一个用于在浏览器中为图像加水印的功能库,用 ES6 编写,并通过Babel提供给当前浏览器,支持 url、文件输入、blob 和页面图像;

: 一个 JavaScript 的 API 文档生成器;

: 一个将普通的节点数组(带有指向父节点的指针)转换为嵌套 JSON 数据结构的转换器;

: 一个可以识别触摸、鼠标和点击事件等手势的开放源码类库,没有任何依赖项并且只有 7.34 kB 缩小 + gzip压缩!;

: 一个重置样式表的 CSS 文件,减少浏览器在默认行高、页边距和标题字体大小等方面的不一致,查看。

:一个很小的 CSS 文件,为 HTML 元素样式上提供了跨浏览器的高度一致性,相比于传统的 reset.css,Normalize.css 是一种现代的、为HTML5准备的优质替代方案,查看。

: 一组 CSS3 驱动的悬停效果,可应用于链接、按钮、徽标、SVG、特色图像等;

: 一个现成的跨浏览器动画库;

: 一个具有特殊效果的 CSS3 动画;

: 一个灵活的布局助手 CSS 库,使用 inline-block,而不是最新的 CSS 语法,适用于大多数浏览器,包括 IE8、Android2.3.x;

: 一个使用 CSS3 实现的动画样式,实现多种不同样式的抖动效果;

: 一个用纯 css 和 html 实现的提示库;

: 一个React 官方维护的创建 React 单页面应用的工具;

: 一个基于 React 的移动端跨平台 UI;

: 一个基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品;

: 一个基于 Ant Design 设计体系的 React UI 移动端组件库;

: 世界最受欢迎的基于质感设计的 React UI 库

: 一组微软开源的 UX 框架的集合,用于创建共享代码,设计和交互行为的精美的跨平台应用程序;

: 一个基于Facebook 的 React库构建的 JavaScript 库,旨在为网络带来原生桌面体验,包含许多 macOS Sierra 和 Windows 10 组件。 react-desktop与NW.js和Electron.js完美配合,但可以在任何 JavaScript 驱动的项目中使用!

: 是有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件。

: 一组用于高效渲染大型列表和表格数据的 React 组件;

: 一个漂亮且易于访问的列表拖放 React 组件;

: 一组 React 实用程序,可帮助您构建复杂的拖放界面,同时保持组件解耦;

: 一个 React 组件,它创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可收缩、可分组、可捕捉;

: 一个基于 React 的,类似于 Packery 或 Gridster 的网格布局系统,具有响应性并支持断点;

: 一个 React 的加载动画的集合;

: 一款基于 react 的轻量级加载动画库,支持按需导入, 开箱即用;

: 一个漂亮的,基于数据驱动的 React 动画库;

: 一个基于 spring-physics 的动画库;

: 一个文字轮播动画库;

: 一个基于 React 的无依赖图像裁剪工具;

: 一个基于数据自动生成趋势线的 React 组件;

: 一个简单、美观、功能强大的 React 播放器;

: 一个基于 Vue.js 进行快速开发的完整系统;

: 一个集合了大量由社区贡献的插件和库列表;

:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库;

: 一个基于 Vue.js 的移动端组件库;

: 一个轻量、可靠的移动端 Vue 组件库;

: 一个可以使用现代化的 Web 技术开发高性能原生应用的框架;

:一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染(SSR)应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性;

: 是 ant design 的 Vue 实现,开发和服务于企业级后台产品;

: 一个使用 JavaScript 构建跨平台原生移动应用程序的框架;

: 一个基于 vue 和 element-ui 实现的后台前端解决方案;

: 一个基于 Vue 的静态站点生成器,最初是用来编写技术文档的工具,现在则发展成为一个小巧、紧凑、功能强大的无头 CMS;

: 一个简单的全屏 Vue.js 组件,基于screenfull.js;

: 一个异步的表单校验器;

:是一个用 JavaScript 为浏览器实现的通用文本编辑器,专用于编辑代码,并带有 100 多种语言模式和实现更高级编辑功能的各种插件,每种语言都带有功能齐全的代码和语法突出显示,以帮助阅读和编辑复杂的代码,查看;

:一个基于 Web 的工具,用于查看、编辑、格式化和验证 JSON,具有树编辑器、代码编辑器和纯文本编辑器等多种模式;

: 一个轻量级的基于浏览器的所见即所得的富文本编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持;

: 一个轻量级 Web 富文本编辑器,配置方便,使用简单;

: 一个基于draft-js 的 Web 富文本编辑器,适用于 React 框架,兼容现代主流浏览器;

: 一款功能强大,开源免费的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发。

: 一款所见所得的低代码可视化编辑器;

: 一款可视化搭建框架;

: 一个谷歌地图 api 的异步加载器;

: 一个高德开放平台官网提供的地图 JSAPI 的加载器,可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法;

: 一个基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中;

: 一个基于 Vue 封装的百度地图组件;

: 一个免费的 JavaScript 库,用于在现代 Web 浏览器中制作动态、交互式地图;

: 蚂蚁集团全新一代数据可视化解决方案,包含 G2(可视化图形语法)、S2(多维可视分析表格)、G6(关系数据可视化引擎与图分析)、X6(数据驱动的图编辑引擎)、L7(地理空间数据可视化框架)、F2(专注于移动端的可视化)、**AVA(可视分析)**及一套完整的图表使用和设计规范, 提供强大的数据可视化需求;

: 一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据,遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作;

: 一个免费的、强大的图表和可视化库,提供了一种简单的方法来向您的商业产品添加直观、交互式和高度可定制的图表,是用纯 JavaScript 编写的,基于zrender,这是一个全新的轻量级画布库;

: 一个阿里通用图表组件库,致力于打造企业中后台高效、专业、便捷的数据可视化解决方案,基于 G2 与G2Plot 封装的 React 图表库,已经历阿里复杂业务场景长达三年的洗礼,在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现;

: 一个用 React 和 D3 构建的可组合图表库;

: 支持多种主流框架的可视化库;

: 一个独立的 Javascript 数据可视化库,还支持plotly在各自的生态系统中命名的 Python 和 R 模块(称为 Plotly.py 和 Plotly.R),用于生成数十种图表类型和可视化,包括统计图表、3D 图表、科学图表、SVG 和平铺地图、财务图表等;

: 一个 Javascript 数据透视表库,具有构建在 jQuery/jQueryUI 之上的拖放功能,最初由 Nicolas Kruchten 用 CoffeeScript 编写。

: 一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件;

lodash
ramda
moment
day.js
bignumber.js
decimal.js
big.js
big.js、bignumber.js 和 decimal.js 有什么区别?
qs
query-string
Axios
mockjs
Superagent
flyio
swiper
fullPage.js
better-scroll
fastclick
vconsole
JQuery
zepto
Validator.js
validator.js
validate.js
id-validator
html2canvas
dom-to-image
pica
Lena.js
Compressor.js
Fabric.js
merge-images
cropperjs
grade-js
file-saver
js-xlsx
jspdf
pdfjs
pdfh5.js
x-spreadsheet
file-viewer
react-file-viewer
html2md
marked
markdown-it
handsontable
threejs
animejs
velocity-animate
Vivus
gsap
scrollreveal
Kute.js
Typed.js
mixitup
lottie-web
Hotkeys
sortablejs
uuid
md5
crypto-js
javascript-obfuscator
nodemailer
clipboard.js
qrcode
nprogress
emoji-mart
emoji-mart-vue
V-Emoji-Picker
@kevinfaguiar/vue-twemoji-picker
watermarkjs
jsdoc
array-to-tree
hammerjs
reset.css
CSS 工具:重置 CSS
normalize.css
来,让我们谈一谈 Normalize.css
hover.css
animate.css
magic.css
kite
csshake
hint.css
Create React App
React Native
Ant design
Ant design mobile
MaterialUI
Fluent UI React
React desktop
zent
react-virtualized
react-beautiful-dnd
react-dnd
react-moveable
react-grid-layout
Halogen
react-loading
react-move
react-spring
react-text-loop-next
react-image-crop
react-sparklines
joL-player
Vue CLI
awesome-vue
element-ui
mint-ui
Vant
weex
nuxtjs
ant design vue
vue-native-core
vue-element-admin
VuePress
vue-fullscreen
async-validator
codemirror
CodeMirror中文说明文档
jsoneditor
tinymce
wangeditor
braft-editor
h5-dooring
dooringx
dooringx-lib
google-maps
amap-jsapi-loader
react-baidu-map
vue-baidu-map
polymaps
antv
d3js
Apache ECharts
bizcharts
recharts
Viser
plotly.js
pivottable
lucky-canvas
总结100+前端优质库,让你成为前端百事通
GitHub 上100个优质前端项目整理,非常全面!