50+常用工具函数之xijs更新指南(v1.2.3)

news2024/11/18 21:51:12

93250f4be5bd7d74d2dc3d613b272f2a.png

xijs 是一款开箱即用的 js 业务工具库, 聚集于解决业务中遇到的常用的js函数问题, 帮助开发者更高效的进行业务开发. 目前已聚合了50+常用工具函数, 接下来就和大家一起分享一下v1.2.3 版本的更新内容.

1. 添加将树结构转换成扁平数组方法

该模块主要由 EasyRo 贡献, 添加内容如下:

deb0dd4444522c7d0b34c76f00e67698.png

使用方式如下:

import { transformArray } from 'xijs';
const tree = [
  {
    id: '0',
    name: '趣谈前端',
    pid: '',
    children: [
      {
        id: '0-1',
        name: 'js',
        pid: '0',
        children: [],
      },
      {
        id: '0-2',
        name: 'css',
        pid: '0',
        children: [
          {
            id: '0-2-1',
            name: 'css3',
            pid: '0-2',
            children: [],
          },
        ],
      },
    ],
  },
];
console.log(transformArray(tree));

2. 添加常用数学计算函数

该模块主要由 无极侠岚 贡献, 添加内容如下:

267678d7930ca8647a9785293827f6d0.png

使用方式如下:

import { transformTree } from 'xijs';

const data = [
  {
    id: '0',
    name: '趣谈前端',
    pid: '',
  },
  {
    id: '0-1',
    name: 'js',
    pid: '0',
  },
  {
    id: '0-2',
    name: 'css',
    pid: '0',
  },
  {
    id: '0-2-1',
    name: 'css3',
    pid: '0-2',
  },
];

console.log(transformTree(data));

3. 将链表结构转化为数组结构

该模块主要由知乎作者 萌萌你萌不萌啊 贡献, 添加内容如下:

83f6868960aec7e266a4331bbe4c870a.png

使用方式如下:

import { linkListToArray } from 'xijs';

const linkList = {
  value: 100,
  next: { value: 200, next: { value: 300, next: { value: 400 } } },
};
const arr = linkListToArray(linkList);
console.log(arr); // -> [100,200,300,400]

4. 将链表结构转化为数组结构

该模块由 大脸猫 贡献, 添加内容如下:

e9857fc92f09ec80ae6f1b4a9517ab70.png
  • $ 获取dom元素

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

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

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

  • getDomText 获取文本内容

使用方式如下:

import { getDomPageXY } from 'xijs';

// 获取dom元素在当前文档中的绝对位置
const dom = getDomPageXY('#id');

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

4362a2be7afc5a79a5711e6bcd0ff97e.png

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

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

  • 浏览器相关

    • getRuntimeEnv - 获取运行环境

    • getSelection - 获取选中文本

    • redirect - 重定向

    • store - 本地存储库

  • 字符串操作

    • base64 - base64编码和解码

    • camelize - 横线转驼峰命名

    • charCount - 获取字符数

    • formatNumber - 数值千分位格式化

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

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

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

    • randomStr - 生成随机字符串

    • repeat - 生成重复字符串

    • uuid - 生成唯一id

  • 常用判断函数

    • isArray - 判断数组类型

    • isEmpty - 判断空对象

    • isPc - 判断设备类型

    • isPhone - 判断手机号格式

    • isEmail - 判断邮箱函数

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

    • isPhone - 判断手机号格式

    • lang - 判断中英文

  • 数据结构相关

    • 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 - 打乱数组

    • factorial - 阶乘计算

    • fibonacci - 计算斐波那契数

    • sum - 求和数组

  • dom操作

    • $ 获取dom元素

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

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

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

    • getDomText 获取文本内容

  • 几何计算

    • coordinatesInCircle - 生成圆内任意坐标

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

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

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

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

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

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

04b64005d0fe38f8c8a8921a041873e6.gif

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

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

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

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

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

点个在看你最好看

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

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

相关文章

我用 VSCode 写博客编代码

VSCode(Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。VScode 的扩展功能非常强大,我们可以找到几乎所有开发需要的工具。我用他编辑 Markdown 、php 、html 等,甚至用它集成的终端来完成一些 git 和 linux 命…

一个有意思的404页面

老规矩,先上效果图: 下面代码直接拷过去就能用: <!DOCTYPE html> <html lang="en"> <head>

【Linux】环境变量与进程优先级知识点

目录 环境变量1.基本概念2.常见环境变量3.我们写的程序和命令行指令有什么区别&#xff1f;4.自己的程序为什么要用 ./ 执行&#xff0c;而命令行指令可以直接执行&#xff1f;5.如何追加环境变量&#xff1f;6.Linux如何查看环境变量7.如何在代码层面获取环境变量main函数的参…

Java技术接单介绍

今天给大家介绍一个阶段性&#xff08;周期性&#xff09;能获取一定收益的Java技术接单群&#xff0c;分享给大家&#xff01;主要对搞Java的粉丝有帮助&#xff0c;因为可以赚点小钱&#xff0c;对Java技术的要求不高&#xff01; 那些感兴趣或者想直接加技术群的我给大家讲一…

〖Python网络爬虫实战⑰〗- 网页解析利器parsel实战

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付…

奇葩营销之看各品牌如何玩转“营销疯学”

相信有很多人和我一样&#xff0c;最近的快乐都来自于《黑暗荣耀2》。 令人奇怪的是&#xff0c;但比起故事的主线&#xff0c;剧中妍珍等配角的”发疯”片段却成为了网友造梗的来源。 “妍珍疯驴子”“妍珍呐””“黑暗荣耀演我每天精神状态”等。让这部剧话题热度持续…

【LeetCode: 1105. 填充书架 | 暴力递归=>记忆化搜索=>动态规划 | 线性dp 业务限制】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Nuxt3项目从零开始开发

之前讲过Nuxt3项目新建和配置&#xff1a;《Nuxt3从零开始配置与打包发布_nuxt打包发布_范特西_jay的博客-CSDN博客》 本篇文章主要讲解一些nuxt3的基本功能。 Nuxt3官网&#xff1a;https://nuxt.com/docs Nuxt3的官方库&#xff1a;https://nuxt.com/modules 常用的库有&a…

Camtasia Studio2023mac电脑最新屏幕录制编辑工具

作为一个自媒体人&#xff0c;每天都要录制编辑视频&#xff0c;选择一个好的视频编辑工具就是大家首先面临的一个难题&#xff0c;选择一个好工具&#xff0c;可以起到事半功倍的效果&#xff0c;大大提高工作效率。视频编辑非常多&#xff0c;今天给大家推荐的是一款功能强大…

最经典的电脑病毒,适合练手,大家一定要增强安全防范意识

资源地址&#xff1a; 最经典的电脑病毒&#xff0c;坑死自己和别人 大部分都是恶作剧病毒&#xff0c;适合小白练手 感想&#xff1a;病毒种类多种多样&#xff0c;要搞清楚原理&#xff0c;增强安全防范意识啊 示意图&#xff1a; 病毒原理 熊猫烧香病毒会删除扩展名为g…

maven的下载和配置

目录 一、配置核心程序 1、MAVEN下载 2、指定本地仓库 3、配置阿里云提供的镜像仓库 4、配置Maven工程的基础JDK版本 二、配置环境变量 1、检查JAVA_HOME配置是否正确 2、配置MAVEN_HOME 3、配置PATH 4、验证 一、配置核心程序 1、MAVEN下载 官网&#xff1a;https:…

Yolov8 引入CVPR 2023 BiFormer: 基于动态稀疏注意力构建高效金字塔网络架构,对小目标涨点明显

1.BiFormer介绍 论文:https://arxiv.org/pdf/2303.08810.pdf 代码:GitHub - rayleizhu/BiFormer: [CVPR 2023] Official code release of our paper "BiFormer: Vision Transformer with Bi-Level Routing Attention" 背景:注意力机制是Vision Transformer的核心…

Redis 持久化八股文

目录 Redis的持久化机制 持久化方式对比 RDB RDB 持久化 RDB 的优缺点 优点 缺点 RDB 快照时运行修改数据吗 RDB 快照时修改数据过程 写时复制技术 RDB 的执行频率 增量快照 AOF 如何开启AOF AOF 为什么要采用后写日志呢&#xff1f; 后写日志的弊端 AOF 的优…

gulp对原生jquery项目的css和js文件进行压缩

安装 Node.js 和 Gulp&#xff1b; 在项目根目录下创建 package.json 文件并添加项目所需的依赖&#xff1b; 创建一个名为 gulpfile.js 的文件&#xff0c;并在其中编写任务&#xff1b; 在任务中引入所需的 Gulp 插件&#xff0c;例如 gulp-uglify&#xff1b; 编写任务…

下一代智能座舱风口下,“超级”Tier 1强势崛起

智能座舱进入全新周期&#xff0c;强者愈强的趋势会快速显现。 可以观察到&#xff0c;智能座舱功能日趋多元化。从多屏互动到舱内全场景多元交互&#xff0c;到更多娱乐平台的上线&#xff0c;智能座舱已经从最初的重多功能转变成重体验。 从架构层面来看&#xff0c;各个功…

电脑端(PC)按键精灵——4.控制命令(判断、循环、跳转)

电脑端(PC)按键精灵——4.控制命令&#xff08;判断、循环&#xff09; 注&#xff1a;说了键盘、鼠标、其他命令还有安装内容&#xff0c;现在说下控制命令&#xff0c;也就是非常有用的判断和循环操作 按键精灵小白入门详细教程&#xff1a; 电脑端(PC)按键精灵—小白入门…

minicom -s 中“Save setup as ...“命名后保存的配置怎么读取,通过-s加配置名即可

文章目录 快速通道问题背景minicom配置文件吐槽总结 (但凡我看一眼man或者help都不会有这个问题&#xff0c;不能太依赖AI) 快速通道 # 直接通过配置文件启动连接 minicom [配置名字] # 读取配置文件并打开配置菜单 minicom -s [配置名字]问题背景 我刚开始使用minicom&#x…

手机如何访问电脑文件?(iOS和Android)

可以通过手机访问电脑文件吗&#xff1f; “我需要在我的电脑上查看一个文件&#xff0c;但我现在在外面无法实际访问它。我可以通过手机访问我的电脑文件吗&#xff1f;” 答案当然是可以的&#xff0c;无论您使用的是iOS设备还是Android设备&#xff0c;您都可以通过手机…

万里挑一,这4款软件真的太好用了,用一次就离不开

一、LastPass 互联网时代&#xff0c;我们登录很多平台都需要账号密码&#xff0c;但出于安全考虑&#xff0c;你可能会不同的平台有不同的账号及密码。那你是不是还在用手机便签或者纸张去记录&#xff0c;到时候还得一个个输入想想就挺麻烦的。 有这么一款软件&#xff0c;就…

如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。

需求&#xff1a;拉下菜单中数据过多&#xff0c;200条以上&#xff0c;就会导致select组件卡死。所以需要使用滑动到底部使其分页加载 可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件&#xff0c;并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现&…