50+常用工具函数之xijs更新日志(v1.2.4)

news2024/11/24 0:27:15

ac03462aceb2273e3fc93ecf89214364.png

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

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

1. dom分类添加xss函数

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

5d7f25b00c8cc8ba2d5f0e1594f47bb2.png

使用方式:

import { xss } from 'xijs';
let html = '<a href="#">Me & you</a>'
console.log(xss(html))
html = '<a href="javascipt: 0">Me & you</a>'
console.log(xss(html))

2. dom分类添加基于文本, url, 下载文件功能

该模块主要由 EasyRo 贡献, 包含两个方法:

  • downloadFileWithText

76b8e5f54bc3e6efb68b1cba375702f3.png
  • downloadFileWithUrl

65292354e378df826a4d55173434c47d.png

具体使用如下:

import { 
downloadFileWithText,
downloadFileWithUrl
} from 'xijs';

// 下载内容为 xijs 的txt文件
downloadFileWithText('xijs');

// 请求链接为 url 的文件
downloadFileWithUrl('url', 'xxx.xx');

3. 图片处理函数分类添加生成随机颜色函数

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

import { genRandomColor } from 'xijs';

// 获取随机颜色'hsl'|'hsla'|'rgb'|'rgba'|16,默认是rgb格式。
const color = genRandomColor('rgba');

4. 时间计算函数

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

0eee76911a1c14649be981e39724f6d5.png

具体使用如下:

// 按需引入的方式
import {dateCalculate, formatDate} from 'xijs';

let data = new Date('2020-01-01')
console.log('year:', dateCalculate(data, -1, 'year'))

data = new Date('2020-01-01')
console.log('month:', dateCalculate(data, -1, 'month'))

data = new Date('2020-01-01')
console.log('day:', dateCalculate(data, -1, 'day'))

data = new Date('2020-01-01 08:00:00')
console.log('hour:', dateCalculate(data, -1, 'hour'))

data = new Date('2020-01-01 08:00:00')
console.log('minute:', dateCalculate(data, -1, 'minute'))

data = new Date('2020-01-01 08:00:00')
console.log('second:', dateCalculate(data, -1, 'second'))

5. 数据结构相关分类添加时间计算函数(基于指定的时间, 判断现在距离指定时间的计算, 比如一天前, 2天前, 3天前, 4天前, 5天前, 6天前, 一周前, 一个月前, 一年前, n分钟前, n小时前)

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

a85e749bc0112147ce7074700c524dd5.png

使用方法如下:

import { timeCutStr } from 'xijs';

// 以下所有计算都以当前时间 2023-4-23 23:59:59 为例

let diff = timeCutStr(+new Date('2023-4-23 23:59:59'));
console.log(diff); // 刚刚

diff = timeCutStr(String(+new Date('2023-4-23 23:59:58')));
console.log(diff); // 1秒前

diff = timeCutStr('2023-4-23 23:58:30');
console.log(diff); // 1分钟前

diff = timeCutStr('2023-4-23 22:58:30');
console.log(diff); // 1小时前

diff = timeCutStr('2023-4-22 22:58:30');
console.log(diff); // 1天前

diff = timeCutStr('2023-3-23 22:58:30');
console.log(diff); // 1个月前

diff = timeCutStr('2022-4-23 22:58:30');
console.log(diff); // 1年前

diff = timeCutStr('2023-4-24 00:00:00');
console.log(diff); // 1秒后

diff = timeCutStr('2023-4-24 00:01:00');
console.log(diff); // 1分钟后

diff = timeCutStr('2023-4-24 01:00:00');
console.log(diff); // 1小时后

diff = timeCutStr('2023-4-25 00:00:00');
console.log(diff); // 1天后

diff = timeCutStr('2023-5-24 00:00:00');
console.log(diff); // 1个月后

diff = timeCutStr('2024-4-24 00:00:00');
console.log(diff); // 1年后

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

5b52545cec75f2623734c5fc8f3a7753.png

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

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

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

  • 浏览器相关

    • getRuntimeEnv - 获取运行环境

    • getSelection - 获取选中文本

    • redirect - 重定向

    • store - 本地存储库

  • 字符串操作

    • base64 - base64编码和解码

    • camelize - 横线转驼峰命名

    • charCount - 获取字符数

    • formatNumber - 数值千分位格式化

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

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

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

    • randomStr - 生成随机字符串

    • repeat - 生成重复字符串

    • uuid - 生成唯一id

  • 常用判断函数

    • isArray - 判断数组类型

    • isEmpty - 判断空对象

    • isPc - 判断设备类型

    • isPhone - 判断手机号格式

  • 数据结构相关

    • cloneDeep - 数据深拷贝

    • formatDate - 时间格式化

    • getRawType - 获取数据类型

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

    • transformTree - 扁平转树结构

    • url2obj - url字符串转对象

  • 图片处理函数

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

    • file2img - 文件转图片对象

    • hex2rgba - hex色值转rgba

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

  • js高级函数

    • debounce - 防抖函数

    • parser - json超级解析器

    • sleep - 睡眠函数

    • throttle - 节流函数

  • 常用算法和数据结构

    • bubbleSort - 冒泡排序

    • quickSort - 快速排序

  • 数学计算

    • average - 计算数组平均值

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

    • random - 返回区域内随机数

    • shuffle - 打乱数组

  • 几何计算

    • coordinatesInCircle - 生成圆内任意坐标

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

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

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

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

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

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

b9ceb545ddc0e40f88ec5bc92056495d.gif

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

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

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

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

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

点个在看你最好看

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

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

相关文章

游戏有延迟?如何获得一个好的Ping

在多人游戏世界中,玩家要想获得良好的游戏体验,需要做很多事情——尤其是如果这种良好的体验取决于你的想法。 在线多人游戏,如FPS(第一人称射击游戏)、赛车和一些MMORPG类型的游戏,尤其取决于玩家对游戏反馈的及时有效反应。这个反馈和反应链有很多环节,其中一个环节是…

【Python】matplotlib画散点图,并根据目标列的类别来设置颜色区间(含源代码及参数解释)

最近在进行绘图时&#xff0c;遇到了matplotlib画散点图&#xff0c;并根据目标列的类别来设置颜色区间的问题&#xff0c;但是实现的过程较为艰辛。 文章目录 一、数据准备二、第一次尝试&#xff08;失败及其原因&#xff09;2.1 失败2.2 原因 三、第二次尝试&#xff08;成功…

详解客户关系管理系统

一、客户关系管理系统的重要性 客户关系管理系统&#xff0c;是指利用软件、硬件和网络技术&#xff0c;为企业建立一个客户信息收集、管理、分析和利用的信息系统。以客户数据的管理为核心&#xff0c;记录企业在市场营销和销售过程中和客户发生的各种交互行为&#xff0c;以…

Multisim电路仿真与实验:包含连续时间系统的模拟、周期信号频谱分析、组合逻辑电路:竞争冒险、数字锁

Multisim电路仿真与实验&#xff1a;包含连续时间系统的模拟、周期信号频谱分析、组合逻辑电路&#xff1a;竞争冒险、数字锁 文章目录 Multisim电路仿真与实验&#xff1a;包含连续时间系统的模拟、周期信号频谱分析、组合逻辑电路&#xff1a;竞争冒险、数字锁连续时间系统的…

JVM内存区域划分,类的加载过程 以及 双亲委派模型总结

目录 JVM内存区域划分 Java类的加载过程 双亲委派模型 JVM内存区域划分 JVM中的内存区域共划分为五大部分&#xff0c;分别为虚拟机栈、堆、程序计数器、本地方法栈和方法区&#xff0c;如下边这张图所示&#xff1a; 其中&#xff0c;每个内存区域主要存放的数据及功能如下…

Visual Studio C# WinForm开发入门(4):概述

目录 一.Winform入门1.WinForm项目结构2.窗口设计与控件布局3.窗口事件4.时间显示器小练习 二.WinForm布局开发1.手动布局解决自适应问题2.WinForm布局属性3.WinForm布局器 三.WinForm常用控件1.界面展示2.实体类 Student(封装信息)3.逻辑事件代码Form.cs 四.图片框与项目资源1…

大数据电商数仓相关脚本

文章目录 前言一、群起集群1. sc 脚本2. cluster 脚本3. myhadoop 脚本4. zk.sh 脚本5. kf.sh 脚本6. f1.sh 脚本7. f2.sh 脚本 二、简便使用脚本1. xsync 脚本2. jpsall 脚本3. xcall.sh 脚本4. lg.sh 脚本 三、数据传输相关脚本1. mysql_to_hdfs.sh 脚本2. hdfs_to_ods_db.sh…

《JavaEE初阶》HTTP协议和HTTPS

《JavaEE初阶》HTTP协议和HTTPS 文章目录 《JavaEE初阶》HTTP协议和HTTPSHTTP协议是应用层协议:使用Fiddler抓取HTTP请求和响应:Fiddler的下载和基本使用:Fiddler的中间代理人身份:其他抓包工具: 先简单认识HTTP请求与HTTP响应:HTTP请求:HTTP响应: HTTP请求详解:首行&#xff1…

分享10个精美可视化模板,解决95%的大屏需求!

前段时间和朋友一起喝茶&#xff0c;我吐槽着excel表格做报表的繁琐&#xff0c;他惊讶的问我竟然不知道大屏模板这种东西&#xff0c;说是直接套用数据就可以&#xff0c;我震惊的同时吃下了这个安利。 回来之后&#xff0c;我好好研究了一番这个叫可视化大屏的“新鲜玩意儿”…

模块化编程原理示意图--CommonJS 模块编程--ES6 模块编程思路分析/图解--三种导出形式--全部代码示例

目录 模块化编程 基本介绍 模块化编程原理示意图 模块化编程分类 CommonJS 模块编程 介绍 应用实例 1. 需求说明 2. 思路分析/图解 3. 代码实现 function.js use.html use.js ES6 模块编程 介绍 需求说明 思路分析/图解 代码实现 common.js use_common.js …

MySQL入门到精通——进阶篇(基础篇——进阶篇——运维篇)本文以MySQL8.0版本以上为例

文章目录 前言MySQL——进阶篇一、存储引擎1.存储引擎-MySQL体系结构2.存储引擎-简介3.存储引擎-InnoDB介绍4.存储引擎-MyISAM和Memory5.存储引擎-选择 二、索引1.索引-概述2.索引-结构2.1.索引-结构-介绍2.2.索引-结构-Btree2.3.索引-结构-Btree2.4.索引-结构-hash 3.索引-分类…

【Java-02】深入理解关键字和代码块

1 关键字 2 代码块 1 Java中的关键字 1.1 static关键字 static关键字 : 静态的意思 , 可以修饰变量 , 也可以修饰方法 , 被static修饰的成员 , 我们叫做静态成员 static特点 : 静态成员被所类的所有对象共享随着类的加载而加载 , 优先于对象存在可以通过对象调用 , 也可以通…

学习系统编程No.23【信号实战】

引言&#xff1a; 北京时间&#xff1a;2023/4/23&#xff0c;最近学习状态不怎么好&#xff0c;总是犯困&#xff0c;没精力的感觉&#xff0c;可能是病没有好彻底的原因&#xff0c;也可能是我内心因为生病而认为摆烂理所应当&#xff0c;反正最后导致摆烂&#xff0c;课现在…

JetpackCompose从入门到实战学习笔记14——Coli的简单使用

JetpackCompose从入门到实战学习笔记14——Coli的简单使用 1.简介&#xff1a; Coil 是一个 Android官方出的配合Jetpack的图片加载库&#xff0c;通过 Kotlin 协程的方式加载图片。 优点如下&#xff1a; 更快: Coil 在性能上有很多优化&#xff0c;包括内存缓存和磁盘缓存…

体验了多款国产类ChatGPT产品后,我选择了道合顺的【ChatIC】

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言A…

springboot实用配置

springboot实用配置 &#xff08;一&#xff09;打包与运行&#xff08;二&#xff09;配置高级1.临时属性设置2.配置文件分类3.自定义配置文件 &#xff08;三&#xff09;多环境开发&#xff08;四&#xff09;日志1.日志基础2.日志输出格式控制3.日志文件 &#xff08;一&am…

什么是OpenVino?以及如何使用OpenVino运行yolo

目录 Openvino简介 如何使用它&#xff1f; 构建源代码 Openvino IR模型 第一个Openvino示例 C语言示例 C示例 使用OpenVino跑Yolo模型 Openvino简介 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包&#xff0c;主要用于对深度推理做优化。 …

开源,点云处理及三维重建软件(Point Cloud Viewer, PCV)的设计与实现

GitHub地址&#xff1a;point-cloud-viewer GitCode地址&#xff1a;point-cloud-viewer 文章目录 使用教程以及相关工具库Step 1 搭建环境Step 2 使用Cmake构建工程Step3 使用VS 编写code并编译执行 点云处理及三维重建软件(PCV)的设计与实现一&#xff0c; 软件总体设计1.1 软…

C++ LinuxWebServer 2万7千字的面经长文(下)

⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! Linux Web Server项目虽然是现在C++求职者的人手一个的项目,但是想要吃透这个项目,还是需要一定的基础的,以项目为导向,进行基础的学习。 涵盖了计算机网络(网络编程…

springboot网上商城项目(一)

springboot网上商城项目&#xff08;一&#xff09; &#xff08;一&#xff09;项目分析1.项目分析2.开发顺序3.前端资源测试 &#xff08;二&#xff09;用户注册1.创建数据库2.实体类编写3.注册&#xff08;持久层&#xff09;4.注册&#xff08;业务层&#xff09;5.注册&a…