建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前言
作為一名前端開(kāi)發(fā)者，我通過(guò)這些JavaScript庫(kù)大大提高了自己的效率，比如格式化日期、處理URL參數(shù)、調(diào)試手機(jī)網(wǎng)頁(yè)等。因此，我想將這些好用的庫(kù)分享給你們，也希望可以幫助到你們。
專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)尉犁免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
1.使用“Day.js”格式化日期和時(shí)間
地址：https://day.js.org/en/
作為一名開(kāi)發(fā)人員，我受夠了在 JavaScript 中操作日期和時(shí)間，因?yàn)樗闊┝恕?/p>
比如我們要打印當(dāng)前的日期和時(shí)間，就需要寫(xiě)一大段代碼來(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ì)覺(jué)得很難?！?/p>
2.使用“qs.js”格式化URL參數(shù)
地址：https://github.com/ljharb/qs
我們?yōu)榱双@取“URL”的參數(shù)，也許會(huì)寫(xiě)一個(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 urlconsole.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100
3.使用“js-cookie.js”讀寫(xiě)cookies
地址：https://github.com/js-cookie/js-cookie
我們都知道在 JavaScript 中操作 cookies 不是一件簡(jiǎn)單的事情，為了提高你的工作效率我強(qiáng)烈推薦“js-cookie.js”，它是一個(gè)簡(jiǎn)單、輕量級(jí)的 JavaScript API，用于處理 cookies。
// 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
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ì)變得容易得多。
TIP: 與chrome瀏覽器的devtools類(lèi)似，Vconsole提供了以下功能幫助你更好的調(diào)試網(wǎng)頁(yè)。
- 日志：console.log、info、error、…...
- 網(wǎng)絡(luò)：XMLHttpRequest、Fetch、sendBeacon
- 元素：HTML 元素樹(shù)
- 存儲(chǔ)：Cookies、LocalStorage、SessionStorage
- 手動(dòng)執(zhí)行JS命令
- 自定義插件
分享名稱(chēng)：五個(gè)實(shí)用JS庫(kù)99%的人可能都不知道
轉(zhuǎn)載來(lái)源：http://www.dlmjj.cn/article/dphgsgc.html
