前端通用工具库使用说明

背景

为方便不同业务项目在使用常用JS工具函数时，需耗时编写工具库、且风格不统一问题，开发此工具库，本库是结合遇到的业务项目和经验封装一些通用方法，供小伙伴提效减荷，后续将持续跟进维护。

安装

 npm i front-standard-utils

项目引入

import {
    getUUID,
    getUrlParams,
    isEmail,
    isIDCard,
    isPhone,
    isUrl,
    removeDupArr,
    arrayEqual,
    ...
} from 'front-standard-utils';

支持 API

UUID

获取uuid

@param prefix 可选，传入后作为uuid前缀
@returns uuid

getUUID(prefix)

URL

获取单个url参数

@param key 对应key值的参数
@param targetUrl 可选，不传获取当前地址的url，传入后获取targetUrl的参数
@returns uuid

getUrlParam(key, targetUrl)

获取url所有参数

@param targetUrl 可选，不传获取当前地址的url，传入后获取targetUrl的参数
@returns uuid

getUrlParams(key, targetUrl)

正则

验证是否为手机号

@param  str 手机号
@returns Boolean

isPhoneNum(str)

验证是否为邮箱

@param  str 邮箱
@returns Boolean

isEmail(str)

验证是否为身份证号

@param  str 身份证号
@returns Boolean

isIdCard(str)

验证是否为URL地址

@param  str url地址
@returns Boolean

isUrl(str)

数组

对象数组去重

@param arr 数组
@param key 去重项
@returns 返回去重后的新数据
 
removeDupArr(arr: any[], key: string)

判断两个数组是否相等

@param arr1 
@param  arr2 
@returns Boolean

arrayEqual(arr1: string[], arr2: string[])

对象

判断obj是否为空

@param  {Object} obj
@return {Boolean}

isEmptyObject(obj: any)

obj深克隆

@param  {Object} obj
@return {Boolean}
 */
deepClone(obj: any)

字符串

千分位分隔数字字符串

@param nums 需要格式化的数据
@returns 
@desc 千分位分隔数字字符串 如12345678 --> 12,345,678
 
stringSepByThousands(nums: string)

cookie

设置cookie

@param name cookie key值
@param value cookie value值
 
setCookie(name: string, value: any)

读取cookie

@param name cookie key值
@returns
 
getCookie(name: string)

删除cookie

@param name cookie key值
 
delCookie(name: string)

localStorage

设置localStorage

@param storageName 
@param values
@returns

setLocalStorage(storageName: string, value: string)

读取localStorage

@param storageName 
@returns

getLocalStorage(storageName: string)

删除localStorage

@param storageName 

removeLocalStorage(storageName: string)

节流函数

节流函数e

@param fn 事件触发的操作
@param delay 可选，多少毫秒内连续触发事件不会执行，默认200毫秒
@returns {Function}

throttle(fn: Function, delay: number = 200)

防抖函数

防抖函数

@param fn 事件触发的操作
@param delay  可选，多少毫秒内连续触发事件延迟执行，默认200毫秒
@returns {Function}
 
debounce(fn: Function, delay = 200)

时间处理

时间补0

@param number {string|number} 待处理时间
@returns 返回处理之后的时间
@desc formatNumber(9) => 09 formatNumber(10) => 10
 
formatNumber(number: number | string)

时间戳格式化时间

@param timestamp {number}  待处理时间戳
@param beforeSeparate {string} 年月日分隔符 默认 - 
@param afterSeparate {string} 时分秒分隔符 默认 ：
@returns 返回处理之后的时间
@desc formatDate(1641784747332) => 2022-01-10 11:19:07
 
formatDate(number: number)

格式化时间 1641799837000 => 2分钟前

@param timestamp {number} 待处理时间
@returns 返回处理之后的时间
@desc getFormatTime(1641784747332) => 2分钟前
 
getFormatTime(number: number)

OSS图片转webp

 检查阿里CDN是否支持.webp 格式图片，支持则转为wep格式
@@param {string} url OSS图片的url路径
@returns 新的url
@desc 亲测14.4KB的png图片可转8.8KB
 
getWebpImg(url: string)