10个常用的JS工具库，80%的项目都在用！ 10个常用的JS工具库，80%的项目

高手区别于普通人的重要一点是，他们善于利用工具，把更多的时间留给了规划和思考。写代码也是同样的道理，工具用好了，你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库，如果觉得有用，就把大拇指点亮一下吧！
Day.js
【10个常用的JS工具库，80%的项目都在用！】一个极简的处理时间和日期的 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 (中国标准时间)

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

js-cookie
一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie

基本用法

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

flv.js
bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。

npm install flv.js

基本用法

import flvjs from 'flv.js'// 页面渲染完成后执行 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() }

vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

npm install vconsole

基本用法

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

最近发现很多小伙只收藏，不点赞，这可不是一个好习惯哦。拒绝白嫖，从你我做起！跟我一起动起来，先点赞！再收藏！

Animate.css
一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

npm install animate.css

基本用法

An animated elementimport 'animate.css'

animejs
一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs

基本用法

import anime from 'animejs/lib/anime.es.js'// 页面渲染完成之后执行 anime({ targets: '.ball', translateX: 250, rotate: '1turn', backgroundColor: '#F00', duration: 800 })

lodash.js
一个一致性、模块化、高性能的 JavaScript 实用工具库

npm install lodash

基本用法

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

mescroll.js
一款精致的、在H5端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。

npm install mescroll.js

基本用法（vue组件）

.mescroll { position: fixed; top: 44px; bottom: 0; height: auto; }

Chart.js
一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库

npm install chart.js

基本用法

import Chart from 'chart.js/auto'// 页面渲染完成后执行 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 } } } })

以上每一个工具库都是本人亲测，目前公司的项目也基本都在用。有问题欢迎评论区交流，如果你有其他好的工具也欢迎分享出来，一起提高工作效率，打倒万恶的资本主义
最后不要忘了点赞呦！祝 2022 年暴富！暴美！暴瘦！