常用前端库概览

整理 GitHub 生态中主流前端开源库，涵盖工具函数、网络请求、图片文件处理、动画、表单校验、UI 框架生态、编辑器、数据可视化、地图等类别，方便开发选型参考。

JavaScript 库

工具函数类

  • lodash：高性能、模块化 JS 工具库，简化数组、对象、字符串、数值等常见数据操作。
  • ramda：面向函数式编程的工具库；强调数据不可变、无副作用，函数自动柯里化，参数顺序适配柯里化调用。
  • day.js：轻量日期处理库，API 设计兼容 moment 风格，体积仅 2kB。
  • bignumber.js：支持任意精度的十进制算术运算库。
  • decimal.js：任意精度十进制计算库。
  • big.js：轻量高速任意精度十进制计算库。
  • qs：URL 查询字符串解析、序列化库，具备安全处理能力。
  • query-string：URL query 字符串解析与字符串化工具。

请求 & 通用业务框架

  • Axios：基于 Promise 的 HTTP 请求库，同时支持浏览器、Node.js，兼容 IE8+。
  • mockjs：生成模拟随机数据，拦截 Ajax 请求；前后端分离开发，用于原型、单元测试。
  • Superagent：轻量渐进式 HTTP 库，浏览器与 Node.js 使用同一套 API。
  • swiper：成熟强大跨端触摸轮播滑动库。
  • fullPage.js：实现全屏滚动单页网站，支持横向滑块。
  • better-scroll：移动端高性能滚动插件。
  • vconsole：移动端网页调试面板，适配各类前端框架。
  • jQuery：经典 JS 库，简化 DOM 操作、事件、动画、AJAX，兼容多浏览器。

表单校验

图形图像处理

  • html2canvas：浏览器 DOM 转 Canvas 截图。
  • pica：浏览器高质量图片缩放，减少像素失真，速度快。
  • Lena.js：图片滤镜处理轻量库。
  • Compressor.js：基于 canvas.toBlob 做图片有损压缩；不同浏览器压缩效果存在差异。
  • Fabric.js：强大的 Canvas 操作库，封装画布、图形、拖拽、交互。
  • merge-images：多张图片合并合成。
  • cropperjs：功能完备的图片裁剪库。
  • grade-js：提取图片主色，生成互补渐变背景。

文件处理

  • file-saver：浏览器客户端保存生成的文件。
  • jspdf：浏览器端生成 PDF 文件。
  • pdfjs：PDF 文档解析渲染库。
  • pdfh5.js：基于 pdf.js 的移动端 PDF 预览，支持手势缩放。
  • x-spreadsheet：Web 在线 Excel 表格组件。
  • file-viewer：Svelte 实现通用文件预览 Web 组件；支持 ppt、doc、xls、pdf、图片。
  • html-to-md：HTML 转 Markdown 工具。
  • marked：Markdown 解析编译库。
  • markdown-it：高性能、可扩展 Markdown 解析器。
  • handsontable：类 Excel 可编辑数据表格组件。

动画库

  • threejs：Web 端 3D 图形库，基于 WebGL 构建三维动画与场景。
  • animejs：轻量动画库，支持 CSS、SVG、DOM、JS 对象动画。
  • Vivus：零依赖 SVG 描边绘制动画。
  • gsap：工业级高性能跨浏览器动画库，Vue、React 均可使用。
  • scrollreveal：元素进入/离开视口触发滚动动画。
  • Kute.js：ES6+ 现代动画引擎，完善 TS 类型支持。
  • Typed.js：实现打字机文字动画。
  • mixitup：DOM 元素过滤、排序带过渡动画。
  • lottie-web：解析 AE 导出的 JSON 动画，Web 端渲染 Lottie 动画。

鼠标、键盘交互

  • Hotkeys：捕获键盘快捷键组合，无外部依赖。
  • sortablejs：列表拖拽排序库。

其他工具 JS 库

CSS 库

  • reset.css：CSS 重置，清除浏览器默认样式差异。
  • normalize.css：规范化浏览器默认样式，保留有用基础样式，HTML5 友好。
  • hover.css：CSS3 hover 悬停效果集合。
  • animate.css：开箱即用跨浏览器 CSS 动画库。
  • magic.css：CSS3 特效动画。
  • csshake：CSS 实现抖动动画。
  • hint.css：纯 CSS 实现悬浮提示 tooltip。

React 生态库

Vue 生态库

  • awesome-vue：社区 Vue 插件、开源库集合索引。
  • Vant：轻量可靠移动端 Vue 组件库。
  • nuxtjs：Vue SSR、SSG 元框架。
  • ant design vue：Ant Design 的 Vue 版本，企业后台组件库。
  • vue-element-admin：Vue + Element UI 经典后台模板方案。
  • VuePress：基于 Vue 静态站点生成器，多用于文档站点。
  • vue-fullscreen：Vue 全屏组件，封装 screenfull.js。
  • async-validator：异步表单校验器（Element、Ant Design Vue 等底层依赖）。

富文本、JSON、低代码编辑器

  • codemirror：浏览器代码编辑器，语法高亮、大量语言与插件。
  • jsoneditor：JSON 查看、编辑、格式化，支持树视图、代码视图。
  • tinymce：老牌浏览器 WYSIWYG 富文本编辑器。
  • wangeditor：轻量易用 Web 富文本编辑器。
  • braft-editor：基于 draft-js 的 React 富文本编辑器。
  • h5-dooring：开源 H5 可视化页面搭建解决方案，React + Node。
  • dooringx：所见即所得低代码可视化搭建框架。
  • dooringx-lib：dooringx 底层可视化搭建库。

地图相关库

数据可视化

  • antv：蚂蚁集团可视化全家桶，包含 G2 图表语法、S2 多维表格、G6 关系图、X6 图编辑引擎、L7 地理可视化、F2 移动端图表。
  • d3js：数据驱动 DOM，基于 HTML、SVG、Canvas 高度自定义可视化底层库。
  • Apache ECharts：百度开源、功能完备图表库，基于 zrender。
  • bizcharts：阿里基于 G2 封装的 React 图表库，面向中后台。
  • recharts：React 组合式图表库，基于 D3。
  • plotly.js：支持统计、3D、财务等多种图表，可对接 Python、R。
  • pivottable：jQuery 生态数据透视表库。

其他业务库

  • lucky-canvas：跨平台抽奖组件（大转盘、九宫格、老虎机）。

© lizhao all right reserved，powered by Gitbook文件修订时间： 2026-08-21 00:17:27

results matching ""

    No results matching ""