?
英文 | https://javascript.plainenglish.io/5-javascript-utility-libraries-to-improve-your-efficiency-d49e53c5c936
作為一名前端開發(fā)人員，我通過這些 JavaScript 庫(kù)極大地提高了自己的效率，比如格式化日期、處理 URL 參數(shù)、調(diào)試移動(dòng)網(wǎng)頁(yè)等。因此，我想和你們分享這些內(nèi)容，希望也能幫助到您。1.使用“Day.js”格式化日期和時(shí)間網(wǎng)址：https://day.js.org/en/作為一名開發(fā)人員，我厭倦了在 JavaScript 中操作日期和時(shí)間，因?yàn)樗闊┝恕?/span>例如，當(dāng)我們想要打印當(dāng)前的日期和時(shí)間時(shí)，我們需要編寫一大段代碼來完成。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 來解析、驗(yàn)證、操作和顯示現(xiàn)代瀏覽器的日期和時(shí)間。如果您使用 Moment.js，您就已經(jīng)知道如何使用 Day.js?！?/span>
2.使用“qs.js”格式化URL參數(shù)
網(wǎng)址：https://github.com/ljharb/qs
您是否經(jīng)常需要獲取“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=100const search = formatSearch() // { name: 'fatfish', age: 100 }// use qs.js to formatconst search2 = qs.parse(window.location.search.slice(1)) // { name: 'fatfish', age: 100 }
太棒了，但現(xiàn)在您有一個(gè)新功能要實(shí)現(xiàn)。請(qǐng)?jiān)凇癶ttps://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”讀寫cookie
網(wǎng)址：https://github.com/js-cookie/js-cookie
我們都知道在 JavaScript 中操作 cookie 并不是一件簡(jiǎn)單的事情，為了提高您的工作效率我強(qiáng)烈推薦“js-cookie.js”，它是一個(gè)簡(jiǎn)單、輕量級(jí)的用于處理 cookie 的 JavaScript API。
Cookies.set('name', 'fatfish', { expires: 10 })Cookies.get('name') // fatfish
4. 為什么選擇Lodash？
網(wǎng)址：https://github.com/lodash/lodash
我們看一下Lodash的介紹：
Lodash 消除了處理數(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、使用“Vconsole”在移動(dòng)端調(diào)試網(wǎng)頁(yè)
網(wǎng)址：https://github.com/Tencent/vConsole
在移動(dòng)設(shè)備上調(diào)試網(wǎng)頁(yè)非常困難，但是有了“Vconsole”一切都會(huì)變得容易得多。我們可以通過掃描這個(gè)二維碼或者點(diǎn)擊網(wǎng)址來體驗(yàn)它的功能。
TIP：與chrome瀏覽器的devtools類似，Vconsole提供了以下功能來幫助您更好地調(diào)試網(wǎng)頁(yè)
日志：console.log|信息|錯(cuò)誤|...
網(wǎng)絡(luò)：XMLHttpRequest、Fetch、sendBeacon
元素：HTML 元素樹
存儲(chǔ)：Cookie、本地存儲(chǔ)、會(huì)話存儲(chǔ)
手動(dòng)執(zhí)行JS命令
自定義插件
寫在最后
以上就是我今天想與你分享的全部?jī)?nèi)容，希望這些內(nèi)容對(duì)你有所幫助，最后，感謝您的閱讀，祝編程愉快！
該文章在 2024/10/14 10:33:04 編輯過
400 186 1886
