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

Cookie を処理するためのシンプルで軽量な js API

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 フラッシュ ビデオ プレーヤーです。 Flash プラグインの助けを借りて、現在主流のライブ ブロードキャストおよびオンデマンド ソリューションです。

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

モバイル Web ページまたはモバイル Web ページ用の軽量でスケーラブルなフロントエンド開発デバッグパネル。携帯電話でコードをデバッグする方法がまだ難しい場合は、それを使用してください。

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 class="animate__animated animate__bounce">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 実践ツールlibrary

npm install lodash

基本的な使い方

import _ from 'lodash'

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

9、mescroll.js

H5 側の絶妙なランニング プル-down リフレッシュおよびプルアップ読み込みプラグインは、主にリストのページングやリフレッシュなどのシナリオで使用されます。

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

シンプルでクリーンで、魅力的な 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 学習チュートリアル ##]