La biblioteca JS que se puede usar en el front-end

El front-end siempre usa js.Algunas bibliotecas js están referenciadas directamente.Es muy conveniente al escribir un proyecto y organizar los usados.

1. Día.js

Una biblioteca de JavaScript minimalista para manejar la hora y la fecha, consistente con el diseño de la API de Moment.js, pero con un tamaño de solo 2 KB.

npm install dayjs

Uso básico:

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 (中国标准时间)

dos, qs

una URL ligera

npm install qs

Uso básico:

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

Una API js simple y liviana para manejar cookies.

npm install js-cookie

Uso básico:

import Cookies from 'js-cookie'
 
Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'

 
 

4. fiv.js

El reproductor de video Flash HTML5 de código abierto de Bilibili puede reproducir FIV en el navegador sin la ayuda de un complemento Flash. Actualmente es la solución principal bajo demanda.

npm install flv.js

Uso básico:

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

5. vConsola

Una entrevista ligera, escalable y de depuración de desarrolladores front-end para páginas web móviles. Si aún tiene problemas para depurar código en teléfonos móviles, utilícela.

npm install vconsole

Uso básico:

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

六、Animate.css

Una biblioteca de animación CSS4 entre navegadores, muchas animaciones CSS3 clásicas integradas, buena compatibilidad y fácil de usar.

npm install animate.css

Uso básico:

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

7. animejs

Una poderosa biblioteca de animación de JavaScript que puede trabajar con atributos CSS3, SVG, elementos DOM y objetos Js para producir muchos efectos de transición suaves y de alto rendimiento.

npm install animejs

Uso básico:

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

8. lodash.js

Una biblioteca de utilidades JavaScript coherente, modular y de alto rendimiento.

npm install lodash

Uso básico:

import _ from 'lodash'
 
_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]

9. Mescroll.js

Un exquisito complemento de actualización desplegable y carga desplegable que se ejecuta en el lado H5, utilizado principalmente para paginación de listas, actualización y otros escenarios.

npm install mescroll.js

Uso básico (componente 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>

10. Gráfico.js

Una biblioteca de iconos de JavaScript simple, limpia y atractiva basada en HTML5.

npm install chart.js

Uso básico:

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