lyb-js
v1.6.32
Published
自用JS方法库
Readme
Lib自用JS工具方法
介绍
该库为作者在写项目时收集的常用方法，代码简陋，没有严格的边缘处理
在通过
import引入使用时，鼠标悬浮在每一个方法上都有较为完整的Jsdoc提示
起步
完整使用
import { LibJs } from "lyb-js";
const t = LibJs.Base.libJsGetDataType("Hellow World!");
console.log(t); //"string"按需引入，打包时就不会把整个库打进去
import { libJsGetDataType } from "lyb-js/Base/LibJsGetDataType";
const t = libJsGetDataType("Hellow World!");
console.log(t); //"string"如果在多个文件使用到同一个方法，建议采用按需引入聚合导出
//你的公共工具函数文件 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目录
基础
Browser-浏览器
- LibJsParseQueryString-URL参数转对象
- LibJsObjToUrlParams-对象转Url参数
Data-数据
- LibReverseArrayFromIndex-数组定位翻转
File-文件
Formatter-格式化
- LibJsSecondsFormatterChinese-中文时间
Math-数学
- LibJsCalculateExpression-表达式字符串
Misc-杂项
Random-随机
- LibJsUniqueRandomNumbers-随机数数组
Time-时间
Base-基础
LibJsGetDataType-数据类型
返回数据类型
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"LibJsPromiseTimeout-延时执行
延时执行，切换到其他页面会暂停
libJsPromiseTimeout(3000, () => {
console.log("执行延时函数");
});LibJsResizeWatcher-窗口监听
监听窗口变化，内部只注册一次
resize事件，调用监听自身可取消监听
const libJsResizeWatcher = new LibJsResizeWatcher();
const off = libJsResizeWatcher.on((w,h)=>{})
off()LibIsNull-是否为空值
判断是否为空值
Browser-浏览器
LibJsColorConsole-有色打印
console有色打印
//使用红色打印日志
libJsColorConsole("错误提示", "red", [{ label: "错误代码", value: 500 }]);
//使用蓝色打印简单日志
libJsColorConsole("信息", "blue", "操作成功");LibJsIsMobile-判断手机
判断是否为移动设备
const isMobile = libJsIsMobile();
console.log(isMobile); //true 或 falseLibJsIsPad-判断平板
判断是否为平板
const isPad = libJsIsPad();
console.log(isPad); //true 或 falseLibJsPathParams-地址栏参数
获取浏览器地址栏参数
const params = libJsPathParams();
console.log(params); //{ param1: "value1", param2: "value2" }LibJsParseQueryString-URL参数转对象
将
URL参数转为对象
libJsParseQueryString("name=lengyibai&age=18"); //{name: "lengyibai", age: "18"}LibJsSetTitleIcon-网站标题图标
动态设置网站标题及图标，涉及到不同平台的打包，可以根据不同环境来设置网站标题和图标
libJsSetTitleIcon("我的网站", "https://example.com/favicon.ico");LibJsTagTitleTip-网站标题交互
网站标题交互，当从当前网页切换到其他网页，网站标题自动切换
libJsTagTitleTip("欢迎回来", "来和妲己玩耍吧！");LibJsObjToUrlParams-对象转Url参数
将对象转为地址栏参数
libJsObjToParams({ name: "John", age: 30, active: true });
// "name=John&age=30&active=true"LibJsCopy-复制文本到剪贴板
内部做了兼容
libJsCopy("Hello World!")Data-数据
LibJsChunkArray-数组拆分
将数组拆分成指定数组元素数量的多个数组
const chunks = libJsChunkArray([1, 2, 3, 4, 5, 6], 2);
console.log(chunks); //[[1, 2], [3, 4], [5, 6]]LibJsDeepJSONParse-深度解析JSON
递归将JSON字符串深度解析为对象
const obj = libJsDeepJSONParse('{"a": 1, "b": "{\"c\": 2}"}');
console.log(obj); //{ a: 1, b: { c: 2 } }LibJsGroupArrayByKey-分类汇总
将数组对象按照指定键值整理成一个以键值为键名的对象
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' }] }LibJsMatchEmail-匹配E-Mail
可用于实时输入时，自动补全常用邮箱后缀
const emails = libJsMatchEmail("user", ["@gmail.com", "@yahoo.com"]);
console.log(emails); //["[email protected]", "[email protected]"]LibJsShuffleArray-数组乱序
将数组打乱顺序
const shuffled = libJsShuffleArray([1, 2, 3, 4, 5]);
console.log(shuffled); //[3, 5, 2, 1, 4] （结果每次不同）LibJsStepArray-数组偏移
数组元素整体步数移动
const moved = libJsStepArray([1, 2, 3, 4, 5], 2);
console.log(moved); //[4, 5, 1, 2, 3]LibReverseArrayFromIndex-数组定位翻转
翻转指定索引后面的数组
const newArr = libReverseArrayFromIndex([1, 2, 3, 4, 5], 1);
console.log(newArr); // [1, 2, 5, 4, 3]libJsPickUnique-随机选择未使用元素
从候选数组中随机取一个未使用的元素
File-文件
LibJsDownloadImageLink-图片下载
将链接图片下载到本地
libJsDownloadImageLink("https://example.com/image.jpg", "图片.jpg");LibJsImageOptimizer-图片压缩
支持
png压缩，保留透明背景
//图片压缩使用示例
libJsImageOptimizerOptionsParams({
file: myFile,
ratio: 0.8,
width: 800,
maxSize: 1024,
success: (formData, file, url) => {
console.log('压缩成功', formData, file, url);
},
fail: (error) => {
console.error('压缩失败', error);
}
});LibJsSaveJson-保存文件
保存
JSON文件到本地，也支持保存纯文本的txt文件
libJsSaveJson("example.json", JSON.stringify({ key: "value" }));
libJsSaveJson("example.txt", "Hellow World!");Formatter-格式化
LibJsFormatterByte-字节格式化
将字节单位的数字格式化
const result = libJsFormatterByte(2048);
console.log(result); //[2.00, KB, 2.00 KB]LibJsMaskPhoneNumber-隐藏手机号码
隐藏手机号码中间的四位数字
const masked = libJsMaskPhoneNumber("13812345678");
console.log(masked); //138****5678LibJsNumberUnit-数字单位
将大于或等于单位组的属性值，则使用它的属性名作为单位，你甚至可以用中文键名
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分LibJsNumComma-数字逗号
数字每三位添加逗号
const formatted = libJsNumComma(1234567.89);
console.log(formatted); //1,234,567.89LibJsSecondsFormatterChinese-中文时间
将秒数格式化为中文时间描述，支持扩展到年
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-数学
LibJsCalculateExpression-表达式字符串
计算表达式字符串
const result = libJsCalculateExpression("(1+2)-(3*4)/5");
console.log(result); //0.6LibJsConvertAngle-角弧度互转
角度和弧度互相转换
//角度转弧度
const rad = libJsConvertAngle(90, "rad");
console.log(rad); //1.5708... (π/2)
//弧度转角度
const deg = libJsConvertAngle(Math.PI, "deg");
console.log(deg); //180LibJsCoordsAngle-两点角度
计算两点角度
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); //90LibJsCoordsDistance-两点距离
计算两点距离
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); //0LibJsDecimal-高精度计算
计算两个数的运算结果，并保留指定位数的小数
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.33LibJsLerp-线性插值
线性插值
console.log(LibJsLerp(0, 100, 0.25)); //25
console.log(LibJsLerp(100, 0, 0.75)); //25LibJsNormalizeInRange-范围归一化
值介于起点与终点之间时返回一个介于0与1之间的数
console.log(LibJsNormalizeInRange(0, 100, 75)); //0.75
console.log(LibJsNormalizeInRange(100, 0, 75)); //0.25Misc-杂项
LibJsRegFormValidate-表单验证
通过传递对象数字的方式进行正则或自定义函数进行验证
const form = { username: "john", email: "[email protected]" };
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: "邮箱" }
//]LibJsRetryRequest-请求重连
请求失败重连
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));LibJsNumberStepper-数字步进器
通过调用方法来增加和减少数字索引
const stepper = new LibJsNumberStepper(10, (index) => console.log(index));
stepper.down("add"); // 索引加1
stepper.updateIndex(5); // 更新索引为5
stepper.down("sub"); // 索引减1LibJsEmitter-事件发射器
发布-订阅模式
type EventType = {
play: [a: number, b: string];
stop: string;
};
//使用方式
const $bus = LibJsEmitter<EventType>();
$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");LibJsClassObservable-类属性监听器
监听
class的属性值更改
import { LibJsClassObservable } from "@/utils/LibJsClassObservable";
interface Static {
/** 用户ID */
userID: number;
/** 是否为学生 */
sdutent: boolean;
/** 年龄 */
age: number;
}
/** @description 静态数据 */
export class DataStore extends LibJsClassObservable<Static> {
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)LibJsHorizontal-游戏横版状态
需要传递当前游戏的适配模式
LibJsPruneEmpty-对象属性去空值
递归对象并去掉对象内的
undefined、null、""
Random-随机
LibJsProbabilityResult-概率触发
百分比概率结果
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% 概率为 trueLibJsRandom-随机数
随机获取两个数之间的值，包含两数自身
const result1 = libJsRandom(1, 10); //1 到 10 之间的随机整数
console.log(result1); //50% 概率为 true
const result2 = libJsRandom(1, 10, 2); //1 到 10 之间保留两位小数的随机数
console.log(result2); //50% 概率为 trueLibJsRandomColor-随机色
随机 RGBA 颜色
const result1 = libJsRandomColor(); //生成随机的 RGBA 颜色，默认透明度 1
console.log(result1); //50% 概率为 true
const result2 = libJsRandomColor(0.5); //生成随机的 RGBA 颜色，透明度为 0.5
console.log(result2); //50% 概率为 trueLibJsUniqueRandomNumbers-随机数数组
随机生成指定个数、指定范围不重复的随机数数组
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% 概率为 trueTime-时间
LibJsSameTimeCheck-时间比对
传入时间戳与当前时间判断是否为同一分、同一时、同一天、同一周、同一月、同一年
const timestamp = 1679872800000; //时间戳
const result = libJsSameTimeCheck(timestamp, 'day'); //判断是否为同一天
console.log(result); //0: 同一天, 1: 新的一天, -1: 时间戳大于当前时间LibJsTimeAgo-中文时间差
时间差计算
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% 概率为 trueLibJsTimeGreeting-时间问候
根据当前时间返回问候语
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% 概率为 trueLibJsCountdown-倒计时
以当前时间为开始时间，传递结束时间，返回年到秒的数值，以及是否结束
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
}
*/