ilibs

v1.0.10

Published

2 years ago

前端基础工具方法

Downloads

0High
0Medium
0Low

solosm

ilibs

前端基础工具方法

Install

$ npm install ilibs
// or
$ npm i ilibs
// or
$ pnpm install ilibs
// or
$ yarn add ilibs

验证

函数列表

| 函数名称 | 描述 | | ------------------ | ------------------------------------------------ | | isArray(data) | 验证是否为数组 | | isObject(data) | 验证数据是否为对象 | | isFunction(data) | 验证数据是否为函数 | | isString(data) | 验证数据是否为字符串 | | isNumber(data) | 验证数据是否为数字类型 | | isBoolean(data) | 验证数据是否为布尔值 | | isSymbol(data) | 验证数据是否为 symbol | | isBasicData(data) | 验证数据是否为基础数据类型 | | isJSONStr(str) | 检查字符串是否为 json 字符串 | | isType(data,type) | 验证数据是否为指定数据类型 | | getType(data) | 获取数据类型 | | isEqual(v1,v2) | 验证两条数据是否相等 | | isOdd(num) | 检查是否为奇数 | | isPicture(picture) | 检查字符串是否为图片 url | | isURL(url) | 检查 URL 是否有效 | | isDevice() | 检查当前是 android 还是 ios 还是 web 还是 WeChat | | isHex(color) | 检验证是否为 hex 颜色有效值 | | isRgb(color) | 验证是否为 rgb 颜色有效值 | | isColor(color) | 验证是否为颜色有效值 | | isExistChild(data) | 验证对象/数组是否为空数据 |

API

isArray

验证数据是否为数组

import { isArray } from 'ilibs';
console.log(isArray([1, 2, 3, 4])); // true
console.log(isArray(1)); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isObject

验证数据是否为对象

import { isObject } from 'ilibs';
console.log(isObject({ a: 1 })); // true
console.log(isObject([1, 2, 3, 4])); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isFunction

验证数据是否为函数

import { isFunction } from 'ilibs';
console.log(isFunction(isFunction)); // true
console.log(isFunction({ a: 1 })); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isString

验证数据是否为字符串

import { isString } from 'ilibs';
console.log(isString('isString')); // true
console.log(isString({ a: 1 })); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isNumber

验证数据是否为数字类型

import { isNumber } from 'ilibs';
console.log(isNumber(1)); // true
console.log(isNumber('1.2')); // true
console.log(isNumber('1a')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isBoolean

验证数据是否为布尔值

import { isBoolean } from 'ilibs';
console.log(isBoolean(true)); // true
console.log(isBoolean('1a')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isSymbol

验证数据是否为 symbol

import { isSymbol } from 'ilibs';
console.log(isSymbol(new Symbol('1'))); // true
console.log(isSymbol('1a')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isBasicData

验证数据是否为基础数据类型

import { isBasicData } from 'ilibs';
console.log(isBasicData(1)); // true
console.log(isBasicData(new Symbol('1'))); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

isJSONStr

检查字符串是否为 json 字符串

import { isJSONStr } from 'ilibs';
console.log(isJSONStr('{"a":1}')); // true
console.log(isJSONStr('12345678')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ------ | ---- | ------ | | str | 需要验证的数据 | string | yes | - |

isType

验证数据是否为指定数据类型

import { isType } from 'ilibs';
console.log(isType('{"a":1}', 'string')); // true
console.log(isType('12345678', 'number')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ------ | ---- | -------------------------------------------------- | | data | 需要验证的数据 | any | yes | - | | type | 验证的数据类型 | string | yes | string/number/object/symbol/array/function/boolean |

getType

获取数据类型

import { getType } from 'ilibs';
console.log(getType({ a: 1 })); // object
console.log(getType('12345678')); // string

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ---- | ---- | ------ | | data | 需要验证的数据 | any | yes | - |

Return

isEqual

验证两条数据是否相等

import { isEqual } from 'ilibs';
console.log(isEqual({ a: 1 }, { a: 1 })); // true
console.log(isEqual('12345678', 'number')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ---- | ---- | ------ | | v1 | 需要验证的数据 1 | any | yes | - | | v2 | 需要验证的数据 2 | any | yes | - |

isOdd

检查是否为奇数

import { isOdd } from 'ilibs';
console.log(isOdd(1)); // true
console.log(isOdd(2)); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ------ | ---- | ------ | | num | 需要验证的数字 | number | yes | - |

isPicture

检查字符串是否为图片 url

import { isPicture } from 'ilibs';
console.log(isPicture('./image.png')); // true
console.log(isPicture('./video.mp4')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ------- | -------------- | ------ | ---- | ------ | | picture | 需要验证的链接 | string | yes | - |

isURL

检查字符串是否为图片 url

import { isURL } from 'ilibs';
console.log(isURL('https://baidu.com')); // true
console.log(isURL('./video.mp4')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ------ | ---- | ------ | | url | 需要验证的链接 | string | yes | - |

isDevice

检查当前是 android 还是 ios 还是 web 还是 WeChat

import { isURL } from 'ilibs';
console.log(isDevice()); // Web

return

'iOS' | 'Android' | 'WeChat' | 'Web'

isHex

验证是否为 hex 颜色有效值

import { isHex } from 'ilibs';
console.log(isHex('#fff')); // true
console.log(isHex('rgba(255,255,255,1)')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ----- | -------------- | ------ | ---- | ------ | | color | 需要验证的 hex | string | yes | - |

isRgb

验证是否为 rgb 颜色有效值

import { isRgb } from 'ilibs';
console.log(isRgb('#fff')); // false
console.log(isRgb('rgba(255,255,255,1)')); // true

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ----- | -------------- | ------ | ---- | ------ | | color | 需要验证的 hex | string | yes | - |

isColor

验证是否为颜色有效值

import { isColor } from 'ilibs';
console.log(isColor('#fff')); // true
console.log(isColor('(255,255,255,1)')); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ----- | -------------- | ------ | ---- | ------ | | color | 需要验证的 hex | string | yes | - |

isExistChild

验证对象/数组是否为空数据

import { isExistChild } from 'ilibs';
console.log(isExistChild({})); // true
console.log(isExistChild({ a: 1 })); // false
console.log(isExistChild({})); // true
console.log(isExistChild({ a: 1 })); // false

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ------------ | ---- | ------ | | data | 需要验证的数据 | any[]/obejct | yes | - |

转换

函数列表

| 函数名称 | 描述 | | --------------------------------- | ----------------------------------- | | toLowerCase(str) | 字符串全部转小写 | | toUpperCase(str) | 字符串全部转大写 | | capitalUpperCase(str) | 设置首字母大写不改变之后的字符串 | | capitalLowerCase(str) | 设置首字母小写不改变之后的字符串 | | capitalUpperCaseAllLowerCase(str) | 设置首字母大写其他全部转为小写 | | toLowerCamelCase(str) | 将"xx_xx"字符串转为小驼峰 | | toCamelCase(str) | 将"xx_xx"字符串转为大驼峰 | | filterTag(str) | 过滤 html 代码(把<>转换为字符串) | | convertNumberToUppercase(num) | 将阿拉伯数字翻译成中文的大写数字 | | dateFmt(date,fmt) | 时间格式化 | | getPinyin(l1,firstBoolen) | 汉字转拼音 | | hexToRgb(color,a) | 将 hex 表示方式转换为 rgba 表示方式 | | rgbToHex(rgb) | 将 rgb 表示方式转换为 hex 表示方式 |

API

toLowerCase

字符串全部转小写

import { toLowerCase } from 'ilibs';
console.log(toLowerCase('HTTPs')); // https

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

toUpperCase

字符串全部大写

import { toUpperCase } from 'ilibs';
console.log(toUpperCase('HTTPs')); // HTTPS

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

capitalUpperCase

设置首字母大写不改变之后的字符串

import { capitalUpperCase } from 'ilibs';
console.log(capitalUpperCase('https')); // Https

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

capitalLowerCase

设置首字母小写不改变之后的字符串

import { capitalLowerCase } from 'ilibs';
console.log(capitalLowerCase('Https')); // https

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

capitalUpperCaseAllLowerCase

设置首字母大写其他全部转为小写

import { capitalUpperCaseAllLowerCase } from 'ilibs';
console.log(capitalUpperCaseAllLowerCase('HTTPS')); //Https

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

toLowerCamelCase

将"xx_xx"字符串转为小驼峰

import { toLowerCamelCase } from 'ilibs';
console.log(toLowerCamelCase('HTTPS_baidu')); //httpsBaidu

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

toCamelCase

将"xx_xx"字符串转为大驼峰

import { toCamelCase } from 'ilibs';
console.log(toCamelCase('HTTPS_baidu')); //HttpsBaidu

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

filterTag

过滤 html 代码(把<>转换为字符串)

import { filterTag } from 'ilibs';
console.log(filterTag('<div>HTTPS_baidu</div>')); //<div>HTTPS_baidu</div>

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | ---------------- | ------ | ---- | ------ | | str | 需要转换的字符串 | string | yes | - |

convertNumberToUppercase

将阿拉伯数字翻译成中文的大写数字

import { convertNumberToUppercase } from 'ilibs';
console.log(convertNumberToUppercase(12312312)); //一仟二百三十一萬二仟三百一十二

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | | ---- | -------------- | ------ | ---- | ------ | | num | 需要转换的数字 | number | yes | - |

dateFmt

时间格式化

import { dateFmt } from 'ilibs';
console.log(dateFmt()); // 2022/10/09 15:12:34

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | 默认值 | | ---- | -------------- | -------- | ---- | ------ | ------------------- | | date | 需要转换的时间 | DateTime | - | - | - | | fmt | 转换的时间格式 | string | - | - | YYYY/mm/dd HH:MM:SS |

getPinyin

汉字转拼音

import { getPinyin } from 'ilibs';
console.log(getPinyin('汉字转拼音')); // HanZiZhuanPinYin

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | 默认值 | | ----------- | ---------------------- | ------ | ---- | ---------- | ------ | | l1 | 指定中文字符串 | string | - | - | - | | firstBoolen | 每个单词首字母是否大写 | boolen | - | true/false | true |

hexToRgb

将 hex 表示方式转换为 rgba 表示方式

import { hexToRgb } from 'ilibs';
console.log(hexToRgb('#ffffff')); // rgba(255,255,255,1)

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | 默认值 | | ----- | ------------------------ | ------ | ---- | ------ | ------ | | color | hex 色值 | string | - | - | - | | a | 转换结束的透明度，默认 1 | boolen | - | 0-1 | 1 |

rgbToHex

将 rgb 表示方式转换为 hex 表示方式

import { rgbToHex } from 'ilibs';
console.log(rgbToHex('rgba(255,255,255,1)')); // #FFFFFFFF

API

| 参数 | 描述 | 类型 | 必填 | 可选项 | 默认值 | | ---- | -------- | ------ | ---- | ------ | ------ | | rgb | rgb 色值 | string | - | - | - |

工具

函数列表

| 函数名称 | ---------------------- | fontSize(def,maxWidth) | getUrlQuery(url) | generatePathQuery(path,obj) | getPathParams(path,pat | generatePath(path,obj) | howLongAgo(date,type) | useThrottl(fn,time) | useDebounce(fn,time) | useLazyLoad(tags,node) | randomNum(min,max) | cloneDeep(data,) | unwarp(obj) | merge(...args) | each(data,iteratee) | filter(array,predicate) | push(data,key,value) | flatter(arr) | setValue(data,path,value) | getValue(data,key,alt) | currying(fn,...args) | templateParser(template,data) | listToTree(data) | treeToList(data) | setInterval(fn,t) | copyjs(dom) | generateRandomHexColor() | scrollTo(element,type) | 描述 | ---------------- | ----------------------------------------------------------------- | | 根据分辨率不同显示不同字体大小 | | 从查询字符串中获取参数 | | 使用查询字符串生成路径 | hMap,serializer) | 从路径中获取参数 | | 使用查询字符串生成路径 | | 距现在多少时间前 | | 程序节流 | | 程序防抖 | | 图片懒加载 | | 生成区间随机数 | | 数据深拷贝 | | 针对于 Proxy 对象结构 | | 数据合并 | | 遍历数据 | | 数组筛选 | | 对象/数组添加数据 | | 数组扁平化处理（多维数组变成一维数组） | | 设置数组/对象中对应 path 属性路径上的值，如果 path 不存在，则创建 | | 根据字符串输出对象参数,避免程序阻滞 | | 柯里化处理 | | template 解析器 | | 列表转成树形结构 | | 树形结构转成列表 | | setInterval 重置优化 | | 复制当前节点内容 | | 生成随机颜色 | | 滚动到顶部/底部 ('top'/'bottom',默认 top) |

API

getUrlQuery

从查询字符串中获取参数

import { getUrlQuery } from 'ilibs';
console.log(getUrlQuery('/user?name=Orkhan&age=30')); // {name: 'Orkhan', age: '30'}

API

| 参数 | 描述 | 类型 | 必填 | 默认值 | | ---- | -------- | ------ | ---- | ------ | | url | url 地址 | string | yes | - |

Return

object

generatePathQuery

使用查询字符串生成路径

import { generatePathQuery } from 'ilibs';
console.log(generatePathQuery('/user', { name: 'Orkhan', age: 30 })); // /user?name=Orkhan&age=30

API

| 参数 | 描述 | 类型 | 必填 | 默认值 | | ---- | -------- | ------ | ---- | ------ | | path | 路径符串 | string | yes | - | | obj | 条件对象 | object | - | - |

Return

string

getPathParams

从查询字符串中获取参数

import { getPathParams } from 'ilibs';
console.log(getPathParams('/app/products/123', '/app/:page/:id')); // {page: 'products', id: '123'}
console.log(
	getPathParams('/items/2/id/8583212', '/items/:category/id/:id', {
		category: (v) => ['Car', 'Mobile', 'Home'][v],
		id: (v) => +v,
	}),
); // {category: 'Home', id: 8583212}

API

| 参数 | 描述 | 类型 | 必填 | 默认值 | | ---------- | ------------------ | ------ | ---- | ------ | | path | url 地址 | string | yes | - | | pathMap | 需要获取参数字符串 | string | yes | - | | serializer | 自由组合返回的对象 | object | - | - |

Return

object

generatePath

使用查询字符串生成路径

import { generatePath } from 'ilibs';
console.log(generatePath('/user/:name/:age', { name: 'Orkhan', age: 30 })); // /user/Orkhan/30

API

| 参数 | 描述 | 类型 | 必填 | 默认值 | | ---- | -------- | ------ | ---- | ------ | | path | 路径符串 | string | yes | - | | obj | 条件对象 | object | - | - |

Return

string

howLongAgo

使用查询字符串生成路径

import { howLongAgo } from 'ilibs';
console.log(howLongAgo('2022-10-09 15:30:23')); // 1 小时前
console.log(howLongAgo('2022-10-09 15:30:23')); // 1 hours ago

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ------------ | ------------------ | ---- | ------ | ------ | | date | 时间 | Date/number/string | yes | - | - | | type | 显示名称类型 | string | - | cn/en | cn |

Return

string

useThrottl

程序节流

import { useThrottl } from 'ilibs';
const conso = (n: number) => console.log(n);
window.onload = () => {
	const button = document.createElement('button');
	button.style.lineHeight = '35px';
	button.innerHTML = 'submit';
	document.getElementById('app')?.appendChild(button);
	button.addEventListener('click', useThrottl(conso, 1000));
};

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | -------- | -------- | ---- | ------ | ------ | | fn | 执行函数 | Function | - | - | - | | time | 时间 | number | - | - | - |

useDebounce

程序节流

import { useDebounce } from 'ilibs';
const conso = (n: number) => console.log(n);
window.onload = () => {
	const input = document.createElement('input');
	input.style.lineHeight = '35px';
	document.getElementById('app')?.appendChild(input);
	input.addEventListener('keyup', useDebounce(conso, 1000));
};

API

useLazyLoad

图片懒加载

import { useLazyLoad } from 'ilibs';
window.onload = () => {
	useLazyLoad(['/a.png', '/b.png', '/c.png', '/d.png']);
};

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ----------------- | -------- | ---- | ------ | ------------------------ | | tags | 图片链接集合 | string[] | yes | - | - | | node | 图片容器 dom 节点 | Element | - | - | document.documentElement |

randomNum

生成区间随机数

import { randomNum } from 'ilibs';
console.log(randomNum(100, 10000)); // 2208.79223401305

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ------ | ------ | ---- | ------ | ------ | | min | 最小值 | number | yes | - | - | | max | 最大值 | number | yes | - | - |

cloneDeep

数据深拷贝

import { cloneDeep } from 'ilibs';
const a = { a: 1 };
const b = cloneDeep(a);
b.a = 2;
console.log(a, b); //  {a: 1} {a: 2}

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ------ | ------ | | data | 数据 | any | yes | - | - |

Return

any

unwarp

针对于 Proxy 对象结构

import { unwarp } from 'ilibs';
let obj = {
	a: 1,
};
let proxyObj = new Proxy(obj, {
	get: function (target, attr) {
		return target[attr]; // obj["a"]
	},
});
console.log(proxyObj); // Proxy {a: 1}
console.log(unwarp(proxyObj)); // {a: 1}

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---- | ------ | ---- | ------ | ------ | | obj | 数据 | object | yes | - | - |

Return

object

merge

针对于 Proxy 对象结构

import { merge } from 'ilibs';
let obj = {
	a: 1,
};
console.log(merge(obj, { b: 2 })); // {a: 1, b: 2}

Return

any[] | AnyObject

each

设置页面标题

import { each } from 'ilibs';
each(
	{
		a: 1,
		b: 2,
	},
	(key, index, data) => {
		console.log(key, index, data);
	},
);
// 1 'a' {a: 1, b: 2}
// 2 'b' {a: 1, b: 2}

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | -------- | -------- | -------- | ---- | ------ | ------ | | data | 数据 | any | yes | - | - | | iteratee | 回调函数 | Function | yes | - | - |

filter

数组筛选

import { filter } from 'ilibs';
console.log(filter([1, 2, 3, 4, 5, 6], (a) => a > 2));
// [3, 4, 5, 6]

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | --------- | -------- | -------- | ---- | ------ | ------ | | data | 数据 | any[] | yes | - | - | | predicate | 回调函数 | Function | yes | - | - |

push

数组筛选

import { push } from 'ilibs';
console.log(push([1, 2, 3, 4, 5, 6], 2)); // [1, 2, 3, 4, 5, 6, 2]
console.log(push([1, 2, 3, 4, 5, 6], 2, 9)); // [1, 2, 9, 4, 5, 6]
console.log(push({ a: 1, b: 2 }, 'a', 9)); // {a: 9, b: 2}
console.log(push({ a: 1, b: 2 }, 'c', 9)); // {a: 1, b: 2,c:9}
console.log(push({ a: 1, b: 2 }, { c: 1, d: 2 })); // {a: 1, b: 2, c: 1, d: 2}
console.log(
	push({ a: 1, b: 2 }, [
		{ c: 3, d: 4 },
		{ a: 11, b: 12 },
	]),
); // {a: 11, b: 12, c: 3, d: 4}

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ----- | ---------------------------------------------------- | ------------ | ---- | ------ | ------ | | data | 数据 | any[]/object | yes | - | - | | key | 数组改变时数组的下标,添加时数组添加的数据.对象的 key | any | yes | - | - | | value | 某条数据的值 | any | - | - | - |

flatter

数组扁平化处理（多维数组变成一维数组）

import { flatter } from 'ilibs';
console.log(flatter([[1, 2, 3], 4, 5, 6, [[[[7, 8], 9]]]])); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---- | ----- | ---- | ------ | ------ | | data | 数据 | any[] | yes | - | - |

setValue

设置数组/对象中对应 path 属性路径上的值，如果 path 不存在，则创建

import { setValue } from 'ilibs';
const object = {
	a: [{ b: { c: 1 } }, { b2: { c: 2 } }],
	b: 1,
	c: { c: 3 },
	d: ['2.0', ['old d.1'], ['2.2.0', '2.2.1']],
};
const array = ['0', '1', ['2.0', ['2.1.0'], ['2.2.0', '2.2.1']]];
setValue(object, 'd.1', 'new d.1');
console.log('object:', object);
// object: {
//     a: [{ 'b': { 'c': 1 } }, { 'b2': { 'c': 2 } }],
//     b: 1,
//     c: { 'c': 3 },
//     d: [
//         '2.0',
//         'new d.1',
//         ['2.2.0', '2.2.1']
//     ]
// };
setValue(array, '2.2', 4);
console.log('array:', array);
// array: [
//     '0',
//     '1',
//     [
//         '2.0',
//         4,
//         ['2.2.0', '2.2.1']
//     ]
// ]

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ----- | ------------ | ---------------------- | ---- | ------ | ------ | | data | 数据 | object/array | yes | - | - | | path | 设置值的路径 | string/string[]/Number | yes | - | - | | value | 设置的值 | any | - | - | - |

getValue

根据字符串输出对象参数,避免程序阻滞

import { getValue } from 'ilibs';
const arr = [1, 2, 3, 4, [51, 52, 53, 54, [551, 552, 553, 554, 555]]];
console.log(getValue({ a: 1, b: 2, c: { a: 11, b: 12 } }, ['c', 'a'])); // 11
console.log(getValue({ a: 1, b: 2, c: { a: 11, b: 12 } }, 'c.a')); // 11
console.log(getValue({ a: 1, b: 2, c: { a: 11, b: 12 } }, 'c.a.d', 'test')); // test
console.log(getValue(arr, '5.5.5', 'test')); // 555
console.log(getValue(arr, '5.5', 'test')); // [551,552,553,554,555]
console.log(getValue(arr, '5.5.9', 'test')); // test

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | --------------------------- | ---------------------- | ---- | ------ | ------ | | data | 数据 | object/array | yes | - | - | | key | 输出的字段路径 | string/string[]/Number | yes | - | - | | alt | 在没有获取到 value 返回的值 | any | - | - | - |

currying

柯里化处理

import { currying } from 'ilibs';
const add = (a, b, c) => a + b + c;
const a = currying(add, 5, 5);
console.log(a(2)); // 12

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | -------- | -------- | ---- | ------ | ------ | | fn | 执行函数 | Function | yes | - | - | | args | 传参 | any | yes | - | - |

templateParser

template 解析器

import { templateParser } from 'ilibs';
console.log(templateParser('<div>{{test}}</div>', { test: '测试' })); // <div>测试</div>

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | -------- | --------- | ------ | ---- | ------ | ------ | | template | html 片段 | string | yes | - | - | | data | 解析格式 | object | yes | - | - |

listToTree

列表转成树形结构

import { listToTree } from 'ilibs';
console.log(
	listToTree([
		{
			id: 1,
			text: '节点1',
			parentId: 0, //这里用0表示为顶级节点
		},
		{
			id: 2,
			text: '节点1_1',
			parentId: 1, //通过这个字段来确定子父级
		},
	]),
);
// [{"id":1,"text":"节点1","parentId":0,"children":[{"id":2,"text":"节点1_1","parentId":1}]}]

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---- | ----- | ---- | ------ | ------ | | data | 数据 | Array | yes | - | - |

treeToList

树形结构转成列表

import { treeToList } from 'ilibs';
console.log(
	treeToList([
		{
			id: 1,
			text: '节点1',
			parentId: 0,
			children: [{ id: 2, text: '节点1_1', parentId: 1 }],
		},
	]),
);
// [{"id":2,"text":"节点1_1","parentId":1},{"id":1,"text":"节点1","parentId":0}]

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---- | ----- | ---- | ------ | ------ | | data | 数据 | Array | yes | - | - |

setInterval

setInterval 重置优化

import { setInterval } from 'ilibs';
setInterval(() => {
	console.log(1);
}, 1000)();

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | --------------- | -------- | ---- | ------ | ------ | | fn | 回调执行方法 | Function | yes | - | - | | t | 执行时间 (毫秒) | number | yes | - | - |

copyjs

复制当前节点内容

import { copyjs } from 'ilibs';
const d = document.createElement('div');
d.innerHTML = '测试复制';
d.id = 'test';
document.body.appendChild(d);
setTimeout(() => {
	copyjs('#test');
}, 1000);

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | -------------- | ---------------- | ---- | ------ | ------ | | dom | 需要复制的节点 | Element / string | yes | - | - |

generateRandomHexColor

生成随机颜色

import { generateRandomHexColor } from 'ilibs';
console.log(generateRandomHexColor()); // #ffffff

Return

string

scrollTo

滚动到顶部/底部 ('top'/'bottom',默认 top)

import { scrollTo } from 'ilibs';
setTimeout(() => {
	scrollTo(document.body);
}, 1000);

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ------- | ---------------- | ---------------- | ---- | ---------- | ------ | | element | 带有滚动条的 dom | Element / string | yes | - | - | | type | 滚动的位置 | string | - | top/bottom | top |

节点操作

函数列表

| 函数名称 | 描述 | | ------------------------------------ | ----------------------- | | setIcon(url) | 设置页面 ICON | | setTitle(title) | 设置页面标题 | | loadRes(url,t,fn) | 设置页面外部引入资源 | | selectDom(tag) | 节点选择器 | | createTextNode(text) | 创建文本节点 | | htmlStringToVNode(html) | html 字符串转 node 对象 | | createDom(vnode,container) | node 对象转 dom 节点 | | setStyle(tag,style) | 设置 dom style 样式 | | setClass(tag,clas) | 设置 dom class 样式 | | removeClass(tag,clas) | 删除 dom class 样式 | | append(tag,child) | 向 dom 节点添加子节点 | | getChildNode(tag) | 获取 dom 节点的子节点 | | setTransform(tag) | 设置 dom 节点过滤 | | addListener(target,type,callback) | 设置 dom 节点事件监听 | | removeListener(target,type,callback) | 移除 dom 节点事件监听 | | remove(node) | 移除 dom 节点 | | setAttr(node,attrs) | 设置 dom 节点 attr | | getAttr(node,attrName) | 获取 dom 节点 attr |

API

setIcon

设置页面 ICON

import { setIcon } from 'ilibs';
setIcon('icon.png');

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ------------- | ------ | ---- | ------ | ------ | | url | icon 链接地址 | string | yes | - | - |

setTitle

设置页面标题

import { setTitle } from 'ilibs';
setTitle('设置页面标题');

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ----- | -------- | ------ | ---- | ------ | ------ | | title | 页面标题 | string | yes | - | - |

loadRes

设置页面外部引入资源

import { loadRes } from 'ilibs';
loadRes('body{color:red}', 'style');

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ------------ | -------- | ---- | ------------------------------ | ------ | | url | 引入内容 | string | yes | - | - | | t | 引入类型 | string | yes | script/css/style/js/javascript | - | | fn | 添加成功回调 | Function | - | - | - |

selectDom

节点选择器

import { selectDom } from 'ilibs';
console.log(selectDom('body'));

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ------------------------------------------- | ------ | ---- | ------ | ------ | | tag | 节点名称,与 document.querySelector 传参一致 | string | yes | - | - |

Return

Element

createTextNode

创建文本节点

import { createTextNode } from 'ilibs';
console.log(createTextNode('text'));

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---- | ------ | ---- | ------ | ------ | | text | 文本 | string | yes | - | - |

Return

Element

htmlStringToVNode

html 字符串转 node 对象

import { htmlStringToVNode } from 'ilibs';
console.log(htmlStringToVNode('<div>text</div>')); //  {"tag":"DIV","attrs":{},"children":[{"tag":"DIV","attrs":{},"children":["text"]}]}

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ----------- | ------ | ---- | ------ | ------ | | html | html 字符串 | string | yes | - | - |

Return

object

createDom

node 对象转 dom 节点

import { createDom } from 'ilibs';
console.log(createDom({ tag: 'DIV', attrs: {}, children: ['text'] })); //  <div>text</div>

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | --------- | ------------------------- | ------ | ---- | ------ | ------ | | vnode | node 对象 | object | yes | - | - | | container | 将 dom 节点添加到那个容器 | object | - | - | - |

Return

HTMLElement | Node | Text | null

setStyle

设置 dom style 样式

import { setStyle } from 'ilibs';
setStyle('body', {
	color: 'red',
});
setStyle('body', 'color: red');

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ----- | -------- | ------------------- | ---- | ------ | ------ | | tag | dom 节点 | HTMLElement /string | yes | - | - | | style | 样式 | object /string | yes | - | - |

Return

HTMLElement | Node | Text | null

setClass

设置 dom class 样式

import { setClass } from 'ilibs';
setClass('body', {
	'body-color': true,
	'body-margin': false,
});
setClass('body', 'body-color');
setClass('body', ['body-color', 'body-margin']);

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | ---------- | ---------------------- | ---- | ------ | ------ | | tag | dom 节点 | HTMLElement/string | yes | - | - | | clas | class 样式 | object/string/string[] | yes | - | - |

Return

HTMLElement | Node | Text | null

removeClass

删除 dom class 样式

import { removeClass } from 'ilibs';
removeClass('body', {
	'body-color': true,
	'body-margin': false,
});
setClass('body', 'body-color');
setClass('body', ['body-color', 'body-margin']);

API

Return

HTMLElement | Node | Text | null

append

向 dom 节点添加子节点

import { append } from 'ilibs';
const d = document.createElement('div');
d.innerHTML = '测试复制';
d.id = 'test';
append('body', [d]);
append('body', [{ tag: 'DIV', attrs: {}, children: ['text'] }]);

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ----- | -------- | ------------------ | ---- | ------ | ------ | | tag | dom 节点 | HTMLElement/string | yes | - | - | | child | 子节点 | Array | yes | - | - |

Return

HTMLElement | Node | Text | null

getChildNode

获取 dom 节点的子节点

import { getChildNode } from 'ilibs';
console.log(getChildNode('body'));

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | -------- | ------------------ | ---- | ------ | ------ | | tag | dom 节点 | HTMLElement/string | yes | - | - |

Return

Array

setTransform

获取 dom 节点的子节点

import { setTransform } from 'ilibs';
console.log(setTransform('body'));

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | -------- | ------------------ | ---- | ------ | ------ | | tag | dom 节点 | HTMLElement/string | yes | - | - |

Return

Array

addListener

设置 dom 节点事件监听

import { addListener } from 'ilibs';
const bodyEvent = () => {
	console.log(1);
};
addListener('body', 'click', bodyEvent);

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | -------- | -------- | ------------------ | ---- | ------ | ------ | | target | dom 节点 | HTMLElement/string | yes | - | - | | type | 事件类型 | string | yes | - | - | | callback | 回调函数 | Function | yes | - | - |

removeListener

移除 dom 节点事件监听

import { addListener, removeListener } from 'ilibs';
const bodyEvent = () => {
	console.log(1);
	removeListener('body', 'click', bodyEvent);
};
addListener('body', 'click', bodyEvent);

API

remove

移除 dom 节点

import { remove } from 'ilibs';
remove('body');

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ---- | -------- | ------------------ | ---- | ------ | ------ | | node | dom 节点 | HTMLElement/string | yes | - | - |

setAttr

设置 dom 节点 attr

import { setAttr } from 'ilibs';
setAttr('body', { style: 'color:red' });

API

| 参数 | 描述 | 类型 | 必填 | 可选值 | 默认值 | | ----- | -------------- | ------------------ | ---- | ------ | ------ | | node | dom 节点 | HTMLElement/string | yes | - | - | | attrs | 节点 attr 对象 | object | - | - | - |

getAttr

获取 dom 节点 attr

import { getAttr } from 'ilibs';
getAttr('body');

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ilibs

Install

验证

函数列表

API

isArray

API

isObject

API

isFunction

API

isString

API

isNumber

API

isBoolean

API

isSymbol

API

isBasicData

API

isJSONStr

API

isType

API

getType

API

Return

isEqual

API

isOdd

API

isPicture

API

isURL

API

isDevice

return

isHex

API

isRgb

API

isColor

API

isExistChild

API

转换

函数列表

API

toLowerCase

API

toUpperCase

API

capitalUpperCase

API

capitalLowerCase

API

capitalUpperCaseAllLowerCase

API

toLowerCamelCase

API

toCamelCase

API

filterTag

API

convertNumberToUppercase

API

dateFmt

API

getPinyin

API

hexToRgb

API

rgbToHex