关于网站开发与设计论文装修公司品牌包装设计
前言
作为一名前端开发者,这些 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=1003. 使用 “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 的模块化方法非常适合:
- 迭代数组、对象和字符串
- 操作和测试值
- 创建组合函数
5. 使用 “Vconsole” 在移动终端上调试网页
链接
在移动设备上调试网页非常困难,但有了 “Vconsole” 一切都会变得更轻松。我们可以通过扫描此二维码或点击链接来体验其功能。
提示: 与 chrome 浏览器的 devtools 类似,Vconsole 提供了以下功能来帮助您更好地调试网页
- 日志:console.log|info|error|…
- 网络: XMLHttpRequest、Fetch、sendBeacon
- 元素:HTML 元素树
- 存储:Cookie、LocalStorage、SessionStorage
- 手动执行 JS 命令
- 自定义插件
![]
最后
感谢您的阅读。 期待您的关注和高质量的文章。