5个99%的人可能不知道的实用程序库!

前言

作为一名前端开发者,这些 JavaScript 库极大地提高了我的工作效率,如格式化日期、处理 URL 参数和调试移动网页。朋友们,我想和你们分享这些库。

1. 使用 “Day.js” 来格式化日期和时间

链接

作为开发者,我已经厌倦了在 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。”

2. 使用 “qs.js” 来格式化 URL 参数

链接

您是否经常需要获取 “URL” 的参数?也许你会写这样的一个函数。

const formatSearch = () => {window.location.search.slice(1).split('&').reduce((res, it) => {const [ key, value ] = it.split('=')res[ key ] = valuereturn 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

3. 使用 “js-cookie.js” 来读取和写入 cookie

链接

我们都知道,在 JavaScript 中操作 cookie 不是一件简单的事情,为了提高您的工作效率,我强烈推荐 ‘js-cookie.js’,它是一个简单、轻量级的 JavaScript API,用于处理 cookie。

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

4. 为什么是 Lodash?

链接

让我们来看看 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 的模块化方法非常适合:

1. 迭代数组、对象和字符串
2. 操作和测试值
3. 创建组合函数

5. 使用 “Vconsole” 在移动终端上调试网页

链接

在移动设备上调试网页非常困难,但有了 “Vconsole” 一切都会变得更轻松。我们可以通过扫描此二维码或点击链接来体验其功能。

提示: 与 chrome 浏览器的 devtools 类似,Vconsole 提供了以下功能来帮助您更好地调试网页

1. 日志:console.log|info|error|…
2. 网络: XMLHttpRequest、Fetch、sendBeacon
3. 元素:HTML 元素树
4. 存储:Cookie、LocalStorage、SessionStorage
5. 手动执行 JS 命令
6. 自定义插件

![]

最后

感谢您的阅读。 期待您的关注和高质量的文章。