十个常用工具库
阅读时间:
5
分钟 文章字数:
1.2k
字 发布日期:
2022-03-19
最近更新:
2024-11-15
平时做项目经常用到的小工具库，可提高开发效率，分享一下
1. Moment.js
JavaScript 日期处理类库
1.1 安装
sh
npm install moment --savesh
yarn add momentsh
pnpm add momentsh
bun add moment1.2 使用
更多使用方法请看官网：官网地址
js
var moment = require('moment')
moment().format('MMMM Do YYYY, h:mm:ss a') // 三月 19日 2022, 3:52:08 下午
moment().format('dddd') // 星期六
moment().format('MMM Do YY') // 3月 19日 22
moment().format('YYYY [escaped] YYYY') // 2022 escaped 2022
moment().format() // 2022-03-19T15:52:08+08:002. dayjs
一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有 2KB。
2.1 安装
sh
npm install dayjssh
yarn add dayjssh
pnpm add dayjssh
bun add dayjs2.2 使用
更多使用方法请看官网：官网地址
js
var dayjs = require('dayjs')
//import dayjs from 'dayjs' // ES 2015
dayjs().format() // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD') // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss') // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss') // 2011-10-17 00:17:563. nanoid
生成 uuid
3.1 安装
sh
npm install nanoidsh
yarn add nanoidsh
pnpm add nanoidsh
bun add nanoid3.2 使用
javascript
// 导入
import { nanoid } from 'nanoid'
let id1 = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"
//也可以指定生成字符串的长度
let id2 = nanoid(5)4. animate.css
强大的跨平台的预设 css3 动画库，内置了很多典型的 css3 动画，兼容性好使用方便
4.1 安装
sh
npm install animate.css --savesh
yarn add animate.csssh
pnpm add animate.csssh
bun add animate.css4.2 使用
更多使用方法请看官网：官网地址
javascript
// 引入
import 'animate.css'
// 使用方法
<h1 class="animate__animated animate__bounce">An animated element</h1>
// Vue使用方法
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="xxx"
leave-active-class="xxx"
>
......
</transition-group>5 animejs
一个轻量的 JavaScript 动画库， 拥有简单而强大的 API。 可对 CSS 属性、 SVG、 DOM 和 JavaScript 对象进行动画。
5.1 安装
sh
npm install animejssh
yarn add animejssh
pnpm add animejssh
bun add animejs5.2 使用
更多使用方法请看官网：官网地址
js
;<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,
})6. nprogress
请求进度条。这是一个类似 youtube、Medium 等网站上的小进度条插件。纳米级的进度条，涓涓细流动画告诉你的用户，一些事情正在发生！
6.1 安装
sh
npm install --save nprogresssh
yarn add nprogresssh
pnpm add nprogresssh
bun add nprogress6.2 使用
更多使用方法请看官网：官网地址
js
import nprogress from "nprogress"
import "nprogress/nprogress.css"
// 开始
nprogress.start()
// 结束
nprogress.done()
// 改样式
#nprogress .bar{
background:xxx !important
}7. qs
qs是一个流行的查询参数序列化和解析库。可以将一个普通的 object 序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个 object，而且支持复杂的嵌套。
7.1 安装
sh
npm install qssh
yarn add qssh
pnpm add qssh
bun add qs7.2 使用
js
import qs from 'qs'
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: 'tom', age: '22' }) // => user=tom&age=228. flv.js
哔哩哔哩开源的播放器
8.1 安装
sh
npm install --save flv.jssh
yarn add flv.jssh
pnpm add flv.jssh
bun add flv.js8.2 使用
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()
}9. uniq
数组去重
9.1 安装
sh
npm install uniqsh
yarn add uniqsh
pnpm add uniqsh
bun add uniq9.2 使用
js
var arr = [1, 1, 2, 2, 3, 5]
require('uniq')(arr)
console.log(arr) // 1,2,3,510. element-resize-detector
监听元素大小变化，一般用于解决折叠侧边栏时 Echarts 无法 resize
10.1 安装
sh
npm install element-resize-detector --savesh
yarn add element-resize-detectorsh
pnpm add element-resize-detectorsh
bun add element-resize-detector10.2 使用
js
let elementResizeDetectorMaker = require('element-resize-detector')
//监听元素变化
let erd = elementResizeDetectorMaker()
let that = this
erd.listenTo(document.getElementById('bar'), function (element) {
that.$nextTick(function () {
//使echarts尺寸重置
that.myEcharts.resize()
})
})