前端函数库 web-utils-super

目的：高效率完成前端业务代码

包含大多数常用函数，支持Typescript

目前有70+函数，持续更新中...

安装使用

1. 直接下载min目录下的web-utils-super.min.js使用，支持UMD通用模块规范
2. 使用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('[email protected]') // 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)