Lib自用JS工具方法

介绍

> 该库为作者在写项目时收集的常用方法，代码简陋，没有严格的边缘处理
>
> 在通过import引入使用时，鼠标悬浮在每一个方法上都有较为完整的Jsdoc提示

起步

> 完整使用

``ts
import { LibJs } from "lyb-js";

const t = LibJs.Base.libJsGetDataType("Hellow World!");
console.log(t); //"string"
`

> 按需引入，打包时就不会把整个库打进去

`ts
import { libJsGetDataType } from "lyb-js/Base/LibJsGetDataType";

const t = libJsGetDataType("Hellow World!");
console.log(t); //"string"
`

> 如果在多个文件使用到同一个方法，建议采用按需引入聚合导出

`ts
//你的公共工具函数文件 utils.ts
export * from "lyb-js/Base/LibJsGetDataType";
export * from "lyb-js/Math/LibJsCalculateExpression";

//你的项目文件 index.ts
import { libJsGetDataType,libJsCalculateExpression } from "utils";

const t = libJsGetDataType("Hellow World!");
console.log(t); //"string"

const v = libJsCalculateExpression("(1+2)-(3*4)/5");
conosle.log(v); //0.6
`

目录

$3

\- LibJsGetDataType-数据类型

\- LibJsPromiseTimeout-延时执行

\- LibJsResizeWatcher-窗口监听

\- LibIsNull-是否为空值

$3

\- LibJsColorConsole-有色打印

\- LibJsIsMobile-判断手机

\- LibJsIsPad-判断平板

\- LibJsPathParams-地址栏参数

\- LibJsParseQueryString-URL参数转对象

\- LibJsSetTitleIcon-网站标题图标

\- LibJsTagTitleTip-网站标题交互

\- LibJsObjToUrlParams-对象转Url参数

\- LibJsCopy-复制文本到剪贴板

$3

\- LibJsChunkArray-数组拆分

\- LibJsDeepJSONParse-深度解析JSON

\- LibJsGroupArrayByKey-分类汇总

\- LibJsMatchEmail-匹配E-Mail

\- LibJsShuffleArray-数组乱序

\- LibJsStepArray-数组偏移

\- LibReverseArrayFromIndex-数组定位翻转

$3

\- LibJsDownloadImageLink-图片下载

\- LibJsImageOptimizer-图片压缩

\- LibJsSaveJson-保存文件

$3

\- LibJsFormatterByte-字节格式化

\- LibJsMaskPhoneNumber-隐藏手机号码

\- LibJsNumberUnit-数字单位

\- LibJsNumComma-数字逗号

\- LibJsSecondsFormatterChinese-中文时间

$3

\- LibJsCalculateExpression-表达式字符串

\- LibJsConvertAngle-角弧度互转

\- LibJsCoordsAngle-两点角度

\- LibJsCoordsDistance-两点距离

\- LibJsDecimal-高精度计算

\- LibJsLerp-线性插值

\- LibJsNormalizeInRange-范围归一化

$3

\- LibJsRegFormValidate-表单验证

\- LibJsRetryRequest-请求重连

\- LibJsNumberStepper-数字步进器

\- LibJsEmitter-事件发射器

\- LibJsClassObservable-类属性监听器

\- LibJsHorizontal-游戏横版状态

$3

\- LibJsProbabilityResult-概率触发

\- LibJsRandom-随机数

\- LibJsRandomColor-随机色

\- LibJsUniqueRandomNumbers-随机数数组

$3

\- LibJsSameTimeCheck-时间比对

\- LibJsTimeAgo-中文时间差

\- LibJsTimeGreeting-时间问候

\- LibJsCountdown-倒计时

Base-基础

$3

> 返回数据类型

`ts

const result1 = libJsGetDataType(123);
console.log(result1); //"number"

const result2 = libJsGetDataType("hello");
console.log(result2); //"string"

const result3 = libJsGetDataType([1, 2, 3]);
console.log(result3); //"array"
`

$3

> 延时执行，切换到其他页面会暂停

`ts
libJsPromiseTimeout(3000, () => {
console.log("执行延时函数");
});
`

$3

> 监听窗口变化，内部只注册一次resize事件，调用监听自身可取消监听

`ts
const libJsResizeWatcher = new LibJsResizeWatcher();

const off = libJsResizeWatcher.on((w,h)=>{})

off()
`

$3

> 判断是否为空值

Browser-浏览器

$3

> console有色打印

`ts
//使用红色打印日志
libJsColorConsole("错误提示", "red", [{ label: "错误代码", value: 500 }]);

//使用蓝色打印简单日志
libJsColorConsole("信息", "blue", "操作成功");
`

$3

> 判断是否为移动设备

`ts
const isMobile = libJsIsMobile();
console.log(isMobile); //true 或 false
`

$3

> 判断是否为平板

`ts
const isPad = libJsIsPad();
console.log(isPad); //true 或 false
`

$3

> 获取浏览器地址栏参数

`ts
const params = libJsPathParams();
console.log(params); //{ param1: "value1", param2: "value2" }
`

$3

> 将URL参数转为对象

`ts
libJsParseQueryString("name=lengyibai&age=18"); //{name: "lengyibai", age: "18"}
`

$3

> 动态设置网站标题及图标，涉及到不同平台的打包，可以根据不同环境来设置网站标题和图标

`ts
libJsSetTitleIcon("我的网站", "https://example.com/favicon.ico");
`

$3

> 网站标题交互，当从当前网页切换到其他网页，网站标题自动切换

`ts
libJsTagTitleTip("欢迎回来", "来和妲己玩耍吧！");
`

$3

> 将对象转为地址栏参数

`js
libJsObjToParams({ name: "John", age: 30, active: true });
// "name=John&age=30&active=true"
`

$3

> 内部做了兼容

`ts
libJsCopy("Hello World!")
`

Data-数据

$3

> 将数组拆分成指定数组元素数量的多个数组

`ts
const chunks = libJsChunkArray([1, 2, 3, 4, 5, 6], 2);
console.log(chunks); //[[1, 2], [3, 4], [5, 6]]
`

$3

> 递归将JSON字符串深度解析为对象

`ts
const obj = libJsDeepJSONParse('{"a": 1, "b": "{\"c\": 2}"}');
console.log(obj); //{ a: 1, b: { c: 2 } }
`

$3

> 将数组对象按照指定键值整理成一个以键值为键名的对象

`ts
const grouped = libJsGroupArrayByKey([{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 1, name: 'C' }], 'id');
console.log(grouped); //{ 1: [{ id: 1, name: 'A' }, { id: 1, name: 'C' }], 2: [{ id: 2, name: 'B' }] }
`

$3

> 可用于实时输入时，自动补全常用邮箱后缀

`ts
const emails = libJsMatchEmail("user", ["@gmail.com", "@yahoo.com"]);
console.log(emails); //["user@gmail.com", "user@yahoo.com"]
`

$3

> 将数组打乱顺序

`ts
const shuffled = libJsShuffleArray([1, 2, 3, 4, 5]);
console.log(shuffled); //[3, 5, 2, 1, 4] （结果每次不同）
`

$3

> 数组元素整体步数移动

`ts
const moved = libJsStepArray([1, 2, 3, 4, 5], 2);
console.log(moved); //[4, 5, 1, 2, 3]
`

$3

> 翻转指定索引后面的数组

`ts
const newArr = libReverseArrayFromIndex([1, 2, 3, 4, 5], 1);
console.log(newArr); // [1, 2, 5, 4, 3]
`

$3

> 从候选数组中随机取一个未使用的元素

File-文件

$3

> 将链接图片下载到本地

`ts
libJsDownloadImageLink("https://example.com/image.jpg", "图片.jpg");
`

$3

> 支持png压缩，保留透明背景

`ts
//图片压缩使用示例
libJsImageOptimizerOptionsParams({
file: myFile,
ratio: 0.8,
width: 800,
maxSize: 1024,
success: (formData, file, url) => {
console.log('压缩成功', formData, file, url);
},
fail: (error) => {
console.error('压缩失败', error);
}
});
`

$3

> 保存JSON文件到本地，也支持保存纯文本的txt文件

`ts
libJsSaveJson("example.json", JSON.stringify({ key: "value" }));
libJsSaveJson("example.txt", "Hellow World!");
`

Formatter-格式化

$3

> 将字节单位的数字格式化

`ts
const result = libJsFormatterByte(2048);
console.log(result); //[2.00, KB, 2.00 KB]
`

$3

> 隐藏手机号码中间的四位数字

`ts
const masked = libJsMaskPhoneNumber("13812345678");
console.log(masked); //138**5678
`

$3

> 将大于或等于单位组的属性值，则使用它的属性名作为单位，你甚至可以用中文键名

`ts
const result1 = libJsNumberUnit(1500, { K: 1000, M: 1000000 });
console.log(result1); //1.5K

const result2 = libJsNumberUnit(0.05, { 分: 0.01, 角: 0.1, 元: 1 });
console.log(result2); //0.05分
`

$3

> 数字每三位添加逗号

`ts
const formatted = libJsNumComma(1234567.89);
console.log(formatted); //1,234,567.89
`

$3

> 将秒数格式化为中文时间描述，支持扩展到年

`ts
const result1 = libJsSecondsFormatterChinese(100000);
console.log(result1); //"1天3小时46分40秒"

const result2 = libJsSecondsFormatterChinese(31536000);
console.log(result2); //"1年"

const result3 = libJsSecondsFormatterChinese(3600);
console.log(result3); //"1小时"

const result4 = libJsSecondsFormatterChinese(90);
console.log(result4); //"1分30秒"
`

Math-数学

$3

> 计算表达式字符串

`ts
const result = libJsCalculateExpression("(1+2)-(3*4)/5");
console.log(result); //0.6
`

$3

> 角度和弧度互相转换

`ts
//角度转弧度
const rad = libJsConvertAngle(90, "rad");
console.log(rad); //1.5708... (π/2)

//弧度转角度
const deg = libJsConvertAngle(Math.PI, "deg");
console.log(deg); //180
`

$3

> 计算两点角度

`ts
const result1 = libJsCoordsAngle({ x: 0, y: 0 }, { x: 1, y: 0 });
console.log(result1); //0

const result2 = libJsCoordsAngle({ x: 0, y: 0 }, { x: 1, y: 1 });
console.log(result2); //45

const result3 = libJsCoordsAngle({ x: 0, y: 0 }, { x: 0, y: 1 });
console.log(result3); //90
`

$3

> 计算两点距离

`ts
const result1 = libJsCoordsDistance({ x: 0, y: 0 }, { x: 3, y: 4 });
console.log(result1); //5

const result2 = libJsCoordsDistance({ x: 1, y: 1 }, { x: 4, y: 5 });
console.log(result2); //5

const result3 = libJsCoordsDistance({ x: 0, y: 0 }, { x: 0, y: 0 });
console.log(result3); //0
`

$3

> 计算两个数的运算结果，并保留指定位数的小数

`ts
const result1 = libJsDecimal(10, 3, "+");
console.log(result1); //13

const result2 = libJsDecimal(10, 3, "-");
console.log(result2); //7

const result3 = libJsDecimal(10, 3, "/", 2);
console.log(result3); //3.33
`

$3

> 线性插值

`ts
console.log(LibJsLerp(0, 100, 0.25)); //25
console.log(LibJsLerp(100, 0, 0.75)); //25
`

$3

> 值介于起点与终点之间时返回一个介于0与1之间的数

`ts
console.log(LibJsNormalizeInRange(0, 100, 75)); //0.75
console.log(LibJsNormalizeInRange(100, 0, 75)); //0.25
`

Misc-杂项

$3

> 通过传递对象数字的方式进行正则或自定义函数进行验证

`ts
const form = { username: "john", email: "john@example.com" };
const rules = [
{ key: "username", verify: /^[a-zA-Z0-9]{3,}$/, msg: "用户名不合法", name: "用户名" },
{ key: "email", verify: /^\S+@\S+\.\S+$/, msg: "邮箱格式不正确", name: "邮箱" },
];
const result1 = libJsRegFormValidate(form, rules);
console.log(result1); //返回结果: []

const invalidForm = { username: "jo", email: "invalid-email" };
const result2 = libJsRegFormValidate(invalidForm, rules);
console.log(result2);
//返回结果: [
// { key: "username", msg: "用户名不合法", name: "用户名" },
// { key: "email", msg: "邮箱格式不正确", name: "邮箱" }
//]
`

$3

> 请求失败重连

`ts
const requestFn = (params: { url: string }) => fetch(params.url).then(res => res.json());
const params = { url: "https://api.example.com/data" };
libJsRetryRequest({
promiseFn: requestFn,
params,
maxRetries: 5,
retryDelay: 1000
})
.then(data => console.log(data))
.catch(err => console.error(err));
`

$3

> 通过调用方法来增加和减少数字索引

`ts
const stepper = new LibJsNumberStepper(10, (index) => console.log(index));
stepper.down("add"); // 索引加1
stepper.updateIndex(5); // 更新索引为5
stepper.down("sub"); // 索引减1
`

$3

> 发布-订阅模式

`ts
type EventType = {
play: [a: number, b: string];
stop: string;
};

//使用方式
const $bus = LibJsEmitter();

$bus.on("play", (c, d) => {
console.log(c, d);
});
$bus.on("stop", (v) => {
console.log(v);
});

$bus.emit("play", 1, "hello");
$bus.emit("stop", "4");

$bus.off("play");
$bus.off("stop");
`

$3

> 监听class的属性值更改

`ts
import { LibJsClassObservable } from "@/utils/LibJsClassObservable";

interface Static {
/* 用户ID /
userID: number;
/* 是否为学生 /
sdutent: boolean;
/* 年龄 /
age: number;
}

/* @description 静态数据 /
export class DataStore extends LibJsClassObservable {
constructor() {
super({
userID: 0,
sdutent: true,
age: 18,
});
}
}

const dataStore = new DataStore()

//获取
const userID = dataStore.getValue("userID"); //0

//更改
const userID = dataStore.setValue("userID", 1); //1

//Boolean 类型取反
const stdutent = dataStore.setBooleanValue("sdutent"); //false

//数字类型累加
const stdutent = dataStore.setNumberValue("age"); //19

//手动触发指定属性监听的所有回调，配合 setValue 第三参数为false，即不自动触发监听的时候，可手动触发
dataStore.setValue("userID", 3, false);
setTimeout(()=>{
dataStore.updateFake("userID");
}, 1000)
`

$3

> 需要传递当前游戏的适配模式

$3

> 递归对象并去掉对象内的 undefined、null、""

Random-随机

$3

> 百分比概率结果

`ts
const result1 = libJsProbabilityResult(50);
console.log(result1); //50% 概率为 true

const result2 = libJsProbabilityResult(80); //80% 概率为 true
console.log(result2); //50% 概率为 true

const result3 = libJsProbabilityResult(100); //100% 概率为 true
console.log(result3); //50% 概率为 true
`

$3

> 随机获取两个数之间的值，包含两数自身

`ts
const result1 = libJsRandom(1, 10); //1 到 10 之间的随机整数
console.log(result1); //50% 概率为 true

const result2 = libJsRandom(1, 10, 2); //1 到 10 之间保留两位小数的随机数
console.log(result2); //50% 概率为 true
`

$3

> 随机 RGBA 颜色

`ts
const result1 = libJsRandomColor(); //生成随机的 RGBA 颜色，默认透明度 1
console.log(result1); //50% 概率为 true

const result2 = libJsRandomColor(0.5); //生成随机的 RGBA 颜色，透明度为 0.5
console.log(result2); //50% 概率为 true
`

$3

> 随机生成指定个数、指定范围不重复的随机数数组

`ts
const result1 = libJsUniqueRandomNumbers(1, 10, 5); //从 1 到 10 中随机生成 5 个唯一数字
console.log(result1); //50% 概率为 true

const result2 = libJsUniqueRandomNumbers(1, 100, 10); //从 1 到 100 中随机生成 10 个唯一数字
console.log(result2); //50% 概率为 true
`

Time-时间

$3

> 传入时间戳与当前时间判断是否为同一分、同一时、同一天、同一周、同一月、同一年

`ts
const timestamp = 1679872800000; //时间戳
const result = libJsSameTimeCheck(timestamp, 'day'); //判断是否为同一天
console.log(result); //0: 同一天, 1: 新的一天, -1: 时间戳大于当前时间
`

$3

> 时间差计算

`ts
const result1 = libJsTimeAgotamp(Date.now() - 3600000); //"1 小时前"
console.log(result1); //50% 概率为 true

const result2 = libJsTimeAgotamp(Date.now() - 86400000); //"1 天前"
console.log(result2); //50% 概率为 true

const result3 = libJsTimeAgotamp(Date.now() - 31536000000); //"1 年前"
console.log(result3); //50% 概率为 true

const result4 = libJsTimeAgotamp(Date.now() - 10000); //"刚刚"
console.log(result4); //50% 概率为 true
`

$3

> 根据当前时间返回问候语

`ts
const result1 = libJsTimeGreeting(); //根据当前时间返回默认问候语
console.log(result1); //50% 概率为 true

const result2 = libJsTimeGreeting({ morning: "早安" }); //自定义早上问候语
console.log(result2); //50% 概率为 true

const result3 = libJsTimeGreeting({ afternoon: "午后好" }); //自定义下午问候语
console.log(result3); //50% 概率为 true
`

$3

> 以当前时间为开始时间，传递结束时间，返回年到秒的数值，以及是否结束

`ts
const result = libJsCountdown("2025-12-01 12:00:00");

console.log(result);
/*
{
years: "00",
months: "01",
days: "20",
hours: "05",
minutes: "34",
seconds: "12",
ended: false
}
*/
``