前端大佬区别于普通人的重要一点是，他们善于利用工具，把更多的时间留给了规划和思考。写代码也是同样的道理，工具用好了，你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库，如果觉得有用，就把大拇指点亮一下吧！
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:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)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=22js-cookie
一个简单的、轻量的处理 cookies 的 js API。
npm install js-cookie
基本用法
import Cookies from 'js-cookie'
Cookies.set('name', 'value', { expires: 7 }) // 有效期 7 天
Cookies.get('name') // => 'value'flv.js
bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。
npm install flv.js
基本用法
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()
}vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。
npm install vconsole
基本用法
import VConsole from 'vconsole'
const vConsole = new VConsole()
console.log('Hello world')Animate.css
一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。
npm install animate.css
基本用法
An animated elementimport 'animate.css'
animejs
一款功能强大的 Javascript 动画库。可以与 CSS3 属性、SVG、DOM 元素、JS 对象一起工作，制作出各种高性能、平滑过渡的动画效果。
npm install animejs
基本用法
import anime from 'animejs/lib/anime.es.js'
// 页面渲染完成之后执行
anime({
targets: '.ball',
translateX: 250,
rotate: '1turn',
backgroundColor: '#F00',
duration: 800
})lodash.js
一个一致性、模块化、高性能的 JavaScript 实用工具库。
npm install lodash
基本用法
import _ from 'lodash' _.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8 _.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]
mescroll.js
一款精致的、在 H5 端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。
npm install mescroll.js
基本用法（vue 组件）
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()
})
}
}
}.mescroll {
position: fixed;
top: 44px;
bottom: 0;
height: auto;
}Chart.js
一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库
npm install chart.js
基本用法
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
}
}
}
})结语
以上每一个前端 js 工具库都是本人亲测，目前公司的项目也基本都在用。有问题欢迎评论区交流，如果你有其他好的工具也欢迎分享出来，一起提高工作效率，打倒万恶的资本主义。
最后不要忘了点赞、转发、收藏呦！祝大家 2022 年暴富！暴美！暴瘦！