爱华Fullstack

主题

爱华Fullstack2025-06-18
2533
10m

轮子1 ​

前端开发中，我们会经常遇到一个较为棘手的功能，比如复杂动画、轮播、各种工具函数等，如果每个都要自己去封装，不仅多余、不便于复用，还会让我们需求完成的时间遥遥无期。 好在，业界已经有了非常多已经封装好了的工具库，遵循能用的轮子就不要重复造的原则，我们一起来看看吧！ 动画库 Animate.css(推荐) 绝对是使用最广，近十年持续时间最持的CSS3动画库了。具有跨浏览器，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。

  • Github Star: 78.8k
  • Vue版本：v-animate-css
  • React版本：react-animated-css Anime.js 轻量级的JavaScript动画库，并且适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。近年来势头迅猛。
  • Github Star: 47.3k
  • Vue版本：vue-animejs
  • React版本：react-anime Scrollreveal 一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的滚动动画库。
  • Github Star: 21.8k
  • Vue版本：vue-scroll-reveal，用的较少
  • React版本：react-scrollreveal，用的较少 时间日期处理 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
  • 风格示例 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
  • 风格示例
    js
      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地址即可。
最近更新