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

最新推荐文章于 2024-11-29 17:30:21 发布

2401_86400233

最新推荐文章于 2024-11-29 17:30:21 发布

阅读量681

点赞数 22

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/2401_86400233/article/details/141823367

版权

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 element

import ‘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-vue

ref=“mescroll”

:down=“mescrollDown”

:up=“mescrollUp”

@init=“mescrollInit”

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 年暴富！暴美！暴瘦！

关于本文

作者：前端阿飞

=======

https://juejin.cn/post/7048963605462515743

完 -