十个常用的JS工具库,80%的项目都在用!

开发 前端
今天就给大家分享一下当前最流行的 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=22
复制代码

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'
复制代码

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
}
}
}
})
复制代码

以上每一个工具库都是本人亲测,目前公司的项目也基本都在用。有问题欢迎评论区交流,如果你有其他好的工具也欢迎分享出来,一起提高工作效率,打倒万恶的资本主义👿

责任编辑:庞桂玉 来源: 前端教程
相关推荐

2023-04-28 08:42:22

Node.js开源项目

2016-08-03 16:27:47

GitLinux开源

2023-06-13 06:51:09

Spark机器学习回归

2019-09-26 14:20:27

JavaScript代码编程语言

2021-04-26 05:35:22

Python内置函数

2024-01-03 16:37:26

Jupyter工具开源

2024-02-01 12:53:00

PandasPython数据

2023-06-27 15:50:23

Python图像处理

2021-12-02 14:55:44

Python项目编程语言

2023-05-11 16:18:17

Angular开发RxJS

2023-03-27 23:37:21

2024-02-27 09:28:15

前端开发函数库

2024-02-05 22:53:59

前端开发

2012-07-25 15:20:24

JS

2023-10-07 11:36:15

2024-01-24 13:14:00

Python内置函数工具

2023-12-07 08:02:48

document前端JavaScript

2023-02-24 14:03:14

NatureAI

2022-12-04 23:39:33

机器学习AutoML

2021-01-27 11:24:00

项目经理技术技能项目管理
点赞
收藏

51CTO技术栈公众号