tj-jstools

tj-jstools 工具库

A diverse JS tool library

                       

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

前端业务工具库

使用TypeScript编写有关js数据类型、浏览器信息、浏览器存储、url、字符串、数值、数组、对象等相关操作，让业务逻辑简单化。

---

[TOC]

---

🛠️安装

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	手机号脱敏处理
3	createRandomVerifyCode	生成随机字符串验证码

数值篇(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	批量清除浏览器缓存的方法