60+开箱即用的工具函数库xijs更新指南(v1.2.5)

news2024/11/17 3:33:41

a303a9e3737518faef5df912a2c6e11f.png

xijs 是一款开箱即用的 js 业务工具库, 聚集于解决业务中遇到的常用函数逻辑问题, 帮助开发者更高效的开展业务开发.

接下来就和大家一起分享一下v1.2.5 版本的更新内容以及后续的更新方向.

贡献者列表:

c5f2928ad07e1d9a8c45afed294f71ff.png

1. 数据深拷贝cloneDeep

该模块主要由 20savage 贡献, 支持 symbol, map, set, weakmap, weakset 等特殊类型的深拷贝, 并防止对象循环引用, 具体使用如下:

import { cloneDeep } from 'xijs';

const door = cloneDeep([1, 2, 3, 4, 5]);
console.log(door); // -> [1, 2, 3, 4, 5]

2. 敏感数据脱敏函数dataDesensitization

该模块主要由 kevin 贡献, 具体使用如下:

// 按需引入
import { dataDesensitization } from 'xijs';

console.log('610222188709080909: ', dataDesensitization('idCard', '610222188709080909'));
console.log('18396781187: ', dataDesensitization('phone', '18396781187'));
console.log('深证市龙岗区五和: ', dataDesensitization('address', '深证市龙岗区五和'));

测试用例结果:

import { dataDesensitization, repeat } from 'xijs';
describe('数据脱敏相关测试', () => {
  test('数据脱敏', () => {
    expect(dataDesensitization('idCard', '610222188709080909')).toEqual('61**************09')
    expect(dataDesensitization('phone', '18396781187')).toEqual('183****1187')
    expect(dataDesensitization('custom', '18396781187', 1, 8)).toEqual('1********87')
    expect(dataDesensitization('address', '深证市龙岗区五和')).toEqual('深证******')
    expect(dataDesensitization('email', '1832291@qq.com')).toEqual('1****1@qq.com')
    expect(dataDesensitization('username', '小小西')).toEqual('小**')
    expect(dataDesensitization('fixPhone', '012-1823293')).toEqual('012-*******')
  });
});

3. 数字金额转为大写capitalizedAmount

该模块主要由 ayangweb 贡献, 最大只支持到千亿, 具体使用如下:

import { capitalizedAmount } from 'xijs';

capitalizedAmount(100000000); // 壹亿元整
capitalizedAmount('2023.04'); // 贰仟零贰拾叁元肆分
capitalizedAmount(-1024); // 欠壹仟零贰拾肆元整

这个功能还是非常实用的, 感兴趣的朋友可以直接使用.

4. ip地址补全函数completeIp

该模块主要由 ayangweb 贡献, 具体使用如下:

import { completeIp } from 'xijs';

const newIp = completeIp('127.0.0.1');
console.log(newIp); // 127.000.000.001

5. formData转成JSON格式formDataToJson

该模块主要由 kevin 贡献, 具体使用如下:

import { formDataToJson } from 'xijs';
const data = new FormData();
data.set('user', '1');
data.set('age', 29);
data.set('phone', '18329208292')
console.log(formDataToJson(data));

这个函数也非常常用, 我们在处理表单数据进行提交时非常有用.

6. cookie操作类XCookie

该模块主要由 EasyRo 贡献, 具体介绍如下:

ff1f1c87087fab88aefeb761fa9be623.png

使用方式介绍:

import { XCookie } from 'xijs';
// 设置 cookie,
XCookie.set('foo', 'bar', {
  path: './',
  maxAge: 10,
  secure: true,
  domain: 'localhost',
  expires: 'Wed, 21 Oct 2023 07:28:00 GMT',
});
// 获取 cookie
XCookie.get('foo'); // bar
// 删除 cookie
XCookie.remove('foo');
XCookie.get('foo'); // ''

// 获取所有 cookie
XCookie.set('foo', 'bar');
XCookie.set('foo1', 'bar1');
XCookie.allCookies(); // {foo: 'bar', foo1: 'bar1'}

接下来我们跑一下单元测试, 对整个库做一个全面的扫描:

2a0c064ced7188c352fe88db4699de4a.png

整个测试一共花了12.25s, 测试全部通过, 各位小伙伴们可以放松食用.

为了方便大家更好的了解 xijs 这个库, 我列一个完整的目录结构供大家参考, 也可以直接用 xijs 的在线文档中去参考学习.

文档地址: http://h5.dooring.cn/xijs

全部函数列表

  • 浏览器相关

    • getRuntimeEnv - 获取运行环境

    • getSelection - 获取选中文本

    • redirect - 重定向

    • store - 本地存储库

    • XCookie - 浏览器端cookie操作类

  • 字符串操作

    • base64 - base64编码和解码

    • camelize - 横线转驼峰命名

    • charCount - 获取字符数

    • formatNumber - 数值千分位格式化

    • formatPercent - 值转换为百分数表示

    • hyCompact - 紧凑型驼峰命名转换

    • hyphenate - 驼峰命名转横线命名

    • randomStr - 生成随机字符串

    • repeat - 生成重复字符串

    • uuid - 生成唯一id

  • 常用判断函数

    • isArray - 判断数组类型

    • isEmpty - 判断空对象

    • isPc - 判断设备类型

    • isPhone - 判断手机号格式

    • isEmail - 判断邮箱函数

    • isIdCard - 判断身份证格式函数

    • lang - 判断中英文

    • regexp - 常用正则表达式

    • dataDesensitization - 数据脱敏

  • 数据结构相关

    • cloneDeep - 数据深拷贝

    • arrayToListNode - 数组转成链表

    • linkListToArray - 链表结构转数组结构

    • dateCalculate - 日期计算

    • timeCutStr - 计算时间差

    • timeSub - 计算时间间隔

    • transformArray - 树结构转扁平数组

    • formatDate - 时间格式化

    • getRawType - 获取数据类型

    • obj2url - 将对象参数解析为url字符串

    • transformTree - 扁平转树结构

    • url2obj - url字符串转对象

    • bothLinkedList - 双向链表

  • 图片处理函数

    • compressImg - 自定义压缩图片函数

    • file2img - 文件转图片对象

    • hex2rgba - hex色值转rgba

    • rgba2obj - 将rgba值转化为rgba对象

    • genRandomColor - 获取随机颜色

  • js高级函数

    • debounce - 防抖函数

    • parser - json超级解析器

    • sleep - 睡眠函数

    • throttle - 节流函数

  • 常用算法和数据结构

    • bubbleSort - 冒泡排序

    • quickSort - 快速排序

  • 数学计算

    • average - 计算数组平均值

    • difference - 创建一个排除指定项的数组

    • random - 返回区域内随机数

    • shuffle - 打乱数组

    • factorial - 阶乘

    • fibonacci - 计算斐波那契数

    • sum - 求和数组

  • 几何计算

    • coordinatesInCircle - 生成圆内任意坐标

    • coordinatesInRect - 生成矩形内任意坐标

    • judgePointInCircle - 判断一点是否在圆内

  • dom操作

    • downloadFileWithText - 下载文本文件

    • downloadFileWithUrl - 下载链接文件

    • $ - 通过id,class等获取dom

    • getDomPageXY - 获取dom元素在当前文档中的绝对位置

    • getDomScreenXY - 获取dom元素相对于screen绝对位置

    • getDomText - 获取文本内容

    • xss - 转义html标签

欢迎大家star推荐和共建, 让前端工作更高效.

github: https://github.com/MrXujiang/xijs

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

39fdcbaef41f5373ff47fd8edbaee899.gif

从零搭建全栈可视化大屏制作平台V6.Dooring

从零设计可视化大屏搭建引擎

Dooring可视化搭建平台数据源设计剖析

可视化搭建的一些思考和实践

基于Koa + React + TS从零开发全栈文档编辑器(进阶实战

点个在看你最好看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/497753.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

BM58-字符串的排列

题目 输入一个长度为 n 字符串&#xff0c;打印出该字符串中字符的所有排列&#xff0c;你可以以任意顺序返回这个字符串数组。 例如输入字符串ABC,则输出由字符A,B,C所能排列出来的所有字符串ABC,ACB,BAC,BCA,CBA和CAB。 数据范围&#xff1a;n < 10。 要求&#xff1a;空…

[架构之路-191]-《软考-系统分析师》-8-软件工程 - 解答什么是面向功能的结构化程序设计:算法+数据结构 = 程序

目录 1. 什么是结构化程序设计 2. 结构化程序设计的局限性 3.程序设计的三种基本结构 (1) 顺序结构 (2) 选择结构 (3) 循环结构 1. 什么是结构化程序设计 功能 》 Function 》 函数 》 算法 数据流Data Flow 》 数据结构Data Strucuture 程序 算法 数据结构 》 数…

36. Kubernetes 网络原理——CNI 网络插件

本章讲解知识点 Flannel 原理概述直接路由的原理和部署示例Calico 插件原理概述1. Flannel 原理概述 Flannel 是一个用于容器网络的开源解决方案,它使用了虚拟网络接口技术(如 VXLAN)和 etcd 存储来提供网络服务。它的原理概述如下: Flannel 协助 Kubernetes,给每一个 No…

界面交互篇:答题页的答题逻辑交互开发

微信小程序云开发实战-答题积分赛小程序 界面交互篇:答题页的答题逻辑交互开发 前面的那一篇文章,我们已经完成了使用云开发的聚合能力实现从题库中随机抽取题目功能。 在页面加载时,实现从题库中随机抽取题目功能。那么,拿到数据后要干什么?如何做? 动态数据绑定 实…

c++练习题

1、默认参数练习 创建默认参数函数 void stars(int cols ,int rows ) 该函数默认缺省值cols是10 rows是1。该函数完成功能是根据行和列数显示一个由星号组成的矩形。在main函数仲按照默认值调用该函数。按照cols是5调用该函数。按照列数和行数是7&#xff0c;3 调用该函数 #…

【MMdetection训练及使用脚本系列】MMdetection训练1——如何保存最优的checkpoint文件

MMdetection如何保存最优的checkpoint文件 以目标检测为例&#xff0c;进入到 configs/_base_/datasets/coco_detection.py将evaluation dict(interval1, metricbbox)改为evaluation dict(interval1, metricbbox, save_bestauto)即可。 但是不建议这样做&#xff0c;防止以…

软件设计师笔记--数据结构

文章目录 前言学习资料数据结构大 O 表示法时间复杂度线性结构和线性表线性表的顺序存储线性表的链式存储栈的顺序存储栈的链式存储队列的顺序存储与循环队列 串KMP 数组矩阵树二叉树二叉树的顺序存储结构二叉树的链式存储结构二叉树的遍历平衡二叉树二叉排序树最优二叉树(哈夫…

C/C++每日一练(20230507) 数列第n项值I/II、简化路径

目录 1. 求数列的第n项的值 ※ 2. 求数列的第n项的值 II ※ 3. 简化路径 &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 求数列的第n项的值 已知数列…

摘要:PostgreSQL开发技术基础:过程与函数

原文地址 6.0 Language SQL与PL/pgSQL PL / PgSQL是基于SQL的特定于PostgreSQL的过程语言 。它有循环&#xff0c;variables&#xff0c;错误/exception处理等等。并不是所有的SQL都是有效的PL / PgSQL&#xff0c;正如你发现的那样&#xff0c;例如&#xff0c;你不能在没有…

Nature:时松海课题组揭示调控大脑新皮层神经元空间精细结构排布和环路组装的新机制

2022年12月7日&#xff0c;清华大学生命科学学院、清华-IDG/麦戈文脑科学研究院、生命科学联合中心、生物结构前沿研究中心时松海教授课题组在Nature杂志以长文的形式在线发表了题为“Patterned cPCDH expression regulates the fine organization of the neocortex”&#xff…

Python心经(2)

有关数字类型&#xff0c;字符串&#xff0c;函数 目录 有关数字类型&#xff0c;字符串&#xff0c;函数 数字 字符串 索引操作 切片操作 单个字符编码 运算符 还有一些常用的内置函数 Python输入函数 输出函数print()语法 python的函数也能给默认值 Python是个脚…

什么是事件驱动的微服务架构?

对于许多关键应用程序功能&#xff0c;包括流媒体和电子商务&#xff0c;单体架构已不再足够。随着实时事件数据和云服务使用的需求增加&#xff0c;许多现代应用程序&#xff0c;如Netflix和Lyft&#xff0c;已经转向了事件驱动的微服务方法。分离的微服务可以独立运行&#x…

体外诊断(IVD)高速发展

体外诊断&#xff08;IVD&#xff09;实际一直是临床的重要组成部分。体外诊断&#xff0c;是指通过对人体样本(血液、体液、组织等)进行检测而获取临床诊断信息&#xff0c;进而判断疾病或机体功能的产品和服务&#xff0c;其检测原理和方法涉及免疫学、微生物学、分子生物学等…

Cursor设置中文版 以及简单实用教程集成 GPT4 的代码神器 Cursor

官网&#xff1a;cursor.so 快捷键 ctrl K&#xff0c; 中英文提交需求&#xff0c;&#xff08;刚开始我整蹩脚的英语&#xff0c;后来发现支持中文&#xff09; 自动写代码 自动补充代码 自己修改代码 自动检查、完善代码 自己本地测试 然后再重复上面操作直到能用 最后让它…

ZooKeeper知识回顾(分布式协调框架,本质是分布式小文件存储系统,以分布式集群部署)

Apache ZooKeeperhttps://zookeeper.apache.org/官网为: 名字.apache.org 1.zookeep概念 一个团队里面&#xff0c;需要一个leader&#xff0c;leader是干嘛用的&#xff1f; &#xff08;分布式协调框架&#xff09; 1.管理什么的咱不说。 2.外面的人&#xff0c;想…

AI大神吴恩达与OpenAI官方合作推出的ChatGPT提示工程课,到底在讲什么?

ChatGPT提示工程课程&#xff0c;吴恩达&OpenAI 概述 本课程将着重介绍指令调优LM的开发最佳实践&#xff0c;以帮助开发人员利用LM技术构建聊天机器人等应用程序。 亮点 &#x1f4da; LM可用于快速构建软件应用程序&#xff0c;API可以使开发人员非常快速地构建。&#x…

怎么压缩照片到20k?

怎么压缩照片到20k&#xff1f;如今&#xff0c;手机摄影已经成为我们生活的一部分&#xff0c;我们经常使用手机拍照记录美好瞬间。但是&#xff0c;随着手机拍照像素的不断提高&#xff0c;照片的文件大小也越来越大&#xff0c;这使得手机的存储空间不够用&#xff0c;甚至在…

Vue核心 收集表单数据 过滤器

1.14. 收集表单数据 收集表单数据: 若: &#xff0c;则v-model收集的是value值&#xff0c;用户输入的就是value值。若: &#xff0c;则v-model收集的是value值&#xff0c;且要给标签配置value值。若: 没有配置input的value属性&#xff0c;那么收集的就是checked(勾选 or 未…

weblogic ssrf 漏洞复现

一.前言 Weblogic中存在一个SSRF漏洞&#xff0c;利用该漏洞可以发送任意HTTP请求&#xff0c;进而攻击内网中redis、fastcgi等脆弱组件。 二.环境搭建 在docker中开启环境 sudo docker-compose up -d sudo docker-compose ps #查看状态访问http://your-ip:7001/uddiexpl…

【C++】虚函数表 多态的原理 动态绑定和静态绑定

梳理虚函数表、多态原理、动静态绑定的知识 目录 一、虚函数表 二、多态的原理 三、动态绑定和静态绑定 一、虚函数表 在学习多态原理之前&#xff0c;我们需要了解一下虚函数表的概念 我们先一起来看下下面这段代码 // 这里常考一道笔试题&#xff1a;sizeof(Base)是多…