高手區(qū)別于普通人的重要一點(diǎn)是，他們善于利用工具，把更多的時(shí)間留給了規(guī)劃和思考。寫代碼也是同樣的道理，工具用好了，你就有更多的時(shí)間來(lái)規(guī)劃架構(gòu)和攻克難點(diǎn)。

Day.js

一個(gè)極簡(jiǎn)的處理時(shí)間和日期的 JavaScript 庫(kù)，和 Moment.js 的 API 設(shè)計(jì)保持一樣, 但體積僅有2KB。

npm install dayjs
復(fù)制代碼

基本用法

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 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
復(fù)制代碼

qs

一個(gè)輕量的 url 參數(shù)轉(zhuǎn)換的 JavaScript 庫(kù)

npm install qs
復(fù)制代碼

基本用法

import qs from 'qs'
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22
復(fù)制代碼

js-cookie

一個(gè)簡(jiǎn)單的、輕量的處理 cookies 的 js API

npm install js-cookie
復(fù)制代碼

基本用法

import Cookies from 'js-cookie'
Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'
復(fù)制代碼

flv.js

bilibili 開源的 html5 flash 視頻播放器，使瀏覽器在不借助 flash 插件的情況下可以播放 flv，目前主流的直播、點(diǎn)播解決方案。

npm install flv.js
復(fù)制代碼

基本用法

import flvjs from 'flv.js'
// 頁(yè)面渲染完成后執(zhí)行
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()
}
復(fù)制代碼

vConsole

一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開發(fā)者調(diào)試面板。如果你還苦于在手機(jī)上如何調(diào)試代碼，用它就對(duì)了。

npm install vconsole
復(fù)制代碼

基本用法

import VConsole from 'vconsole'
const vConsole = new VConsole()
console.log('Hello world')
復(fù)制代碼

最近發(fā)現(xiàn)很多小伙只收藏，不點(diǎn)贊，這可不是一個(gè)好習(xí)慣哦。拒絕白嫖，從你我做起！跟我一起動(dòng)起來(lái)，先點(diǎn)贊！再收藏！

Animate.css

一個(gè)跨瀏覽器的 css3 動(dòng)畫庫(kù)，內(nèi)置了很多典型的 css3 動(dòng)畫，兼容性好，使用方便。

npm install animate.css
復(fù)制代碼

基本用法

An animated element

import 'animate.css'
復(fù)制代碼

animejs

一款功能強(qiáng)大的 Javascript 動(dòng)畫庫(kù)?？梢耘cCSS3屬性、SVG、DOM元素、JS對(duì)象一起工作，制作出各種高性能、平滑過(guò)渡的動(dòng)畫效果。

npm install animejs
復(fù)制代碼

基本用法

import anime from 'animejs/lib/anime.es.js'
// 頁(yè)面渲染完成之后執(zhí)行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})
復(fù)制代碼

lodash.js

一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫(kù)

npm install lodash
復(fù)制代碼

基本用法

import _ from 'lodash'
_.max([4, 2, 8, 6]) // 返回?cái)?shù)組中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多個(gè)數(shù)組的交集 => [2, 3]
復(fù)制代碼

mescroll.js

一款精致的、在H5端運(yùn)行的下拉刷新和上拉加載插件，主要用于列表分頁(yè)、刷新等場(chǎng)景。

npm install mescroll.js
復(fù)制代碼

基本用法（vue組件）

復(fù)制代碼

Chart.js

一套基于 HTML5 的簡(jiǎn)單、干凈并且有吸引力的 JavaScript 圖表庫(kù)

npm install chart.js
復(fù)制代碼

基本用法

import Chart from 'chart.js/auto'
// 頁(yè)面渲染完成后執(zhí)行
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
      }
    }
  }
})
復(fù)制代碼

以上每一個(gè)工具庫(kù)都是本人親測(cè)，目前公司的項(xiàng)目也基本都在用。有問(wèn)題歡迎評(píng)論區(qū)交流，如果你有其他好的工具也歡迎分享出來(lái)，一起提高工作效率，打倒萬(wàn)惡的資本主義

網(wǎng)頁(yè)名稱：十個(gè)常用的JS工具庫(kù)，80%的項(xiàng)目都在用！
標(biāo)題來(lái)源：http://m.fisionsoft.com.cn/article/ccocdeh.html