五个实用JS库99%的人可能都不知道

开发 前端
作为一名前端开发者,我通过这些JavaScript库大大提高了自己的效率,比如格式化日期、处理URL参数、调试手机网页等。因此,我想将这些好用的库分享给你们,也希望可以帮助到你们。

前言

作为一名前端开发者,我通过这些JavaScript库大大提高了自己的效率,比如格式化日期、处理URL参数、调试手机网页等。因此,我想将这些好用的库分享给你们,也希望可以帮助到你们。

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

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

作为一名开发人员,我受够了在 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参数

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

我们为了获取“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”中添加姓名和年龄两个参数。

// 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”读写cookies

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

我们都知道在 JavaScript 中操作 cookies 不是一件简单的事情,为了提高你的工作效率我强烈推荐“js-cookie.js”,它是一个简单、轻量级的 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

先来看看Lodash的介绍:

Lodash 通过消除处理数组、数字、对象、字符串等的麻烦,使 JavaScript 变得更容易。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. ...

5、在移动端使用“Vconsole”调试网页

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

在移动设备上调试网页非常困难,但有了“Vconsole”,一切都会变得容易得多。

TIP: 与chrome浏览器的devtools类似,Vconsole提供了以下功能帮助你更好的调试网页。

  • 日志:console.log、info、error、…...
  • 网络:XMLHttpRequest、Fetch、sendBeacon
  • 元素:HTML 元素树
  • 存储:Cookies、LocalStorage、SessionStorage
  • 手动执行JS命令
  • 自定义插件
责任编辑:华轩 来源: web前端开发
相关推荐

2021-09-24 14:20:25

开发技能工具

2021-07-22 09:28:35

DockerLinux命令

2020-07-29 09:53:09

VSCode编码工具插件

2022-06-23 13:13:36

GitHub开发技巧

2018-10-17 14:50:08

2022-06-19 14:38:55

Python

2022-04-30 19:22:35

Python编程语言

2022-10-31 18:38:24

MySQL数据订单表

2020-12-14 07:51:16

JS 技巧虚值

2020-08-04 09:57:52

JS开发前端

2021-01-12 12:33:20

Pandas技巧代码

2020-12-21 09:00:04

MySQL缓存SQL

2017-10-22 15:34:34

手机内存清理内存手机

2009-09-04 11:06:06

Linux桌面Linux操作系统linux

2021-08-27 10:03:12

人工智能AI

2022-09-20 11:58:27

NpmNode.js

2022-05-01 09:29:19

Chrome面板页面

2011-02-14 16:11:44

2015-05-14 15:59:33

DockerLinux容器管理工具

2020-12-21 09:44:53

MySQL查询缓存数据库
点赞
收藏

51CTO技术栈公众号