前端工具库
这是一个使用webpack打包的JavaScript类库。
目的:让前端开发更高效,更专注于业务代码的编写
业务开发过程中,会经常用到数组的操作
、日期格式化
、url的操作
、浏览器类型判断
等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,以提高开发效率。
使用方式
浏览器:
直接下载项目,引入js文件
<script type="text/javascript" src="util.js"></script>
tUtil.uuid()
tUtil.trim(' Tyro CCC ')
tUtil.getExplore()
NODE:
使用npm安装:
npm install tyro-util --save
import工具类:
// 全部引入
import tUtil from 'tyro-util'
tUtil.uuid()
tUtil.getExplore()
// 单个引入
import { uuid, getExplore } from 'tyro-util'
uuid()
getExplore()
发布到 npm
npm run build // 先webpack打包类库,之后再发布
npm login // 登录
npm publish // 发布
API文档
isIdCard 判断是否为身份证号
isEmail 判断是否为邮箱地址
isPhoneNum 判断是否为手机号
isLandline 是否固定电话
isLetter 是否是英文字母
isChinese 是否是中文
isValidPwd 判断密码格式是否6-25字符必须包含大小写字母+数字
isColor 判断是否为16进制颜色,rgb 或 rgba
filterNum 只能输入数字, 不符合字符的会替换为空
filterCENum 只能输入英文、中文和数字,不符合字符的会替换为空
filterENum 只能输入英文、和数字,不符合字符的会替换为空
filterFloate 只能输入数字和一个小数点,不符合字符的会替换为空
escapeHTML 转义HTML
isUrl 判断是否为URL地址
isIpv4 判断是否为IPv4地址
getQueryString 获取url参数值
parseQueryToObj url参数转对象
httpsRedirect HTTP跳转HTTPS
dayOfYear 当前日期天数
getDaysDiffBetweenDates 返回日期间的天数
timeLeft 剩余时间
formatPassTime 距现在的已过时间
formatRemainTime 现在距${endTime}的剩余时间
isSameDay 判断是否为同一天
isLeapYear 是否为闰年
isWeekday 检查日期是否为工作日
isNumber 判读是否为数字
isEven 判读数字是否为偶数
isInteger 判读数字是否为整数
isFloat 判读数字是否为小数
toFixed 保留小数点(非四舍五入)
isNumber 判断是否数字
isUrl 判断是否是url
isEmoji 判断是否是emoji
trim 去空格
leftPad 补零
fNumberWithComma 数字每隔三位加一个逗号
fNumber 保留小数点后n位
capitalize 首字母大写
capitalizeEveryWord 每个单词首字母大写
reverseString 反转一个字符串
decapitalize 首字母小写
stripHTMLTags 从字符串中删除HTML/XML标签
byteSize 返回字符串的字节长度
rgbToHex RGB转十六进制
toCamelCase 连字符转驼峰
fromCamelCase 驼峰转连字符
toTreeData 递归数组转为树形结构
arrayEqual 判断两个数组是否相等
sample 随机获取数组的某个值
shuffle 数组“洗牌”
countOccurrences 检测指定数值出现次数
allEqual 检查数组各项是否相等
average 取平均数
sum 数组总和
intersection 两数组的交集
getCookie 根据name读取cookie
setCookie 设置Cookie
removeCookie 根据name删除cookie
hasClass 判断元素是否有某个class
addClass 为元素添加class
removeClass 为元素移除class
hasClass 校验指定元素是否有指定类
elementContains 检查是否包含子元素
bottomVisible 检查页面底部是否可见
getRect 获取节点对象的上下左右边距及宽高
offset 获取一个元素的距离文档(document)的位置,类似jQ中的offset()
getScrollTop 获取滚动条距顶部的距离
setScrollTop 设置滚动条距顶部的距离
scrollTo 在${duration}时间内,滚动条平滑滚动到${to}指定位置
windowResize H5软键盘缩回、弹起回调
elementIsInFocus 判断 DOM 元素是否已获得焦点
retSibling 返回元素的第n个兄弟节点
hasChildren 判断元素有没有子元素
getStyle 获取任一元素的任意属性
isObject 判断是否对象
mergeObject 合并对象
equals 全等判断
isEmptyObject 判断obj是否为空
deepClone 深拷贝,支持常见类型
throttle 函数节流
debounce 函数防抖
once 只会调用一次的函数
timeTaken 计算函数执行时间
uuid UUID生成器
randomIntegerInRange 生成指定范围的随机整数
randomNumberInRange 生成指定范围的随机小数
shuffle 随机化数组的顺序
randomBoolean 获取随机布尔值 (true/false)
randomColor 随机生成颜色
detectDeviceType 判断是PC端还是移动端
getVersion 判断是否xx浏览器
getExplore 获取浏览器类型和版本
getOS 获取操作系统类型
isBrowserTabInView 判断浏览器 Tab 窗口是否为活动窗口
touchSupported 判断浏览器是否支持触摸事件
isAppleDevice 判断是否为苹果设备
htmlEncode html转码
htmlDecode html解码
htmlEncodeByRegExp html正则转码
htmlDecodeByRegExp html正则解码
numToCN 数字现金转中文