Skip to content

SaebaRyoo/fe-utils

Repository files navigation

FE-utils

GitHub Workflow Status npm Coverage Status GitHub

前端工具库,封装前端日常开发过程中的通用代码

如何使用

下载npm包(浏览器中使用请看下面)

yarn add @lxnxbnq/utils 或者 npm install @lxnxbnq/utils

使用ESModule规范导入

import { sum } from '@lxnxbnq/utils';
console.log(sum(1,2,3,4)) // 输出10

使用CommonJS规范导入

const { sum } = require('@lxnxbnq/utils')
console.log(sum(1,2,3,4))

在浏览器中使用

如果直接在浏览器中使用,则不需要包管理。直接下载release中的index.umd.js,使用的是umd通用模块规范

然后在浏览器中引用

<script src="index.umd.js"></script>
<script>
    console.log(FE_utils.sum(1,2,3,4)) // 输出10
</script>

功能介绍

Function

  • debounce 该方法传入函数,并返回一个只能在指定延时结束后才能调用的函数
  • throttle 该方法传入函数,并返回一个在规定时间内只能被调用一次的函数
  • compareVersion 传入两个格式类似2.2.03的版本号字符串(可以在每个.号中间加任意0,并且长度不一定要相等), 如果 v1 > v2 返回1, v1 < v2 返回-1, 其他情况返回0

Array

cookie

日期操作

流相关操作

对象操作

  • isEmpty 判断是否为空对象
  • deepClone 支持各种数据类型的深拷贝

随机数据生成

url操作

功能

验证函数

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

  • isEmail 验证邮箱格式是否正确

  • isIdCard 验证身份证号是否正确

  • isPhoneNum 验证手机号是否正确

  • isUrl 验证url是否正确

  • isMobile 验证当前宿主环境是否为手机

  • isAppleDevice 验证是否为苹果设备

  • typeOf 获取传入数据的类型

  • isObject 验证数据类型是否为object

  • isFunction 验证数据类型是否为function

  • isString 验证数据类型是否为string

  • isBoolean 验证数据类型是否为boolean

  • isNumber 验证数据类型是否为number

  • isUndef 验证数据类型是否为undefined

  • isDate 验证数据类型是否为一个date对象