在下方公众号回复【面试宝典】，可获取给你整理的107页前端面试题。

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

  Day.js

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install dayjs 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">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 (中国标准时间) 复制代码 </pre>

  qs

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install qs 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">import s from 'qs' qs.parse('user=tom&age=22') // => { user: "tom", age: "22" } qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22 复制代码 </pre>

  js-cookie

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install js-cookie 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">import Cookies from 'js-cookie' Cookies.set('name', 'value', { expires: 7 }) // 有效期7天 Cookies.get('name') // => 'value' 复制代码 </pre>

  flv.js

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install flv.js 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"> import flvjs from 'flv.js' // 页面[渲染][5]完成后执行 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() } 复制代码 </pre>

  vConsole

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install vconsole 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">import VConsole from 'vconsole' const vConsole = new VConsole() console.log('Hello world') 复制代码 </pre>

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

  Animate.css

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install animate.css 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">An animated element</h1> import 'animate.css' 复制代码 </pre>

  animejs

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install animejs 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"> import anime from 'animejs/lib/anime.es.js' // 页面渲染完成之后执行 anime({   targets: '.ball',   translateX: 250,   rotate: '1turn',   backgroundColor: '#F00',   duration: 800 }) 复制代码 </pre>

  lodash.js

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install lodash 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">import _ from 'lodash' _.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8 _.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3] 复制代码 </pre>

  mescroll.js

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install mescroll.js 复制代码 </pre>

  基本用法（vue组件）

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">                        import MescrollVue from 'mescroll.js/mescroll.vue' export default {   components: {     MescrollVue   },   data() {     return {       mescroll: null, // mescroll实例对象       mescrollDown: {}, //下拉刷新的配置       mescrollUp: {         // 上拉加载的配置         callback: this.upCallback       },       dataList: [] // 列表数据     }   },   methods: {     // 初始化的回调,可获取到mescroll对象     mescrollInit(mescroll) {       this.mescroll = mescroll     },     // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10     upCallback(page, mescroll) {       // 发送请求       axios         .get('xxxxxx', {           params: {             num: page.num, // 当前页码             size: page.size // 每页长度           }         })         .then(response => {           // 请求的列表数据           let arr = response.data           // 如果是第一页需手动置空列表           if (page.num === 1) this.dataList = []           // 把请求到的数据添加到列表           this.dataList = this.dataList.concat(arr)           // 数据渲染成功后,隐藏下拉刷新的状态           this.$nextTick(() => {             mescroll.endSuccess(arr.length)           })         })         .catch(e => {           // 请求失败的回调,隐藏下拉刷新和上拉加载的状态;           mescroll.endErr()         })     }   } } .mescroll {   position: fixed;   top: 44px;   bottom: 0;   height: auto; } 复制代码 </pre>

  Chart.js

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

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;">npm install chart.js 复制代码 </pre>

  基本用法

  <pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"> 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       }     }   } }) 复制代码 </pre>

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

  - End -

  近期课程上新：

  Vue基础|小程序开发|JQuery入门|PC端页面布局|Typescript|JS基础运算符｜数据类型之间存储区别｜服务端渲染与客户端渲染｜Socket编程