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

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

Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs

基本用法

1.  
   import dayjs from 'dayjs'
2.  
    
3.  
   dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06

qs

一个轻量的 url 参数转换的 JavaScript 库

npm install qs

基本用法

1.  
   import qs from 'qs'
2.  
    
3.  
   qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
4.  
   qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

js-cookie

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

npm install js-cookie

基本用法

1.  
   import Cookies from 'js-cookie'
2.  
    
3.  
   Cookies.set('name', 'value', { expires: 7 })
4.  
   Cookies.get('name') // => 'value'

flv.js

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

npm install flv.js

基本用法

1.  
   <video autoplay controls width="100%" height="500" id="myVideo"></video>
2.  
    
3.  
   import flvjs from 'flv.js'
4.  
    
5.  
   // 页面渲染完成后执行
6.  
   if (flvjs.isSupported()) {
7.  
   var myVideo = document.getElementById('myVideo')
8.  
   var flvPlayer = flvjs.createPlayer({
9.  
   type: 'flv',
10.  
    url: 'http://localhost:8080/test.flv' // 视频 url 地址
11.  
    })
12.  
    flvPlayer.attachMediaElement(myVideo)
13.  
    flvPlayer.load()
14.  
    flvPlayer.play()
15.  
    }

vConsole

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

npm install vconsole

基本用法

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

Animate.css

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

npm install animate.css

基本用法

1.  
   import 'animate.css';
2.  
    
3.  
   <h1 class="animate__animated animate__bounce">An animated element</h1>

animejs

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

npm install animejs

基本用法

1.  
   <div class="ball" style="width: 50px; height: 50px; background: blue"></div>
2.  
    
3.  
   import anime from 'animejs/lib/anime.es.js'
4.  
    
5.  
   // 页面渲染完成之后执行
6.  
   anime({
7.  
   targets: '.ball',
8.  
   translateX: 250,
9.  
   rotate: '1turn',
10.  
    backgroundColor: '#F00',
11.  
    duration: 800
12.  
    })

lodash.js

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

npm install lodash

基本用法

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

mescroll.js

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

npm install mescroll.js

基本用法（vue组件）

1.  
   <template>
2.  
   <div>
3.  
   <mescroll-vue
4.  
   ref="mescroll"
5.  
   :down="mescrollDown"
6.  
   :up="mescrollUp"
7.  
   @init="mescrollInit"
8.  
   >
9.  
   <!--内容...-->
10.  
    </mescroll-vue>
11.  
    </div>
12.  
    </template>
13.  
     
14.  
    <script>
15.  
    import MescrollVue from 'mescroll.js/mescroll.vue'
16.  
     
17.  
    export default {
18.  
    components: {
19.  
    MescrollVue
20.  
    },
21.  
    data() {
22.  
    return {
23.  
    mescroll: null, // mescroll实例对象
24.  
    mescrollDown: {}, //下拉刷新的配置
25.  
    mescrollUp: {
26.  
    // 上拉加载的配置
27.  
    callback: this.upCallback
28.  
    },
29.  
    dataList: [] // 列表数据
30.  
    }
31.  
    },
32.  
    methods: {
33.  
    // 初始化的回调,可获取到mescroll对象
34.  
    mescrollInit(mescroll) {
35.  
    this.mescroll = mescroll
36.  
    },
37.  
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
38.  
    upCallback(page, mescroll) {
39.  
    // 发送请求
40.  
    axios
41.  
    .get('xxxxxx', {
42.  
    params: {
43.  
    num: page.num, // 当前页码
44.  
    size: page.size // 每页长度
45.  
    }
46.  
    })
47.  
    .then(response => {
48.  
    // 请求的列表数据
49.  
    let arr = response.data
50.  
    // 如果是第一页需手动置空列表
51.  
    if (page.num === 1) this.dataList = []
52.  
    // 把请求到的数据添加到列表
53.  
    this.dataList = this.dataList.concat(arr)
54.  
    // 数据渲染成功后,隐藏下拉刷新的状态
55.  
    this.$nextTick(() => {
56.  
    mescroll.endSuccess(arr.length)
57.  
    })
58.  
    })
59.  
    .catch(e => {
60.  
    // 请求失败的回调,隐藏下拉刷新和上拉加载的状态;
61.  
    mescroll.endErr()
62.  
    })
63.  
    }
64.  
    }
65.  
    }
66.  
    </script>
67.  
     
68.  
    <style scoped>
69.  
    .mescroll {
70.  
    position: fixed;
71.  
    top: 44px;
72.  
    bottom: 0;
73.  
    height: auto;
74.  
    }
75.  
    </style>

Chart.js

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

npm install chart.js

基本用法

1.  
   <canvas id="myChart" width="400" height="400"></canvas>
2.  
    
3.  
   import Chart from 'chart.js/auto'
4.  
    
5.  
   // 页面渲染完成后执行
6.  
   const ctx = document.getElementById('myChart')
7.  
   const myChart = new Chart(ctx, {
8.  
   type: 'bar',
9.  
   data: {
10.  
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
11.  
    datasets: [
12.  
    {
13.  
    label: '# of Votes',
14.  
    data: [12, 19, 3, 5, 2, 3],
15.  
    backgroundColor: [
16.  
    'rgba(255, 99, 132, 0.2)',
17.  
    'rgba(54, 162, 235, 0.2)',
18.  
    'rgba(255, 206, 86, 0.2)',
19.  
    'rgba(75, 192, 192, 0.2)',
20.  
    'rgba(153, 102, 255, 0.2)',
21.  
    'rgba(255, 159, 64, 0.2)'
22.  
    ],
23.  
    borderColor: [
24.  
    'rgba(255, 99, 132, 1)',
25.  
    'rgba(54, 162, 235, 1)',
26.  
    'rgba(255, 206, 86, 1)',
27.  
    'rgba(75, 192, 192, 1)',
28.  
    'rgba(153, 102, 255, 1)',
29.  
    'rgba(255, 159, 64, 1)'
30.  
    ],
31.  
    borderWidth: 1
32.  
    }
33.  
    ]
34.  
    },
35.  
    options: {
36.  
    scales: {
37.  
    y: {
38.  
    beginAtZero: true
39.  
    }
40.  
    }
41.  
    }
42.  
    })

以上每一个工具库都是本人亲测，目前公司的项目也基本都在用。有问题欢迎评论区交流，如果你有其他好的工具也欢迎分享出来，一起提高工作效率，打倒万恶的资本主义👿

最后不要忘了点赞呦！祝 2022 年暴富！暴美！暴瘦！

 

这篇好文章是转载于：学新通技术网