前端常用工具库


Keywords
工具库, 前端库, 封装
License
MIT
Install
npm install tyro-util@2.5.3

Documentation

前端工具库

这是一个使用webpack打包的JavaScript类库。

目的:让前端开发更高效,更专注于业务代码的编写

业务开发过程中,会经常用到数组的操作日期格式化url的操作浏览器类型判断等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,以提高开发效率。

使用方式

浏览器:

直接下载项目,引入js文件

<script type="text/javascript" src="util.js"></script>

tUtil.uuid()
tUtil.trim(' Tyro CCC ')
tUtil.getExplore()

NODE:

  1. 使用npm安装:
npm install tyro-util --save
  1. 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文档

regex

   isIdCard   判断是否为身份证号

   isEmail   判断是否为邮箱地址

   isPhoneNum   判断是否为手机号

   isLandline   是否固定电话

   isLetter   是否是英文字母

   isChinese   是否是中文

   isValidPwd   判断密码格式是否6-25字符必须包含大小写字母+数字

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

   filterNum   只能输入数字, 不符合字符的会替换为空

   filterCENum   只能输入英文、中文和数字,不符合字符的会替换为空

   filterENum   只能输入英文、和数字,不符合字符的会替换为空

   filterFloate   只能输入数字和一个小数点,不符合字符的会替换为空

   escapeHTML   转义HTML

url

   isUrl   判断是否为URL地址

   isIpv4   判断是否为IPv4地址

   getQueryString   获取url参数值

   parseQueryToObj   url参数转对象

   httpsRedirect   HTTP跳转HTTPS

time

   dayOfYear   当前日期天数

   getDaysDiffBetweenDates   返回日期间的天数

   timeLeft   剩余时间

   formatPassTime   距现在的已过时间

   formatRemainTime   现在距${endTime}的剩余时间

   isSameDay   判断是否为同一天

   isLeapYear   是否为闰年

   isWeekday   检查日期是否为工作日

number

   isNumber   判读是否为数字

   isEven   判读数字是否为偶数

   isInteger   判读数字是否为整数

   isFloat   判读数字是否为小数

   toFixed   保留小数点(非四舍五入)

str

   isNumber   判断是否数字

   isUrl   判断是否是url

   isEmoji   判断是否是emoji

   trim   去空格

   leftPad   补零

   fNumberWithComma   数字每隔三位加一个逗号

   fNumber   保留小数点后n位

   capitalize   首字母大写

   capitalizeEveryWord   每个单词首字母大写

   reverseString   反转一个字符串

   decapitalize   首字母小写

   stripHTMLTags   从字符串中删除HTML/XML标签

   byteSize   返回字符串的字节长度

   rgbToHex   RGB转十六进制

   toCamelCase   连字符转驼峰

   fromCamelCase   驼峰转连字符

array

   toTreeData   递归数组转为树形结构

   arrayEqual   判断两个数组是否相等

   sample   随机获取数组的某个值

   shuffle   数组“洗牌”

   countOccurrences   检测指定数值出现次数

   allEqual   检查数组各项是否相等

   average   取平均数

   sum   数组总和

   intersection   两数组的交集

cookie

   getCookie   根据name读取cookie

   setCookie   设置Cookie

   removeCookie   根据name删除cookie

clazz

   hasClass   判断元素是否有某个class

   addClass   为元素添加class

   removeClass   为元素移除class

dom

   hasClass   校验指定元素是否有指定类

   elementContains   检查是否包含子元素

   bottomVisible   检查页面底部是否可见

   getRect   获取节点对象的上下左右边距及宽高

   offset   获取一个元素的距离文档(document)的位置,类似jQ中的offset()

   getScrollTop   获取滚动条距顶部的距离

   setScrollTop   设置滚动条距顶部的距离

   scrollTo   在${duration}时间内,滚动条平滑滚动到${to}指定位置

   windowResize   H5软键盘缩回、弹起回调

   elementIsInFocus   判断 DOM 元素是否已获得焦点

   retSibling   返回元素的第n个兄弟节点

   hasChildren   判断元素有没有子元素

   getStyle   获取任一元素的任意属性

object

   isObject   判断是否对象

   mergeObject   合并对象

   equals   全等判断

   isEmptyObject   判断obj是否为空

   deepClone   深拷贝,支持常见类型

func

   throttle   函数节流

   debounce   函数防抖

   once   只会调用一次的函数

   timeTaken   计算函数执行时间

random

   uuid   UUID生成器

   randomIntegerInRange   生成指定范围的随机整数

   randomNumberInRange   生成指定范围的随机小数

   shuffle   随机化数组的顺序

   randomBoolean   获取随机布尔值 (true/false)

   randomColor   随机生成颜色

device

   detectDeviceType   判断是PC端还是移动端

   getVersion   判断是否xx浏览器

   getExplore   获取浏览器类型和版本

   getOS   获取操作系统类型

   isBrowserTabInView   判断浏览器 Tab 窗口是否为活动窗口

   touchSupported   判断浏览器是否支持触摸事件

   isAppleDevice   判断是否为苹果设备

html

   htmlEncode   html转码

   htmlDecode   html解码

   htmlEncodeByRegExp   html正则转码

   htmlDecodeByRegExp   html正则解码

money

   numToCN   数字现金转中文