编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

比较好用的前端库(好的前端推荐)

wxchong 2024-09-01 06:46:25 开源技术 10 ℃ 0 评论

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提供了多种加密算法和常用的加密功能。包括对称加密算法(如 AESDES )、哈希算法(如 MD5SHA-1SHA-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来使用浏览器的本地存储来存储数据。

它可以自动地选择合适的存储引擎( IndexedDBWebSQLlocalStorage )来进行数据存储。

它支持自动数据类型转换,可以将对象、数组等复杂数据结构转换成适合存储的格式,并在取出数据时自动转换回原始格式。

它支持异步操作,所有的存储操作都是非阻塞的,可以避免因为数据存取操作而阻塞 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 包的资源最好你自己维护一份。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表