Die neuesten und praktischsten 10 JS-Toolbibliotheken im Jahr 2022 [Empfohlen]

In diesem Artikel werden die 10 beliebtesten praktischen JS-Toolbibliotheken vorgestellt, die in 80 % der Projekte verwendet werden. Ich hoffe, dass sie für alle hilfreich sind.

Das Wichtigste, was Experten von normalen Menschen unterscheidet, ist, dass sie gut mit Werkzeugen umgehen können und mehr Zeit für Planung und Nachdenken lassen. Das Gleiche gilt für das Schreiben von Code. Wenn Sie die Tools gut nutzen, haben Sie mehr Zeit, die Architektur zu planen und Schwierigkeiten zu überwinden. Heute werde ich die derzeit beliebteste js-Tool-Bibliothek mit Ihnen teilen. Wenn Sie sie nützlich finden, geben Sie ihr bitte einen Daumen nach oben!

1. Day.js

Eine minimalistische JavaScript-Bibliothek zur Verarbeitung von Zeit und Datum. Das API-Design bleibt das gleiche wie bei Moment.js, die Größe beträgt jedoch nur 2 KB.

npm install dayjs

Grundlegende Verwendung

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

Eine einfache JavaScript-Bibliothek zur URL-Parameterkonvertierung

npm install qs

Grundlegende Verwendung

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

einfache, leichte js-API für die Handhabung Cookies

Grundlegende Verwendung

npm install js-cookie

4. flv.js

bilibili ist ein Open-Source-HTML5-Flash-Videoplayer, der es dem Browser ermöglicht, FLV, das aktuelle Mainstream-Live, abzuspielen Broadcast- und On-Demand-Lösung.

import Cookies from 'js-cookie'

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

Grundlegende Verwendung

npm install flv.js

5. vConsole

Ein leichtes, skalierbares Front-End-Entwickler-Debugging-Panel für mobile Webseiten. Wenn Sie immer noch Schwierigkeiten haben, Code auf Ihrem Mobiltelefon zu debuggen, verwenden Sie es.

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

Grundlegende Verwendung

npm install vconsole

Vor kurzem habe ich festgestellt, dass viele Leute nur sammeln und das nicht mögen. Die Ablehnung der kostenlosen Prostitution beginnt bei dir und mir! Komm, zieh mit mir um und gib mir zuerst ein Like! Nochmals sammeln!

6. Animate.css

Eine browserübergreifende CSS3-Animationsbibliothek mit vielen integrierten typischen CSS3-Animationen, guter Kompatibilität und einfacher Verwendung.

import VConsole from 'vconsole'

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

Grundlegende Verwendung

npm install animate.css

7. animejs

Eine leistungsstarke Javascript-Animationsbibliothek. Es kann mit CSS3-Eigenschaften, SVG, DOM-Elementen und JS-Objekten arbeiten, um verschiedene leistungsstarke Animationseffekte mit sanften Übergängen zu erzeugen.

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

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

Grundlegende Verwendung

npm install animejs

8, lodash.js

Eine konsistente, modulare, leistungsstarke JavaScript-Dienstprogrammbibliothek

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

Grundlegende Verwendung

npm install lodash

9 , mescroll.js

An exquisites Pull-Down-Aktualisierungs- und Pull-Up-Lade-Plug-In, das auf der H5-Seite ausgeführt wird. Es wird hauptsächlich für Listen-Paging, Aktualisierung und andere Szenarien verwendet.

import _ from 'lodash'

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

Grundlegende Verwendung (vue-Komponente)

npm install mescroll.js

10, Chart.js

Eine Reihe einfacher, sauberer und attraktiver JavaScript-Diagrammbibliotheken basierend auf HTML5

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

Grundlegende Verwendung

npm install chart.js

Jeder Eine der oben genannten Toolbibliotheken wurde von mir persönlich getestet und wird derzeit praktisch in allen Projekten des Unternehmens verwendet. Wenn Sie Fragen haben, teilen Sie diese bitte im Kommentarbereich mit. Lassen Sie uns gemeinsam die Arbeitseffizienz verbessern und den bösen Kapitalismus besiegen. Vergessen Sie nicht, es zu liken. Ich wünsche Ihnen Reichtum im Jahr 2022! Wunderschön! Extrem dünn!

Ursprüngliche Adresse: https://juejin.cn/post/7048963605462515743

Autor: Front-end A Fei

[Verwandte Empfehlungen:

Javascript-Lern-Tutorial

]