高手区别于普通人的重要一点是，他们善于利用工具，把更多的时间留给了规划和思考。写代码也是同样的道理，工具用好了，你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库
Day.js
一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有 2KB。
npm install dayjs
基本用法
import dayjs from "dayjs";
dayjs(d).format("YYYY-MM-DD HH:mm"); // => 2022-01-03 16:06
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
js-cookie
一个简单的、轻量的处理 cookies 的 js API
npm install js-cookie
基本用法
import Cookies from "js-cookie";
Cookies.set("name", "value", { expires: 7 });
Cookies.get("name"); // => 'value'
fiv.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
基本用法
import "animate.css";
<h1 class="animate__animated animate__bounce">An animated element</h1>;
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
基本用法
<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
}
}
}
});
