3.9 KiB
3.9 KiB
@r-utils/common
与框架无关的通用 JS/TS 工具库,适用于任意前端项目,也可在具备对应运行时 API 的环境中使用。
特性
- 不依赖 Vue、uni-app 或 uview-plus。
- 支持 ESM / CJS 双格式产物。
- 支持根入口导入和子路径按需导入。
- 标记
sideEffects: false,方便业务打包器进行 tree-shaking。
安装
pnpm add @r-utils/common
导入方式
推荐:根入口导入
大多数场景推荐从根入口导入,使用心智负担更低,现代打包器仍可结合 ESM 和 sideEffects: false 做 tree-shaking。
import {
Permission,
wait,
Countdown,
TimeoutTimer,
getValueOfRule,
} from "@r-utils/common";
兼容:子路径按需导入
如果你希望导入路径更精确,也可以使用子路径导入。两种方式都支持,按团队习惯选择即可。
import { Permission } from "@r-utils/common/permission";
import { wait } from "@r-utils/common/time";
import { Countdown, TimeoutTimer } from "@r-utils/common/timer";
import { getValueOfRule } from "@r-utils/common/input-rule";
导出模块
| 子路径 | 说明 |
|---|---|
@r-utils/common/permission |
权限字符串格式校验 |
@r-utils/common/time |
时间相关工具 |
@r-utils/common/timer |
倒计时、超时计时器 |
@r-utils/common/input-rule |
输入值规则处理 |
@r-utils/common/knock-test |
连续敲击/点击触发器 |
@r-utils/common/ui |
与框架无关的 UI 计算工具 |
@r-utils/common/printer |
ESC/TSC 打印相关工具 |
使用示例
权限字符串校验
import { Permission } from "@r-utils/common";
const permission = new Permission([], 3, ":");
permission.isValid("user:create:button"); // true
permission.isValid("user:create"); // false
等待指定时间
import { wait } from "@r-utils/common";
async function submit() {
await wait(300);
console.log("继续执行");
}
倒计时
import { Countdown } from "@r-utils/common";
const countdown = new Countdown(10 * 1000);
countdown.addStepEventListener((time) => {
console.log("剩余时间:", time);
});
countdown.addCountdownEventListener(() => {
console.log("倒计时结束");
});
countdown.start();
简单数值倒计时
import { TimeoutTimer } from "@r-utils/common";
const timer = new TimeoutTimer(5000, 0, 1000);
timer.addStepEventListener((time) => {
console.log("剩余毫秒:", time);
});
timer.addCountdownEventListener(() => {
console.log("完成");
});
timer.start();
输入值规则处理
import { getValueOfRule } from "@r-utils/common";
const value = getValueOfRule("12.345", {
min: 0,
max: 99999.99,
required: true,
digits: 2,
keepDecimal: true,
});
console.log(value); // "12.35"
禁止正负号并转成数字
import { getValueOfRule } from "@r-utils/common";
const value = getValueOfRule("-12", {
min: 0,
required: true,
noSign: true,
number: true,
});
console.log(value); // 0
连续敲击触发回调
import { KnockTest } from "@r-utils/common";
const knockTest = new KnockTest({
maxWaitTime: 5000,
operations: [
{ times: 3, duration: 1000, delay: 500 },
{ times: 2, duration: 1000, delay: 500 },
],
});
knockTest.addCallback(() => {
console.log("触发隐藏功能");
});
button.addEventListener("click", () => {
knockTest.knock();
});
缓动滚动计算
import { slowlyScroll } from "@r-utils/common";
await slowlyScroll(0, 300, 500, (value) => {
window.scrollTo(0, value);
});
注意事项
Countdown、TimeoutTimer和KnockTest内部使用window.setInterval/window.setTimeout,更适合浏览器或类浏览器环境。- 推荐优先使用根入口导入;如果需要更精确的模块边界,也可以使用子路径导入。
- 打印相关模块通常依赖具体设备和业务场景,建议在真实设备环境中验证。