realize-utils

前端业务代码工具库，支持 UMD、CJS、ESM 多模式和 Tree-Shaking。

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

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

安装和使用 🔧

CDN

直接下载 lib 目录下的 realize-utils.browser.js 使用，支持 CDN 方式，直接在 html 文件中引入使用。

<script src="./js/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>

ESM

使用 npm 安装。支持 Tree-shaking。

npm i realize-utils -D

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]

CJS

直接下载 lib 目录下的 realize-utils.cjs.js 使用，在 node 环境中引入使用。

npm 链接 🔗

realize-utils

API 文档 📦

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 获得键名

Number

• standardAmount 将数字（整数逢三一断）含小数转换成标准的金额模式，最多保留三位小数 。standardAmount(999999999.9991) => '999,999,999.999'
• standardIntegerAmount 将 "整数" 数字（整数逢三一断）。standardIntegerAmount(99999999999) => '99,999,999,999'

Object

• deepClone 对象的深拷贝
• shallowClone 对象的浅拷贝
• isEmptyObject 判断对象是否为空
• getFormData 将对象转换为 formData 对象

Random

• randomColor 随机生成颜色
• randomNum 生成指定范围随机数

Regexp

• isColor 判断是否为 16 进制颜色，rgb 或 rgba
• isEmail 判断是否为邮箱地址
• isIdCard 判断是否为身份证号
• isPhoneNum 判断是否为手机号
• isUrl 判断是否为 URL 地址

Screen

• toFullScreen 全屏 toFullScreen()
• exitFullscreen 退出全屏 exitFullscreen()

Storage

• getStorage 根据 name 读取 localStorage
• setStorage 根据 name,value 添加 localStorage
• removeStorage 根据 name 删除 localStorage

String

• digitUppercase 现金额转大写 digitUppercase(1314521) => '壹佰叁拾壹万肆仟伍佰贰拾壹元整'

Supprot

• isSupportWebP 判断浏览器是否支持 webP 格式图片
• downloadFile base64 数据导出文件，文件下载 downloadFile(filename, data)

Time

• dateFormater 格式化时间 dateFormater('YYYY-MM-DD HH:mm') => '2022-08-07 14:40' dateFormater('YYYY-MM-DD', '2020.11.29') => '2020-11-29' dateFormater('YYYYMMDDHHmm', '2020-11-29 18:10:07') => '202011291810'
• dateStrFormat 将指定字符串由一种时间格式转化为另一种。dateStrForma('20220807', 'YYYYMMDD', 'YYYY 年 MM 月 DD 日') ==> 2022 年 08 月 07 日 dateStrForma('2022 年 08 月 07 日', 'YYYY 年 MM 月 DD 日', 'YYYYMMDD') ==> 20220807
• formatRemainTime 计算一个时间到现在过去了多久 '451 天 15 小时 17 分钟 25 秒'
• formatPassTime 计算一个时间到现在过去了多久 '1 年前' '6 个月前' '45 分钟前'
• isLeapYear 判断是否为闰年 isLeapYear(2020) => true isLeapYear(2021) => false isLeapYear(2022) => false
• isSameDay 判断是否为同一天 isSameDay('2022-08-06', '2022-08-06') => true
• monthDays(month) 获取指定日期月份的总天数 monthDays('2022-08') => 31 monthDays('2022-06') => 30
• timeLeft(startTime, endTime) 计算${startTime - endTime}的剩余时间 timeLeft('2022-08-06 10:10:10', '2022-08-10 11:15:15') => {d: 4, h: 1, m: 5, s: 5} // 剩余 4 天 1 小时 5 分 5 秒
• twoDateBetweenAllDay(startDay, endDay) 根据指定的两个日期，计算并返回中间的所有日期 。twoDateBetweenAllDay('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']
• twoDaysBetweenNum(startDay, endDay) 计算两个日期之间的天数。 使用场景：距今天已有 N 天 。twoDaysBetweenNum('2022-06-16', '2022-06-20') // 4

Url

• parseQueryString url 参数转对象 parseQueryString('?a=1&b=2&c=3') => {a: '1', b: '2', c: '3'}
• stringifyQueryString 对象序列化 stringifyQueryString({a: '1', b: '2', c: '3'}) => 'a=1&b=2&c=3'