@ouyangzhigang/utils

概述

@ouyangzhigang/utils是一款非常实用的 npm 库，提供了许多常用的 javascript 函数和方法，可以方便地帮助你完成各种工作。

安装

要使用@ouyangzhigang/utils，只需要在你的项目中执行以下命令：

``bash
npm install @ouyangzhigang/utils


or


pnpm add @ouyangzhigang/utils
`

使用方法

在你的代码中，只需要导入所需的函数或方法，就可以使用它们来完成你需要的功能。

`javascript
import { formatate } from "@ouyangzhigang/utils";

const date = new ate();
const formattedate = formatate(date, "YYYY-MM-");
console.log(formattedate); // 2022-06-10
`

功能列表

@ouyangzhigang/utils库提供了许多非常实用的函数和方法，以下是一些主要的功能：

$3

对数据进行加密。data参数可以任意数据格式； secret公钥默认也可以自定设定任意字符串，非必传。

`javascript
import { enCrypto } from "@ouyangzhigang/utils";

const data = { a: "c" };
enCrypto(data);
enCrypto(data, "VJOIQJIO32jojifjJFEIO");
`

$3

对数据进行解密。data参数可以任意数据格式； secret公钥默认也可以自定设定任意字符串，非必传。

`javascript
import { deCrypto } from "@ouyangzhigang/utils";

const data = { a: "c" };
deCrypto(data);
deCrypto(data, "VJOIQJIO32jojifjJFEIO");
`

$3

一个自适应可视化屏幕窗口前端适配器。

> 可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响 dom 结构。

==screenFit 是一个可以让你的 PC 项目自适应屏幕的工具，其原理非常简单，即在 scale 等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，不会挤压、拉伸元素，它只是单纯的设置了容器的宽高。==

---

##### import

import { screenFit } from "@ouyangzhigang/utils"

##### useage

`javascript
screenFit.init();

// or

screenFit.init(
{
designHeight: 1080,
designWidth: 1920,
renderDom: "#app",
resize: true,
},
false
);
`

##### api

- renderDom
_可选。渲染的 dom，默认是 "#app"，必须使用 id 选择器_。
- designWidth
_可选。设计稿的宽度，默认是 1920_。
- designHeight
_可选。设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为 1080_。
- resize
_可选。是否监听 resize 事件，默认true_。

##### ignore

`javascript
screenFit.init({
ignore: [
{
dom: ".gaodeMap",
},
],
});
`

更个性化的设置：

`javascript
screenFit.init({
ignore: [
{
dom: ".gaodeMap", //必填
height: 300, //可选，写数字即可（px）
width: 300, //可选，写数字即可（px）
scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
fontSize: 26, //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
},
{
//...
},
],
});
`

==_如果反向缩放后的元素大小使结构发生变化，你还可以手动传入宽高、回放程度。_==

##### close

screenFit.close()

[参考与鸣谢]
可视化大屏
autofit.js npm

$3

异步简化处理函数

> 还在用 async/await 中使用 try-catch 吗？现在有更简洁好用的方式代替原来写法，让开发更高效

##### import

import { sync } from '@ouyangzhigang/utils'

##### usage

`
const [res, err] = await sync(getList(params))
if (err) { /* error handle /}
/* success handle /
`

$3

格式化日期为指定的格式。date参数必须是一个有效的日期对象，format参数是一个字符串，用于指定输出格式。

`javascript
import { formatdate } from "@ouyangzhigang/utils";

/** 转换日期格式
* @param {Date|String} date 日期格式|String类型 (如：'2012-12-12' | '2012/12/12' | Date().now(), 总之为标准日期格式，将会作为Date对象实例化参数)
* @param {String} formatStr
* String类型 （如: 'yyyy年MM月dd日'或'yyyy年MM月dd日 hh时mm分ss秒',默认'yyyy-MM-dd'）
* 参数：formatStr-格式化字符串
* d：将日显示为不带前导零的数字，如1
* dd：将日显示为带前导零的数字，如01
* ddd：将日显示为缩写形式，如Sun
* dddd：将日显示为全名，如Sunday
* M：将月份显示为不带前导零的数字，如一月显示为1
* MM：将月份显示为带前导零的数字，如01
* MMM：将月份显示为缩写形式，如Jan
* MMMM：将月份显示为完整月份名，如January
* yy：以两位数字格式显示年份
* yyyy：以四位数字格式显示年份
* h：使用12小时制将小时显示为不带前导零的数字，注意||的用法
* hh：使用12小时制将小时显示为带前导零的数字
* H：使用24小时制将小时显示为不带前导零的数字
* HH：使用24小时制将小时显示为带前导零的数字
* m：将分钟显示为不带前导零的数字
* mm：将分钟显示为带前导零的数字
* s：将秒显示为不带前导零的数字
* ss：将秒显示为带前导零的数字
* l：将毫秒显示为不带前导零的数字
* ll：将毫秒显示为带前导零的数字
* tt：显示am/pm
* TT：显示AM/PM
* @returns {String} formated date string
**/

const date = new Date();
const formattedate = formatdate(date, "YYYY-MM-dd");
console.log(formattedate); // 2022-06-10
`

[参考和鸣谢]
- Day.js
- dayjs




$3

timeStampFormat - 时间戳转换格式常规日期函数，未传入时间戳的按当前时间戳转换

##### import

import { timeStampFormat } from '@ouyangzhigang/utils'

##### usage

`javascript
timeStampFormat("yyyy-MM-dd hh:mm:ss", 1483113600000);
`

$3

防抖函数，可以用于减少函数的重复执行。在必要的条件触发后，该函数将会在指定的时间间隔后被调用。

`javascript
import { debounce } from "@ouyangzhigang/utils";

const myFunction = () => {
console.log("Function called");
};

const debouncedFunction = debounce(myFunction, 500);

// Calling the debounced function multiple times
debouncedFunction();
debouncedFunction();
debouncedFunction();
debouncedFunction();

// nly one function call will be made after 500ms
`

$3

节流函数，可以用于减少函数的重复执行。该函数将在一定的时间间隔内执行一次，无论该时间内调用该函数的次数有多少次。

`javascript
import { throttle } from "@ouyangzhigang/utils";

const myFunction = () => {
console.log("Function called");
};

const throttledFunction = throttle(myFunction, 500);

// Calling the throttled function multiple times
throttledFunction();
throttledFunction();
throttledFunction();
throttledFunction();

// nly one function call will be made every 500ms
`

$3

深度克隆一个 JS 对象，可以用于在不改变原始数据的情况下进行修改。

`javascript
import { deepClone } from "@ouyangzhigang/utils";

const mybject = { name: "John", age: 25 };
const clonedbject = deepClone(mybject);

clonedbject.age = 30;
console.log(clonedbject); // { name: "John", age: 30}
console.log(mybject); // { name: "John", age: 25 }
`

[参考与鸣谢]
CSDN: 深拷贝函数
CSDN: js 实现深拷贝（全）
知乎: JavaScript 的完美版深拷贝

$3

> 最近和后端联调下载时忽然发现屡试不爽的 标签下载失灵了？这才感觉自己对文件下载一直处在一知半解的模糊状态中，趁端午前夕有空赶紧总结了一下，和大家一起讨论讨论。

##### 标签 donwload

这应该是最常见，最受广大人民群众喜闻乐见的一种下载方式了，搭配上 download 属性， 就能让浏览器将链接的 URL 视为下载资源，而不是导航到该资源。

如果 download 再指定个 filename ，那么就可以在下载文件时，将其作为预填充的文件名。不过名字中的 / 和 会被转化为下划线 \_，而且文件系统可能会阻止文件名中的一些字符，因此浏览器会在必要时适当调整文件名。

##### import

import { downloadUrl } from '@ouyangzhigang/utils'

##### usage

`javascript
// URL.createObjectURL(blob)
const download = async () => {
const blob = await fetchFile();

// 声明一个 fileReader
const fileReader = new FileReader();

// 将 blob 读取成 base64
fileReader.readAsDataURL(blob);

// 读取成功后 下载资源
fileReader.onload = function () {
downloadByUrl(fileReader.result);
};
};

export const fetchFile = async (params) => {
return axios.get(api, {
params,
responseType: "blob",
});
};

const download = async () => {
const blob = await fetchFile();

// 生成访问 blob 的 URL
const url = URL.createObjectURL(blob);

// 调用刚刚封装的 a 标签下载方法
downloadByUrl(url, "表格文件.xlsx");

// 删除映射，释放内存
URL.revokeObjectURL(url);
};
`

==URL.createObjectURL(blob) 可以直接访问，无需“编码/解码”，但需要记得撤销（revoke）；
而 Data URL 无需撤销（revoke）任何操作，但对大的 Blob 进行编码时，性能和内存会有损耗。
总而言之，这两种从 Blob 创建 URL 的方法都可以用。但通常 URL.createObjectURL(blob) 更简单快捷。==

[参考与鸣谢]
你真的会用标签下载文件吗?

$3

除了上述主要功能之外，@ouyangzhigang/utils还提供了许多其他非常实用的函数和方法，比如格式化货币、随机字符串生成、数字格式化等，更多详细的使用可以查看API 文档。

API 文档

我们提供了非常详细的 API 文档，以便您更好地使用@ouyangzhigang/utils`库。

查看 API 文档
参考掘金实现文档