作为一名前端开发者,这些 JavaScript 库极大地提高了我的工作效率,如格式化日期、处理 URL 参数和调试移动网页。朋友们,我想和你们分享这些库。
作为开发者,我已经厌倦了在 JavaScript 中操作日期和时间,因为它太麻烦了。
例如,当我们想打印当前日期和时间时,我们需要编写大量代码来实现。
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
幸运的是,使用 Day.js
只需要一行代码就可以完成。
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')) // 2022-05-09 07:19:14
注意:“Day.js 是一个极简的 JavaScript 库,它可以解析、验证、操作和显示现代浏览器中大部分兼容 Moment.js API 的日期和时间。如果您使用 Moment.js,您已经知道如何使用 Day.js。”
您是否经常需要获取 “URL” 的参数?也许你会写这样的一个函数。
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 }
很好,但现在您有了一个新函数要实现。请在 “https://medium.com” 中添加 name 和 age 两个参数
// 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
我们都知道,在 JavaScript 中操作 cookie 不是一件简单的事情,为了提高您的工作效率,我强烈推荐 ‘js-cookie.js’,它是一个简单、轻量级的 JavaScript API,用于处理 cookie。
Cookies.set('name', 'fatfish', { expires: 10 })
Cookies.get('name') // fatfish
让我们来看看 Lodash 的介绍:
// 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. ...
Lodash 通过减少数组、数字、对象、字符串等的处理难度来简化 JavaScript。Lodash 的模块化方法非常适合:
在移动设备上调试网页非常困难,但有了 “Vconsole” 一切都会变得更轻松。我们可以通过扫描此二维码或点击链接来体验其功能。
提示: 与 chrome 浏览器的 devtools 类似,Vconsole 提供了以下功能来帮助您更好地调试网页
![]
感谢您的阅读。 期待您的关注和阅读更多高质量的文章。