5个实用JS库

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

mon_star°

911人浏览 · 2024-09-09 23:30:47

mon_star° · 2024-09-09 23:30:47 发布

前言

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

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

地址：Day.js · 2kB JavaScript date utility library

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

地址：GitHub - ljharb/qs: A querystring parser with nesting support

我们为了获取“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 url

console.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100

3.使用“js-cookie.js”读写cookies

地址：GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

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

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

Cookies.get('name') // fatfish

4.为什么选择 Lodash？

地址：GitHub - lodash/lodash: A modern JavaScript utility library delivering modularity, performance, & extras.

先来看看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. ...