0.0.11 • Published 2 years ago

@liusc/utils v0.0.11

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

@liusc/utils

安装使用

npm install @liusc/utils -S

autoRefresh

autoRefresh([options=])

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

参数说明类型默认值
options参数对象 path 请求页面路径,content 提示文本,duration 检测间隔毫秒数object{ path: "./", content: "页面有更新,点击确定刷新页面",duration: 4000 }

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)

压缩图片

参数说明类型默认值
img被压缩的 img 对象HTMLImageElement -
type压缩后转换的文件类型string'image/png'
mx触发压缩的图片最大宽度限制number-
mh触发压缩的图片最大高度限制number-
quality图片质量 0~1number1

示例:

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 的超时。

参数说明类型默认值
func要防抖动的函数Function -
wait需要延迟的毫秒数number0
options选项对象object-
options.leading指定在延迟开始前调用booleanfalse
options.maxWait设置 func 允许被延迟的最大值number-
options.trailing指定在延迟结束后调用booleantrue
import { debounce } from "@liusc/utils";

function sayLove(name) {
  return name;
}

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

delay

delay(func, wait, [args])

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

参数说明类型默认值
func要延迟的函数Function -
wait需要延迟的毫秒数number-
args会在调用时传入到 func 的参数...*-
import { delay } from "@liusc/utils";
delay(
  function (text) {
    console.log(text);
  },
  1000,
  "later"
);
// => 一秒后输出 'later'。

formatDate

formatDate(time, [format])

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

参数说明类型默认值
time传入的日期或合法的日期 string 或 numberDate/string/number-
format日期格式的格式string'YY-MM-DD hh:mm:ss'

示例:

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)

判断身份证格式函数

参数说明类型默认值
idCard身份证号string-

示例:

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.

参数说明类型默认值
object目标对象object-
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)

返回指定范围的随机数

参数说明类型默认值
lower下限number-
upper上限number-

示例:

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 的超时。

参数说明类型默认值
func要节流的函数Function -
wait需要节流的毫秒number0
options选项对象object-
options.leading指定调用在节流开始前booleantrue
options.trailing指定调用在节流结束后booleantrue
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"])

将树结构转换成扁平数组

参数说明类型可选值默认值
tree树结构数组array--
childField每个节点中子树的字段名,默认值为 'children'。string-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=])

将扁平数组转换成树结构

参数说明类型可选值默认值
list扁平数组array--
options选项object-{ keyField: 'id', childField: 'children', parentField: 'pid', }

示例:

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树节点或树节点数组INode 或 INode[]-
callback遍历改树的时候回调(v: INode) => void--
childField每个节点中子树的字段名,默认值为 'children'。string-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, 支持设置长度

参数说明类型可选值默认值
size生成 id 长度number-21
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();
0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago