共计 3796 个字符，预计需要花费 10 分钟才能阅读完成。
高手区别于普通人的重要一点是，他们长于利用工具，把更多的工夫留给了布局和思考。写代码也是同样的情理，工具用好了，你就有更多的工夫来布局架构和攻克难点。明天就给大家分享一下以后最风行的 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根本用法
<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()}vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。
npm install vconsole根本用法
import VConsole from 'vconsole'
const vConsole = new VConsole()
console.log('Hello world')最近发现很多小伙只珍藏，不点赞，这可不是一个好习惯哦。回绝白嫖，从你我做起！跟我一起动起来，先点赞！再珍藏！
Animate.css
一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。
npm install animate.css根本用法
<h1 class="animate__animated animate__bounce">An animated element</h1>
import 'animate.css'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
})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 组件）
<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>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 年暴富！暴美！暴瘦！