Web-tools-libs NPM

介绍

web-tools-libs 是一个前端常用 JavaScript 库

安装

 #npm
 npm install web-tools-libs --save
 #yarn 
 yarn add web-tools-libs --save

使用

支持 esm、commonjs、requirejs 语法引入

#esm 方式
① 引入：import wTlibs from 'web-tools-libs'  
② 调用：wTlibs.方法名  
#commonjs 方式
① 引入：let wTlibs= require('web-tools-libs')
② 调用：wTlibs.方法名

wTlibs库提供的工具方法

生成随机数

(1) 生成min~max的随机数，包含min和max

wTlibs.random(min,max)

数组

(1) 判断数组中是否存在某元素

参数

arr：原数组
val：判断元素

wTlibs.containsElement(arr, val)

(2) 数组排序

参数

arr：排序数组
type：1从小到大 2从大到小 3随机

wTlibs.sort(arr, type)

(3) 将类数组转换为数组

参数

ary：目标数组

wTlibs.formArray(ary)

(4) 普通一维数组中的最大值（成员：Number）

参数

arr：目标数组

wTlibs.max(arr)

(5) 普通一维数组中的最小值（成员：Number）

参数

arr：目标数组

wTlibs.min(arr)

(6) 一维数组求和（成员：Number类型）

参数

arr：目标数组

wTlibs.sum(arr)

(7) 求一维数组平均值成员：Number类型

参数

arr：目标数组

wTlibs.average(arr)

(8) 删除树结构中key(自定义键名)不存在的节点

参数

list：treeList
key：自定义键名

wTlibs.delNullLeafNode(list,key)

(9) json数组对象根据自定义键名去重

参数

arr：json数组对象
key：自定义键名

wTlibs.jsonUnique(arr,key)

(10) 普通数组去重

参数

arr：数组

wTlibs.arrUnique(arr)

(11) 树形结构数据扁平化

参数

tree：树形结构数据
childs：自定义key
arrAttr：自定义需要返回的字段数组

wTlibs.treeToArray(tree,childs,arrAttr)
#案例
const treeData = [
    {
        id: 1,
        name: "Parent",
        letter: 'A',
        label: 'root',
        children: [
            {
                id: 2,
                name: "Child",
                label: 'B',
                label: 'child',
                children: []
            }
        ]
    }
];
wTlibs.treeToArray(treeData,'children',['id','name','label','children'])
// 输出结果
[
    {
        "id": 1,
        "name": "Parent",
        "label": "root",
        "children": [
            {
                "id": 2,
                "name": "Child",
                "label": "child",
                "children": []
            }
        ]
    },
    {
        "id": 2,
        "name": "Child",
        "label": "child",
        "children": []
    }
]

(12) 线性数组树结构化：通过pid

参数

data：带pid的数组

wTlibs.arrToTree(data)

(13) 返回数组并集：都是一维数组

参数

arr1：数组1
arr2：数组2

wTlibs.arrayUnion(arr1, arr2)

(14) 返回数组差集：都是一维数组

参数

arr1：数组1
arr2：数组2

wTlibs.arrayDiff(arr1, arr2)

(15) 返回数组交集：都是一维数组

参数

arr1：数组1
arr2：数组2

wTlibs.arrayIntersect(arr1, arr2)

(16) 通过子节点的id查找他的所有父节点

参数

tree：树结构数据
func：方法
path：[]
dataStructure：自定义返回的数据对象即需要返回的字段组成的数组

返回值：结果返回所有父节点及本身节点组成的一维数组

wTlibs.findNode(tree, func, path, dataStructure)
#案例
const tree = [
    {
        id: 1,
        name: "Parent",
        letter: 'A',
        label: 'root',
        children: [
            {
                id: 2,
                name: "Child",
                label: 'B',
                label: 'child',
                children: []
            }
        ]
    }
];
const dataStructure = { id: null, name: null, label: null }
const path = []
wTlibs.findNode(tree, (node) => node.id === 2, path, dataStructure)
// 输出结果
[
    {
        "id": 1,
        "name": "Parent",
        "label": "root"
    },
    {
        "id": 2,
        "name": "Child",
        "label": "child"
    }
]

(17) 普通数组扁平化函数

参数

arr：数组

wTlibs.flat(arr)

(18) 深拷贝

参数

source：引用类型数据

wTlibs.deepClone(source)

字符串

(1) 去除空格

参数

str：目标字符串
type: 1所有空格 2前后空格 3前空格 4后空格

wTlibs.trim(str, type)

(2) 字符转换

参数

str：目标字符串
type: 1首字母大写 2首字母小写 3大小写转换 4全部大写 5全部小写

wTlibs.changeCase(str, type)

时间/日期

(1) 格式化时间戳为标准时间格式

参数

time：10位或者13位时间戳

wTlibs.timestampToTime(time)
#案例
wTlibs.timestampToTime(1711203805000) // 2024-03-23 22:23:25

(2) 转为毫秒时间戳

参数

d：YY-MM-DD HH:mm:ss格式日期

wTlibs.getTimeToStamp(d)
# 案例
wTlibs.getTimeToStamp('2024-03-23 22:23:25') // 1711203805000

(3) 计算结束日期距离系统当前时间的：年月日时分秒

参数

endDate：结束时间

返回值：返回 year、month、day、hour、minute、second

wTlibs.dateComputed(curDate)

(4) 获取当前系统时间戳

参数

n{number}：10 or 13 位时间戳，否则返回：undefined

wTlibs.getNowTimestamp(n)

(5) 获取日期或者具体时间

参数type{string}：

month：到月
day：到日
hour：到时分秒

wTlibs.getDate(type)

(6) 标准时间格式化

参数

date：标准日期/时间（2021-12-25T05:27:30.823Z

wTlibs.formatterDate(date)

(7) 标准时间截取年月日

参数

data： 2021-12-25 13:27:30 时间格式

wTlibs.filterymd(date)

(8) 格式化秒为时分秒

参数

value：秒

wTlibs.formateSecond(value)

(9) 标准日期格式化为：yy-mm-dd

参数

date：标准日期/时间（2021-12-25T05:32:25.342Z）

wTlibs.formatDate(date)

(10) val：年月（2021-12）某月第一天到最后一天的时间段

wTlibs.judgeEndDays(val)

(11) 标准日期格式互转

参数

type：1=>xxxx年xx月xx日、/=> xxxx/xx/xx、3=>xxxx-xx-xx 、 .=> xxxx.xx.xx
date：需要转换的日期

返回值：返回字符串日期(示例所有格式都可以互转)

案例

format('1','2024-01-31') ：2024年01月31日
format('/','2024-01-31')：2024/01/31
format('-','2024-01-31')：2024-01-31
format('.','2024-01-31')：2024.01.31

wTlibs.format(type,date)

(12) 根据type返回自己所需截止日期到当前系统日期距离多少type

参数

endDate（YY-MM-DD HH:mm:ss）截止日期
type'day' | 'hours' | 'minutes' | 'seconds'：精确到天、小时、分钟、秒

wTlibs.diffTime(endDate, type)

cookie

(1) 存储cookie

参数

key：键名
value：键值

wTlibs.setCookie(key,value)

(2) 获取cookie

参数

key：键名

wTlibs.getCookie(key)

localStorage

(1) 本地缓存中存储内容

参数

key：键名
value：键值

wTlibs.setStorage(key,value)

(2) 获取localStorage中对应key的内容

参数

key：键名

wTlibs.getStorage(key)

验证类

运算精度丢失

(1) 解决运算精度丢失的问题：加法返回和

wTlibs.plus(arg1, arg2)
#案例
console.log(0.1 + 0.2) // 0.30000000000000004
wTlibs.plus(0.1, 0.2) // 0.3

(2) 解决运算精度丢失的问题：减法返回差

wTlibs.subtract(arg1, arg2)
#案例
console.log(0.3 - 0.2) // 0.09999999999999998
wTlibs.subtract(0.3, 0.2) // 0.1

(3) 解决运算精度丢失的问题：乘法返回积

wTlibs.multiply(arg1, arg2)
#案例
console.log(0.1 * 0.2) // 0.020000000000000004
wTlibs.multiply(0.1, 0.2) // 0.02

(4) 解决运算精度丢失的问题：除法返回商

wTlibs.divide(arg1, arg2)
#案例
console.log(0.0023 / 0.00001) //229.99999999999997
wTlibs.divide(0.0023,0.00001) // 230

金额

(1) 将阿拉伯数字金额为转中文大写

wTlibs.moneyCapitalize(money) 
// wTlibs.moneyCapitalize(100000) 壹拾万元整

(2) 金额格式化

参数

number {number}：要格式化的数字
decimals{number}：保留几位小数
sign{string}：小数点符号
thousands_sep{string}：千分位符号

返回值：返回格式化后的金额

wTlibs.moneyFormat(number, decimals, sign, thousands_sep)
# 案例
wTlibs.moneyFormat(10000000, 2, '.', ',') // 10,000,000.00

(3) 千分位逗号（,）格式化金额

参数

n{string,number}：需要处理的数据

返回值：返回字符串千分位（,）分隔

wTlibs.formatMoney(n)
#案例
wTlibs.formatMoney('100000') // 100,000
wTlibs.formatMoney(100000) // 100,000

数据脱敏

(1) 电话号码脱敏：即隐藏电话号码中间4位

参数

phone{string,number}：11位电话号码

wTlibs.hiddenMidPhone(phone)
#案例
wTlibs.hiddenMidPhone(18800000000) // 188****0000

(2) 验证是否为正确的手机号码

参数

phone{number}：11电话号码

wTlibs.rulesPhone(phone)
# 案例
wTlibs.rulesPhone(18800000000) // true
wTlibs.rulesPhone(17800000000) // false

数据类型

(1) 验证是否邮箱

参数

email：邮箱地址

wTlibs.isEmail(email) // true 或 false

(2) 验证是否手机号

参数

phone：电话号码

wTlibs.isPhone(phone) //true 或 false

(3) 是否字符串

参数

val：目标判断数据

wTlibs.isString(val) // true 或 false

(4) 是否数字

参数

val：目标判断数据

wTlibs.isNumber(val) // true 或 false

(5) 是否undefined

参数

val：目标判断数据

wTlibs.isUndefined(val) //true 或 false

(6) 是否对象

参数

val：目标判断数据

wTlibs.isObj(val) // true 或 false

(7) 是否数组

参数

val：目标判断数据

wTlibs.isArray(val) //  true或 false

(8) 数组最大值

参数

val：目标数组

wTlibs.arrMax(val) //最大值

(9) 检测密码强度无效、弱、较强、强

参数

pwd：密码内容

wTlibs.checkPwd(pwd)

(10) 判断数据类型

参数

val：需要检测数据类型的数据，返回具体的小写类型名称

wTlibs.isType(val)

(11) 是否null

参数

val：目标数据

wTlibs.isNull(val) // true 或 false

(12) 数组最小值

参数

val：目标数组

wTlibs.arrMin(val)

字母与索引

(1) 序号/索引转为Excel字母序号

参数

num：序号/索引

返回值：返回字母序号

wTlibs.indexToLetter(num) 
#案例
wTlibs.indexToLetter(0)  // A
wTlibs.indexToLetter(1)  // B
……
wTlibs.indexToLetter(26) // AA
wTlibs.indexToLetter(27) // AB

(2) Excel字母序号转为索引

参数

letter：Excel字母序号

返回值：返回字母序号对应索引

wTlibs.letterToIndex(letter)
#案例
wTlibs.letterToIndex('A')  // 0
wTlibs.letterToIndex('B')  // 1
……
wTlibs.letterToIndex('AA') // 26
wTlibs.letterToIndex('AB') // 27

水印

(1) 添加水印

参数【str1 | str2】

str1：第一行水印内容
str2：第二行水印内容

wTlibs.setWaterMark(str1, str2)

(2) 移除水印

wTlibs.rmWaterMark()

全屏/退出全屏

(1) 浏览器进入全屏

wTlibs.fullScreen()

(2) 浏览器退出全屏

wTlibs.exitFullScreen()

文本复制

text为目标复制内容

wTlibs.copy(text)

base64

(1) 图片地址转base64地址

wTlibs.base64(imgUrl, callback) // 返回值 base64地址

#案例
wTlibs.base64(imgUrl,res=>{
	console.log('res', res); // res 为返回的图片base64地址
})

(2) base64图片下载，点击或者运行自动拉取下载

wTlibs.downBase64(base64URL, fileName) //base64URL图片地址 fileName文件名

防抖与节流

(1) 防抖函数

参数

func：函数
wait：延迟执行毫秒数
immediate：true 表立即执行，false 表非立即执行

wTlibs.debounce(func, wait, immediate)

(2) 节流函数

参数

func：函数
wait：延迟执行毫秒数，
typpe：1 表时间戳版，2 表定时器版

wTlibs.throttle(func, wait, type)

设备/平台判断

(1) 判断是android还是ios还是web 返回Web | iOS | Android

wTlibs.isDevice()

(2) H5软键盘缩回、弹起回调

downCb 当软键盘弹起后，缩回的回调,
pCb 当软键盘弹起的回调

wTlibs.h5Resize(downCb, upCb)

文件扩展名

获取文件扩展名

参数

fileName{string}：文件扩展名

返回值：扩展名字符

wTlibs.getFileExtension(fileName)
#案例
wTlibs.getFileExtension('1.txt')  // txt
wTlibs.getFileExtension('1.pdf')  // pdf
wTlibs.getFileExtension('1.word') // word

其他

(1) 提取非整十、整百、整千……的整十、整百、整千……部分

参数

date：目标处理数据
param：按照整10、100…等取整将非整10、100，…转为整10、100‘…

wTlibs.besExtract(date, param)

#案例
wTlibs.besExtract(9999, 100) // 9900
wTlibs.besExtract(9999, 1000) // 9000

(2) 处理baseUrl+url连接处'/'问题

参数

baseUrl：公用地址
url：api接口

wTlibs.combine(baseUrl, url) 

#案例
wTlibs.combine('https://www.baidu.com','/api/web/userList')
wTlibs.combine('https://www.baidu.com/','/api/web/userList')

// 输出（都是）：https://www.baidu.com/api/web/userList

(3) 获取浏览器地址栏url参数

参数

param：键名

wTlibs.getParam(param)

获取浏览器地址栏url携带的名称（键名）为 param的参数

(4) 判断当前浏览器是否支持webp格式图片

wTlibs.hasSupportWebp()

(5) 生成唯一标识符（UUID）

wTlibs.uuid()
#案例
wTlibs.uuid() //4b5d31e3-afe4-4541-b2fc-9a2fdf40f280

更新日志

version 1.1.6版本

1.更新、完善库使用文档
2.新增部分wTlibs库提供的工具方法的使用案例
3.新增库工具方法
- getFileExtension(fileName)：获取文件扩展名
- hasSupportWebp()：判断当前浏览器是否支持webp格式图片
- uuid()：生成唯一标识符（UUID）

webjs utils web-lib methods js-utils tools js-lib lib methods-lib

1 month ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago