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

举报
天界程序员 发表于 2023/02/05 14:46:24 2023/02/05
【摘要】 前端业务工具库:使用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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。