2022년 최신 실용적인 JS 도구 라이브러리 10개 [권장]

이 기사에서는 프로젝트의 80%에서 사용되는 가장 인기 있는 실용적인 JS 도구 라이브러리 10개를 공유합니다. 모두에게 도움이 되기를 바랍니다.

전문가와 일반인을 구별하는 중요한 점은 도구를 잘 사용하고 계획하고 생각하는 데 더 많은 시간을 할애한다는 것입니다. 코드를 작성할 때도 마찬가지입니다. 도구를 잘 사용하면 아키텍처를 계획하고 어려움을 극복하는 데 더 많은 시간을 가질 수 있습니다. 오늘은 현재 가장 인기 있는 js 도구 라이브러리를 공유하겠습니다. 유용하다고 생각하시면 추천해주세요!

1. Day.js

시간과 날짜를 처리하는 미니멀한 JavaScript 라이브러리입니다. API 디자인은 Moment.js와 동일하지만 크기는 2KB에 불과합니다.

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

2.qs

가벼운 URL 매개변수 변환 JavaScript 라이브러리

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

3.js-cookie

간단하고 가벼운 j 처리를 위한 API cookie

npm install js-cookie

기본 사용법

import Cookies from 'js-cookie'

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

4. flv.js

bilibili는 현재 주류 라이브인 플래시 플러그인의 도움 없이 브라우저에서 flv를 재생할 수 있는 오픈 소스 html5 플래시 비디오 플레이어입니다. 방송 및 주문형 솔루션.

npm install flv.js

기본 사용법

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

import flvjs from &#39;flv.js&#39;

// 页面渲染完成后执行
if (flvjs.isSupported()) {
  var myVideo = document.getElementById(&#39;myVideo&#39;)
  var flvPlayer = flvjs.createPlayer({
    type: &#39;flv&#39;,
    url: &#39;http://localhost:8080/test.flv&#39; // 视频 url 地址
  })
  flvPlayer.attachMediaElement(myVideo)
  flvPlayer.load()
  flvPlayer.play()
}

5. vConsole

모바일 웹페이지를 위한 가볍고 확장 가능한 프런트엔드 개발자 디버깅 패널입니다. 휴대폰에서 코드를 디버깅하는 방법에 여전히 어려움을 겪고 있다면 이를 사용하세요.

npm install vconsole

기본 사용법

import VConsole from 'vconsole'

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

최근에 많은 남자들이 수집만 하고 좋아하지 않는 걸 발견했어요. 무료 매춘을 거부하는 것은 당신과 나로부터 시작됩니다! 저와 함께 움직이고 먼저 좋아요를 눌러주세요! 다시 모아보세요!

6. Animate.css

다양한 일반적인 CSS3 애니메이션이 내장되어 있고 호환성이 좋고 사용하기 쉬운 크로스 브라우저 CSS3 애니메이션 라이브러리입니다.

npm install animate.css

기본 사용법

<h1 id="An-nbsp-animated-nbsp-element">An animated element</h1>

import &#39;animate.css&#39;

7. animejs

강력한 Javascript 애니메이션 라이브러리. CSS3 속성, SVG, DOM 요소 및 JS 개체와 함께 작동하여 다양한 고성능의 부드러운 전환 애니메이션 효과를 생성할 수 있습니다.

npm install animejs

기본 사용법

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

import anime from &#39;animejs/lib/anime.es.js&#39;

// 页面渲染完成之后执行
anime({
  targets: &#39;.ball&#39;,
  translateX: 250,
  rotate: &#39;1turn&#39;,
  backgroundColor: &#39;#F00&#39;,
  duration: 800
})

8, lodash.js

일관적인 모듈식 고성능 JavaScript 유틸리티 라이브러리

npm install lodash

기본 사용법

import _ from 'lodash'

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

9.

안 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 &#39;mescroll.js/mescroll.vue&#39;

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(&#39;xxxxxx&#39;, {
          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

HTML5를 기반으로 하는 간단하고 깨끗하며 매력적인 JavaScript 차트 라이브러리 세트

npm install chart.js

기본 사용법

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

import Chart from &#39;chart.js/auto&#39;

// 页面渲染完成后执行
const ctx = document.getElementById(&#39;myChart&#39;)
const myChart = new Chart(ctx, {
  type: &#39;bar&#39;,
  data: {
    labels: [&#39;Red&#39;, &#39;Blue&#39;, &#39;Yellow&#39;, &#39;Green&#39;, &#39;Purple&#39;, &#39;Orange&#39;],
    datasets: [
      {
        label: &#39;# of Votes&#39;,
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          &#39;rgba(255, 99, 132, 0.2)&#39;,
          &#39;rgba(54, 162, 235, 0.2)&#39;,
          &#39;rgba(255, 206, 86, 0.2)&#39;,
          &#39;rgba(75, 192, 192, 0.2)&#39;,
          &#39;rgba(153, 102, 255, 0.2)&#39;,
          &#39;rgba(255, 159, 64, 0.2)&#39;
        ],
        borderColor: [
          &#39;rgba(255, 99, 132, 1)&#39;,
          &#39;rgba(54, 162, 235, 1)&#39;,
          &#39;rgba(255, 206, 86, 1)&#39;,
          &#39;rgba(75, 192, 192, 1)&#39;,
          &#39;rgba(153, 102, 255, 1)&#39;,
          &#39;rgba(255, 159, 64, 1)&#39;
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
})

각각 위의 도구 라이브러리 중 제가 개인적으로 테스트했으며 현재 기본적으로 회사의 모든 프로젝트에서 사용되고 있습니다. 궁금한 점이 있으면 댓글란에 공유해주세요. 함께 업무 효율성을 높이고 사악한 자본주의를 물리쳐보세요. 마지막으로 좋아요 누르는 것도 잊지 마세요! 2022년에는 부자가 되시길 바랍니다! 아주 멋진! 엄청나게 얇아요!

원본주소 : https://juejin.cn/post/7048963605462515743

작성자 : Front-end A Fei

[관련 추천 :

javascript 학습 튜토리얼

]