---

theme: channing-cyan highlight: atom-one-dark-reasonable

---

高手區別於普通人的重要一點是，他們善於利用工具，把更多的時間留給了規劃和思考。寫代碼也是同樣的道理，工具用好了，你就有更多的時間來規劃架構和攻克難點。今天就給大家分享一下當前最流行的 js 工具庫，如果覺得有用，就把左上角的大拇指點亮一下吧！

Day.js

一個極簡的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持一樣, 但體積僅有2KB。 js npm install dayjs

基本用法

```js import dayjs from 'dayjs'

dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06 ```

qs

一個輕量的 url 參數轉換的 JavaScript 庫 js npm install qs

基本用法

```js 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 js npm install js-cookie

基本用法

```js import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7 }) Cookies.get('name') // => 'value' ```

flv.js

bilibili 開源的 html5 flash 視頻播放器，使瀏覽器在不借助 flash 插件的情況下可以播放 flv，目前主流的直播、點播解決方案。

js npm install flv.js

基本用法

```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

一個輕量、可拓展、針對手機網頁的前端開發者調試面板。如果你還苦於在手機上如何調試代碼，用它就對了。 js npm install vconsole

基本用法

```js import VConsole from 'vconsole'

const vConsole = new VConsole() console.log('Hello world') ```

最近發現很多小夥只收藏，不點贊，這可不是一個好習慣哦。拒絕白嫖，從你我做起。跟我一起動起來，先點贊！再收藏！

Animate.css

一個跨瀏覽器的 css3 動畫庫，內置了很多典型的 css3 動畫，兼容性好，使用方便。 js npm install animate.css

基本用法

```js import 'animate.css';

An animated element

```

animejs

一款功能強大的 Javascript 動畫庫。可以與CSS3屬性、SVG、DOM元素、JS對象一起工作，製作出各種高性能、平滑過渡的動畫效果。

js npm install animejs

基本用法

```js

import anime from 'animejs/lib/anime.es.js'

// 頁面渲染完成之後執行 anime({ targets: '.ball', translateX: 250, rotate: '1turn', backgroundColor: '#F00', duration: 800 }) ```

lodash.js

一個一致性、模塊化、高性能的 JavaScript 實用工具庫

js npm install lodash

基本用法

```js import _ from 'lodash'

.max([4, 2, 8, 6]) // 返回數組中的最大值 => 8 .intersection([1, 2, 3], [2, 3, 4]) // 返回多個數組的交集 => [2, 3] ```

mescroll.js

一款精緻的、在H5端運行的下拉刷新和上拉加載插件，主要用於列表分頁、刷新等場景。

js npm install mescroll.js

基本用法（vue組件）

```js

```

Chart.js

一套基於 HTML5 的簡單、乾淨並且有吸引力的 JavaScript 圖表庫 js npm install chart.js

基本用法

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