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

Posted 天界程序员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简易的前端业务工具库tj-jstools相关的知识,希望对你有一定的参考价值。

简介

  工作两年多了,最近自己总结用 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)

序号名称功能简介
1isBoolean判断数据是否是boolean类型
2isString判断数据是否是string类型
3isNumber判断数据是否是number类型
4isSymbol判断数据是否是symbol类型
5isUndefined判断数据是否是undefined类型
6isBigint判断数据是否是bigint类型
7isInt判断数据是否是int类型
8isFloat判断数据是否是float类型
9isNaN判断数据是否是NaN类型
10isFinite判断数据是否是finite类型
11isNull判断数据是否是null类型
12isArray判断数据是否是array类型
13isDate判断数据是否是date类型
14isFunction判断数据是否是function类型
15isObject判断数据是否是object类型
16getType判断数据是否是returnTypeStr类型,并返回类型
17getArrayAllType判断数组值是否是returnTypeStr类型,并返回类型
18getArrayTypeDetail判断数组值是否是returnTypeStr类型,并返回类型
19getObjectAllType判断对象属性是否是returnTypeStr类型,并返回类型
20getObjectTypeDetail判断对象属性是否是returnTypeStr类型,并返回类型

字符串篇(String)

序号名称功能简介
1charInCounts计算字符串中指定字符出现的次数
2DTMobile手机号脱敏处理

数值篇(Number)

序号名称功能简介
1formatChineseRMB数字金额转换为大写人民币汉字
2numberThousandsFormat数值千分位格式化处理

数组篇(Array)

序号名称功能简介
1toTreeData将特定数组转为树形结构
2treeToFlat将树形结构扁平化一维数组
3findTreeData查找符合条件的树形节点

URL篇

序号名称功能简介
1getUrlParams获取url路径参数
2converParamsToUrl拼接参数到url路径上

浏览器篇

序号名称功能简介
1isFull判断当前是否全屏
2getFullEl获取全屏元素
3isFullEnabled判断当前是否支持全屏功能
4openFull打开全屏
5closeFull关闭全屏
6toggleFull打开或者关闭全屏
7scrollBackTop返回浏览器顶部
8scrollProgressBar计算当前页面已读内容的百分比占比

浏览器缓存篇(Cookie/LoaclStorage/SessionStorage)

序号名称功能简介
1newStorage生成一个可操作的浏览器缓存实例

实例方法-列表

序号名称功能简介
1setFun设置浏览器缓存的方法
2getFun获取浏览器缓存的方法
3delFun移除浏览器缓存的方法
4existFun监测浏览器缓存的方法
5allkey获取浏览器缓存的key值唯一标识的方法
6clearFun批量清除浏览器缓存的方法

结语

  如果大家对这个工具有其他想法或者提供思路的,以及指出不足的,欢迎在下方留言评论,我会一一细读的,集思广益,才能共同进步!
  另外2023年:祝大家兔年吉祥、“兔”飞猛进、“钱”“兔”似锦、“兔”步青云、“钱”“兔”无量、“兔”来运转、扬眉“兔”气、大展鸿“兔”!

以上是关于一个简易的前端业务工具库tj-jstools的主要内容,如果未能解决你的问题,请参考以下文章

如何做好一个前端业务组件库

Fiddler前端页面调试工具简易入门

通过实现一个简易打包工具,分析打包的原理

转转前端开发规范的落地实践

搭建前端组件库

服务器阵列管理工具之perccli和storccli