stitch007/realize-utils

:rocket: 前端业务代码工具库

realize-utils

前端业务代码工具库

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

业务开发过程中，会经常用到日期格式化、url参数转对象、浏览器类型判断、节流函数等常用函数，为避免不同项目多次复制粘贴的麻烦，这里统一封装，并发布到 npm，以提高开发效率。如果你也有常用的代码，欢迎为本项目提交 pr

安装:wrench:

直接下载 dist 目录下的 realize-utils.js 使用，支持 UMD 通用模块规范

使用 npm 安装

npm i realize-utils -D

浏览器:computer:

<script src="realize-utils.js"></script>
<script>
  const newArr = utils.uniqueArray([1, 3, 5, 1, 2, 3, 5]);
  console.log(newArr); // [1, 3, 5, 2]

  const bFlag = utils.equalityArray([1, 2, 3], [1, 2, 3]);
  console.log(bFlag); // true
</script>

快速上手:key:

import { setStorage, getStorage, uniqueArray } from "realize-utils";
setStorage("name", "wen");
let name = getStorage("name");
console.log(name); // wen

let arr = [1, 3, 5, 1, 2, 3, 5];
let uniqueArr = uniqueArray(arr);
console.log(uniqueArr); // [1, 3, 5, 2]

npm 链接:link:

realize-utils

API 文档:package:

Array

• equalityArray 判读两个数组是否相等

• mergeArrayDelRepeat 合并数组后去重

• uniqueArray 数组去重

• subArray 数组相减

Class

• addClass 为元素添加 class

• hasClass 判断元素是否有某个 class

• removeClass 为元素移除 class

Cookie

• getCookie 根据 name 读取 Cookie

• setCookie 根据 name,value,days 设置 Cookie

• removeCookie 根据 name 删除 Cookie

Device

• getExplore 获取浏览器：版本号

• getOS 获取操作系统类型

Dom

• getScrollTop 获取滚动条距顶部的距离

• offset 获取一个元素的距离文档(document)的位置，类似 JQ 中的 offset() ele.offset()

• scrollTo 在${duration}时间内，滚动条平滑滚动到${to}指定位置 scrollTo(to, duration)

• setScrollTop 设置滚动条距顶部的距离

• windowResize H5 软键盘缩回、弹起回调

Function

• debounce 函数防抖

• throttle 函数节流

Keycode

• getKeyName 根据 keycode 获得键名

localStorage

• getStorage 根据 name 读取 localStorage

• setStorage 根据 name,value 添加 localStorage

• removeStorage 根据 name 删除 localStorage

Object

• deepClone 对象的深拷贝

• shallowClone 对象的浅拷贝

• isEmptyObject 判断对象是否为空

• getFormData 将对象转换为 formData 对象

Random

• randomColor 随机生成颜色

• randomNum 生成指定范围随机数

Regexp

• isColor 判断是否为 16 进制颜色，rgb 或 rgba

• isEmail 判断是否为邮箱地址

• isIdCard 判断是否为身份证号

• isPhoneNum 判断是否为手机号

• isUrl 判断是否为 URL 地址

String

• digitUppercase 现金额转大写

Supprot

• isSupportWebP 判断浏览器是否支持 webP 格式图片

Time

• formatRemainTime 计算一个时间到现在过去了多久 '451 天 15 小时 17 分钟 25 秒'

• formatPassTime 计算一个时间到现在过去了多久 '1 年前' '6 个月前' '45 分钟前'

• isLeapYear 判断是否为闰年

• isSameDay 判断是否为同一天

• timeLeft 计算${startTime - endTime}的剩余时间

• monthDays 获取指定日期月份的总天数

• dateBetweenAllDay(startDay, endDay) 根据指定的两个日期，计算并返回中间的所有日期。dateBetweenAllDay('2022-06-01', '2022-06-09') // ['2022-06-01', '2022-06-02', '2022-06-03', '2022-06-04', '2022-06-05', '2022-06-06', '2022-06-07', '2022-06-08', '2022-06-09']

Url

• parseQueryString url 参数转对象

• stringifyQueryString 对象序列化