One of the most important things that separates the best from the rest of us is that they use tools well and leave more time for planning and thinking. The same goes for writing code. With the tools in place, you have more time to plan your architecture and work through the hard stuff. Today I will share with you the most popular JS tool library, if you feel useful, remember to like first, and then collect!

Day.js

A minimalist JavaScript library that handles times and dates, keeping the same API design as moment.js, but only 2KB in size.

npm install dayjs
Copy the code

Basic usage

import dayjs from 'dayjs'

dayjs(d).format('YYYY-MM-DD HH:mm') / / = > 2022-01-03 16:06
Copy the code

qs

A lightweight url parameter conversion JavaScript library

npm install qs
Copy the code

Basic usage

import qs from 'qs'

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

js-cookie

A simple, lightweight JS API for processing cookies

npm install js-cookie
Copy the code

Basic usage

import Cookies from 'js-cookie'

Cookies.set('name'.'value', { expires: 7 })
Cookies.get('name') // => 'value'
Copy the code

flv.js

Bilibili open source HTML5 Flash video player, so that the browser can play FLV without the use of flash plug-in, the current mainstream live, on-demand solutions.

npm install flv.js
Copy the code

Basic usage

<video autoplay controls width="100%" height="500" id="myVideo"></video>

import flvjs from 'flv.js'

// Execute after page rendering is complete
if (flvjs.isSupported()) {
  var myVideo = document.getElementById('myVideo')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv'.url: 'http://localhost:8080/test.flv' // Video URL address
  })
  flvPlayer.attachMediaElement(myVideo)
  flvPlayer.load()
  flvPlayer.play()
}
Copy the code

vConsole

A lightweight, scalable front-end developer debug panel for mobile web. If you’re struggling to debug code on your phone, use it.

npm install vconsole
Copy the code

Basic usage

import VConsole from 'vconsole'

const vConsole = new VConsole()
console.log('Hello world')
Copy the code

Animate.css

A cross-browser CSS3 animation library, built-in a lot of typical CSS3 animation, good compatibility, easy to use.

npm install animate.css
Copy the code

Basic usage

import 'animate.css';

<h1 class="animate__animated animate__bounce">An animated element</h1>
Copy the code

animejs

A powerful Javascript animation library. You can work with CSS3 attributes, SVG, DOM elements, and JS objects to create a variety of high-performance, smooth transition animations.

npm install animejs
Copy the code

Basic usage

<div class="ball" style="width: 50px; height: 50px; background: blue"></div>

import anime from 'animejs/lib/anime.es.js'

// Execute after the page is rendered
anime({
  targets: '.ball'.translateX: 250.rotate: '1turn'.backgroundColor: '#F00'.duration: 800
})
Copy the code

lodash.js

A consistent, modular, high-performance JavaScript utility library

npm install lodash
Copy the code

Basic usage

import _ from 'lodash'

_.max([4.2.8.6]) // Return the maximum value in the array => 8
_.intersection([1.2.3], [2.3.4]) // Return the intersection of multiple arrays => [2, 3]
Copy the code

mescroll.js

A sophisticated, H5 side running pull – down refresh and load – up plug-in, mainly used for list paging, refresh and other scenarios.

npm install mescroll.js
Copy the code

Basic Usage (VUE component)

<template>
  <div>
    <mescroll-vue
      ref="mescroll"
      :down="mescrollDown"
      :up="mescrollUp"
      @init="mescrollInit"
    >
      <! - content... -->
    </mescroll-vue>
  </div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'

export default {
  components: {
    MescrollVue
  },
  data() {
    return {
      mescroll: null.// Mescroll instance object
      mescrollDown: {}, // Drop down the refreshed configuration
      mescrollUp: {
        // Pull-up loaded configuration
        callback: this.upCallback
      },
      dataList: [] // List data}},methods: {
    // Initialize the callback to get the mescroll object
    mescrollInit(mescroll) {
      this.mescroll = mescroll
    },
    Page = {num:1, size:10}; Num: current page, starting from 1 by default. Size: number of data items per page. The default value is 10
    upCallback(page, mescroll) {
      // Send the request
      axios
        .get('xxxxxx', {
          params: {
            num: page.num, // Current page number
            size: page.size // Page length
          }
        })
        .then(response= > {
          // Request list data
          let arr = response.data
          // Manually empty the list if it is the first page
          if (page.num === 1) this.dataList = []
          // Add the requested data to the list
          this.dataList = this.dataList.concat(arr)
          // Hide the state of the pull-down refresh after successful data rendering
          this.$nextTick(() = > {
            mescroll.endSuccess(arr.length)
          })
        })
        .catch(e= > {
          // Request failed callback, hide pull-down refresh and pull-up load status;
          mescroll.endErr()
        })
    }
  }
}
</script>

<style scoped>
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
</style>
Copy the code

Chart.js

A set of simple, clean and attractive HTML5-based JavaScript chart library

npm install chart.js
Copy the code

Basic usage

<canvas id="myChart" width="400" height="400"></canvas>

import Chart from 'chart.js/auto'

// Execute after page rendering is complete
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}}}})Copy the code

Each of the above tool libraries is personally tested by myself, and currently the company’s projects are basically using them. There are questions welcome to comment area exchange, if you have other good tools also welcome to share, together to improve work efficiency, down the evil of capitalism 👿

And don’t forget to like it! Rich in 2022! Suddenly and violently beauty! Suddenly and violently thin!