tyro-util

前端常用工具库

Usage no npm install needed!

<script type="module">
  import tyroUtil from 'https://cdn.skypack.dev/tyro-util';
</script>

README

前端工具库

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

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

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

使用方式

浏览器:

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

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

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

NODE:

  1. 使用npm安装:
npm install tyro-util --save
  1. ES6:
// 全部引入
import tUtil from 'tyro-util'
tUtil.uuid()

// 单个引入
import { uuid } from 'tyro-util'
uuid()

// 按需加载
import uuid from 'tyro-util/lib/uuid'
uuid()
  1. Commonjs:
// 全部引入
const tUtil = require('tyro-util')
tUtil.uuid()

// 单个引入
const uuid = require('tyro-util').uuid
uuid()

// 按需加载
const uuid = require('tyro-util/lib/uuid')
uuid()

发布到 npm

npm run build // 先webpack打包类库,之后再发布
npm login // 登录
npm publish // 发布

API文档

array

   allEqual   检查数组各项是否相等

   arrayEqual   判断两个数组是否相等

   average   取平均数

   countOccurrences   检测指定数值出现次数

   intersection   两数组的交集

   sample   随机获取数组的某个值

   shuffle   数组“洗牌”

   sum   数组总和

   toTreeData   递归数组转为树形结构

clazz

   addClass   为元素添加class

   hasClass   判断元素是否有某个class

   removeClass   为元素移除class

cookie

   getCookie   根据name读取cookie

   removeCookie   根据name删除cookie

   setCookie   设置Cookie

device

   detectDeviceType   判断是PC端还是移动端

   getExplore   获取浏览器类型和版本

   getOS   获取操作系统类型

   getVersion   判断是否xx浏览器

   isAppleDevice   判断是否为苹果设备

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

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

dom

   bottomVisible   检查页面底部是否可见

   elementContains   检查是否包含子元素

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

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

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

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

   hasChildren   判断元素有没有子元素

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

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

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

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

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

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

func

   debounce   函数防抖

   once   只会调用一次的函数

   throttle   函数节流

   timeTaken   计算函数执行时间

html

   htmlDecode   html解码

   htmlDecodeByRegExp   html正则解码

   htmlEncode   html转码

   htmlEncodeByRegExp   html正则转码

money

   numToCN   数字现金转中文

number

   isEven   判读数字是否为偶数

   isFloat   判读数字是否为小数

   isInteger   判读数字是否为整数

   isNumber   判读是否为数字

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

object

   equals   全等判断

   isEmptyObject   判断obj是否为空

   isObject   判断是否对象

   mergeObject   合并对象

   isEven   判读数字是否为偶数

random

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

   randomColor   随机生成颜色

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

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

   shuffle   随机化数组的顺序

   uuid   UUID生成器

regex

   encryptIdentity   身份证号脱敏处理

   encryptPhone   手机号脱敏处理

   escapeHTML   转义HTML

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

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

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

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

   isChinese   是否是中文

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

   isEmail   判断是否为邮箱地址

   isIdCard   判断是否为身份证号

   isLandline   是否固定电话

   isLetter   是否是英文字母

   isPhoneNum   判断是否为手机号

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

str

   byteSize   返回字符串的字节长度

   capitalize   首字母大写

   capitalizeEveryWord   每个单词首字母大写

   decapitalize   首字母小写

   fNumber   保留小数点后n位

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

   fromCamelCase   驼峰转连字符

   isEmoji   判断是否是emoji

   isNumber   判断是否数字

   isUrl   判断是否是url

   leftPad   补零

   reverseString   反转一个字符串

   rgbToHex   RGB转十六进制

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

   toCamelCase   连字符转驼峰

   trim   去空格

time

   dayOfYear   当前日期天数

   formatPassTime   距现在的已过时间

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

   getDaysDiffBetweenDates   返回日期间的天数

   isLeapYear   是否为闰年

   isSameDay   判断是否为同一天

   isWeekday   检查日期是否为工作日

   timeLeft   剩余时间

url

   getQueryString   获取url参数值

   httpsRedirect   HTTP跳转HTTPS

   isIpv4   判断是否为IPv4地址

   isUrl   判断是否为URL地址

   parseQueryToObj   url参数转对象