dayjs
dayjs是一个十分强大的日期处理库,它只有 2KB ,十分轻巧。API设计支持链式调用,非常灵活,而且兼容所有的浏览器。
以下是 dayjs 中使用的时候常见的 10 个例子,仅供参考
import dayjs from "dayjs";
// 1. 获取当前日期
const currentDate = dayjs();
console.log(currentDate.format('YYYY-MM-DD')); // 输出当前日期,如:2024-04-30
// 2. 获取当前时间
const currentTime = dayjs();
console.log(currentTime.format('HH:mm:ss')); // 输出当前时间,如:14:30:00
// 3. 获取指定日期
const specifiedDate = dayjs('2023-01-15');
console.log(specifiedDate.format('YYYY-MM-DD')); // 输出指定日期,如:2023-01-15
// 4. 格式化日期
const formattedDate = dayjs('2024-04-30');
console.log(formattedDate.format('dddd, MMMM D, YYYY')); // 输出格式化后的日期,如:Saturday, April 30, 2024
// 5. 添加/减去时间
const addedTime = dayjs().add(7, 'days');
console.log(addedTime.format('YYYY-MM-DD')); // 输出添加 7 天后的日期,如:2024-05-07
// 6. 计算两个日期之间的差值
const date1 = dayjs('2024-01-01');
const date2 = dayjs('2024-02-01');
const diffInDays = date2.diff(date1, 'days');
console.log(diffInDays); // 输出两个日期之间的天数差,如:31
// 7. 检查日期是否在某个范围内
const targetDate = dayjs('2024-04-30');
const startDate = dayjs('2024-04-01');
const endDate = dayjs('2024-05-01');
const isWithinRange = targetDate.isBetween(startDate, endDate);
console.log(isWithinRange); // 输出 true,因为目标日期在范围内
// 8. 获取一周中的第几天
const dayOfWeek = dayjs().day();
console.log(dayOfWeek); // 输出今天是一周中的第几天,0 表示星期日,1 表示星期一,依此类推
// 9. 获取月份的天数
const daysInMonth = dayjs('2024-02-01').daysInMonth();
console.log(daysInMonth); // 输出该月份的天数,如:29
// 10. 获取两个日期之间的所有日期
const startDate = dayjs('2024-04-01');
const endDate = dayjs('2024-04-05');
const allDates = [];
let currentDate = startDate;
while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
allDates.push(currentDate.format('YYYY-MM-DD'));
currentDate = currentDate.add(1, 'day');
}
console.log(allDates); // 输出包含所有日期的数组,如:['2024-04-01', '2024-04-02', '2024-04-03', '2024-04-04', '2024-04-05']
classnames
classnames是用来处理 css 类名组合的一个库,提供了一种方便的方式来动态添加或者移除类名,实现样式的灵活控制。
比如说我们的一个按钮,它有按下跟 hover 两种状态,对应不同的样式。对于没有用 classnames 来说,可能会这么写
let btnClass = 'btn';
if (isPressed) btnClass += ' btn-pressed';
else if (isHovered) btnClass += ' btn-over';
return (
<button className={btnClass}>
按钮
</button>
);
这种写法都算好的,更常见的是在 className 中用三元表达式+模版字符串来拼接,更是惨不忍睹。用上 classnames 之后,常常可以这么写:
const btnClass = classnames({
btn: true,
'btn-pressed': isPressed,
'btn-over': !isPressed && isHovered,
});
return (
<button className={btnClass}>
按钮
</button>
);
copy-text-to-clipboard
copy-text-to-clipboard是一个轻量级的复制文本到剪贴板的库,仅仅只有 0.2KB ,提供了简单的 API ,非常易用,每周也是有着 37W+ 的下载量。
它兼容了不同的浏览器,没有任何外部依赖,在一些浏览器中,复制文本到剪贴板需要用户授权,该库提供了相应的错误处理机制。
import copy from 'copy-text-to-clipboard';
button.addEventListener('click', () => {
copy('复制一些东西');
});
crypto-js
crypto-js提供了多种加密算法和常用的加密功能。包括对称加密算法(如 AES 、 DES )、哈希算法(如 MD5 、 SHA-1 、 SHA-256 )等。
除了提供多种加密算法之外,它的 API 设计也十分简单易用,以及对于各个平台的兼容性也十分好。
它的性能也很好,在加解密的过程中,可以快速处理大量的数据,不会对性能造成明显影响。
举一些例子,比如常用的MD5哈希算法:
import CryptoJS from "crypto-js";
const data = 'Hello, world!';
const md5Hash = CryptoJS.MD5(data);
console.log(md5Hash.toString());
对称加密:
import CryptoJS from "crypto-js";
const key = CryptoJS.enc.Utf8.parse("1234567890123456");
const iv = CryptoJS.enc.Utf8.parse("1234567890123456");
const plaintext = "Hello, world!";
const ciphertext = CryptoJS.AES.encrypt(plaintext, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
console.log("加密后的数据:", ciphertext.toString()); //yWUReRP6G/jD2zWIXJMtTw==
const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
console.log("解密后的数据:", decrypted.toString(CryptoJS.enc.Utf8)); //Hello, world!
viewerjs
图片预览需求想必很多同学都遇到过,这里介绍一个功能强大的图片预览库——viewerjs。
该库支持缩放、拖动、旋转等交互功能,可以通过鼠标或触摸屏进行操作,自由调整图片的大小和位置;而且支持缩略图导航功能,可以通过缩略图预览图片,快速导航到指定的图片。
它还提供了丰富的定制选项,可以根据需要自定义显示效果、交互行为和样式样式,满足不同项目的需求。
localforage
localstorage 相信大家都知道,但是它只有 5M 的存储空间,如果想在浏览器本地存储更多的东西,那就应该使用 indexDB 或者 WebSQL 。
localforage就是一个封装浏览器存储引擎的库,它的设计目的就是为了让开发者能够以简易的API来使用浏览器的本地存储来存储数据。
它可以自动地选择合适的存储引擎( IndexedDB 、 WebSQL 或 localStorage )来进行数据存储。
它支持自动数据类型转换,可以将对象、数组等复杂数据结构转换成适合存储的格式,并在取出数据时自动转换回原始格式。
它支持异步操作,所有的存储操作都是非阻塞的,可以避免因为数据存取操作而阻塞 UI 线程,支持回调函数的方式和 Promise 的方式来处理异步。
读操作:
try {
const value = await localforage.getItem('key');
console.log(value);
} catch (err) {
console.log(err);
}
写操作:
try {
const value = await localforage.setItem('key', [1, 2, 3]);
} catch (err) {
console.log(err);
}
vconsole
我们平时在开发的时候一般都是 F12 打开开发者工具来调试,但是当我们的 Web 项目跑在真机移动端中,是没有这个开发者工具的。那应该怎么调试呢?
这个时候就可以用到vconsole这个库,它可以在手机浏览器中实时查看日志、错误信息、网络请求等调试信息,帮助我们快速定位和解决问题。
在引入的时候,我有一个小技巧可以分享,最好是使用 cdn的 方式引入,这样你就很容易根据一些特征去做动态导入,这种包没必要打包进主包里面。
比如说:
const loadVConsole = () => {
const url = "https://unpkg.com/vconsole@latest/dist/vconsole.min.js";
if (!location.href.includes("debug")) {
return;
}
const script = document.createElement("script");
script.src = url;
script.onload = () => {
new window.VConsole();
};
document.body.appendChild(script);
};
当然,这个 cdn 包的资源最好你自己维护一份。
本文暂时没有评论,来添加一个吧(●'◡'●)