@ouyangzhigang/utils

概述

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

安装

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

npm install @ouyangzhigang/utils
# or
pnpm add @ouyangzhigang/utils

使用方法

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

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

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

功能列表

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

enCrypto(data: any, secret?: string)

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

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

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

deCrypto(data: any, secret?: string)

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

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

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

screenFit

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

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

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

import

import { screenFit } from "@ouyangzhigang/utils"

useage

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

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

更个性化的设置：

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

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

close

screenFit.close()

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

sync

异步简化处理函数

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

import

import { sync } from '@ouyangzhigang/utils'

usage

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

formatdate(date, format)

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

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

timeStampFormat

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

import

import { timeStampFormat } from '@ouyangzhigang/utils'

usage

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

debounce(func, wait)

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

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

throttle(func, wait)

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

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

deepClone(object)

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

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 的完美版深拷贝

download(url: string, filename?: string)

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

标签 donwload

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

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

import

import { downloadUrl } from '@ouyangzhigang/utils'

usage

// 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) 更简单快捷。==

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

other functions

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

API 文档

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

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