@liusc/utils v0.0.11

@liusc/utils

安装使用

npm install @liusc/utils -S

autoRefresh

autoRefresh([options=])

web worker 中轮询检测前端静态页面是否更新，如果是则弹出确认提示框，选择是则刷新页面。

base64

base64 编码，解码

• base64.encode

base64.decode 解码

encode(string)

示例:

import { base64 } from "@liusc/utils";

base64.encode("abcde"); // -> YWJjZGU=

• base64.decode

base64.decode 解码

decode(string)

示例:

import { base64 } from "@liusc/utils";

base64.decode("YWJjZGU="); // -> abcde

camelize

camelize(string)

横线转驼峰命名

示例:

import { camelize } from "@liusc/utils";

const name = camelize("ab-cd-ef");
console.log(name); //ab-cd-ef ==> abCdEf

cloneDeep

cloneDeep(value)

数据深拷贝

示例:

import { cloneDeep } from "@liusc/utils";

const data = cloneDeep([1, 2, 3, 4, 5]);
console.log(data); // -> [1, 2, 3, 4, 5]

compressImg

compressImg(img,type,mx,mh,quality)

压缩图片

示例:

import { compressImg } from "@liusc/utils";

const newImg = compressImg(img, "image/png", 500, 300, 0.8).then((blob) =>
  console.log(blob)
);

copyText

copyText(string)

复制文本

示例:

import { copyText } from "@liusc/utils";

copyText("文本");

debounce

debounce(func, [wait=0], [options=])

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。

如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。如果 wait 为 0 并且 leading 为 false, func 调用将被推迟到下一个点，类似 setTimeout 为 0 的超时。

import { debounce } from "@liusc/utils";

function sayLove(name) {
  return name;
}

debounce(sayLove, 200, { maxWait: 1000 });

delay

delay(func, wait, [args])

延迟 wait 毫秒后调用 func。 调用时，任何附加的参数会传给 func。

import { delay } from "@liusc/utils";
delay(
  function (text) {
    console.log(text);
  },
  1000,
  "later"
);
// => 一秒后输出 'later'。

formatDate

formatDate(time, [format])

开箱即用的时间格式化工具

示例:

import { formatDate } from "@liusc/utils";

formatDate(new Date().getTime()); //2021-11-12 10:05:30
formatDate(new Date().getTime(), "YYYY年MM月DD日"); //2021年11月12日
formatDate(new Date().getTime(), "今天是YYYY/MM/DD HH:mm:ss"); //今天是2021/11/12

isIdCard

isIdCard(idCard)

判断身份证格式函数

示例:

import { isIdCard } from "@liusc/utils";

// 判断是否为正确的身份证格式 => 18位
console.log(isIdCard("142431199009093611")); // -> true
// 判断是否为正确的身份证格式 => 15位
console.log(isIdCard("130503670401001")); // -> true

merge

merge(object, [sources])

除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为 undefined 的 sources 来源对象属性将被跳过。数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。

这方法会改变对象 object.

var object = {
  a: [{ b: 2 }, { d: 4 }],
};

var other = {
  a: [{ c: 3 }, { e: 5 }],
};

merge(object, other);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

random

random(lower, upper)

返回指定范围的随机数

示例:

import { random } from "@liusc/utils";

console.log(random(1, 2)); // -> 1.6718418553475423

removeEmptyStringProps

removeEmptyStringProps(object)

移除对象中的空字符串属性，返回个新对象

示例:

import { removeEmptyStringProps } from "@liusc/utils";

const p = removeEmptyStringProps({
  a: "",
  b: 1,
});
console.log(p); // -> { b: 1}

storage

支持过期时间的 localStorage 库

示例:

import { storage } from "@liusc/utils";

// set(key, value, [失效时间，默认一个月])
storage.set("a", "string");
storage.get("a").value; // -> string
storage.remove("a");

throttle

throttle(func, [wait=0], [options=])

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。

如果 leading 和 trailing 都设定为 true 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。 如果 wait 为 0 并且 leading 为 false, func 调用将被推迟到下一个点，类似 setTimeout 为 0 的超时。

import { throttle } from "@liusc/utils";

// 避免在滚动时过分的更新定位
window.addEventListener("scroll", throttle(updatePosition, 100));

// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = throttle(renewToken, 300000, { trailing: false });
element.on("click", throttled);

transformArray

transformArray(tree, [childField="children"])

将树结构转换成扁平数组

示例:

import { transformArray } from '@liusc/utils';

const tree = [
  {
    id: '0',
    name: '哈哈',
    pid: '',
    children: [
      {
        id: '0-1',
        name: 'js',
        pid: '0',
        children: [],
      },
      {
        id: '0-2',
        name: 'css',
        pid: '0',
        children: [
          {
            id: '0-2-1',
            name: 'css3',
            pid: '0-2',
            children: [],
          },
        ],
      },
    ],
  },
];
console.log(transformArray(tree));
/*
[
  {
    id: '0',
    name: '哈哈',
    pid: '',
  },
  {
    id: '0-1',
    name: 'js',
    pid: '0',
  },
  {
    id: '0-2',
    name: 'css',
    pid: '0',
  },
  {
    id: '0-2-1',
    name: 'css3',
    pid: '0-2',
  },
];
/*

transformTree

transformTree(list, [options=])

将扁平数组转换成树结构

示例:

import { transformTree } from "@liusc/utils";

const data = [
  {
    id: "0",
    name: "哈哈",
    pid: "",
  },
  {
    id: "0-1",
    name: "js",
    pid: "0",
  },
  {
    id: "0-2",
    name: "css",
    pid: "0",
  },
  {
    id: "0-2-1",
    name: "css3",
    pid: "0-2",
  },
];

console.log(transformTree(data));
/**
 [
   {
     id: '0',
     name: '哈哈',
     pid: '',
     children: [
       {
        id: '0-1',
        name: 'js',
        pid: '0',
        children: []
      },
      {
        id: '0-2',
        name: 'css',
        pid: '0',
        children: [
          {
            id: '0-2-1',
            name: 'css3',
            pid: '0-2',
            children: []
          },
        ]
      },
     ]
   }
 ]
   */

traverseTree

traverseTree(node, callback, childField="children")

遍历树形数据

返回值：node

import { traverseTree } from "@liusc/utils";

const node = {
  id: 1,
  list: [
    {
      id: 2,
    },
  ],
};
const ret = traverseTree(
  node,
  (currentNode) => {
    console.log(currentNode.id);
  },
  "list"
);

console.log(ret);

uuid

uuid([size=21])

生成唯一 id, 支持设置长度

import { uuid } from "@liusc/utils";

console.log(uuid()); // -> LS7Z21YHnSrZrvoiVVbg7
console.log(uuid(8)); // -> RvuUN6RS

worker

web workers 封装函数

import { createWorker } from "@liusc/utils";

const worker = createWorker(
  (e) => {
    postMessage(e.data);
  },
  (e) => {
    console.log(e.data); // string
  }
).start("string");

worker.end();