10个常用的JS工具库,80%的项目都在用!

共 3624字,需浏览 8分钟

 ·

2022-03-01 14:07

前端瓶子君,关注公众号

回复算法,加入前端编程面试算法每日一题群


高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考。写代码也是同样的道理,工具用好了,你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库,如果觉得有用,就把大拇指点亮一下吧!

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 (中国标准时间)
复制代码

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', { expires7 }) // 有效期7天
Cookies.get('name'// => 'value'
复制代码

flv.js

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

npm install flv.js
复制代码

基本用法

"100%" height="500" id="myVideo"></video>

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
复制代码

基本用法

class="animate__animated animate__bounce">An animated element</h1>

import 'animate.css'
复制代码

animejs

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

npm install animejs
复制代码

基本用法

class="ball" style="width: 50px; height: 50px; background: blue"></div>

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([4286]) // 返回数组中的最大值 => 8
_.intersection([123], [234]) // 返回多个数组的交集 => [2, 3]
复制代码

mescroll.js

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

npm install mescroll.js
复制代码

基本用法(vue组件)