5個(gè)實(shí)用JS庫(kù)99%的人可能都不知道

來(lái)源：奇酷教育發(fā)表于：2023-01-13 11:36:23

　　前言

　　作為一名前端開發(fā)者，我通過(guò)這些JavaScript庫(kù)大大提高了自己的效率，比如格式化日期、處理URL參數(shù)、調(diào)試手機(jī)網(wǎng)頁(yè)等。

　　1.使用“Day.js”格式化日期和時(shí)間

　　地址：https://day.js.org/en/

　　作為一名開發(fā)人員，我受夠了在 JavaScript 中操作日期和時(shí)間，因?yàn)樗闊┝恕?/div>

　　比如我們要打印當(dāng)前的日期和時(shí)間，就需要寫一大段代碼來(lái)完成。

　　const getDate = () => {

　　 const fillZero = (t) => {

　　 return t < 10 ? `0${t}` : t

　　 }

　　 const d = new Date()

　　 const year = d.getFullYear()

　　 const month = fillZero(d.getMonth() + 1)

　　 const day = fillZero(d.getDate())

　　 const hour = fillZero(d.getHours())

　　 const minute = fillZero(d.getMinutes())

　　 const second = fillZero(d.getSeconds())

　　 return `${year}-${month}-${day} ${hour}:${minute}:${second}`

　　}

　　console.log(getDate()) // 2022-05-09 07:19:14

　　幸運(yùn)的是，使用 Day.js 只需一行代碼即可完成。

　　console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')) // 2022-05-09 07:19:14

　　注意：“Day.js 是一個(gè)極簡(jiǎn)主義的 JavaScript 庫(kù)，它使用大部分與 Moment.js 兼容的 API 為現(xiàn)代瀏覽器解析、驗(yàn)證、操作和顯示日期和時(shí)間。

　　如果你使用過(guò) Moment.js，那么，使用Day.js，你也不會(huì)覺得很難。”

　　2.使用“qs.js”格式化URL參數(shù)

　　地址：https://github.com/ljharb/qs

　　我們?yōu)榱双@取“URL”的參數(shù)，也許會(huì)寫一個(gè)這樣的函數(shù)。

　　const formatSearch = () => {

　　 window.location.search.slice(1).split('&').reduce((res, it) => {

　　 const [ key, value ] = it.split('=')

　　 res[ key ] = value

　　 return res

　　 }, {})

　　}

　　// https://medium.com?name=fatfish&age=100

　　const search = formatSearch() // { name: 'fatfish', age: 100 }

　　// use qs.js to format

　　const search2 = qs.parse(window.location.search.slice(1)) // { name: 'fatfish', age: 100 }

　　但是，現(xiàn)在我們?nèi)绻獙?shí)現(xiàn)這樣一個(gè)新功能，就會(huì)變得簡(jiǎn)單很多。

　　如果我們想在“https://medium.com”中添加姓名和年齡兩個(gè)參數(shù)。

　　// 1. url = https://medium.com

　　// 2. params = { name: 'fatfish', age: 100 }

　　const splitSearch = (url, params) => {

　　 const search = Object.entries(params).map((it) => it.join('=')).join('&')

　　 return `${url}?${search}`

　　}

　　const url = 'https://medium.com'

　　const params = { name: 'fatfish', age: 100 }

　　console.log(splitSearch(url, params)) // https://medium.com?name=fatfish&age=100

　　// use qs.js to stringify url

　　console.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100

　　3.使用“js-cookie.js”讀寫cookies

　　地址：https://github.com/js-cookie/js-cookie

　　我們都知道在 JavaScript 中操作 cookies 不是一件簡(jiǎn)單的事情，為了提高你的工作效率我強(qiáng)烈推薦“js-cookie.js”，它是一個(gè)簡(jiǎn)單、輕量級(jí)的 JavaScript API，用于處理 cookies。

　　Cookies.set('name', 'fatfish', { expires: 10 })

　　Cookies.get('name') // fatfish

　　4. 為什么選擇 Lodash？

　　地址：https://github.com/lodash/lodash

　　先來(lái)看看Lodash的介紹：

　　Lodash 通過(guò)消除處理數(shù)組、數(shù)字、對(duì)象、字符串等的麻煩，使 JavaScript 變得更容易。Lodash 的模塊化方法非常適合：

　　迭代數(shù)組、對(duì)象和字符串

　　操縱和測(cè)試值

　　創(chuàng)建復(fù)合函數(shù)

　　// 1. Flatten the array

　　_.flattenDeep([ 1, [ 2, [ 3, [ 4, [ 5 ]] ] ] ]) // [1, 2, 3, 4, 5]

　　// 2. More convenient object traversal

　　_.each({ name: 'fatfish', age: 100 }, (val, key) => {

　　 console.log(val, key)

　　 // fatfish name

　　 // 100 'age'

　　})

　　// 3. ...

　　5、在移動(dòng)端使用“Vconsole”調(diào)試網(wǎng)頁(yè)

　　地址：https://github.com/Tencent/vConsole

　　在移動(dòng)設(shè)備上調(diào)試網(wǎng)頁(yè)非常困難，但有了“Vconsole”，一切都會(huì)變得容易得多。我們可以通過(guò)掃描此二維碼或點(diǎn)擊網(wǎng)址（http://wechatfe.github.io/vconsole/demo.html）來(lái)體驗(yàn)其功能。