一个简易的前端业务工具库【tj-jstools】
【摘要】 前端业务工具库:使用TypeScript编写有关js数据类型、浏览器信息、浏览器存储、url、字符串、数值、数组、对象等相关操作,让业务逻辑简单化。
简介
工作两年多了,最近自己总结用 TypeScript
写了一个简易的前端业务工具库: tj-jstools
。有以下功能:
- 判断js数据类型、获取一个变量或者值的具体类型
- 手机号脱敏、数值千分位、金额汉字大写转换
- 数组和tree形数据互转、url参数获取并组合
- 浏览器存储(Cookie/LoaclStorage/SessionStorage)自定义格式化存储
如果有用,希望大家给个star,以是对萌新的鼓励!😉
操作使用文档地址
🛠️安装使用方式
npm方式
npm install tj-jstools
浏览器方式
<script src="https://cdn.jsdelivr.net/npm/tj-jstools@1.3.2/static/umd/index.js"></script>
<script>
const {_tj} = window
console.log(_tj);
</script>
引入后,查看全局变量中的window._tj
对象,里面包含了所有工具函数。
📖简单使用的Demo
判断数据类型Demo
import { isInt, isFloat, isNumber} from 'tj-jstools'
const isNumRes = isNumber(12.9); // true
const isIntRes = isInt(12.9); // false
const isFloatRes = isFloat(12.9); // true
当你想确定某一个变量或者值,是否和你预想的一样是可以使用以上这些数据类型判断函数。
当你想获取某一个变量或者值具体的数据类型时,你可以使用以下函数:
import { getType, getArrayAllType, getObjectAllType} from 'tj-jstools'
const getTypeRes1 = getType(Array(1)) // array
const getTypeRes2 = getType({}) // object
const getTypeRes3 = getType() // undefined
const getTypeRes4 = getType(1/0) // infinite
// 判断数组里面的数据类型
const arr = [true,null,undefined,1/0,5,5.01,{},[],()=>{},NaN,'']
const arrRes = getArrayAllType(arr)
//['boolean', 'null', 'undefined', 'infinite', 'int', 'float','object',
// 'array','function','NaN','string']
// 判断对象里面的数据类型
const testObj = {
a: true,
b: null,
c: undefined,
d: 6,
e: 6.01,
f: 1/0,
g: {},
h: [],
i: () => {}
}
const objRes = getObjectAllType(testObj)
/*
[
'boolean', 'null', 'undefined', 'int', 'float','infinite',
'object', 'array', 'function'
]
*/
浏览器缓存(cookie/localStorage/sessionStorage)Demo
import { newStorage } from 'tj-jstools'
const Coptions = {
prefix:'tj',
linkSign: '@',
suffix:'jstools',
expireTime: 2,
unitTime: 'd'
}
// 创建一个操作Cookie的实例
const CInstance = newStorage('cookie',Coptions)
//创建一个操作localStorage的实例
const LInstance = newStorage('local',Coptions)
// 创建一个操作sessionStorage的实例
const SInstance = newStorage('session',Coptions)
// 保存和获取cookie值
CInstance.setFun('test','testValue')
CInstance.getFun('test') // tj@test@jstools: testValue ; 过期时间:2天
// 保存和获取localStorage值
LInstance.setFun('test','testValue')
LInstance.getFun('test') // tj@test@jstools: testValue ; 过期时间:2天
// 保存和获取sessionStorage值
SInstance.setFun('test','testValue')
SInstance.getFun('test') // tj@test@jstools: testValue ; 过期时间:2天
注意:
-
对sessionStorage设置过期时间,其实效果不大,会随着浏览器的关闭而消亡
-
如果cookie不设置expires,cookie 会在对话结束时过期
-
具体操作可以查看文档:https://geniusmanyxh.github.io/tj-jstools/
👉各类API列表
数据类型篇(DataType)
序号 | 名称 | 功能简介 |
---|---|---|
1 | isBoolean |
判断数据是否是boolean 类型 |
2 | isString |
判断数据是否是string 类型 |
3 | isNumber |
判断数据是否是number 类型 |
4 | isSymbol |
判断数据是否是symbol 类型 |
5 | isUndefined |
判断数据是否是undefined 类型 |
6 | isBigint |
判断数据是否是bigint 类型 |
7 | isInt |
判断数据是否是int 类型 |
8 | isFloat |
判断数据是否是float 类型 |
9 | isNaN |
判断数据是否是NaN 类型 |
10 | isFinite |
判断数据是否是finite 类型 |
11 | isNull |
判断数据是否是null 类型 |
12 | isArray |
判断数据是否是array 类型 |
13 | isDate |
判断数据是否是date 类型 |
14 | isFunction |
判断数据是否是function 类型 |
15 | isObject |
判断数据是否是object 类型 |
16 | getType |
判断数据是否是returnTypeStr 类型,并返回类型 |
17 | getArrayAllType |
判断数组值是否是returnTypeStr 类型,并返回类型 |
18 | getArrayTypeDetail |
判断数组值是否是returnTypeStr 类型,并返回类型 |
19 | getObjectAllType |
判断对象属性是否是returnTypeStr 类型,并返回类型 |
20 | getObjectTypeDetail |
判断对象属性是否是returnTypeStr 类型,并返回类型 |
字符串篇(String)
序号 | 名称 | 功能简介 |
---|---|---|
1 | charInCounts |
计算字符串中指定字符出现的次数 |
2 | DTMobile |
手机号脱敏处理 |
数值篇(Number)
序号 | 名称 | 功能简介 |
---|---|---|
1 | formatChineseRMB |
数字金额转换为大写人民币汉字 |
2 | numberThousandsFormat |
数值千分位格式化处理 |
数组篇(Array)
序号 | 名称 | 功能简介 |
---|---|---|
1 | toTreeData |
将特定数组转为树形结构 |
2 | treeToFlat |
将树形结构扁平化一维数组 |
3 | findTreeData |
查找符合条件的树形节点 |
URL篇
序号 | 名称 | 功能简介 |
---|---|---|
1 | getUrlParams |
获取url路径参数 |
2 | converParamsToUrl |
拼接参数到url路径上 |
浏览器篇
序号 | 名称 | 功能简介 |
---|---|---|
1 | isFull |
判断当前是否全屏 |
2 | getFullEl |
获取全屏元素 |
3 | isFullEnabled |
判断当前是否支持全屏功能 |
4 | openFull |
打开全屏 |
5 | closeFull |
关闭全屏 |
6 | toggleFull |
打开或者关闭全屏 |
7 | scrollBackTop |
返回浏览器顶部 |
8 | scrollProgressBar |
计算当前页面已读内容的百分比占比 |
浏览器缓存篇(Cookie/LoaclStorage/SessionStorage)
序号 | 名称 | 功能简介 |
---|---|---|
1 | newStorage |
生成一个可操作的浏览器缓存实例 |
实例方法-列表
序号 | 名称 | 功能简介 |
---|---|---|
1 | setFun |
设置浏览器缓存的方法 |
2 | getFun |
获取浏览器缓存的方法 |
3 | delFun |
移除浏览器缓存的方法 |
4 | existFun |
监测浏览器缓存的方法 |
5 | allkey |
获取浏览器缓存的key值唯一标识的方法 |
6 | clearFun |
批量清除浏览器缓存的方法 |
结语
如果大家对这个工具有其他想法或者提供思路的,以及指出不足的,欢迎在下方留言评论,我会一一细读的,集思广益,才能共同进步!
另外2023年:祝大家兔年吉祥、“兔”飞猛进、“钱”“兔”似锦、“兔”步青云、“钱”“兔”无量、“兔”来运转、扬眉“兔”气、大展鸿“兔”!
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)