这里是你可能正在寻找的 10 个有用的前端库。
一个实用的实用程序库,与 lodash
相比更现代化。它提供了新的函数,如 tryit 和 retry。源代码非常易读,大多数函数可以直接复制使用,无需安装 - Github。
Day.js 是一个极简的 JavaScript 库,大小仅为 2KB。它与 Moment.js 兼容性很高,提供日期解析、操作和显示功能,并支持多语言 - Github。
Driver.js 是一个轻量级的原生 JavaScript 库,用于创建页面导览。易于使用,压缩后仅为 5KB - Github。
FormKit DnD 是一个小型的、与框架无关的拖放库,压缩后约为 4KB。它采用数据优先的设计方法 - Github。
LogicFlow 是一个流程图编辑框架,提供了交互和编辑的基本功能,以及灵活的节点定制和插件机制,满足业务对类似流程图的需求 - Github。
使用 ProgressBar.js,可以轻松创建响应式和时尚的网页进度条。即使在移动设备上,动画效果也很好。它提供了一些内置形状,如 Line、Circle 和 SemiCircle,但你也可以使用任何矢量图形编辑器创建自定义形状的进度条 - Github。
一个纯 JavaScript OCR 库,支持 100 多种语言。它可用于识别图像中的文本,并根据搜索过滤图像 - Github。
zxcvbn 是受密码破解器启发的密码强度估算器。它使用模式匹配和保守估计识别和分析 4 万多个常见密码,并过滤掉常见的名字、姓氏、维基百科中的流行词和许多文化中的常见词,识别日期、重复(例如 'aaa')、序列(例如 'abcd')、键盘敲击(例如 'qwertyuiop')和 l33t 语言等常见模式 - Github。
专为前端监控而设计,灵感来自 web-see。它报告用户行为、错误、页面转换、白屏和性能指标。适用于 Vue、React、Angular 等 - Github。
特点:
-
用户行为报告:点击、页面转换、请求等。
-
手动报告:Vue 自定义指令和手动报告功能。
-
自定义报告:格式化和确定要报告的数据。
-
请求数据报告:过滤和决定要报告的请求数据。
-
报告方法:img、http、beacon、xhr、fetch,带有自定义标头。
-
数据缓存:本地存储、浏览器缓存、IndexedDB。
-
报告阈值:可配置的数据报告阈值。
-
全局点击报告:配置 DOM 节点报告的选择器和文本。
-
页面性能指标:白屏、FP、FCP、LCP、CLS、TTFB、FID 等。
Lottie,由 Airbnb 开发,是一个跨平台动画库。设计师可以在 After Effects 中创建动画,并将其导出为 JSON 文件,可以无缝集成到移动应用和网站中 - Github。
优势:
-
After Effects 兼容性:将 AE 项目(.json)转换为应用/网页动画。
-
跨平台:支持 Android、iOS、Web,以及 React Native 等框架。
-
高性能:使用本机图形,比 CSS/JS 有更好的性能。
-
可定制:动画可以在颜色、大小、速度等方面进行修改。
-
轻量级:文件大小小,因为它们只包含关键帧数据。
-
易于使用:简单的 API,易于集成。
-
丰富效果:支持来自 After Effects 的复杂动画。
-
实时渲染:在不同屏幕尺寸上保持质量。
-
社区支持:活跃的开源社区,经常更新。
-
动画缓存:支持缓存以提高重复播放性能。
Lottie 多才多艺,适用于简单的加载器到复杂的交互式动画。