一个简易的前端业务工具库tj-jstools

Posted 2023-02-19 天界程序员

简介

  工作两年多了，最近自己总结用 TypeScript 写了一个简易的前端业务工具库： tj-jstools 。有以下功能：

• 判断js数据类型、获取一个变量或者值的具体类型
• 手机号脱敏、数值千分位、金额汉字大写转换
• 数组和tree形数据互转、url参数获取并组合
• 浏览器存储（Cookie/LoaclStorage/SessionStorage）自定义格式化存储
  如果有用，希望大家给个star，以是对萌新的鼓励！😉

---

操作使用文档地址

• 官方文档地址:http://jstools.itbooks.work/
• GitHub 使用文档地址：https://geniusmanyxh.github.io/tj-jstools/
  

🛠️安装使用方式

npm方式

npm install tj-jstools

浏览器方式

• jsdelivr的umd格式地址

<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年：祝大家兔年吉祥、“兔”飞猛进、“钱”“兔”似锦、“兔”步青云、“钱”“兔”无量、“兔”来运转、扬眉“兔”气、大展鸿“兔”！