@huxy/utils

utils

a2o

const arr = [
  {
    key: 1,
    value: 't1',
  },
  {
    key: 2,
    value: 't2',
  },
  {
    key: 3,
    value: 't3',
  },
];

a2o(arr, 'key', 'value');

// {1: 't1', 2: 't2', 3: 't3'}

addAtNext/addAtPos/addNodes/editNodes/deleteNodes/moveNodes

addAtNext(tree, id, nodes, (idKey = 'id'), (childKey = 'children'));
addAtPos(tree, id, nodes, pos, (idKey = 'id'), (childKey = 'children'));
addNodes(tree, id, nodes, (idKey = 'id'), (childKey = 'children'));
editNodes(tree, id, nodes, (idKey = 'id'), (childKey = 'children'));
deleteNodes(tree, id, (idKey = 'id'), (childKey = 'children'));
moveNodes(tree, fromId, toId, pos, (idKey = 'id'), (childKey = 'children'));

addScript/addStyle

动态添加 script 和 style 。

const loadScript = async url => {
  await addScript(url);
};
const loadStyleByUrl = async url => {
  await addStyle(url);
};
const addStyleByCode = addStyle(cssCode, 'css-hash');

arr2Tree

const arr = [
  {
    parentId: 1,
    id: 2,
    value: '1-1',
  },
  {
    parentId: 4,
    id: 5,
    value: '2-1',
  },
  {
    id: 4,
    value: '2',
  },
  {
    id: 1,
    value: '1',
  },
  {
    parentId: 1,
    id: 3,
    value: '1-2',
  },
  {
    parentId: 5,
    id: 6,
    value: '2-1-1',
  },
];

arr2Tree()(arr);

output: [
  {
    id: 4,
    value: '2',
    parentId: -1,
    children: [
      {
        parentId: 4,
        id: 5,
        value: '2-1',
        children: [
          {
            parentId: 5,
            id: 6,
            value: '2-1-1',
            children: [],
          },
        ],
      },
    ],
  },
  {
    id: 1,
    value: '1',
    parentId: -1,
    children: [
      {
        parentId: 1,
        id: 2,
        value: '1-1',
        children: [],
      },
      {
        parentId: 1,
        id: 3,
        value: '1-2',
        children: [],
      },
    ],
  },
];

arr2TreeByPath

const arr = [
  {
    path: '/home/p1',
    value: 'p1',
  },
  {
    path: '/404',
    value: '404',
  },
  {
    path: '/home/p1/sp2',
    value: 'sp12',
  },
  {
    path: '/home',
    value: 'home',
  },
  {
    path: '/home/p2/sp3',
    value: 'sp23',
  },
  {
    path: '/home/p2/sp2/sp1',
    value: 'sp221',
  },
  {
    path: '',
    value: 'root',
  },
  {
    path: '/home/p1/sp1',
    value: 'sp11',
  },
  {
    path: '/home/p2/sp2',
    value: 'sp22',
  },
  {
    path: '/home/p2/sp2/sp1',
    value: 'sp221',
  },
  {
    path: '/home/p2',
    value: 'p2',
  },
  {
    path: '/home/p3',
    value: 'p3',
  },
];

arr2TreeByPath(arr);

output: [
  {
    path: '',
    value: 'root',
    parentId: null,
    children: [
      {
        path: '/404',
        value: '404',
        parentId: '',
        children: [],
      },
      {
        path: '/home',
        value: 'home',
        parentId: '',
        children: [
          {
            path: '/home/p1',
            value: 'p1',
            parentId: '/home',
            children: [
              {
                path: '/home/p1/sp2',
                value: 'sp12',
                parentId: '/home/p1',
                children: [],
              },
              {
                path: '/home/p1/sp1',
                value: 'sp11',
                parentId: '/home/p1',
                children: [],
              },
            ],
          },
          {
            path: '/home/p2',
            value: 'p2',
            parentId: '/home',
            children: [
              {
                path: '/home/p2/sp3',
                value: 'sp23',
                parentId: '/home/p2',
                children: [],
              },
              {
                path: '/home/p2/sp2',
                value: 'sp22',
                parentId: '/home/p2',
                children: [
                  {
                    path: '/home/p2/sp2/sp1',
                    value: 'sp221',
                    parentId: '/home/p2/sp2',
                    children: [],
                  },
                  {
                    path: '/home/p2/sp2/sp1',
                    value: 'sp221',
                    parentId: '/home/p2/sp2',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            path: '/home/p3',
            value: 'p3',
            parentId: '/home',
            children: [],
          },
        ],
      },
    ],
  },
];

backTop

返回页面顶部按钮。

backTop(scrollHeight);

• scrollHeight：出现 ‘返回顶部’ 按钮时的滚动距离，默认 0 。

rgba2hex

rgba2hex(111, 111, 111, 0.8);

// '#6f6f6fcc'

rmUnit

rmUnit('100px'); // Number: 100
rmUnit('60s', 's'); // Number: 60

• unit：默认 px

hex2rgba

hex2rgba('ddd');

> // 'rgb(221,221,221)'

base2Ten

base2Ten(100, 16); // 256
base2Ten(100, 8); // 64
base2Ten(100); // 4

ten2Base

ten2Base(100, 16); // 64
ten2Base(100, 8); // 144
ten2Base(100); // 1100100

baseConversion

baseConversion(100, 8, 16); // 40

fetcher

import {fetcher} from '@huxy/utils';

const handler = response => {
  return response
    .json()
    .then(result => {
      result.code = result.code ?? response.status;
      result.msg = result.message ?? result.msg ?? response.statusText;
      const {msg, code} = result;
      if (code === 401) {
        message.error(msg);
        logout(true);
        throw {code, message: msg};
      }
      if (!success_code.includes(code)) {
        throw {code, message: msg};
      }
      return result;
    })
    .catch(error => {
      message.error(error.message);
      throw error.message;
    });
};

const fetchApi = fetcher(handler);

const fetch = ({method, url, ...opt}) => fetchApi(method)(`${TARGET}${url}`, {...opt, headers: getToken(), credentials: 'omit'});

cacheData

const {record, undo, redo, clean} = cacheData();

cancelablePromise

const {promiseFn, cancelFn} = cancelablePromise(components, {delay: suspenseConfig.delay, msg: {timeout: suspenseConfig.timeoutMsg}});

promiseFn.then().catch();

changePos

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

changePos(arr, 2, 7);

// [1, 2, 8, 4, 5, 6, 7, 3, 9]

classifyArr

const arr=[
  {
    name:'test1',
    value:'t1',
  },
  {
    name:'test2',
    value:'t2',
  },
  {
    name:'test1',
    value:'t3',
  },
  {
    name:'test2',
    value:'t4',
  },
];

classifyArr(arr)

output:

{
  "test1": [
    {
      "name": "test1",
      "value": "t1"
    },
    {
      "name": "test1",
      "value": "t3"
    }
  ],
  "test2": [
    {
      "name": "test2",
      "value": "t2"
    },
    {
      "name": "test2",
      "value": "t4"
    }
  ]
}

clone

clone(arr | object);

compareVersion

compareVersion(a, b, key = '.');

compareVersion('1.5.111', '1.7.0'); // 2
compareVersion('1.105.1', '2.0.0'); // 3
compareVersion('10.0.1', '10.0.22'); // 1
compareVersion('3.2.1', '3.2.1'); // 0
compareVersion('2_22_1', '2_9_11', '_'); // 0

返回值：

- 0：a >= b
- 1：a < b，阶段版本号需更新
- 2：a < b，子版本号需更新
- 3：a < b，主版本号需更新

compose

const a = x => x + 10;

const b = x => x * 10;

compose(b, a)(2); // 120

copyToClipboard

> copyToClipboard(text)

createTextElement/createElement/createNode

createTextElement(text);

createElement(type, props, ...children);

createNode({type: '', props: {}});

curry

const arr = [
  {
    name: 'test1',
    value: 't1',
  },
  {
    name: 'test2',
    value: 't2',
  },
  {
    name: 'test1',
    value: 't3',
  },
  {
    name: 'test2',
    value: 't4',
  },
];

const fn = (name, value) => arr.filter(item => item.name === name).filter(item => item.value === value);

const a = curry(fn)('test1');

a('t3');

output: [
  {
    name: 'test1',
    value: 't3',
  },
];

cyclic

cyclic(object); // true | false

addDays/addMonths/addYears/addHours

addDays(2, '2022-01-01'); // Mon Jan 03 2022 08:00:00 GMT+0800 (中国标准时间)

addMonths(3); // Sat Jun 25 2022 17:44:47 GMT+0800 (中国标准时间)

getLeaveTime

getLeaveTime('2022-10-1'); // '189天6小时12分11秒'

weekDate/monthDate

weekDate();

output: ['2022-03-21T09:48:44.098Z', '2022-03-27T09:48:44.098Z'];

dash2camel

dash2camel('add-file-name'); // addFileName
dash2camel('add_file_name', '_'); // addFileName

dataURLtoFile

dataURLtoFile('data:image/png;base64,xxx...', test.png);

debounce

debounce(func, (delay = 60));

dropInfo

元素触发事件弹出层

dropInfo(triggerEle, showEle, type = 'horizontal');

- triggerEle：触发元素
- showEle：弹出层内容
- type：弹层位置样式，horizontal | vertical

dlfile

dlfile(url, name);

emitter

const {on, emit, off} = emitter();

equal

equal(a, b); // true | false

filter

const arr = [
  {
    name: 'test1',
    value: 't1',
  },
  {
    name: 'test2',
    value: 't2',
  },
  {
    name: 'test1',
    value: 't3',
  },
  {
    name: 'test2',
    value: 't4',
  },
];

filter(arr, 'est1', 'name');

output: [
  {
    name: 'test1',
    value: 't1',
  },
  {
    name: 'test1',
    value: 't3',
  },
];

filterList

filterList(data, keyword, str2Dom /*高亮元素*/, (fields = 'name'), (idKey = 'id'), (childKey = 'children'), (exact = false));

findChildEle

findChildEle(target, classname);

返回当前元素下类名为 classname 的所有元素，没找到则返回 null 。

findMax

findMax('ghfdj53785bhb4289yb3b478'); // 53785

firstUpper

firstUpper('hello world'); // 'Hello world'

fixPath

fixPath('//a/b//c'); // '/a/b/c'

fixRoute

fixRoute('/a/b/e/'); // /a/b/e

fixSize

fixSize(img, ratio = 1);

根据父元素宽高比设置元素宽度比例。

fixFileSizeUnit

fixFileSizeUnit(10000); // 9.766 KB
fixFileSizeUnit(2000000); // 1.907 M

fixTimeUnit

fixTimeUnit(1000); // 16m40s
fixTimeUnit(20000); // 5h33m20s

flatten

const arr = [
  {
    name: 'test1',
    value: 't1',
    children: [
      {
        name: 'test11',
        value: 't11',
      },
      {
        name: 'test12',
        value: 't12',
      },
    ],
  },
  {
    name: 'test2',
    value: 't2',
  },
  {
    name: 'test1',
    value: 't3',
    children: [
      {
        name: 'test31',
        value: 't31',
      },
      {
        name: 'test32',
        value: 't32',
        children: [
          {
            name: 'test321',
            value: 't321',
          },
        ],
      },
    ],
  },
  {
    name: 'test2',
    value: 't4',
  },
];

flatten(arr);

output: [
  {
    name: 'test1',
    value: 't1',
  },
  {
    name: 'test2',
    value: 't2',
  },
  {
    name: 'test1',
    value: 't3',
  },
  {
    name: 'test2',
    value: 't4',
  },
  {
    name: 'test11',
    value: 't11',
  },
  {
    name: 'test12',
    value: 't12',
  },
  {
    name: 'test31',
    value: 't31',
  },
  {
    name: 'test32',
    value: 't32',
  },
  {
    name: 'test321',
    value: 't321',
  },
];

formatNum

formatNum(12345678); // '12,345,678'

getTime/formatTime

getTime(); // [2022, 3, 25, 18, 4, 36, 5]

formatTime(); // '2022-03-25 18:04:36'

fullScreen/watchScreen

fullScreen(element);

watchScreen(callback); // 全屏变化时执行回调

getElementsSize

const {width, height, top, left, ...rest} = getElementsSize(ele);

getOffset

const {top, left} = getOffset(ele);

getParams

getParams('/a/b?name=hhh&age=18')

output:

{
  "path": "/a/b",
  "params": {
    "name": "hhh",
    "age": "18"
  }
}

getPosition

const {width, height, top, left, ...rest} = getPosition(ele);

getSelected

const arr = [
  {
    name: 'test1',
    value: 't1',
    children: [
      {
        name: 'test11',
        value: 't11',
      },
      {
        name: 'test12',
        value: 't12',
      },
    ],
  },
  {
    name: 'test2',
    value: 't2',
  },
  {
    name: 'test1',
    value: 't3',
    children: [
      {
        name: 'test31',
        value: 't31',
      },
      {
        name: 'test32',
        value: 't32',
        children: [
          {
            name: 'test321',
            value: 't321',
          },
        ],
      },
    ],
  },
  {
    name: 'test2',
    value: 't4',
  },
];

getSelected(arr, 't32', 'value');

output: [
  {
    name: 'test1',
    value: 't3',
  },
  {
    name: 'test32',
    value: 't32',
  },
];

getTextSize

const {width, height, top, left, ...rest} = getTextSize(text);

getTouchPosition/getRelative

const {touchX, touchY} = getTouchPosition(event);

const {x, y} = getRelative(event, ref);

getType

getType(); // 'undefined'
getType(''); // 'string'
getType(222); // 'number'
getType([]); // 'array'

getValue

const obj = {
  a: {
    b: {
      c: 4444,
    },
    b1: {},
  },
};

getValue(obj, 'a.b.c'); // 4444

getValue(obj, 'a.b.d'); // undefined

getViewportSize

const {width, height} = getViewportSize(element);

hasClass/addClass/removeClass/toggleClass

hasClass(ele, 'class1');
addClass(ele, 'class1');
removeClass(ele, 'class1');
toggleClass(ele, 'class1');

hasProp

const a = {b: undefined};

hasProp(a, 'b'); // true

isArray/isValidArr/isValidObj/isAsync/isObject/isFunction/isError/isRegExp/isElement/isUrl/isDate/isBase64Image

isArray([]); // true
isValidArr([1]); // true
isObject({}); // true
isValidObj({}); // false
isFunction(() => {}); // true
isError(new Error()); // true
isRegExp(/\d+/); // true
isElement(<span>1</span>); // true
isAsync(new Promise((res, rej) => {})); // true
isUrl('http://abc.com'); // true
isDate('2022', '10', '11'); // true
isBase64Image('data:image/png;base64,test'); // [data:image/png;base64,test, png]

isBrowser/isIE/isTouch

isBrowser();
isIE();
isTouch();

isReactEle/isRef

isReactEle(value);
isRef(value);

isWechat

判断是否为微信浏览器

isWechat(); // false

loadImage/loadBase64/loadBase64ByUrl/imgtocanvas

const img = await loadImage(url);
const base64 = await loadBase64(img);

const base64 = await loadBase64ByUrl(url);

const canvas = imgtocanvas(img);

memoize

const fn = n => console.log(n);
const m = memoize(fn);
m(3);
m(3);

// 3 只打印一次

merge/mergeObj/mergeArr

const a={
  name:'t1',
  children: [
    {
      name: 't11',
    },
    {
      name: 't12',
    },
  ],
};

const b={
  name:'t2',
  children: [
    {
      name: 't21',
    },
    {
      name: 't22',
    },
  ],
};

const c={
  age: 18,
  children: [
    {
      age: 20,
    },
    {
      age: 22,
    },
  ],
};

merge(a,b,c);

output:

{
  "name": "t2",
  "children": [
    {
      "name": "t21",
      "age": 20
    },
    {
      "name": "t22",
      "age": 22
    }
  ],
  "age": 18
}

message

message.success(content, delay, onClose);

- content：文本信息
- delay：持续时间
- onClose：关闭回调

message.success('success');
message.warn('warn');
message.error('error');
message.info('info');

obj2arr/arr2obj

const a={
  name:'t1',
  age: 18,
  id:'123',
};

obj2arr(a)

output:

[
  {
    "name": "name",
    "value": "t1"
  },
  {
    "name": "age",
    "value": 18
  },
  {
    "name": "id",
    "value": "123"
  }
]

const b=[
  {
    name:'t1',
    value:'t11',
  },
  {
    name:'t2',
    value:'t22',
  },
  {
    name:'t3',
    value:'t33',
  },
];

arr2obj(b)

output:

{
  "t1": "t11",
  "t2": "t22",
  "t3": "t33"
}

obj2str/arr2str/json2str

const c = {
  age: 18,
  children: [
    {
      age: 20,
    },
    {
      age: 22,
    },
  ],
};

json2str(c);

output: '{age=18, children={0={age=20}, 1={age=22}}}';

once

const t = () => console.log('test');

const runOne = once(t);

runOne(); // test
runOne(); // 不执行

padStart

padStart('123', 6); // 000123

padStart('abc', 5, '#'); // ##abc

params2data

const a = {
  name: 't1',
  age: 18,
  id: '123',
};

params2data(a); // FormData {}

params2str

const a = {
  name: 't1',
  age: 18,
  id: '123',
};

params2str(a); // '?name=t1&age=18&id=123'

paseXml

const {xml2Obj, obj2Xml} = paseXml;

xml2Obj(`<xml>
  <ToUserName><![CDATA[toUser]]></ToUserName>
  <FromUserName><![CDATA[fromUser]]></FromUserName>
  <CreateTime>1348831860</CreateTime>
  <MsgType><![CDATA[text]]></MsgType>
  <Content><![CDATA[this is a test]]></Content>
  <MsgId>1234567890123456</MsgId>
  <MsgDataId>xxxx</MsgDataId>
  <Idx>xxxx</Idx>
</xml>`)

result:
{
  "obj": {
    "CreateTime": "1348831860",
    "MsgId": "1234567890123456",
    "MsgDataId": "xxxx",
    "Idx": "xxxx",
    "ToUserName": "toUser",
    "FromUserName": "fromUser",
    "MsgType": "text",
    "Content": "this is a test"
  },
  "types": {
    "CreateTime": "base",
    "MsgId": "base",
    "MsgDataId": "base",
    "Idx": "base",
    "ToUserName": "data",
    "FromUserName": "data",
    "MsgType": "data",
    "Content": "data"
  }
}

obj2Xml({
  "CreateTime": "1348831860",
  "MsgId": "1234567890123456",
  "MsgDataId": "xxxx",
  "Idx": "xxxx",
  "ToUserName": "toUser",
  "FromUserName": "fromUser",
  "MsgType": "text",
  "Content": "this is a test"
}, {
  "CreateTime": "base",
  "MsgId": "base",
  "MsgDataId": "base",
  "Idx": "base",
  "ToUserName": "data",
  "FromUserName": "data",
  "MsgType": "data",
  "Content": "data"
})

result:
<xml>\n    <CreateTime>1348831860</CreateTime>\n<MsgId>1234567890123456</MsgId>\n<MsgDataId>xxxx</MsgDataId>\n<Idx>xxxx</Idx>\n<ToUserName><![CDATA[toUser]]></ToUserName>\n<FromUserName><![CDATA[fromUser]]></FromUserName>\n<MsgType><![CDATA[text]]></MsgType>\n<Content><![CDATA[this is a test]]></Content>\n\n  </xml>

pick

const a = {
  name: 't1',
  age: 18,
  id: '123',
};

pick(a, ['id', 'name']); // {id: '123', name: 't1'}

promisify

promisify(func)(...args);

randNum/randStr/randColor/randTrue/randItem/randPercent

randNum(5); // 5
randStr(8); // 'czqx7vhu'
randColor(); // '#39a645'
randTrue(); // false
randItem([1, 3, 5, 7, 9]); // 3
randPercent(4); // [54, 13, 30, 3]
randPercent(5, 80); // [5, 40, 12, 11, 12]

resize

const {bind, unbind, destroy} = resize(element);

bind(callback);
unbind(callback);
destroy();

scrollToTop/scrollToAnchor/scrollTop

scrollToTop((top = 0)); // 滚动到指定位置
scrollToAnchor(ref); // 滚动到元素位置
scrollTop(); // 滚动到顶部

viewHeight/docHeight/isScrollBottom

viewHeight(); // 视图高度
docHeight(); // 文档高度
isScrollBottom(); // 是否滚到底部

selectedHandle

selectedHandle((data, i, parentId) => {
  console.log(data, i, parentId);
  return data[i]; // 选中id的item
})(arr, id);

session

const {get, set, rm, clear} = session;

get(name);
set(name, data);
rm(name);
clear();

setStyle

setStyle(ele, (styles = {}), (reset = false));

sleep

await sleep((ms = 350), (unit = 'ms'));

await sleep(2, 'm');

• delay: 等待时间数值
• unit: 单位。毫秒、秒、分、时、天。ms | s | m | h | d 。默认 ms

sort

const a = [
  {
    name: 't1',
    age: 33,
  },
  {
    name: 't2',
    age: 12,
  },
  {
    name: 't3',
    age: 22,
  },
];

sort(a, 'age');

output: [
  {
    name: 't2',
    age: 12,
  },
  {
    name: 't3',
    age: 22,
  },
  {
    name: 't1',
    age: 33,
  },
];

storage

const {get, set, rm, clear} = storage;

get(name);
set(name, data);
rm(name);
clear();

createStore

const {getState, setState, subscribe, clean} = createStore();

str2code

str2code('console.log(123)'); // 123

str2Html

str2Html('<a>link</a>'); // NodeList [a]

getExplore

getExplore(); // {type: 'Chrome', version: '99.0.4844.51'}

getOsInfo

getOsInfo(); // {type: 'macOS', version: '10.15.7'}

sysLang

sysLang(); // 'zh'

deviceType

deviceType(); // 'Desktop'

throttle

const throttleFn = throttle(fn, (delay = 60));

getMonthDays

getMonthDays(); // 31

timestamp

timestamp(); // 48620100.70000002

touchEvent

const destroy = touchEvent(startEvent, moveEvent, endEvent, ref);

• startEvent：touchstart 或 mousedown 执行的事件
• moveEvent：touchmove 或 mousemove 执行的事件
• endEvent：touchend 或 mouseup 执行的事件
• ref：容器元素，默认 document

返回 destroy 函数，执行 destroy() 即可销毁事件。

traverItem

traverItem((item, parent, index, hasChild) => {
  console.log(item, parent, index, hasChild);
})(arr, childKey);

- fn：回调函数
	- item：当前节点数据
	- parent：父节点数据
	- index：当前节点下标
	- hasChild：是否有子节点

- arr：树对象
- childKey：子节点 `key` 值，默认 `children`

traverList

traverItem(data => {
  console.log(data);
})(arr, childKey);

unique

const a = [
  {
    name: 't1',
    age: 33,
  },
  {
    name: 't2',
    age: 12,
  },
  {
    name: 't1',
    age: 22,
  },
];

unique(a, 'name');

output: [
  {
    name: 't1',
    age: 33,
  },
  {
    name: 't2',
    age: 12,
  },
];

updateId

const a = [
  {
    name: 't1',
    age: 33,
  },
  {
    name: 't2',
    age: 12,
  },
  {
    name: 't3',
    age: 22,
  },
];

updateId(a, 'id');

output: [
  {
    name: 't1',
    age: 33,
    id: '0',
  },
  {
    name: 't2',
    age: 12,
    id: '1',
  },
  {
    name: 't3',
    age: 22,
    id: '2',
  },
];

uuidv4

uuidv4(); // '4839e86e-252f-4571-9982-351cd98cc875'

validObj

const a = {
  name: 't1',
  age: 18,
  email: '[e-mail]',
  t1: '',
  t2: null,
  t3: undefined,
};

validObj(a);

output:

{name: 't1', age: 18, email: '[e-mail]', t1: ''}

watermark

watermark({
  container = document.body,
  width = '220px',
  height = '200px',
  textAlign = 'center',
  textBaseline = 'middle',
  font = '20px microsoft yahei',
  fillStyle = 'rgba(202,202,202,0.4)',
  content = '请勿外传',
  rotate = '-30',
  zIndex = 1000,
});

wrapPromise

const {read} = wrapPromise(promiseFn);

const result = read();