@z-utils开发工具组

news/2024/4/19 1:32:04

地址

和 zzy-javascript-devtools 有什么差别?

  • 算是zzy-javascript-devtools的重构版本,支持之前的所有内容
  • 对内(开发):
    • 使用rollup重构打包逻辑
    • 全自动化打包生成
    • 自动生成更新日志以及版本号
    • 全自动化生成对应包的readme.md文件
    • 文件分级更加明确
    • 扩展性提升
    • 统一开发格式
  • 对外(使用):
    • 开放cjs模式
    • readmd.md文件更加合理,格式统一
    • 新增对vue的支持,以及纯工具包,避免额外开销(分三个包分别按项目决定用哪个)
    • 未来迭代逐渐开放对hooks函数的支持

渣渣宇的开发工具包@react

安装

npm i @utils/react -S
yarn add @utils/react -S

使用

import { isPhone, bottomVisible, Img } from '@utils/react' // 按需加载// example:
isPhone(13412341234) // truebottomVisible() // false<Img></Img>

更新日志

  • 2023-12-23 version:1.0.1
    • 新增无副作用标识
  • 2023-12-21 version:1.0.0
    • 首次更新

包简述

devtools

JSB_jsMethod
  • app 调用 js 方法 交互事件注册
/**
@param {string} 事件方法
@return Promise<data*/ data-> app提供的参数
>
// example:
JSB_jsMethod('openModel').then(() => {this.openModel()
})
JSB_init
  • JSB系列方法初始化
  • 调用JSB_后缀的方法前必须先调用此方法进行初始化
// example:
JSB_init() // 直接使用即可
allEquals
  • 全等判断
  • 在两个变量之间进行深度比较以确定它们是否全等。
/**
@param {any} 对比项A
@param {any} 对比项B
@return boolean
*/
// example:
allEquals({ a: [2, { e: 3 }], b: [4], c: 'foo' }, { a: [2, { e: 3 }], b: [4], c: 'foo' }); // true
copyToClipboard
  • 将字符串复制到剪贴板
/**
@param {string} 拷贝内容
*/
// example:
copyToClipboard('Lorem ipsum') // 'Lorem ipsum' copied to clipboard
bottomVisible
  • 检查页面底部是否可见
/**
@return boolean
*/
JSB_appMethod
  • js调用app方法
/**
@param {string} 事件名
@param {any} 传递给app的参数
@return Promise<void*/
>
// example:
JSB_appMethod(name, data).then(() => console.log('success!'))
deepClone
  • 深拷贝
/**
@param {T} 拷贝内容
@return T
*/
// example:
const o = {a: [{b: 1}]
}
const cloneO = deepClone(o)
debounce
  • 防抖
/**
@param {function} 执行函数 
@param {number} wait 间隔时间(ms)
@return function 设置防抖后的函数
*/
// example:
const fn = () => {++a
}
const debounceFn = debounce(fn, 300)// 执行 debounceFn 即可
changeTimeYear
  • 接受 ms 级的时间戳
  • 时间格式转化年
  • 个位自动补零
/**
@param {string | number} 时间
@return string 时间戳
*/
// example:
changeTimeYear(new Date().valueOf()) // -> YYYY-MM-DD
deleteHTMLTags
  • 从字符串中删除HTML / XML标签。
/**
@param {string} 需要处理的HTML字符串
@return string 处理后的字符串
*/
// example:
const html = '<span>i am zzy</span>'
const pureHTMLCon = deleteHTMLTags(html) // i am zzy
elementIsVisibleInViewport
  • 检查指定的元素在视口中是否可见
/**
@param {HTMLElement} el 被指定的元素
@param {boolean} partiallyVisible = false false:左右可见 true:全屏(上下左右)可见
@return 
*/
// example:
elementIsVisibleInViewport(el); // 需要左右可见
elementIsVisibleInViewport(el, true); // 需要全屏(上下左右)可以见
detectDeviceType
  • 检测移动/PC设备
/**
@return 'Mobile' | 'Desktop'  移动端/PC端
*/
exitFullscreen
  • 关闭全屏模式
formatMoney
  • 金钱格式化,间隔点为3
/**
@param {number | string} val
@return string 
*/
// example:
formatMoney(12345678) // 123,456,78
formateSeconds
  • 格式化 天:时:分:秒
/**
@param {number | string} dosurPlusTimem 剩余时间戳 - 单位为 s
@return string dd:hh:mm:ss
*/
// example:
formateSeconds(86400) // 01:00:00:00
formateSeconds(3600) // 00:01:00:00
formatFileSize
  • B转换到KB,MB,GB并保留两位小数
/**
@param {number} fileSize
@return string 转换后的值
*/
// example: 以 1000 整除模拟,方法内为 1024 标准除
formatFileSize(300421) // 300.421KB
formatFileSize(3004221221) // 3.004GB
getColonTimeFromDate
  • 返回当前24小时制时间的字符串
/**
@param {Date} 当前Date时间
@return string hh:mm:ss
*/
// example:
getColonTimeFromDate3(new Date()) // 18:31:21
getDomStyle
  • 返回指定元素的生效样式
/**
@param {HTMLElement} 指定的元素
@param {any} 指定的样式
@return string
*/
// example:
getDomStyle(document.querySelector('p'), 'font-size') // 14px
generateTree
  • 根据数组生成树结构
/**
@param {IGenerateTreeListItem[]} items 待转化结构 id,children,any
@param {null | number | string = null} parentId 首级id
@param {string = 'parentId'} selectVal tree关联id
@return any tree结构
*/
// example:
const comments = [{ id: 1, parentId: null },{ id: 2, parentId: 1 },{ id: 3, parentId: 1 },{ id: 4, parentId: 2 },{ id: 5, parentId: 4 }
];
generateTree(comments)
{id: 1,children: [{id: 2,children: [{id: 4,children: [{id: 5,children: []}]}]},{id: 3,children: []}]
}
formatNowTime
  • 时间戳转化为当前时间
/**
@param {number | string} time
@return string YYYY-MM-DD hh:mm:ss
*/
// example:
formatNowTime(now Date().valueOf()) // 2023-12-20 17:31:22
getScrollPosition
  • 取当前页面的滚动位置
/**
@param {Window | HTMLElement} 可选元素,默认Window位置
@return { x: number; y: number } 当前位置
*/
// example:
getScrollPosition(); // {x: 0, y: 200}
getUrlData
  • 获取目标地址参数
/**
@param {string} 地址
@return { [key: string]: string }
*/
// example:
const url = https://www.baidu.com/s?ie=UTF-8&wd=github
getUrlData(url) // { ie: 'UTF-8', wd: 'github' }
infinityScrolling
  • 无限滚动
  • 回调第一行必须设置 infinityScrollIng 的bol 属性为 false,意味着已经进程已经开始,必须等待结束(失败或者成功)才可以重新为true,才可以进行下一次的回调触发
  • react具体实现组件为 ScrollLoadingBar
/**
@param {HTMLElement} 目标节点
@param {Function} 当目标节点出现在可是区域内后出发此回调。以此实现无限滚动
@param {可选:关闭监听(只有在监听滚动条时才会有效,否则无效,可忽略(针对低版本浏览器启用监听滚动条方式进行处理))} devtools.infinityScrollIng.closeMonitor()
@return 
*/
// example:
devtools.infinityScrollIng(document.querySelector('.bottomScrollBar'), ()=>{
// 回调第一行必须设置 infinityScrollIng 的bol 属性为 false,意味着已经进程已经开始,必须等待结束(失败或者成功)才可以重新为true,才可以进行下一次的回调触发
devtools.infinityScrollIng.bol = false
//  ...some code
devtools.infinityScrollIng.bol = true // done
})
isAndroidPlatform
  • 当前设备是否是 android
/**
@return boolean 是否为安卓系统
*/
isBrowserTabFocused
  • 检查当前标签页是否活动
/**
@return boolean 是否活动
*/
isEmptyObject
  • 判断对象是否为空
/**
@param {object} 目标对象
@return boolean
*/
// example:
if(isEmptyObject(obj)) return
// ...some code
lazyImage
  • Img懒加载实现
  • 需要设置html中的img src为空,data-src属性为目标路径
  • 必须等待加载目标的 data-src 属性赋值完毕,再执行此方法
/**
@param {string} 需要懒加载Img的统一className命名,亦或者不传,直接获取全量img元素
*/
// example:
// html:
<img src={null} data-src="targetSrc" className='lazyImg' />
// js
lazyImage('lazyImg') // lazyImg 类名所有img实现懒加载
preventScroll
  • 固定滚动条
  • 功能描述:一些业务场景,如弹框出现时,需要禁止页面滚动,这是兼容安卓和 iOS 禁止页面滚动的解决方案
/**
@param {number} y轴 Number 需要被定位的 y 或者不传,默认 window.scrollY
@return number 当前被定住的 y 
*/
// example:
preventScroll
launchFullscreen
  • 某个元素开启全屏
/**
@param {HTMLDOM} 接受一个 dom 作为参数
*/
// example:
launchFullscreen(document.querySelectorById('test'))
recoverScroll
  • 恢复滚动条
  • 如果配合 preventScroll 方法使用需要现将 固定前的滚动条高度记录,再恢复时赋值给 recoverScroll 方法
/**
@param {number} 被恢复位置 Y
*/
// example:
recoverScroll(200) y200的高度恢复,相当于滚动至200
scrollToTop
  • 平滑滚动至顶部
  • 该代码段可用于平滑滚动到当前页面的顶部。
rewirteLog
  • 不显示 console.log
  • 重写log为空函数
setDomRem
  • rem实现
  • rem*16px
  • 以蓝湖rem设置为标准 设置16px的rem就是 *8
/**
@param {number = 8} 比例
*/
// example:
setDomRem(16) 1:32(蓝狐设计图)
smoothScroll
  • 滚动到指定元素区域
  • 该代码段可将指定元素平滑滚动到浏览器窗口的可见区域。
/**
@param {keyof HTMLElementTagNameMap} 指定的dom
*/
// example:
smoothScroll11('#fooBar')
typeOf
  • 增强版typeOf
  • typeOf 关键字对于null,date 都会认为是Object,不准确, 使用Object.prototype.toString.call
/**
@param {any} 判断值
@return string
*/
strTrim
  • 去除空格
/**
@param {string} 待处理字符串
@param {1 | 2 | 3 | 4}  去除空格类型 1-所有空格  2-前后空格  3-前空格 4-后空格 默认为1
@return string 处理后的内容
*/
// example:
const str = ' 1233 4'
strTrim(str, 1) // 12334
throttle
  • 节流
/**
@param {Function} func 执行函数
@param {Number} wait 间隔时间 ms
@param { leading?: boolean,trailing?: boolean } 可选options
{leading: 调用后是否立即执行一次,trailing: 结束后是否还要执行一次} 默认都为true,但都不能为false
@return  Function
*/
// example:
const fn = (n) => {a += n
}
const throttleFn = throttle((n) => fn(n))

regModules

isAccountNumber
  • 验证银行卡号
  • 10到30位, 覆盖对公/私账户, 参考微信支付
/**
@param {string} account
@return boolean
*/
isCreditCode
  • 验证统一社会信用代码
/**
@param {string} calue
@return boolean
*/
isColor16
  • 验证16进制颜色
/**
@param {string} val
@return boolean
*/
isEmail
  • 邮件 email
/**
@param {string} value
@return boolean
*/
isExternal
  • 判读是否为外链
/**
@param {string} path
@return boolean
*/
isEnglish
  • 是否全部为英文
/**
@param {string} dom
@return boolean
*/
isHttpAndPort
  • 验证必须带端口号的网址(或ip)
/**
@param {string} port
@return boolean
*/
isImageUrl
  • 验证图片链接地址
  • 图片格式可按需增删
/**
@param {string} src
@return boolean
*/
isIdCard
  • 验证身份证
/**
@param {string} idcard
@return boolean
*/
isMoney
  • 价格、金额 带小数的正数,小数点后最多两位
/**
@param {string} value
@return boolean
*/
isLandlineTelephone
  • 验证座机电话(国内),如: 0341-86091234
/**
@param {string} phone
@return boolean
*/
isIMEI
  • 验证手机机身码(IMEI)
/**
@param {string} imei
@return boolean
*/
isName
  • 是否为汉字(姓名)
/**
@param {string} name
@return boolean
*/
isPassword
  • 密码校验
  • a-z A-Z 0-9 long 6 < val < 21
/**
@param {string} value
@return boolean
*/
isPhone
  • 手机号
/**
@param {string} value
@return boolean
*/
isPassport
  • 验证护照(包含香港、澳门)
/**
@param {string} value
@return boolean
*/
isPhoneStrict
  • 验证手机号中国(严谨), 根据工信部2019年最新公布的手机号段
/**
@param {string} value
@return boolean
*/
isPostcode
  • 验证邮政编码(中国)
/**
@param {string} value
@return boolean
*/
isThunderLink
  • 验证迅雷链接
/**
@param {string} url
@return boolean
*/
isTrainNum
  • 验证火车车次
/**
@param {string} value
@return boolean
*/
isUrl
  • 验证链接是否有效
/**
@param {string} value
@return boolean
*/
isVersion
  • 验证版本号格式必须为X.Y.Z
/**
@param {string} value
@return boolean
*/
isWeChatNum
  • 验证微信号
  • 6至20位,以字母开头,字母,数字,减号,下划线
/**
@param {string} value
@return boolean
*/
isVideoUrl
  • 验证视频链接地址
/**
@param {string} value
@return boolean
*/
isWindowsFilePath
  • 验证window下"文件"路径
/**
@param {string} value
@return boolean
*/
isWindowsFolderPath
  • 验证window"文件夹"路径
/**
@param {string} value
@return boolean
*/
isInteger
  • 是否为整数
/**
@param {string} dom
@return boolean
*/
isLicensePlateNumber
  • 验证车牌号(新能源+非新能源)
/**
@param {string} val
@return boolean
*/

components

ErrorBoundary
  • 错误边界
  • 请在App.js中用此组件将 Route组件包裹即可展示错误之后的UI信息
  • 它在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误
  • 无法捕获 事件处理,异步代码等错误

NoData
  • 无数据显示组件
/**
say: string,src: any,style: { [key: string]: string }
@param {src} 空时显示图片
@param {string} 空时显示文案
@param {{ [key: string]: string }} 样式
*/
Img
  • 此组件用于图片懒加载,配合 zzy-javascript-devtools - devtools.lazyImage() 方法使用>
  • 必须等待加载目标的 data-src 属性赋值完毕,再执行此方法
/**
@param {String} className 赋予的类名
@param {String} src 目标地址
@param {Function} click 具有点击事件能力
*/
exmaple:
ScrollLoadingBar
  • 无限滚动触发块
  • 直接链接触发事件即可
  • 需要在触发事件内结束时 赋值 infinityScrolling.bol = true
/**getMoreData: FunctiongetDataBol: boolean
@param {boolean} getDataBol = true 是否还需要从进行下一次触发
@param {Function} getMoreData 触发后的回调
*/
exmaple:
// getMoreData首次进入时会触发一轮,所以直接在这里进行排除
<ScrollLoadingBargetMoreData={() => (pageIndex > 1 ? getDoctorList(true) : null)}getDataBol={doctorHasMore}
></ScrollLoadingBar>
TopBar
  • 顶部栏
  • 默认5.5rem,rem数值需要自主调整
/**
@param {0 | 1 | null} type: 0 - 黑色主题,1 - 白色,不传  默认为白色主题,背景为空(透明)
@param {boolean} noArrow 是否隐藏左侧箭头
@param {Function} arrowBack 左侧箭头点击触发
@param {string} title 标题
@param {string} rigTxt 右侧文字 不传则隐藏
@param {Function} clickRigTxt 右侧点击事件
*/
exmaple:
<TopBar arrowBack={back} title="首页" />

http://www.ppmy.cn/news/1279103.html

相关文章

C# SQLite基础工具类

目录 1、安装System.Data.SQLite工具包 2、创建数据库 3、数据库的连接与断开 4、执行一条SQL语句 5、批量执行sql语句 6、返回首行首列值 7、执行sql语句返回datatable 1、安装System.Data.SQLite工具包 2、创建数据库 /// <summary> /// 数据库路径 …

吴恩达RLHF课程笔记

1.创建偏好数据集 一个prompt输入到LLM后可以有多个回答&#xff0c;对每个回答选择偏好 比如{prompt,answer1,answer2,prefer1} 2.根据这个数据集&#xff08;偏好数据集&#xff09;&#xff0c;创建reward model&#xff0c;这个model也是一个LLM,并且它是回归模型&#…

C#中使用OpenCV的常用函数

以下是一些C#中使用OpenCV的常用函数例子&#xff1a; 1. 加载图像&#xff1a; using OpenCvSharp;Mat image Cv2.ImRead("path_to_your_image.jpg", ImreadModes.Color); 2. 显示图像&#xff1a; Cv2.NamedWindow("Image Window", WindowFlags.Nor…

【大数据】NiFi 中的 Controller Service

NiFi 中的 Controller Service 1.Service 简介1.1 Controller Service 的配置1.1.1 SETTING 基础属性1.1.2 PROPERTIES 使用属性1.1.3 COMMENT 页签 1.2 Service 的使用范围 2.全局参数配置3.DBCPConnectionPool 的使用样例4.在 ExcuseGroovyScript 组件中使用 Service 1.Servi…

多级缓存:亿级流量的缓存方案

文章目录 一.多级缓存的引入二.JVM进程缓存三.Lua语法入门四.多级缓存1.OpenResty2.查询Tomcat3.Redis缓存预热4.查询Redis缓存5.Nginx本地缓存6.缓存同步 一.多级缓存的引入 传统缓存的问题 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未…

YOLO同时对图片和标签进行重命名

import osimage_folder /path/to/image/folder # 图像文件夹路径 label_folder /path/to/label/folder # 标签文件夹路径image_files sorted(os.listdir(image_folder)) # 获取图像文件列表并排序 label_files sorted(os.listdir(label_folder)) # 获取标签文件列表并排…

安装nodejs,配置环境变量并将npm设置淘宝镜像源

安装nodejs并将npm设置淘宝镜像源 1. 下载nodejs 个人不喜欢安装包&#xff0c;所以是下载zip包的方式。这里我下载的node 14解压包版本 下载地址如下&#xff1a;https://nodejs.org/dist/v14.15.1/node-v14.15.1-win-x64.zip 想要其他版本的小伙伴去https://nodejs.org/di…

Uniapp 开发 BLE

BLE 低功耗蓝牙&#xff08;Bluetooth Low Energy&#xff0c;或称Bluetooth LE、BLE&#xff0c;旧商标Bluetooth Smart&#xff09;&#xff0c;用于医疗保健、运动健身、安防、工业控制、家庭娱乐等领域。在如今的物联网时代下大放异彩&#xff0c;扮演者重要一环&#xff…

论文阅读——llava

Visual Instruction Tuning LLaVA 指令智能体分为两类&#xff1a;端到端的&#xff0c;通过LangChain[1]/LLM[35]协调各种模型的系统。 数据集生成用GPT辅助生成的&#xff0c;具体不写了。 模型结构&#xff1a; input image Xv LLM&#xff1a;Vicuna visual encoder&a…

【uniapp小程序-生成二维码+多个图片文字合并一张图】

<!-- 二维码 --><canvas id"qrcode" canvas-id"qrcode" width"120" ></canvas><!-- 生成带小程序码的分享图片 --><canvas canvas-id"shareCanvas" class"share-canvas"></canvas>#qrc…

计算机毕业设计------JSP教务处学生成绩管理系统

项目介绍 本项目包含管理员、教师、学生三种角色&#xff1b; 用户角色包含以下功能&#xff1a; 修改密码,查看自己的信息,查看自己的成绩,登录界面等功能。 管理员角色包含以下功能&#xff1a; 修改示例,增删改查学生信息,增删改查教师信息,增删改查课程信息,管理员修改…

大语言模型概述

在科技飞速发展的当今时代&#xff0c;人工智能技术成为社会进步的关键推动力之一。在广泛关注的人工智能领域中&#xff0c;大语言模型以其引人注目的特性备受瞩目。 大语言模型的定义及发展历史 大语言模型是一类基于深度学习技术的人工智能模型&#xff0c;旨在理解和生成自…

FastAPI实现文件上传下载

FastAPI实现文件上传下载 1.后端FastAPI2.后端html3.效果 最近的项目需求&#xff0c;是前端vue&#xff0c;后端fastAPI&#xff0c;然后涉及到图像的消息发送&#xff0c;所以需要用fast写文件上传下载的接口&#xff0c;这里简单记录一下。 1.后端FastAPI import os.path i…

LeetCode刷题--- 目标和

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…

福FLUKE禄克8808A数字多用表

福禄克8808A&#xff0c;用于制造、研发、维修等应用的多功能数字表&#xff0c;FLUKE 8808A 5.5位数字多用表可以完成当今众多常用的测量工作。无论是功能测 展开 福禄克8808A&#xff0c;用于制造、研发、维修等应用的多功能数字表&#xff0c;FLUKE 8808A 5.5位数字多用表可…

点击筛选框动态增加 多条可输入Table列 以及通过操作数组改造数据

点击筛选框动态增加 多条可输入Table列 以及通过操作数组改造数据 <el-col :span"8" class"tab_group"><el-form-item label"动态筛选"><el-select v-model.trim"ruleForm.flowType" placeholder"请选择" …

在Linux上安装CLion

本教程将指导你如何在Linux系统上安装CLion&#xff0c;下载地址为&#xff1a;https://download.jetbrains.com.cn/cpp/CLion-2022.3.3.tar.gz。以下是详细的安装步骤&#xff1a; 步骤1&#xff1a;下载CLion 首先&#xff0c;你需要使用wget命令从提供的URL下载CLion的tar…

JavaWeb笔记之SVN

一、版本控制 软件开发过程中 变更的管理&#xff1b; 每天的新内容;需要记录一下&#xff1b; 版本分支;整合到一起&#xff1b; 主要的功能对于文件变更的追踪&#xff1b; 多人协同开发的情况下,更好的管理我们的软件。 大型的项目;一个团队来进行开发; 1: 代码的整合 2: 代…

数字信号的理解

1 数字信号处理简介 数字信号处理 digital signal processing&#xff08;DSP&#xff09;经常与实际的数字系统相混淆。这两个术语都暗示了不同的概念。数字信号处理在本质上比实际的数字系统稍微抽象一些。数字系统是涉及的硬件、二进制代码或数字域。这两个术语之间的普遍混…

服务器经常死机怎么办?如何处理

关于服务器死机这一话题相信大家是不会陌生的&#xff0c;平时在使用服务器的过程中&#xff0c;或多或少都是会有遇到过。轻则耽误业务开展&#xff0c;重则造成数据丢失&#xff0c;相信每个人都不想碰到服务器死机的情况。下文我也简单的介绍下服务器死机的原因以及对应的预…