10 часто используемых библиотек инструментов JS, которые используют 80% проектов!

внешний интерфейс JavaScript
10 часто используемых библиотек инструментов JS, которые используют 80% проектов!

Важное различие между экспертами и обычными людьми заключается в том, что они хорошо владеют инструментами и оставляют больше времени для планирования и размышлений. То же самое верно и для написания кода: с правильными инструментами у вас есть больше времени для планирования архитектуры и преодоления трудностей. Сегодня я поделюсь с вами самой популярной библиотекой js-инструментов, если вы сочтете ее полезной, ставьте палец вверх!

Day.js

Минималистская библиотека JavaScript для обработки времени и даты с тем же дизайном API, что и у Moment.js, но размером всего 2 КБ.

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

Облегченная библиотека JavaScript для преобразования параметров URL.

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

Простой и легкий js API для обработки файлов cookie.

npm install js-cookie

Основное использование

import Cookies from 'js-cookie'

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

flv.js

Флэш-видеоплеер Bilibili с открытым исходным кодом html5 позволяет браузерам воспроизводить 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

Простая, чистая и привлекательная библиотека JavaScript для построения диаграмм на основе HTML5.

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

Каждая из вышеперечисленных инструментальных библиотек проверена мной лично, а проекты компании в основном используются. Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь общаться в области комментариев.Если у вас есть другие хорошие инструменты, пожалуйста, поделитесь ими с нами, чтобы повысить эффективность работы и победить злой капитализм 👿

Не забудьте поставить лайк в конце! Удачи в 2022 году! Жестокая красота! Сильно худой!

Категории