vconsole

vconsole是Tencent開(kāi)源的一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板。

vConsole 是框架無(wú)關(guān)的，可以在 Vue、React 或其他任何框架中使用。

現(xiàn)在 vConsole 是微信小程序的官方調(diào)試工具。

使用很簡(jiǎn)單

javascript
import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置參數(shù)來(lái)初始化，詳情見(jiàn)文檔
const vConsole = new VConsole({ theme: 'dark' });

// 接下來(lái)即可照常使用 `console` 等方法
console.log('Hello world');

// 結(jié)束調(diào)試后，可移除掉
vConsole.destroy();

詳情可見(jiàn)下面教程鏈接
https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

axios

這可以說(shuō)是我們所有項(xiàng)目都用到的庫(kù)，相信各位前端開(kāi)發(fā)的同學(xué)對(duì)它也不會(huì)陌生。這是一個(gè)基于 Promise 的 http 請(qǐng)求庫(kù)，也就是我們常說(shuō)的調(diào)接口，就是用它來(lái)調(diào)用。它支持瀏覽器端和 node 端，除此之外，它支持我們自定義請(qǐng)求和響應(yīng)的攔截器，這可以讓我們?cè)诎l(fā)送請(qǐng)求前或收到響應(yīng)后執(zhí)行額外的操作。比如，可以在請(qǐng)求發(fā)送前添加認(rèn)證信息，或在收到響應(yīng)后處理數(shù)據(jù)。它提供了取消請(qǐng)求的功能，我們可以在請(qǐng)求發(fā)送后取消請(qǐng)求，避免不必要的網(wǎng)絡(luò)請(qǐng)求或資源浪費(fèi)。以下是我自己常用的一種封裝 axios 的手法：

javascript
let _BASE_URL = "/api";
import { message } from "antd";
import _axios from "axios";

const axiosInstance = _axios.create({
 withCredentials: true, // 是否允許帶cookie這些
});
axiosInstance.interceptors.request.use((request) => {
 request.headers['token'] = getAuthToken();
 return request;
});
axiosInstance.interceptors.response.use(
 (response: any) => {
 const data = response.data;
 if (data.code === 401) {
 const loginUrl = `${location.protocol}//${
 location.host
 }/login?redirect_url=${encodeURIComponent(location.href)}`;
 location.replace(loginUrl);
 } else if (data.code !== 200) {
 message.error(data.msg);
 return Promise.reject(data.msg);
 }
 return response.data;
 },
 (error) => {
 // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。對(duì)響應(yīng)錯(cuò)誤時(shí)調(diào)用。
 console.error("請(qǐng)求錯(cuò)誤: ", error);
 message.error(error.message);
 return Promise.reject(error);
 }
);

export const BASE_URL = _BASE_URL;
export const fetch = axiosInstance;

dayjs

dayjs是一個(gè)十分強(qiáng)大的日期處理庫(kù)，它只有 2KB ，十分輕巧。API設(shè)計(jì)支持鏈?zhǔn)秸{(diào)用，非常靈活，而且兼容所有的瀏覽器。

以下是 dayjs 中使用的時(shí)候常見(jiàn)的 10 個(gè)例子，僅供參考

javascript
import dayjs from "dayjs";

// 1. 格式化日期
const formattedDate = dayjs('2024-04-10');
console.log(formattedDate.format('dddd, MMMM D, YYYY')); // 輸出格式化后的日期，如：Saturday, April 10, 2024

// 2. 獲取當(dāng)前日期
const currentDate = dayjs();
console.log(currentDate.format('YYYY-MM-DD')); // 輸出當(dāng)前日期，如：2024-07-10

// 3. 獲取當(dāng)前時(shí)間
const currentTime = dayjs();
console.log(currentTime.format('HH:mm:ss')); // 輸出當(dāng)前時(shí)間，如：14:30:00

// 4. 獲取指定日期
const specifiedDate = dayjs('2024-07-10');
console.log(specifiedDate.format('YYYY-MM-DD')); // 輸出指定日期，如：2024-07-10

// 5. 添加/減去時(shí)間
const addedTime = dayjs().add(7, 'days');
console.log(addedTime.format('YYYY-MM-DD')); // 輸出添加 7 天后的日期，如：2024-07-14

// 6. 計(jì)算兩個(gè)日期之間的差值
const date1 = dayjs('2024-01-01');
const date2 = dayjs('2024-02-01');
const diffInDays = date2.diff(date1, 'days');
console.log(diffInDays); // 輸出兩個(gè)日期之間的天數(shù)差，如：31

// 7. 檢查日期是否在某個(gè)范圍內(nèi)
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，因?yàn)槟繕?biāo)日期在范圍內(nèi)

// 8. 獲取一周中的第幾天
const dayOfWeek = dayjs().day();
console.log(dayOfWeek); // 輸出今天是一周中的第幾天，0 表示星期日，1 表示星期一，依此類推

// 9. 獲取月份的天數(shù)
const daysInMonth = dayjs('2024-02-01').daysInMonth();
console.log(daysInMonth); // 輸出該月份的天數(shù)，如：29

// 10. 獲取兩個(gè)日期之間的所有日期
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); // 輸出包含所有日期的數(shù)組，如：['2024-04-01', '2024-04-02', '2024-04-03', '2024-04-04', '2024-04-05']

lodash

lodash 是一個(gè) js 工具庫(kù)，提供了許多工具函數(shù)，用于簡(jiǎn)化常見(jiàn)的編程需求。以下是我對(duì)它特點(diǎn)的一些理解：

• 深拷貝：提供了強(qiáng)大的深拷貝函數(shù)，兼容了函數(shù)、日期、正則對(duì)象等。

• 函數(shù)工具：包含了許多函數(shù)工具，如節(jié)流、防抖、柯里化等。

• 類型檢查：提供了一系列用于類型檢查的函數(shù)，如 isString 、 isArray 、 isObject 等。

• 集合處理：提供了許多用于處理數(shù)組和對(duì)象的方法，如排序、過(guò)濾、查找、分組等，使得對(duì)集合進(jìn)行操作變得非常方便。

• 數(shù)學(xué)運(yùn)算：提供了一些常見(jiàn)的數(shù)學(xué)運(yùn)算函數(shù)，如求和、求平均數(shù)、最大值、最小值等。

• 字符串處理：提供了許多用于字符串處理的方法，如截取、拼接、格式化等。

下面舉幾個(gè)我們項(xiàng)目中常用的lodash函數(shù)：

深拷貝

javascript
import { cloneDeep } from "lodash"

const originalObject = { name: '名字', age: 30, hobbies: ['唱', '跳'] };
const clonedObject = cloneDeep(originalObject);
console.log(clonedObject); // 輸出一個(gè)深拷貝后的對(duì)象

數(shù)組去重

javascript
import { uniq } from "lodash"

const numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const uniqueNumbers = uniq(numbers);
console.log(uniqueNumbers); // 輸出 [1, 2, 3, 4]

const objects = [
 { id: 1, name: 'obj1' },
 { id: 2, name: 'obj2' },
 { id: 1, name: 'obj3' }
];

const uniqueObjects = uniq(objects, obj => obj.id);
console.log(uniqueObjects);

對(duì)象深度比較

javascript
import { isEqual } from "lodash"

const object1 = { a: { b: 2 } };
const object2 = { a: { b: 2 } };
const res = isEqual(object1, object2);
console.log(res); // 輸出 true，因?yàn)閮蓚€(gè)對(duì)象的內(nèi)容相同

函數(shù)防抖

javascript
import { debounce } from "lodash"

const debouncedFunction = debounce(() => {
 console.log('防抖函數(shù)');
}, 1000);

debouncedFunction();

copy-text-to-clipboard

copy-text-to-clipboard主要作用是將指定的文本內(nèi)容快速地復(fù)制到操作系統(tǒng)的剪貼板中，以便用戶可以將這些文本粘貼到其他應(yīng)用程序或文檔中使用

它僅僅只有 0.2KB ，提供了簡(jiǎn)單的 API ，非常易用，每周也是有著 37W+ 的下載量。

javascript
import copy from 'copy-text-to-clipboard';

button.addEventListener('click', () => {
copy('復(fù)制一些東西');
});

Quill

Quill 是一個(gè)快速、輕量級(jí)的富文本編輯器，具有以下特點(diǎn)：

• 跨平臺(tái)和瀏覽器支持：Quill 支持多種平臺(tái)和現(xiàn)代瀏覽器，能夠在不同的環(huán)境中提供一致的編輯體驗(yàn)。

• 預(yù)設(shè)主題：Quill 提供了可擴(kuò)展和可配置的主題，用戶可以根據(jù)自己的需求選擇或自定義編輯器的外觀。

• 輸出 HTML 格式內(nèi)容：Quill 可以將編輯的內(nèi)容輸出為 HTML 格式，無(wú)需額外的解析，方便與其他系統(tǒng)集成。

• 簡(jiǎn)單易用：Quill 的設(shè)計(jì)簡(jiǎn)潔，易于設(shè)置和使用，幾行代碼就可以創(chuàng)建一個(gè)編輯器實(shí)例。

• 擴(kuò)展性強(qiáng)：Quill 具有模塊化的架構(gòu)和豐富的 API，允許開(kāi)發(fā)者根據(jù)具體需求進(jìn)行定制和擴(kuò)展，添加自定義的功能和模塊。

• Quill 在富文本編輯領(lǐng)域擁有廣泛的應(yīng)用，并且在 GitHub 上擁有較高的關(guān)注度和活躍的社區(qū)。它適用于各種需要富文本編輯功能的場(chǎng)景，如博客編輯、論壇發(fā)帖等。

下面是官方示例

下面是官網(wǎng)鏈接
https://quilljs.com/docs/quickstart

crypto-js

Crypto-js 是一個(gè)流行的 JavaScript 加密算法庫(kù) 它支持多種加密算法，如 MD5、SHA-1、SHA-256、AES、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2 等

比如常用的MD5哈希算法：

javascript
import CryptoJS from "crypto-js";
const data = 'Hello, world!';
const md5Hash = CryptoJS.MD5(data);
console.log(md5Hash.toString());

對(duì)稱加密：

javascript
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("加密后的數(shù)據(jù):", ciphertext.toString()); //yWUReRP6G/jD2zWIXJMtTw==

const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
 iv: iv,
 mode: CryptoJS.mode.CBC,
 padding: CryptoJS.pad.Pkcs7,
});

console.log("解密后的數(shù)據(jù):", decrypted.toString(CryptoJS.enc.Utf8)); //Hello, world!

viewerjs

Viewer.js 是一個(gè)用于在網(wǎng)頁(yè)上查看圖片的 JavaScript 庫(kù)。它提供了一種方便的方式來(lái)顯示圖片，并支持縮放、旋轉(zhuǎn)、平移等操作。
github地址：https://github.com/fengyuanchen/viewerjs
用法比較簡(jiǎn)單；一下是一個(gè)簡(jiǎn)單例子

html
<!-- a block container is required -->
<div>
 <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
 <ul id="images">
 <li><img src="picture-1.jpg" alt="Picture 1"></li>
 <li><img src="picture-2.jpg" alt="Picture 2"></li>
 <li><img src="picture-3.jpg" alt="Picture 3"></li>
 </ul>
</div>

javascript
// You should import the CSS file.
// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

// View an image.
const viewer = new Viewer(document.getElementById('image'), {
 inline: true,
 viewed() {
 viewer.zoomTo(1);
 },
});
// Then, show the image by clicking it, or call `viewer.show()`.

// View a list of images.
// Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
const gallery = new Viewer(document.getElementById('images'));
// Then, show one image by click it, or call `gallery.show()`.

localforage

原生的localStorage大家都知道，但是它只有 5M 的存儲(chǔ)空間，如果想在瀏覽器本地存儲(chǔ)更多的東西，那就應(yīng)該使用 indexDB 或者 WebSQL；但是localForage就很niu了 它可以做到localStorage做不到的，下面是它的一些亮點(diǎn)

• 基本信息：localForage 是一個(gè)快速簡(jiǎn)單的 JavaScript 存儲(chǔ)庫(kù)，通過(guò)異步存儲(chǔ)（IndexedDB 或 WebSQL）和類似 localStorage 的 API 改善網(wǎng)頁(yè)應(yīng)用的離線體驗(yàn)，在不支持 IndexedDB 或 WebSQL 的瀏覽器中使用 localStorage。

• 使用方法：通過(guò)引入單個(gè) JavaScript 文件即可使用，支持 Node 風(fēng)格回調(diào)、Promises 及 async/await 等方式。

• 存儲(chǔ)類型：可存儲(chǔ)多種類型，不限于字符串，支持存儲(chǔ)所有能序列化為 JSON 的原生 JS 對(duì)象，以及 ArrayBuffers、Blobs 和 TypedArrays 等。

• 配置選項(xiàng)：可使用 config 方法設(shè)置數(shù)據(jù)庫(kù)信息，包括驅(qū)動(dòng)、名稱、版本等。

• 多實(shí)例創(chuàng)建：可使用 createInstance 創(chuàng)建指向不同存儲(chǔ)的多個(gè)實(shí)例。

• 框架支持：為多個(gè)框架提供存儲(chǔ)驅(qū)動(dòng)，如 AngularJS、Angular 4 及以上、Backbone、Ember、Vue、NuxtJS 等。

• 自定義驅(qū)動(dòng)：可創(chuàng)建自定義驅(qū)動(dòng)，詳情見(jiàn) defineDriver API 文檔。

下面是github地址
https://github.com/localForage/localForage
下面是一些簡(jiǎn)單示例

javascript
try {
 const value = await localforage.getItem('key');
 console.log(value);
} catch (err) {
 console.log(err);
}

javascript
try {
 const value = await localforage.setItem('key', [1, 2, 3]);
} catch (err) {
 console.log(err);
}