搜尋
首頁頭條2022年最新且實用的10個JS工具庫【推薦】

這篇文章跟大家分享10個最受歡迎的實用JS工具庫,80%的專案都在用呢,快來收藏使用吧,希望對大家有幫助!

2022年最新且實用的10個JS工具庫【推薦】

高手區別於普通人的重要一點是,他們善於利用工具,把更多的時間留給了規劃和思考。寫程式也是同樣的道理,工具用好了,你就有更多的時間規劃架構和攻克難點。今天就來跟大家分享一下目前最受歡迎的 js 工具庫,如果覺得有用,就把大拇指點亮一下吧!

1、Day.js

一個極簡的處理時間和日期的 JavaScript 函式庫,和 Moment.js 的 API 設計保持一樣, 但體積僅有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

一個簡單的、輕量的處理cookies 的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 開源的html5 flash 影片播放器,讓瀏覽器在不借助flash 外掛的情況可以播放flv,目前主流的直播、點播解決方案。

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 &#39;vconsole&#39;

const vConsole = new VConsole()
console.log(&#39;Hello world&#39;)

最近發現很多小夥只收藏,不點贊,這可不是一個好習慣哦。拒絕白嫖,從你我做起!跟我一起動起來,先按讚!再收藏!

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 &#39;lodash&#39;

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

9、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 &#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

作者:前端阿飛

#【相關推薦:javascript學習教程

#
陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。