10 Commonly Used JavaScript Tool Libraries, 80% Of The Projects Are Used In 2022

npm install dayjs
import dayjs from 'dayjs'  dayjs().format('YYYY-MM-DD HH:mm') 
dayjs('2022-1-3 15:06').toDate()
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
npm install js-cookie
import Cookies from 'js-cookie'  Cookies.set('myName', 'Malvin', { expires: 7 }) // expires at 7 days
Cookies.get('myName') // value => 'Malvin'
npm install flv.js
<video autoplay controls width="100%" height="500" id="myVideo"></video>import flvjs from 'flv.js'// after the rendering 
if (flvjs.isSupported()) {
var myVideo = document.getElementById('myVideo')
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://localhost:8080/test.flv' // the flv video url
})
flvPlayer.attachMediaElement(myVideo)
flvPlayer.load()
flvPlayer.play()
}
npm install vconsole
import VConsole from 'vconsole'const vConsole = new VConsole()
console.log('Hello world')
npm install animate.css
<h1 class="animate__animated animate__bounce">An animated element</h1>import 'animate.css'
npm install animejs
<div class="ball" style="width: 50px; height: 50px; background: blue"></div>import anime from 'animejs/lib/anime.es.js'// after the rendering
anime({
targets: '.ball',
translateX: 250,
rotate: '1turn',
backgroundColor: '#F00',
duration: 800
})
npm install lodash
import _ from 'lodash'// return the max number of the array => 8
_.max([4, 2, 8, 6])
// return the intersection of multi array => [2, 3]
_.intersection([1, 2, 3], [2, 3, 4])
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,
mescrollDown: {},
mescrollUp: {
callback: this.upCallback
},
dataList: []
}
},
methods: {
mescrollInit(mescroll) {
this.mescroll = mescroll
},
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>
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
}
}
}
})

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store