大廠技術(shù)??高級前端??Node進階

點擊上方?程序員成長指北，關注公眾號

回復1，加入高級Node交流群

高手區(qū)別于普通人的重要一點是，他們善于利用工具，把更多的時間留給了規(guī)劃和思考。寫代碼也是同樣的道理，工具用好了，你就有更多的時間來規(guī)劃架構(gòu)和攻克難點。今天就給大家分享一下當前最流行的 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 參數(shù)轉(zhuǎn)換的 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',?{?expires:?7?})?//?有效期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'

//?頁面渲染完成后執(zhí)行
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

一個輕量、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板。如果你還苦于在手機上如何調(diào)試代碼，用它就對了。

npm?install?vconsole
復制代碼

基本用法

import?VConsole?from?'vconsole'

const?vConsole?=?new?VConsole()
console.log('Hello?world')
復制代碼

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

Animate.css

一個跨瀏覽器的 css3 動畫庫，內(nèi)置了很多典型的 css3 動畫，兼容性好，使用方便。

npm?install?animate.css
復制代碼

基本用法

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

import?'animate.css'
復制代碼

animejs

一款功能強大的 Javascript 動畫庫?？梢耘cCSS3屬性、SVG、DOM元素、JS對象一起工作，制作出各種高性能、平滑過渡的動畫效果。

npm?install?animejs
復制代碼

基本用法

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

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

//?頁面渲染完成之后執(zhí)行
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])?//?返回數(shù)組中的最大值?=>?8
_.intersection([1,?2,?3],?[2,?3,?4])?//?返回多個數(shù)組的交集?=>?[2,?3]
復制代碼

mescroll.js

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

npm?install?mescroll.js
復制代碼

基本用法（vue組件）