front-standard-utils/README.md

前端工具库

# 前端通用工具库使用说明

## 背景

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

## 安装

```shell
 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)
```