本篇文章给大家分享10个最流行的实用js工具库，80%的项目都在用呢，快来收藏使用吧，希望对大家有所帮助！
高手区别于普通人的重要一点是，他们善于利用工具，把更多的时间留给了规划和思考。写代码也是同样的道理，工具用好了，你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库，如果觉得有用，就把大拇指点亮一下吧！
1、day.js一个极简的处理时间和日期的 javascript 库，和 moment.js 的 api 设计保持一样, 但体积仅有2kb。
npm install dayjs
基本用法
import dayjs from 'dayjs'dayjs().format('yyyy-mm-dd hh:mm') // => 2022-01-03 15:06dayjs('2022-1-3 15:06').todate() // => mon jan 03 2022 15:06:00 gmt+0800 (中国标准时间)
2、qs一个轻量的 url 参数转换的 javascript 库
npm install qs
基本用法
import qs from 'qs'qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22
3、js-cookie一个简单的、轻量的处理 cookies 的 js api
npm install js-cookie
基本用法
import cookies from 'js-cookie'cookies.set('name', 'value', { expires: 7 }) // 有效期7天cookies.get('name') // => 'value'
4、flv.jsbilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。
npm install flv.js
基本用法
<video autoplay controls width="100%" height="500" id="myvideo"></video>import flvjs from 'flv.js'// 页面渲染完成后执行if (flvjs.issupported()) { var myvideo = document.getelementbyid('myvideo') var flvplayer = flvjs.createplayer({ type: 'flv', url: 'http://localhost:8080/test.flv' // 视频 url 地址 }) flvplayer.attachmediaelement(myvideo) flvplayer.load() flvplayer.play()}
5、vconsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。
npm install vconsole
基本用法
import vconsole from 'vconsole'const vconsole = new vconsole()console.log('hello world')
最近发现很多小伙只收藏，不点赞，这可不是一个好习惯哦。拒绝白嫖，从你我做起！跟我一起动起来，先点赞！再收藏！
6、animate.css一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。
npm install animate.css
基本用法
<h1 class="animate__animated animate__bounce">an animated element</h1>import 'animate.css'
7、animejs一款功能强大的 javascript 动画库。可以与css3属性、svg、dom元素、js对象一起工作，制作出各种高性能、平滑过渡的动画效果。
npm install animejs
基本用法
<div class="ball" style="width: 50px; height: 50px; background: blue"></div>import anime from 'animejs/lib/anime.es.js'// 页面渲染完成之后执行anime({ targets: '.ball', translatex: 250, rotate: '1turn', backgroundcolor: '#f00', duration: 800})
8、lodash.js一个一致性、模块化、高性能的 javascript 实用工具库
npm install lodash
基本用法
import _ from 'lodash'_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]
9、mescroll.js一款精致的、在h5端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。
npm install mescroll.js
基本用法（vue组件）
<template> <div> <mescroll-vue ref="mescroll" :down="mescrolldown" :up="mescrollup" @init="mescrollinit" > <!--内容...--> </mescroll-vue> </div></template><script>import mescrollvue from 'mescroll.js/mescroll.vue'export default { components: { mescrollvue }, data() { return { mescroll: null, // mescroll实例对象 mescrolldown: {}, //下拉刷新的配置 mescrollup: { // 上拉加载的配置 callback: this.upcallback }, datalist: [] // 列表数据 } }, methods: { // 初始化的回调,可获取到mescroll对象 mescrollinit(mescroll) { this.mescroll = mescroll }, // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10 upcallback(page, mescroll) { // 发送请求 axios .get('xxxxxx', { params: { num: page.num, // 当前页码 size: page.size // 每页长度 } }) .then(response => { // 请求的列表数据 let arr = response.data // 如果是第一页需手动置空列表 if (page.num === 1) this.datalist = [] // 把请求到的数据添加到列表 this.datalist = this.datalist.concat(arr) // 数据渲染成功后,隐藏下拉刷新的状态 this.$nexttick(() => { mescroll.endsuccess(arr.length) }) }) .catch(e => { // 请求失败的回调,隐藏下拉刷新和上拉加载的状态; mescroll.enderr() }) } }}</script><style scoped>.mescroll { position: fixed; top: 44px; bottom: 0; height: auto;}</style>
10、chart.js一套基于 html5 的简单、干净并且有吸引力的 javascript 图表库
npm install chart.js
基本用法
<canvas id="mychart" width="400" height="400"></canvas>import chart from 'chart.js/auto'// 页面渲染完成后执行const ctx = document.getelementbyid('mychart')const mychart = new chart(ctx, { type: 'bar', data: { labels: ['red', 'blue', 'yellow', 'green', 'purple', 'orange'], datasets: [ { label: '# of votes', data: [12, 19, 3, 5, 2, 3], backgroundcolor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], bordercolor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderwidth: 1 } ] }, options: { scales: { y: { beginatzero: true } } }})
以上每一个工具库都是本人亲测，目前公司的项目也基本都在用。有问题欢迎评论区交流，如果你有其他好的工具也欢迎分享出来，一起提高工作效率，打倒万恶的资本主义
最后不要忘了点赞呦！祝 2022 年暴富！暴美！暴瘦！
原文地址：https://juejin.cn/post/7048963605462515743
作者：前端阿飞
【相关推荐：javascript学习教程】