utils-h v1.1.4
utils-h
utils-h 是一个前端工具包， 包括 qs , debounce ,throttle , LazyLoad , getTime , 等函数或类等 API
download
> yarn add utils-himport
可以通过此，全部引入
import * as UtilsH from 'utils-h'
console.log(utilsH.throttle)或者仅引入你需要使用的
import {debounce} from 'utils-h'
let f = debounce(100,cb,true)use tools
🌀debounce
防抖函数
function debounce(wait: number, fun: Function, immediate?: boolean): Function
- wait (ms)
- fun
- immediate
如果 immediate 是 true , 防抖函数会立即调用 ，默认 false
import { debounce } from 'utils-h'
let cb = function(){
//...
}
let cbWithDebounce = debounce(200,cb,true)
ele.onclick = cbWithDebounce🌈throttle
节流函数
function throttle(dur: number, fun: Function, endCall?: boolean): Function
- dur(ms)
- fun
- endCall
如果 endCall 是 true , 讲在末尾再执行一次回调，假如 2s 执行一次，但是你 1 秒时停止了操作，但会执行2次 , 默认 true
import { throttle } from 'utils-h'
let cb = function(){
//...
}
let cbWithThrottle = throttle(100,cb)
ele.onsroll = cbWithThrottle🦀LazyLoad
图片懒加载类 未加载真正图片的 img 元素增加 data-lazy 属性 和 data-lazy-src 属性 data-lazy 为 true ， data-lazy-src 为图片真正的 src 在 vue 和 react 中，请勿动态添加 data-lazy
constructor
constructor(root?:string)root 是 rootEle 的 id 或者 class , 默认值是 document 。rootEle 和IntersectionObserver.root是同一个意思
instance methods
observe()在有新的 img 元素增加时，增加新的监听元素。 如果你使用 vue 或者 react ， 请确保 img 元素已经渲染
disconnect
停止监听所有 img 元素
<script setup lang="ts">
import { LazyLoad } from 'utils-h4'
import { ref, onMounted } from 'vue'
const lazyload = ref<LazyLoad>(new LazyLoad('.container'))
onMounted(() => {
lazyload.value.observe()
})
const imgList = ref<string[]>([])
imgList.value = [
'src1',
'src2',
'src3'
]
</script>
<template>
<div class="container">
<img v-for="v in imgList" src="./loading.png" alt="" :key="v" data-lazy :data-lazy-src="v">
</div>
</template>
<style>
.container {
margin: 100px auto;
width: 200px;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
}
img {
width: 200px;
height: 200px;
}
</style>🐻qs
提取 url 中的数据或者设置 search 参数
let {qs} from 'utils-h'
methods
- parse(url:string) 获取 url 各个部分数据，返回对象
let parseRes = qs.parse('https://abc.com:80/a/b/?a=1#efg')
console.log(parseRes)
/*
{
url:'https://abc.com:80/?a=1#efg'
scheme: https,
domain: abc.com,
port: 80,
path: /a/b,
query: a=1,
hash: efg,
}
*/- getQuery(url:string) 获取 search (query) 参数
let qo = qs.getQuery('http://abc.com?a=1&b=2')
console.log(qo)
/*
{
a:1,
b:2
}
*/- setQuery(url:string,query:object) 设置 query (search) 参数
let qo = {
a:1,
b:2
}
let url = qs.setQuery('http://abc.com',qo)
console.log(url)
// http://abc.com?a=1&b=2🕐getTime
获取时间参数 根据你的格式，返回对应格式的时间
const time = getTime(format)
getTime('yyyy') // 2023
getTime('mm') // 03 (month
getTime('m') // 3 (month
getTime('dd') // 21 (day
getTime('d') // 21 (day
getTime('hh:mimi:ss') // 08:06:36
geTime('h:mi:s') // 8:6:36
getTime('yy/m/d hh:mimi:ss') // 23/3/21 08:06:36🐞Validator
校验器，用于表单数据的校验，
const validator = new Validator()实例方法
noEmpty(text) 如果 text 是空字符串或者仅空格，则返回 false ，否则返回 true
equal(text1,text2) 严格比较 text1 和 text2
objEqual(obj1,ibj2,keys?) 根据 keys 指定比较的对象属性，比较对象是否相等 如果 keys 没有指定，则 keys = Object.keys(obj1)
不指定 keys
let obj1 = {
a:1,
b:2
},
obj2 = {
a:1,
b:2
}
validator.checkObjEqual(obj1,obj2) // true指定 keys
let obj1 = {
a:1,
b:'2',
c:{
d:3
},
e:false
},
obj2 = {
a:1,
b:false,
c:{
d:3
}
}
// 比较 a 和 c 下的 d 属性
validator.checkObjEqual(obj1,obj2,['a','c.d']) // truelen(text,minL,maxL) text 的长度是否在 minL,maxL 的范围内，如果在即 true ，否则 false
range(num,min,max,loose = false) 检测 num 数值的范围是否在 min,max 内 , 如果 loose 为 true ，则 num 可以为一个字符串数值，比如 '123'
validator.range('12',0,12) // false '12' is string
validator.range('12',0,12,true) // true '12' will translate to 12- isNum(num,loose = false,canbeNaN = false) 检测 num 是否是一个数值，loose 为 true1 ，表示字符串数值（'12'） 也认为是数值 canbeNaN 如果为 true ，则 NaN 也返回 true 其他情况非数值返回 false
phone(text) 根据传入的数值或字符串，检测是否为号码
mail(text) 根据传入的字符串，检测是否为邮箱
nameCh(text) 根据传入的字符串，检测是否为中文的名字，包括 XXX·XXX·XXX 的格式
pw(text,strength = 1) 检测密码的强度 strength = 1 时 ， 限制长度不小于 6 strength = 2 时 ， 限制长度不小于 8,且必须包含数值和英文 strength = 1 时 ， 限制长度不小于 6 ，且必须包含数值，英文和特殊字符（部分特殊字符不支持）
addRule(rule:function) 传入一个自定义检测函数 ， 返回一个 id
clear() 清空所有自定义函数
checkByRule(rule,...args:any) 传入 rule , 使用 rule 对应的方法对数据进行检测 rule 可以是自定义函数的 id ，也可以是 isNum ，mail 等字符串
let id = addRule((text)=>{
return !!text
})
checkByRule(id,'abc') // true
checkByRule('phone','12312312312') // true- checkByRules(rules) 对于大量数据需要校验时，rules 只是一个配置，checkByRules 函数会根据配置，主动进行检测 返回一个 promise ， 如果所有检测都是 true ，则 resolve 为 true 否则 resolve 为第一个 false 的检测的错误提示
rules 是对象数组，对象包括三个元素 rule , errText , args
rule 可以是自定义检测函数的 id ，也可以是 isNum ,phone 等字符串
errText 是抛出的错误提示文字
args 是检测函数的参数数组
const rules = [
{
rule: "noEmpty",
errText: "名字不能为空",
args: [' asd ']
},
{
rule: "phone",
errText: "号码不正确",
args: ['123asd']
},
{
rule: 'len',
errText: "长度不符合",
args: ['123', 2, 4]
}
]
validator.checkByRules(rules).then((r) => {
// all true
}, err => {
// first err
// err === 号码不正确
})