前端函数库 web-utils-super
目的:高效率完成前端业务代码
包含大多数常用函数,支持Typescript
目前有70+函数,持续更新中...
安装使用
- 直接下载
min
目录下的web-utils-super.min.js使用,支持UMD通用模块规范 - 使用npm安装
浏览器:
<script src="web-utils-super.min.js"></script>
<script>
var OS = window['web-utils-super'].getOS()
</script>
npm:
$ npm install --save-dev web-utils-super
// 完整引入
const utils = require('web-utils-super')
const OS = utils.getOS()
//或者
import utils from 'web-utils-super'
const OS = utils.getOS()
// 只引入部分方法('web-utils-super/<方法名>')
const getOS = require('web-utils-super/getOS')
const OS = getOS()
// 或者
import { getOS } from 'web-utils-super'
const OS = getOS()
API文档
Array
arrayEqual 判断两个数组是否相等
/**
*
* @param {Array} arr1
* @param {Array} arr2
* @return {Boolean}
*/
arrayEqual(arr1, arr2)
arrayIntersection 两个数组取交集
/**
* @param {Array} arr1
* @param {Array} arr2
* @return {Array}
*/
arrayIntersection(arr1, arr2)
const a = [0, 1, 2, 3, 4, 5]
const b = [3, 4, 5, 6, 7, 8]
arrayIntersection(a, b) // [3, 4, 5]
arrayDiff 两个数组取差集
/**
* @param {Array} arr1
* @param {Array} arr2
* @return {Array}
*/
arrayDiff(arr1, arr2)
const a = [0, 1, 2, 3, 4, 5]
const b = [3, 4, 5, 6, 7, 8]
arrayDiff(a, b) // [0, 1, 2, 6, 7, 8]
Function
curryIt 函数柯里化
/**
* @desc 函数柯里化 是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术
* @param {Function} fn
* @return {Function | any}
*/
curryIt(fn)
function add (a,b) {
return a + b
}
curryIt(add)(1)(2) // 3
curryIt(add)(10)(20) // 30
debounce 防抖函数
/**
* @desc 防抖函数,设置一个定时器,约定在xx毫秒后再触发事件处理,每次触发事件都会重新设置计时器,直到xx毫秒内无第二次操作
* @param {Function} func
* @param {Number} wait
* @param {Boolean} promptly 默认false: wait毫秒内无第二次操作触发 | true:立即触发一次,wait毫秒内无第二次操作清空计时器,然后再次操作即可触发func
* @return {Function}
*/
debounce(func, wait, promptly)
throttle 节流函数
/**
* @desc: 节流函数 每隔一段时间就执行一次,设置一个定时器,约定xx毫秒后执行事件,如果时间到了,那么执行函数并重置定时器
* @param {Function} func
* @param {Number} wait
* @return {Function}
*/
throttle(func, wait)
File
domToBase64 截图 返回图片base64链接
/**
* @desc: 截图 返回图片base64链接
* @param {String} id
* @param {Number} height
* @param {Number} width
* @return {String} base64
*/
domToBase64(id, height, width)
downByBase64 通过base64下载图片
/**
* @desc: 通过base64下载图片
* @param {String} dataUrl
* @param {String} fileName
*/
downByBase64(dataUrl, fileName)
base64ToFile 将图片base64转为Blob类型
/**
* @param {String} base64
* @param {String} fileName 文件名
* @return {Blob}
*/
base64ToFile(base64, fileName)
downloadFile 下载文件 excel word
/**
* @desc: 下载文件 excel word
* @param {String} fileName 文件名
* @param {String} fileType 文件类型 可选值:excel | word
* @param {File | Blob} data 二进制流
*/
downloadFile(fileName, fileType, data)
downloadImgFile 通过File或Blob下载图片
/**
* @param {File | Blob} data File 对象或 Blob 对象
*/
downloadImgFile(data)
imgToBase64 将图片资源转为base64
/**
* @param {String} src 图片资源路径
* @param {String} type 图片类型,默认png 只支持 'png'|'jpeg'| 'webp'
* @param {Number} width 要生成的base64图片宽
* @param {Number} height 要生成的base64图片高
* @return {String}
*/
imgToBase64(src, type, width, height)
formatFileSize 格式化文件大小
/**
* @desc: 格式化文件大小
* @param {Number} fileSize
* @return {String}
*/
formatFileSize(fileSize)
getFileSuffix 取得文件后缀名
/**
* @desc: 取得文件后缀名
* @param {String} fileName
* @return {String}
*/
getFileSuffix(fileName)
steamToImg 二进制流转图片链接
/**
* @desc: 二进制流转图片链接
* @param {any} steam
* @return {String} url
*/
steamToImg(steam)
Keycode
getKeyName 根据keycode获得键名
/**
* @param {Number} keycode
* @return {String}
*/
getKeyName(keycode)
Math
add 加法运算,避免数据相加小数点后产生多位数和计算精度损失
/**
* @param {Number} augend 相加的第一个数
* @param {Number} addend 相加的第二个数
* @return {Number} 总和
*/
add(augend, addend)
subtract 减法运算
/**
* @param {Number} augend 相减的第一个数
* @param {Number} addend 相减的第二个数
* @return {Number} 差
*/
subtract(augend, addend)
multiply 乘法运算
/**
* @param {Number} augend 相乘的第一个数
* @param {Number} addend 相乘的第二个数
* @return {Number} 乘积
*/
multiply(augend, addend)
divide 除法运算
/**
* @param {Number} augend 相除的第一个数
* @param {Number} addend 相除的第二个数
* @return {Number} 返回商数
*/
divide(augend, addend)
Object
deepClone 深拷贝,支持常见类型
/**
* @param {Any} values
* @return {Any}
*/
deepClone(values)
isEmptyObject 判断对象(Object)是否为空
/**
*
* @param {Object} obj
* @return {Boolean}
*/
isEmptyObject(obj)
isType 判断数据类型
/**
* @param {any} para
* @return {String} 'number' | 'string' 等
*/
isType(para)
isType(2) // 'number'
isType('2') // 'string'
isType(undefined) // 'undefined'
isType(true) // 'boolean'
isType({}) // 'object'
isType([]) // 'array'
isType(function(){}) // 'function'
isType(null) // 'null'
isType(Symbol(2)) // 'symbol'
Random
randomColor 随机生成十六进制颜色
/**
*
* @return {String}
*/
randomColor() // '#321232'
randomColor() // '#937293'
randomColorRGB 生成指定范围[min, max]的RGB颜色
/**
* @param {Number} min
* @param {Number} max
* @return {String}
*/
randomColorRGB(min = 0, max = 255)
randomColorRGB(10,20) // 'rgb(15,19,15)'
randomColorRGB(100,200) // 'rgb(139,117,119)'
randomNum 生成指定范围[min, max]的随机数
/**
*
* @desc 生成指定范围[min, max]的随机数
* @param {Number} min
* @param {Number} max
* @param {Boolean} integer 是否返回整数
* @return {Number}
*/
randomNum(min = 0, max = 1, integer = true)
randomNum(0, 1) // 0 或者 1
randomNum(0, 1, false) // 0.8808755825399923
randomNum(0, 1, false) // 0.4734837620337147
Regexp
isJSON 判断是否为json
/**
* @desc: 判断是否为json
* @param {any} value
* @return {Boolean}
*/
isJson(value)
isEmpty 判断是否为空字符串、null、undefined、空对象、空数组、false
/**
* @desc: 判断是否为空(是否为空字符串、null、undefined)
* @param {String | null | undefined | Object | Array | Boolean} value
* @return {*}
*/
isEmpty(value)
isEmpty('') // true
isEmpty(' ') // true
isEmpty(null) // true
isEmpty(undefined) // true
isEmpty({}) // true
isEmpty([]) // true
isEmpty(false) // true
isEmpty('123') // false
isEmpty('null') // false
isEmpty('undefined') // false
isEmpty('false') // false
isEmpty('{}') // false
isEmpty('[]') // false
isEmpty({name: 'empty'}) // false
isEmpty([1,2,3]) // false
isIP 判断是否为IP
/**
* @desc: 判断是否是IP
* @param {String} ip
* @return {Boolean}
*/
isIP(ip)
isPort 判断是否为端口号
/**
* @desc: 判断是否是端口号
* @param {String} value
* @return {Boolean}
*/
isPort(value)
isLatitude 判断是否为纬度
/**
* @desc: 判断纬度 -90.0~+90.0(整数部分为0~90,必须输入1到6位小数)
* @param {Number} value
* @return {Boolean}
*/
isLatitude(value)
isLongitude 判断是否为经度
/**
* @desc: 判断经度 -180.0~+180.0(整数部分为0~180,必须输入1到6位小数)
* @param {Number} value
* @return {Boolean}
*/
isLongitude(value)
isNum 判断是否为数字
/**
* @param {Number} str
* @param {String} type 'num' 数字 | 'int' 整数 | 'flot' 浮点数 默认num
* @param {Boolean} positive 是否是正数,默认undefined,不判断正负
*/
isNum(str, type = 'num', positive)
// 下面是各种类型为true的情况
// 数字 true
utils.isNum(1)
utils.isNum(1.2)
utils.isNum(-1)
utils.isNum(-1.2)
// 正数
isNum(1, 'num', true)
isNum(1.11, 'num', true)
// 负数
isNum(-1, 'num', false)
isNum(-1.11, 'num', false)
// 整数
isNum(1, 'int')
isNum(-1, 'int')
// 正整数
isNum(1, 'int', true)
// 负整数
isNum(-1, 'int', false)
// 浮点数
isNum(1.11, 'flot')
isNum(-1.11, 'flot')
// 正浮点数
isNum(1.11, 'flot', true)
// 负浮点数
isNum(-1.11, 'flot', false)
isColor 判断是否为16进制颜色、RGB 、 RGBA
/**
*
* @param {String} str
* @return {Boolean}
*/
isColor(str)
let color = '#ff00ff'
isColor(color) // true
let notColor = 'ff00ff'
isColor(notColor) // false
isEmail 判断是否为邮箱地址
/**
*
* @desc 判断是否为邮箱地址
* @param {String} str
* @return {Boolean}
*/
isEmail(str)
isEmail('657417728@qq.com') // true
isEmail('657417728@qq') // false
isIdCard 判断是否为身份证号
/**
*
* @param {String | Number} str
* @return {Boolean}
*/
isIdCard(str)
isPhone 判断是否为手机号
/**
*
* @param {String|Number} str
* @return {Boolean}
*/
isPhone(str)
isPhone(17623060929) // true
isUrl 判断是否为URL地址
/**
*
* @param {String} str
* @return {Boolean}
*/
isUrl(str)
isUrl('2.com/bq-med/p/8796836') // false
isUrl('cnblogs/bq-med/p/8796836') // false
isUrl('https://www.cnblogs.com/bq-med/p/8796836.html') // true
isUrl('www.cnblogs.com/bq-med/p/8796836') // true
isBase64 判断是否是base64格式
/**
* @param {String} str
* @return {Boolean}
*/
isBase64(str)
isLicencePlate 判断是否是车牌号
/**
* @param {String} str
* @param {Number} type 1:新能源+非新能源 2:新能源车牌号 3:非新能源车牌号
* @return {Boolean}
*/
isLicencePlate(str, type = 1)
// 非新能源车牌号 '渝AB0926'
let palte = '渝AB0926'
isLicencePlate(palte) // true
isLicencePlate(plate, 2) // false
isChinese 判断是否为只有中文
/**
* @param {String} str
* @return {Boolean}
*/
isChinese(str)
String
changeCase 字符转换,type: 1:首字母大写 2:首字母小写 3:大小写转换 4:全部大写 5:全部小写 默认为1
/**
* @desc: 字符转换,type: 1:首字母大写 2:首字母小写 3:大小写转换 4:全部大写 5:全部小写 默认为1
* @param {String} str 字符串
* @param {Number} type 转换方式
* @return {String}
*/
changeCase('abc') // 'Abc'
changeCase('abc', 1) // 'Abc'
changeCase('abc', 2) // 'aBC'
changeCase('ABC',2) // 'aBC'
changeCase('abc',3) // 'ABC'
changeCase('ABC',3) // 'abc'
changeCase('abc',4) // 'ABC'
changeCase('ABC',5) // 'abc'
colorToRGB 16进制颜色转 RGB | RGBA 字符串,有透明度则转换为RGBA
/**
* @desc: 16进制颜色转 RGB | RGBA 字符串,有透明度则转换为RGBA
* @param {String} color 16进制颜色
* @param {Number} opa 透明度
* @return {String}
*/
colorToRGB('#000000') // 'rgb(0,0,0)'
colorToRGB('#000000',0.2) // 'rgba(0,0,0,0.2)'
colorToRGB('#325879',0.2) // 'rgba(50,88,121,0.2)'
md5 md5加密
/**
* @desc: md5加密
* @param {String} string
* @return {String}
*/
md5(string)
digitUppercase 现金额转大写
/**
*
* @param {Number} n 金额
* @return {String}
*/
digitUppercase(n)
digitUppercase(510) // '伍佰壹拾元整'
digitUppercase(510.2) // '伍佰壹拾元贰角'
digitUppercase(1) // '壹元整'
formatString 字符串格式化
/**
* @param {String} str 要格式化的字符串
* @param {Number} frontLen 保留前几位
* @param {Number} endLen 保留后几位
* @param {String} cha 替换的字符串
* @return {String}
*/
formatString(str, frontLen = 0, endLen = 0, cha = '*')
formatString('abcd') // ****
formatString('abcd', 1, 1) // a**d
formatString('abcd', 1, 1, '-') // a--d
getAllLetter 生成字母数组
/**
* @param {String} range 'all' 包含大小写 | 'lower' 只有小写 | 'upper' 只有大写
* @return {Array}
*/
getAllLetter(range = 'all')
Support
isSupportWebP 判断浏览器是否支持webP格式图片
/**
*
* @return {Boolean}
*/
isSupportWebP()
Time
formatPassTime 格式化startTime距现在的已过时间
/**
* @param {Date | String} startTime
* @return {String}
*/
formatPassTime(startTime)
// 假设现在是2022/3/18
formatPassTime('2020/2/2') // 两年前
formatPassTime() // 刚刚
formatPassTime(new Date('2022/3/15')) // '3天前'
formatRemainTime 格式化现在距endTime的剩余时间
/**
*
* @param {Date | String} endTime
* @return {String}
*/
formatRemainTime(endTime)
formatRemainTime('2023/2/2') // '320天 12小时 34分钟 34秒'
formatTime 格式化时间戳
/**
* @param {Date | String} time 时间
* @param {String} fmt 格式
* @return {String}
*/
formatTime(time, fmt = 'yyyy-MM-DD hh:mm:ss')
formatTime('2022/3/15') // '2022-03-15 00:00:00'
formatTime(new Date('2022/3/15'), 'YY-MM-DD') // '2022-03-15'
getCurrentDay 获取某天起止时间
/**
* @desc: 获取某天起止时间
* @param {Date | String} 年月日 '2022-2-2' | '2022/2/2' | '2022.2.2' | 不传默认是当天
* @return {Array}
*/
getCurrentDay(time)
getCurrentDay('2022-10-14') // ['2022-10-14 00:00:00', '2022-10-14 23:59:59']
getCurrentWeek 获取某周起止时间
/**
* @param {Date | String} time 年月日 '2022-2-2' | '2022/2/2' | '2022.2.2' | time instanceof Date
* @return {Array}
*/
getCurrentWeek(time)
getCurrentWeek('2022/3/6') // ['2022-02-28 00:00:00', '2022-03-06 23:59:59']
getCurrentMonth 获取某月起止时间
/**
* @param {Date | String} time 年月日 '2022-2-2' | '2022/2/2' | '2022.2.2' | time instanceof Date
* @return {Array}
*/
getCurrentMonth(time)
getCurrentMonth('2022/3/6') // ['2022-03-01 00:00:00', '2022-03-31 23:59:59']
getCurrentQuarter 获取某季度起止时间
/**
* @param {Date | String} time 年月日 '2022-2-2' | '2022/2/2' | '2022.2.2' | time instanceof Date
* @return {Array}
*/
getCurrentQuarter(time)
getCurrentQuarter('2022/3/6') // ['2022-01-01 00:00:00', '2022-03-31 23:59:59']
getCurrentYear 获取某年起止时间
/**
* @param {Date | String} time 年月日 '2022-2-2' | '2022/2/2' | '2022.2.2' | time instanceof Date
* @return {Array} 起止时间数组集合
*/
getCurrentYear (time)
getCurrentYear('2022/3/6') // ['2021-01-01 00:00:00', '2021-12-31 23:59:59']
getDay 获取某天时间
/**
* @param {Number} num 当天0 昨天传-1 明天传1 以此类推
* @param {String} str 时间分割方式,默认是'-'
* @return {String}
*/
getDay(num = 0, str = '-')
// 假如今天是2022/3/18
getDay(0) // '2022-03-18'
getDay(-1) // '2022-03-17'
getQuarterSeasonStartMonth 得到某季度开始的月份
/**
* @param {Number} month 需要计算的月份 0-11
* @return {Number}
*/
getQuarterSeasonStartMonth(month = 0)
getQuarterSeasonStartMonth(1) // 0
getQuarterSeasonStartMonth(11) // 9
isLeapYear 是否为闰年
/**
*
* @param {Number} year
* @returns {Boolean}
*/
isLeapYear(year)
isLeapYear(2022) // false
isLeapYear(2024) true
isSameDay 判断是否为同一天
/**
* @param {Date | String} date1
* @param {Date | String} date2 可选/默认值:当天
* @return {Boolean}
*/
isSameDay(date1, date2)
isSameDay('2022/3/1', new Date('2022-3-1')) // true
monthDays 获取指定日期月份的总天数
/**
* @param {Date | String} time
* @return {Number}
*/
monthDays(time)
monthDays('2022/4/2') // 30
monthDays('2022/2') // 28
timeLeft ${startTime - endTime}的剩余时间,startTime大于endTime时,均返回0
/**
* @param { Date | String } startTime
* @param { Date | String } endTime
* @returns { Object } { d, h, m, s } 天 时 分 秒
*/
timeLeft(startTime, endTime)
timeLeft('2022/3/1', '2022/3/2 20:49:40') // {d: 1, h: 20, m: 49, s: 40}
Url
getQueryString 获取url参数中对应key的值
/**
* @param {String} key
* @param {String} url
* @return {String}
*/
getQueryString(key, url)
getQueryString('id', 'http://www.baidu.com?id=3') // '3'
parseQueryString url参数转对象
/**
*
* @param {String} url 默认值window.location.href 当前页面url
* @return {Object}
*/
parseQueryString(url)
parseQueryString('http://www.baidu.com?id=3') // {id: '3'}
stringfyQueryString 对象序列化
/**
*
* @param {Object} obj
* @param {String} str 连接符 默认'&'
* @return {String}
*/
stringfyQueryString(obj)
stringfyQueryString({id:3,name:'你好'}) // 'id=3&name=%E4%BD%A0%E5%A5%BD'
stringfyQueryString({id:3,name:'hello'}) // 'id=3&name=hello'
stringfyQueryString({id:3,name:'hello'}, '/') // 'id=3/name=hello'
Class
addClass 为元素添加class
/**
*
* @param {HTMLElement} ele
* @param {String} cls
*/
addClass(ele, cls)
hasClass 判断元素是否有某个class
/**
*
* @param {HTMLElement} ele
* @param {String} cls
* @return {Boolean}
*/
hasClass(ele, cls)
removeClass 为元素移除class
/**
*
* @param {HTMLElement} ele
* @param {String} cls
*/
removeClass(ele, cls)
Cookie
getCookie 根据name读取Cookie
/**
*
* @param {String} name
* @return {String}
*/
getCookie(name)
removeCookie 根据name删除Cookie
/**
*
* @param {String} name
*/
removeCookie(name)
setCookie 添加Cookie
/**
*
* @param {String} name
* @param {String} value
* @param {Number} days 保存天数
*/
setCookie(name, value, days)
Device
getExplore 获取浏览器类型和版本号
/**
*
* @return {String}
*/
getExplore()
getOS 获取操作系统类型
/**
*
* @return {String}
*/
getOS()
Dom
getScrollTop 获取滚动条距顶部的距离
/**
*
* @return {Number}
*/
getScrollTop()
offset 获取一个元素的距离文档(document)的位置,类似jQ中的offset()
/**
*
* @param {HTMLElement} ele
* @returns { {left: number, top: number} }
*/
offset(ele)
scrollTo 在duration时间内,滚动条平滑滚动到to指定位置
/**
*
* @param {Number} to
* @param {Number} duration
*/
scrollTo(to, duration)
setScrollTop 设置滚动条距顶部的距离
/**
*
* @param {Number} value
*/
setScrollTop(value)
windowResize H5软键盘缩回、弹起回调
/**
*
* @desc 当软件键盘弹起会改变当前 window.innerHeight,监听这个值变化
* @param {Function} downCb 当软键盘弹起后,缩回的回调
* @param {Function} upCb 当软键盘弹起的回调
*/
windowResize(downCb, upCb)
checkInView 判断元素是否在可视区域内
/**
* @desc 适用于懒加载和无限滚动,但是每次scroll都得重新计算,性能耗费大,并且该方法会引起重绘回流
* @param {HTMLElement} dom
* @return {Boolean}
*/
checkInView(dom)
createCodeImg 创建图形验证码
/**
* @param {String} options 容器id
* @param {String} code 验证码
*/
<div id="code" style="width: 280px; height: 120px"></div>
<script>
let code = new createCodeImg("code", "1234");
// 刷新图形验证码
code.refresh()
</script>
onWindowResize window.onresize 事件 专用事件绑定器
// 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG.
// add: 添加事件句柄
// remove: 删除事件句柄
onWindowResize.add(debounce(setFontSize, 50));
resizeChangeFontSize window.onresize 宽度变化修改根节点fontsize
/**
*
* @desc 宽度变化修改根节点fontsize,用于开发响应式网站
* @param {Number} width 以width为基准 在width宽度下 1rem = 100px
*/
// 在宽度为375px下 1rem = 100px
resizeChangeFontSize(375)