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. 自定义插件

![]

最后

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精确掌控并发:漏桶算法在分布式环境下并发流量控制的设计与实现

这是《百图解码支付系统设计与实现》专栏系列文章中的第&#xff08;16&#xff09;篇&#xff0c;也是流量控制系列的第&#xff08;3&#xff09;篇。点击上方关注&#xff0c;深入了解支付系统的方方面面。 本篇重点讲清楚漏桶原理&#xff0c;在支付系统的应用场景&#x…

【RPC】网络通信:哪种网络IO模型最适合RPC框架?

一、背景 RPC是解决进程间通信的一种方式。一次RPC调用&#xff0c;本质就是服务消费者与服务提供者间的一次网络信息交换的过程。服务调用者通过网络IO发送一条请求消息&#xff0c;服务提供者接收并解析&#xff0c;处理完相关的业务逻辑之后&#xff0c;再发送一条响应消息…

深度解析Java正则表达式

深度解析Java正则表达式 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在今天的文章中&#xff0c;我们将深度解析Java正则表达式&#xff0c;这个在文本处理中强大…

重学Java 7 数组Arr.1

我欲与君相知&#xff0c;长命无绝衰 ——24.1.16 一、数组的定义 1.概述&#xff1a;数组是一个容器&#xff0c;数组本身属于引用数据类型 2.作用&#xff1a;一次存储多个数据 3.特点&#xff1a; ①既可以存储基本类型的数据&#xff0c;也可以存储引用类型的数据 ②定长&a…

【软件测试】学习笔记-统一测试数据平台

这篇文章主要探讨全球大型电商企业中关于准备测试数据的最佳实践&#xff0c;从全球大型电商企业早期的测试数据准备实践谈起&#xff0c;分析这些测试数据准备方法在落地时遇到的问题&#xff0c;以及如何在实践中解决这些问题。其实&#xff0c;这种分析问题、解决问题的思路…

mathtype2024版本下载与安装(mac版本也包含在内)

安装包补丁主要是mathtype的安装包&#xff0c;与它的补丁。 详细安装过程&#xff1a; step1&#xff1a; 使用方法是下载完成后先安装MathType-win-zh.exe文件&#xff0c;跟着步骤走直接安装就行。 step2&#xff1a; 关闭之后&#xff0c;以管理员身份运行MathType7PJ.exe…

CF1178F2 Long Colorful Strip 题解 搜索

Long Colorful Strip 传送门 题面翻译 题目描述 这是 F 题的第二个子任务。F1 和 F2 的区别仅在对于 m m m 和时间的限制上 有 n 1 n1 n1 种颜色标号从 0 0 0 到 n n n&#xff0c;我们有一条全部染成颜色 0 0 0 的长为 m m m 的纸带。 Alice 拿着刷子通过以下的过…

Java设计模式之原型模式详解

Java设计模式之原型模式详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在今天的篇章中&#xff0c;我们将揭开Java设计模式中的另一面纱——原型模式。这个模式…

一、ArcGIS Pro SDK for Microsoft .NET 开发环境配置

ArcGIS Pro二次开发需要的工具&#xff1a; 1.Visual Studio 2.ArcGIS Pro SDK 一、Visual Studio安装 经过查阅资料&#xff0c;ArcGIS Pro3.0版本需要安装Visual Studio2022版&#xff0c;因为只有22版的才会有有ArcGIS Pro3.0以上版对应ArcGIS Pro SDK&#xff0c;因此&…

sqlserver->clickhouse迁移数据

网上看了很多cdc的方案&#xff0c;说实在的&#xff0c;flink也不好弄&#xff0c;主要是驱动。 flink sql中的方案&#xff0c;好不容易弄到了所有的驱动&#xff0c;结果&#xff0c;字段非常难搞&#xff0c;例如uuid对应flink的String&#xff0c;结果执行flink sql的时候…

vue的sync语法糖的使用

Vue的.sync语法糖是一个用于双向数据绑定的指令&#xff0c;可以在子组件中用来监听父组件传递下来的props的变化&#xff0c;并在需要的时候发出一个自定义事件来通知父组件进行数据更新。 在Vue中&#xff0c;.sync语法糖的使用方法如下&#xff1a; 在父组件中&#xff0c…

第十一部分 隐含规则 (一)

目录 一、使用隐含规则 二、隐含规则一览 1、编译 C 程序的隐含规则 2、编译 C程序的隐含规则 3、编译 Pascal 程序的隐含规则 4、编译 Fortran/Ratfor 程序的隐含规则 5、预处理 Fortran/Ratfor 程序的隐含规则 6、编译 Modula-2 程序的隐含规则 7、汇编和汇编预处理…

如何编译openssl的早期版本的共享库,如openssl 1.0

背景介绍 最近在为客户排查问题的时候&#xff0c;发现客户提供的日志是加密的&#xff0c;解密工具依赖到了openssl 1.0的共享库。可是手头没有这么老版本的openssl共享库。因此只好手动编译一个出来。 编译步骤 因为openssl 1.0是比较老的版本&#xff0c;很多系统上的库已…

常用Java代码-Java中的注解处理器(Annotation Processing)

注解处理器&#xff08;Annotation Processing&#xff09;是Java编译时的一种机制&#xff0c;它允许开发者在源代码上添加注解&#xff0c;并通过注解处理器生成源代码、报告编译器错误或警告、或者进行其他编译时操作。 在Java中&#xff0c;注解处理器通常使用Java的反射和…

新能源汽车智慧充电桩解决方案:智慧化综合管理与数字化高效运营

一、方案概述 TSINGSEE青犀&触角云新能源汽车智慧充电桩解决方案基于管理运营平台&#xff0c;覆盖业务与应用、数据传输与梳理、多端开发、搭建等模块&#xff0c;融合AI、5G、Wi-Fi 、移动支付等技术&#xff0c;实现充电基础设施由数字化向智能化演进&#xff0c;通过构…

【算法题】57. 插入区间

题目 给你一个 无重叠的 &#xff0c;按照区间起始端点排序的区间列表。 在列表中插入一个新的区间&#xff0c;你需要确保列表中的区间仍然有序且不重叠&#xff08;如果有必要的话&#xff0c;可以合并区间&#xff09;。 示例 1&#xff1a; 输入&#xff1a;intervals …

翻译: Pyenv管理Python版本从入门到精通一

你是否经常在管理系统上多个Python版本时遇到困难&#xff1f;这可能是一个艰巨的任务&#xff0c;尤其是在处理需要不同Python版本的不同项目时。 但别担心&#xff0c;有一个解决方案&#xff1a;pyenv。就像一个熟练的杂技演员&#xff0c;pyenv可以轻松处理多个Python版本…

Vue插槽(slot)的使用

Vue插槽(slot)是一种强大的功能&#xff0c;它允许您在组件模板中插入自定义内容。插槽可以让你更灵活地构建组件&#xff0c;以满足不同的使用场景。 使用说明&#xff1a; 定义插槽&#xff1a;在组件模板中&#xff0c;使用<slot>标签来定义插槽。使用插槽&#xff…

连接超时的问题

连接超时的问题 通用第三方工具连接超时 connect timeout 方案一&#xff1a; /etc/ssh/sshd_config node1上操作&#xff0c;图是错的 方案二&#xff1a; windows上Hosts文件域名解析有问题 比如&#xff1a; 192.168.xx.100 node1 192.168.xx.161 node1 两个都解析成node…

绝地求生:【PC】未授权程序使用行为的相关公告

各位玩家大家好&#xff0c; 最近闲游盒通过PUBG玩家社区收到了关于未授权程序的举报&#xff0c;举报称有人在游戏内使用了能测量玩家间的距离并辅助迫击炮射击的未授权辅助程序。为此&#xff0c;我们想就该事项向大家进行如下公告&#xff1a; 使用此类未授权程序的行为违反…