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 包的资源最好你自己维护一份。