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

news/2024/2/24 8:35:58/文章来源:https://blog.csdn.net/weixin_42429220/article/details/135638061

前言

作为一名前端开发者,这些 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.luyixian.cn/news_show_926025.aspx

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

相关文章

WDS服务企业安装Win10

计算机 操作系统 系统服务 软件安装 WDS Windows Sserver2019STD AD&#xff0c;DNS,DHCP,WDS WADK10.0 MDT2013 Update 1 Preview 1.基础配置 域控配置静态IP 域控制器&#xff1a;需要安装AD域服务&#xff0c;DHCP和DNS三个角色 默认配置 默认配置 安装完成我们将此…

微信小程序快速入门02(含案例)

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、页面导航1.…

HarmonyOS自学-Day5(使用List、Stack、RelativeContainer相关组件实现的小案例)

目录 文章声明⭐⭐⭐让我们开始今天的学习吧&#xff01;小案例 文章声明⭐⭐⭐ 该文章为我&#xff08;有编程语言基础&#xff0c;非编程小白&#xff09;的 HarmonyOS自学笔记&#xff0c;此类文章笔记我会默认大家都学过前端相关的知识&#xff0c;并常常以实现相关小案例…

2024“华数杯”(A题)|放射性废水扩散|国际大学生数学建模竞赛建模解析,小鹿学长带队指引全代码文章与思路

我是小鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 完整内容可以在文章末尾领取&#xff01; 这回带大家体验一下2024“华数杯”国际大学生数学建模竞赛呀&#xff01; 此题涉及到放射性废水从日本排放…

mac快捷创建文件的方法

mac快捷创建文件的方法 在macbook的使用中&#xff0c;当我们在桌面或访达等地方使用右键时&#xff0c;可以看到新建文件夹的选项&#xff0c;却怎么也找不到创建文件的选项。这种情况有时候会带来不便。这篇文章给大家带来一个非常简单解决这个问题。 下载 在App Store中搜索…

使用numpy处理图片——90度旋转

大纲 左旋转90度向右旋转90旋转180度 代码地址 在《使用numpy处理图片——镜像翻转和旋转》一文中&#xff0c;我们介绍了如何将图片旋转的方法。本文将使用更简单的方法旋转图片90度。 左旋转90度 import numpy as np import PIL.Image as Imagedata np.array(Image.open(t…

5.3 Verilog 带参数例化

5.3 Verilog 带参数例化 分类 Verilog 教程 关键词&#xff1a; defparam&#xff0c;参数&#xff0c;例化&#xff0c;ram 当一个模块被另一个模块引用例化时&#xff0c;高层模块可以对低层模块的参数值进行改写。这样就允许在编译时将不同的参数传递给多个相同名字的模块…

获取本地IP网卡信息

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、获取本地IP&#xff0c;以及全部网卡信息总结 前言 一、获取本地IP&#xff0c;以及全部网卡信息 const os require(node:os) function getIPAdress(){/…

初识Ubuntu

其实还是linux操作系统 命令都一样 但是在学习初级阶段&#xff0c;我还是将其分开有便于我的学习和稳固。 cat 查看文件 命令 Ubuntu工作中经常是用普通用户&#xff0c;在需要时才进行登录管理员用户 sudn -i 切换成管理用户 我们远程连接时 如果出现 hostname -I没有出现…

Spring Boot 中批量执行 SQL 脚本的实践

在Spring Boot应用中&#xff0c;有时候我们需要批量执行存储在数据库中的 SQL 脚本。本文将介绍一个实际的案例&#xff0c;演示如何通过 Spring Boot、MyBatis 和数据库来实现这一目标。 0、数据库层 CREATE TABLE batchUpdate (id INT AUTO_INCREMENT PRIMARY KEY,update_…

Shopee买家通系统:领先科技助力卖家全自动化营销

在虾皮卖家和服务商的竞争激烈的市场环境下&#xff0c;不断追求创新和效率提升是至关重要的。近期推出的Shopee买家通系统正是基于最新的防指纹防关联技术&#xff0c;以其独特的能力完全模拟真人运行&#xff0c;实现全自动化操作&#xff0c;为卖家们提供了一款卓越的营销工…

跟着cherno手搓游戏引擎【7】Input轮询

在引擎程序中任何时间&#xff0c;任何位置都能知道按键是否按下、鼠标的位置等等信息。 与事件系统的区别&#xff1a;事件系统是在按下时调用并传递按键状态&#xff1b;轮询是每时每刻都能获取按键状态 创建基类&#xff1a; YOTO/Input.h&#xff1a;名如其意 #pragma …

强化学习应用(一):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个价值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…

C++力扣题目77--组合

给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2&#xff1a; 输入&#xff1a;n 1, k …

k8s源码阅读:Informer源码解析

写在之前 Kubernetes的Informer机制是一种用于监控资源对象变化的机制。它提供了一种简化开发者编写控制器的方式&#xff0c;允许控制器能够及时感知并响应 Kubernetes 集群中资源对象的变化。Informer通过与Kubernetes API服务器进行交互&#xff0c;通过监听API服务器上资源…

【设计模式-03】Strategy策略模式及应用场景

一、简要描述 Java 官方文档 Overview (Java SE 18 & JDK 18)module indexhttps://docs.oracle.com/en/java/javase/18/docs/api/index.html Java中使用到的策略模式 Comparator、comparable Comparator (Java SE 18 & JDK 18)declaration: module: java.base, pa…

WPF真入门教程28--项目案例--MQTT服务器和客户端

1、先上图看帅照 这个案例还是布局加视图模型&#xff0c;样式应用&#xff0c;业务逻辑&#xff0c;该项目是一个mqtt服务器和客户端的通信工具&#xff0c;这里不去分析mqtt的通信原理&#xff0c;关注在于wpf技能的应用&#xff0c;能够掌握这个例子&#xff0c;离项目开发…

C#编程-在线程中使用同步

在线程中使用同步 在线程应用程序中,线程需要相互共享数据。但是,应用程序应该确保一个线程不更改另一个线程使用的数据。考虑有两个线程的场景。一个线程从文件读取工资,另一个线程尝试更新工资。当两个线程同时工作时,数据就会受损。下图显示了两个线程同时访问一个文件…

杨中科 .NETCORE EFCORE第七部分 一对一,多对多

一对一 一对一关系配置 1、builder.HasOne(o >o.Delivery).WithOne(d>d.Order).HasForeignKey(d>dOrderId); 2、测试插入和获取数据 示例 新建 Order 新建 Delivery DeliveryConfig OrderConfig 执行 迁移命令 查看数据库 测试数据插入 运行查看数据 多对多…

Python文件自动化处理

os模块 Python标准库和操作系统有关的操作创建、移动、复制文件和文件夹文件路径和名称处理 路径的操作 获取当前Python程序运行路径不同操作系统之间路径的表示方式 windows中采用反斜杠(\)作为文件夹之间的分隔符 Mac和Linux中采用斜杠(/)作为文件夹之间的分隔符 把文件…