An important point that distinguishes the best from the average person is that they are good at using tools, leaving more time for planning and thinking. The same is true for writing code. If you use the tools well, you will have more time to plan the architecture and overcome difficult points. Today we'll share with you the most popular JS tool libraries, and if you find them useful, put your thumbs up!

1. Day.js

A minimalist JavaScript library for handling time and date, designed to remain the same as the Moment.js API, but only 2KB in size.

Install

npm install dayjs

How to use

import dayjs from 'dayjs'  
dayjs().format('YYYY-MM-DD HH:mm') 
dayjs('2022-1-3 15:06').toDate() 

2. qs

A lightweight JavaScript library for url parameter conversion.

Install

npm install qs

How to use

import qs from 'qs'  
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" } qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

3. js-cookie

A simple, lightweight JS API for handling cookies.

Install

npm install js-cookie

How to use

import Cookies from 'js-cookie'  
Cookies.set('myName', 'Malvin', { expires: 7 }) // expires at 7 days
Cookies.get('myName') // value => 'Malvin'

4. flv.js

An open-source HTML5 flash video player that allows browsers to play FLV video without the help of flash plug-ins. It's the current mainstream live, on-demand solution.

Install

npm install flv.js

How to use

<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()
}

5. vConsole

A lightweight, extensible, front-end developer debugging panel for mobile web pages. If you still struggle with how to debug code on mobile, this is the right one to use.

Install

npm install vconsole

How to use

import VConsole from 'vconsole'
const vConsole = new VConsole()
console.log('Hello world')

6. Animate.css

A cross-browser CSS3 animation library with many typical CSS3 animations built-in, good compatibility, and easy to use.

Install

npm install animate.css

How to use

<h1 class="animate__animated animate__bounce">An animated element</h1>
import 'animate.css'

7. animejs

A powerful JavaScript animation library. It can work with CSS3 properties, SVG, DOM elements, and JS objects to create a variety of high-performance, smooth transition animation effects.

Install

npm install animejs

How to use

<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
})

8. lodash.js

A consistent, modular, high-performance library of JavaScript utilities.

Install

npm install lodash

How to use

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]) 

9. mescroll.js

A sophisticated, pull-down refresh and pull-up load plugin running on the H5 side, mainly used for list paging, refreshing, and other scenarios.

Install

npm install mescroll.js

How to use

<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>

10. Chart.js

A simple, clean, and attractive JavaScript charting library based on HTML5.

Install

npm install chart.js

How to use

<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
      }
    }
  }
})

Did you see any tools you are using? Please comment and let me know.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.