# JSTools **Repository Path**: glony/jstools ## Basic Information - **Project Name**: JSTools - **Description**: JavaScript 工具类合集 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-08-26 - **Last Updated**: 2026-09-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # JavaScript 工具类合集 ## 工具类测试面板: `test-panel.html` > 基于浏览器的可视化工具库测试面板，零依赖、单文件部署，覆盖 24 个工具模块、200+ 个 API 的在线测试。 --- ## 目录 - [概述](#概述) - [快速启动](#快速启动) - [界面布局](#界面布局) - [操作说明](#操作说明) - [模块清单](#模块清单) - [RegexUtils — 正则表达式工具集](#1-regexutils--正则表达式工具集) - [SecurityUtils — 安全与加密工具集](#2-securityutils--安全与加密工具集) - [FunctionUtils — 函数式编程工具集](#3-functionutils--函数式编程工具集) - [BrowserUtils — 浏览器与设备环境工具集](#4-browserutils--浏览器与设备环境工具集) - [MaskerUtils — 数据脱敏工具集](#5-maskerutils--数据脱敏工具集) - [URLUtils — URL 工具集](#6-urlutils--url-工具集) - [TypeUtils — 类型检测与转换工具集](#7-typeutils--类型检测与转换工具集) - [StringUtils — 字符串操作工具集](#8-stringutils--字符串操作工具集) - [MathUtils — 数学运算工具集](#9-mathutils--数学运算工具集) - [DateUtils — 日期操作工具集](#10-dateutils--日期操作工具集) - [ObjectArrayUtils — 对象与数组操作工具集](#11-objectarrayutils--对象与数组操作工具集) - [CacheUtils — 缓存工具集](#12-cacheutils--缓存工具集) - [Logger — 日志工具集](#13-logger--日志工具集) - [DOMUtils — DOM 操作工具集](#14-domutils--dom-操作工具集) - [MediaUtils — 媒体操作工具集](#15-mediautils--媒体操作工具集) - [NotificationUtils — 通知工具集](#16-notificationutils--通知工具集) - [CameraUtils — 相机与摄像头工具集](#17-camerautils--相机与摄像头工具集) - [Crypto — 编码 / 哈希 / 加密工具集](#18-crypto--编码--哈希--加密工具集) - [Concurrency — 并发与异步流程工具集](#19-concurrency--并发与异步流程工具集) - [RequestUtils — HTTP 网络请求工具集](#20-requestutils--http-网络请求工具集) - [CookieUtils — Cookie 操作工具集](#21-cookieutils--cookie-操作工具集) - [IndexDBUtils — IndexedDB 操作工具集](#22-indexdbutils--indexeddb-操作工具集) - [VersionCompare — 版本号比较工具](#23-versioncompare--版本号比较工具) - [VersionManager — SPA 版本管理工具](#24-versionmanager--spa-版本管理工具) - [技术架构](#技术架构) - [输入类型说明](#输入类型说明) - [目录结构要求](#目录结构要求) - [许可证](#许可证) --- ## 概述 本面板是一个**单 HTML 文件**应用，通过 ES Modules 动态加载项目中 24 个工具模块，在浏览器中提供可视化的 API 测试环境。每个模块的每个方法均可独立输入参数、执行并查看返回结果。 **核心特性：** | 特性 | 说明 | |---|---| | 零依赖 | 纯原生 HTML/CSS/JS，无第三方框架 | | 单文件部署 | 一个 HTML 文件即可运行 | | 动态加载 | 通过 `import()` 按需加载模块，失败时优雅降级 | | 参数可编辑 | 每个测试的输入参数均可在界面中直接修改 | | 多类型输入 | 支持 string / number / json / boolean 四种参数类型 | | 异步支持 | 异步 API 自动标记 `async` 标签，自动 `await` | | 批量运行 | 一键运行当前面板全部测试 | | 键盘快捷键 | 输入框回车直接触发运行 | --- ## 快速启动 ### 方式一：本地 HTTP 服务（推荐） ```bash # 确保项目目录结构正确后，在项目根目录启动服务 npx serve . # 或 python -m http.server 8080 ``` 然后在浏览器中打开测试面板 HTML 文件。 > 注意：由于使用 ES Modules 的 import()，必须通过 HTTP/HTTPS 协议访问，直接双击 file:// 打开可能因 CORS 限制导致模块加载失败。 ### 方式二：配合 Vite / Webpack Dev Server ```bash # 如果项目使用 Vite npx vite . # 如果项目使用 Webpack npx webpack serve # 如果项目使用 Vite npx vite . # 如果项目使用 Webpack npx webpack serve ``` > 将测试面板 HTML 放在项目根目录或配置 devServer 的 open 指向它即可。 ## 界面布局 ```text ┌─────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────┐ ┌──────────────────────────────────────────┐ │ │ │ Sidebar │ │ Toolbar: [运行当前面板全部] [清空结果] │ │ │ │ │ ├──────────────────────────────────────────┤ │ │ │ ● RegexUtils │ │ │ │ │ │ Security │ │ ┌────────────────────────────────────┐ │ │ │ │ Function │ │ │ Test Card │ │ │ │ │ Browser │ │ │ methodName(params) [运行] │ │ │ │ │ Masker │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ URL │ │ │ │ input 1 │ │ input 2 │ │ │ │ │ │ Type │ │ │ └──────────┘ └──────────┘ │ │ │ │ │ String │ │ │ ┌────────────────────────────┐ │ │ │ │ │ Math │ │ │ │ Result: success / error │ │ │ │ │ │ Date │ │ │ └────────────────────────────┘ │ │ │ │ │ ... │ │ └────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ (24 模块) │ │ ... 更多测试卡片 ... │ │ │ └──────────────┘ └──────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────┐ ┌──────────────────────────────────────────┐ │ │ │ Sidebar │ │ Toolbar: [运行当前面板全部] [清空结果] │ │ │ │ │ ├──────────────────────────────────────────┤ │ │ │ ● RegexUtils │ │ │ │ │ │ Security │ │ ┌────────────────────────────────────┐ │ │ │ │ Function │ │ │ Test Card │ │ │ │ │ Browser │ │ │ methodName(params) [运行] │ │ │ │ │ Masker │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ URL │ │ │ │ input 1 │ │ input 2 │ │ │ │ │ │ Type │ │ │ └──────────┘ └──────────┘ │ │ │ │ │ String │ │ │ ┌────────────────────────────┐ │ │ │ │ │ Math │ │ │ │ Result: success / error │ │ │ │ │ │ Date │ │ │ └────────────────────────────┘ │ │ │ │ │ ... │ │ └────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ (24 模块) │ │ ... 更多测试卡片 ... │ │ │ └──────────────┘ └──────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ 区域 说明 侧边栏 24 个模块导航，点击切换，当前选中项高亮 工具栏 「运行当前面板全部」批量执行所有测试；「清空结果」重置 测试卡片 每个 API 一张卡片，包含方法名、参数输入框、运行按钮、结果展示区 ``` ## 操作说明 ### 运行单个测试 1. 在侧边栏选择目标模块 2. 修改参数输入框的值（或使用默认值） 3. 点击卡片右侧的 「运行」 按钮 4. 结果区域显示返回值（绿色 = 成功，红色 = 错误） ### 批量运行 点击顶部工具栏 「运行当前面板全部」，依次执行当前模块下所有测试 异步测试之间自动间隔 200ms 避免并发冲突 ### 键盘操作 |操作 |说明| |---|---| |Enter（在输入框内）| 触发当前卡片的测试运行| ### 结果状态 |状态 |样式 |说明| |--|--|--| |空 |灰色文字 |等待运行| |成功 |绿色左边框 + 浅绿底色 |返回值正常| |错误 |红色左边框 + 浅红底色 |抛出异常，显示错误信息| ## 模块清单 以下为面板覆盖的全部 24 个工具模块及其测试用例说明。 ### 1. RegexUtils — 正则表达式工具集 > 正则验证、提取、高亮等常用操作 | 方法 | 参数 | 说明 | 示例输入 | | ----------------------- | ------------------------ | ----------------- | ------------------------------ | | `isValidPhone` | `phone` | 手机号合法性校验 | `13812345678` | | `isValidEmail` | `email` | 邮箱格式校验 | `test@qq.com` | | `validate` | `value`, `pattern` | 通用正则校验（按模式名） | `123456`, `POSTCODE` | | `extractEmails` | `text` | 从文本中提取所有邮箱 | `联系 test@qq.com` | | `highlight` | `text`, `keyword`, `tag` | 关键词高亮（包裹 HTML 标签） | `Hello World`, `world`, `mark` | | `extractURLs` | `text` | 从文本中提取所有 URL | `访问 https://a.com 了解更多` | | `isValidIdCard` | `id` | 身份证号码校验（含校验位） | `110101199001011234` | | `isValidBluePlate` | `plate` | 蓝牌车牌号校验 | `京A12345` | | `isValidNewEnergyPlate` | `plate` | 新能源车牌号校验 | `京AD12345` | | `getPlateType` | `plate` | 获取车牌类型（蓝牌/新能源/未知） | `京A12345` | --- ### 2. SecurityUtils — 安全与加密工具集 > XSS 防护、编码、密码强度评估等安全基础能力 | 方法 | 参数 | 说明 | 示例输入 | | ------------------ | ---------- | ---------------- | --------------------------- | | `escapeHTML` | `html` | HTML 实体转义（防 XSS） | `` | | `base64Encode` | `text` | Base64 编码 | `hello` | | `base64Decode` | `b64` | Base64 解码 | `aGVsbG8=` | | `uuid` | — | 生成 UUID v4 | — | | `passwordStrength` | `password` | 密码强度评估（返回评分与建议） | `Abc123!@` | | `simpleHash` | `text` | 简单哈希（非加密用途） | `hello` | --- ### 3. FunctionUtils — 函数式编程工具集 > 防抖、节流、记忆化、柯里化、组合等函数式编程原语 | 方法 | 参数 | 说明 | 示例输入 | | ---------- | -------------- | ---------------- | ------------- | | `debounce` | `delay(ms)` | 创建防抖函数并调用 | `300` | | `throttle` | `interval(ms)` | 创建节流函数并调用 | `300` | | `memoize` | `arg` | 带 LRU 缓存的记忆化函数 | `21` | | `curry` | `a`, `b`, `c` | 函数柯里化 | `1`, `2`, `3` | | `compose` | `input` | 函数组合（从右到左） | `5` | | `sleep` ⚡ | `ms` | 延迟执行（返回 Promise） | `500` | > ⚡ 标记表示该测试为异步方法 --- ### 4. BrowserUtils — 浏览器与设备环境工具集 > UA 检测、视口信息、剪贴板操作等浏览器环境能力 | 方法 | 参数 | 说明 | 示例输入 | | ------------------- | ------ | -------------- | -------- | | `isWeChat` | — | 是否微信环境 | — | | `isMobile` | — | 是否移动设备 | — | | `getBrowserInfo` | — | 获取浏览器信息（类型/版本） | — | | `getViewport` | — | 获取视口尺寸 | — | | `isAndroid` | — | 是否 Android | — | | `isIOS` | — | 是否 iOS | — | | `copyToClipboard` ⚡ | `text` | 写入剪贴板 | `测试复制内容` | --- ### 5. MaskerUtils — 数据脱敏工具集 > 手机号、身份证、银行卡、姓名、邮箱的脱敏处理 | 方法 | 参数 | 说明 | 示例输入 → 输出 | | ---------- | ---------- | ----- | ------------------------------------------ | | `phone` | `phone` | 手机号脱敏 | `13812345678` → `138****5678` | | `idCard` | `idCard` | 身份证脱敏 | `110101199001011234` → `1101**********34` | | `bankCard` | `bankCard` | 银行卡脱敏 | `6222021234567890` → `6222 **** **** 7890` | | `name` | `name` | 姓名脱敏 | `张三` → `张*` | | `email` | `email` | 邮箱脱敏 | `testuser@qq.com` → `t******r@qq.com` | --- ### 6. URLUtils — URL 工具集 > URL 解析、参数操作、路由模式检测 | 方法 | 参数 | 说明 | 示例输入 | | ----------------------- | --------------- | ---------------------- | ------------------------------ | | `parseParams` | `query` | 解析查询字符串为对象 | `?id=1&name=tom` | | `stringifyParams` | `params` | 对象序列化为查询字符串 | `{ a: 1, b: 2 }` | | `appendParams` | `url`, `params` | 向 URL 追加参数 | `https://a.com`, `{ page: 1 }` | | `getParam` | `url`, `key` | 获取 URL 中指定参数 | `https://a.com?id=1`, `id` | | `parseUrl` | `url` | 完整解析 URL（协议/主机/路径/参数） | `https://a.com/path?q=1` | | `getRoutingMode` | — | 获取当前路由模式（hash/history） | — | | `isHashMode` | — | 是否 Hash 路由 | — | | `isHistoryMode` | — | 是否 History 路由 | — | | `getCurrentRoute` | — | 获取当前路由路径 | — | | `getCurrentRouteParams` | — | 获取当前路由参数 | — | --- ### 7. TypeUtils — 类型检测与转换工具集 > 精确类型判断、深比较、安全转换 | 方法 | 参数 | 说明 | 示例输入 | | --------------- | ------------------ | -------------------------------- | ---------------------- | | `typeOf` | `value` | 精确类型检测（区分 Array/Object/Date 等） | `[]` | | `isPlainObject` | `value` | 是否纯对象 | `{}` | | `isEmpty` | `value` | 是否为空值（null/undefined/空串/空数组/空对象） | `null` | | `isDeepEqual` | `a`, `b` | 深度相等比较 | `{ a: 1 }`, `{ a: 1 }` | | `toNumber` | `value`, `default` | 安全转数字（失败返回默认值） | `123abc`, `0` | | `parseJSON` | `str`, `default` | 安全 JSON 解析（失败返回默认值） | `{"a":1}`, `{}` | --- ### 8. StringUtils — 字符串操作工具集 > 千分位、模板引擎、字节格式化、驼峰转换等 | 方法 | 参数 | 说明 | 示例输入 | | ------------------- | ------------------- | ---------------- | ------------------------------------- | | `thousandSeparator` | `num`, `decimals` | 千分位分隔符格式化 | `1234567.89`, `2` | | `template` | `tpl`, `data` | 模板字符串替换 | `Hello ${name}!`, `{ name: "World" }` | | `formatBytes` | `bytes` | 字节数格式化（KB/MB/GB） | `1048576` | | `camelCase` | `str` | 连字符/下划线转驼峰 | `hello-world_test` | | `random` | `length` | 生成随机字符串 | `8` | | `truncate` | `str`, `len` | 截断字符串（超出部分用省略号） | `Hello World Foo Bar`, `5` | | `padStart` | `str`, `len`, `pad` | 左侧填充 | `5`, `3`, `0` | --- ### 9. MathUtils — 数学运算工具集 > 精确计算、统计、随机数、格式化 | 方法 | 参数 | 说明 | 示例输入 | | -------------- | ----------------- | -------------- | ----------------- | | `add` | `a`, `b` | 精确加法（解决浮点精度问题） | `0.1`, `0.2` | | `multiply` | `a`, `b` | 精确乘法 | `0.1`, `0.2` | | `sum` | `arr` | 数组求和 | `[1, 2, 3, 4]` | | `median` | `arr` | 中位数 | `[3, 1, 2]` | | `clamp` | `n`, `min`, `max` | 数值钳位（限制在范围内） | `15`, `0`, `10` | | `randomInt` | `min`, `max` | 随机整数（含两端） | `1`, `100` | | `formatNumber` | `n`, `decimals` | 数字格式化（固定小数位） | `1234567.89`, `2` | | `round` | `n`, `decimals` | 四舍五入（精确到指定位） | `3.14159`, `2` | --- ### 10. DateUtils — 日期操作工具集 > 格式化、相对时间、日期计算 > **输入提示**：date 参数支持特殊值 `'now'`（当前时间）和 `'1h-ago'`（1 小时前），也可输入标准 ISO 日期字符串。 | 方法 | 参数 | 说明 | 示例输入 | | ------------ | ------------------------ | ------------- | --------------------------------- | | `format` | `date`, `fmt` | 日期格式化 | `now`, `YYYY-MM-DD HH:mm:ss` | | `relative` | `date` | 相对时间（"3 小时前"） | `1h-ago` | | `diff` | `d1`, `d2`, `unit` | 两个日期之差 | `2024-01-10`, `2024-01-01`, `day` | | `add` | `date`, `amount`, `unit` | 日期加减 | `now`, `7`, `day` | | `isToday` | `date` | 是否今天 | `2024-01-15` | | `startOfDay` | `date` | 当天开始时间 | `now` | | `isWeekend` | `date` | 是否周末 | `now` | --- ### 11. ObjectArrayUtils — 对象与数组操作工具集 > 深克隆、深合并、去重、分组、树结构转换等 | 方法 | 参数 | 说明 | 示例输入 | | ------------- | ---------------- | -------- | -------------------------------------- | | `deepClone` | `obj` | 深拷贝 | `{ a: { b: 1 } }` | | `deepMerge` | `a`, `b` | 深合并 | `{ a: 1 }`, `{ b: 2 }` | | `unique` | `arr` | 数组去重 | `[1, 2, 2, 3]` | | `groupBy` | `arr`, `key` | 按字段分组 | `[{ category: "A" }, ...]`, `category` | | `arrayToTree` | `list`, `rootId` | 扁平列表转树结构 | `[{ id: 1, parentId: 0 }]`, `0` | | `chunk` | `arr`, `size` | 数组分块 | `[1, 2, 3, 4]`, `2` | | `sortBy` | `arr`, `key` | 按字段排序 | `[{ age: 30 }, { age: 20 }]`, `age` | --- ### 12. CacheUtils — 缓存工具集 > 带 TTL 的对象缓存、统计、惰性加载 | 方法 | 参数 | 说明 | 示例输入 | | ------------- | --------------------- | ------------- | ------------------------------- | | `putObject` | `key`, `value`, `ttl` | 写入缓存（带过期时间） | `user`, `{ name: "Tom" }`, `60` | | `getAsObject` | `key` | 读取缓存对象 | `user` | | `getOrSet` | `key`, `ttl` | 缓存未命中时自动计算并写入 | `key`, `30` | | `stats` | — | 缓存统计（命中率/大小等） | — | --- ### 13. Logger — 日志工具集 > 分级日志输出（info / warn / error / debug），输出到浏览器 Console | 方法 | 参数 | 说明 | 示例输入 | | ------- | ------------- | ------------------------ | ------------------------- | | `info` | `msg` | 输出 info 级日志 | `用户登录成功` | | `warn` | `msg` | 输出 warn 级日志 | `密码强度不足` | | `error` | `msg` | 输出 error 级日志（含 Error 对象） | `网络请求失败` | | `debug` | `msg`, `data` | 输出 debug 级日志（附带数据） | `调试信息`, `{ userId: 123 }` | > 运行后请打开浏览器 **DevTools → Console** 查看日志输出。 --- ### 14. DOMUtils — DOM 操作工具集 > 选择器、类名操作、样式获取 | 方法 | 参数 | 说明 | 示例输入 | | ---------- | ------------------- | ---------------- | -------------------------------- | | `$` | `selector` | querySelector 封装 | `#btnRunAll` | | `addClass` | `selector`, `class` | 添加 CSS 类 | `#btnRunAll`, `test-class` | | `hasClass` | `selector`, `class` | 判断是否包含 CSS 类 | `#btnRunAll`, `test-class` | | `getStyle` | `selector`, `prop` | 获取计算样式 | `#btnRunAll`, `background-color` | --- ### 15. MediaUtils — 媒体操作工具集 > 文件大小格式化、图片加载 | 方法 | 参数 | 说明 | 示例输入 | | ---------------- | ------- | ------------------- | -------------------------------- | | `formatFileSize` | `bytes` | 文件大小格式化 | `1048576` | | `loadImage` ⚡ | `url` | 异步加载图片（返回 Image 对象） | `https://via.placeholder.com/50` | > `loadImage` 需要外部 URL 可访问，跨域图片可能因 CORS 策略加载失败。 --- ### 16. NotificationUtils — 通知工具集 > 浏览器原生 Notification API 封装，支持权限管理、优先级、自动过期 | 方法 | 参数 | 说明 | | --------------------- | ----------------------------- | ---------------------- | | `isSupported` | — | 检测浏览器是否支持 Notification | | `getPermission` | — | 获取当前权限状态 | | `isGranted` | — | 是否已授权 | | `capabilities` | — | 浏览器通知能力清单 | | `maxActions` | — | 最大操作按钮数 | | `requestPermission` ⚡ | — | 请求通知权限（弹窗） | | `send` ⚡ | `title`, `body`, `tag`, `ttl` | 发送通知，自动过期 | | `sendHigh` ⚡ | `title`, `body`, `tag` | 高优先级通知（常驻 + 振动） | | `quick` ⚡ | `title`, `body`, `tag`, `ttl` | 静态快捷方法（无需实例化） | | `activeCount` | — | 当前活跃通知数量 | | `closeAll` | — | 关闭所有活跃通知 | > 需要浏览器授予通知权限。在 HTTPS 环境或 localhost 下可用。 --- ### 17. CameraUtils — 相机与摄像头工具集 > 摄像头枚举、权限检查、录制能力检测 | 方法 | 参数 | 说明 | | ------------------------- | --- | --------------------- | | `isSupported` | — | 是否支持 MediaDevices API | | `isRecordingSupported` | — | 是否支持 MediaRecorder | | `isImageCaptureSupported` | — | 是否支持 ImageCapture API | | `isEnumerationSupported` | — | 是否支持设备枚举 | | `getPreferredRecordMime` | — | 获取首选录制 MIME 类型 | | `hasCamera` ⚡ | — | 检测是否有可用摄像头 | | `getPermissionStatus` ⚡ | — | 获取摄像头权限状态 | | `capabilities` ⚡ | — | 获取设备能力信息 | | `getCameras` ⚡ | — | 枚举所有摄像头设备 | | `RESOLUTION` | — | 预设分辨率列表 | | `FILTERS` | — | 预设滤镜列表 | > 涉及摄像头的方法需要 HTTPS 环境和用户授权。 --- ### 18. Crypto — 编码 / 哈希 / 加密工具集 > Base64、Hex 编码，MD5/SHA 哈希，HMAC、AES 加密，PBKDF2 密钥派生 | 方法 | 参数 | 说明 | 示例输入 | | ---------------------- | ------------------- | ---------------------- | -------------------- | | `toBase64` | `text` | 文本 → Base64 | `hello` | | `fromBase64` | `b64` | Base64 → 文本 | `aGVsbG8=` | | `toHex` | `text` | 文本 → 十六进制 | `hi` | | `randomBytes` | `length` | 密码学安全随机字节 | `8` | | `randomUUID` | — | 生成 UUID v4 | — | | `md5` | `text` | MD5 哈希（同步，纯 JS） | `hello` | | `sha256` ⚡ | `text` | SHA-256 哈希（Web Crypto） | `hello` | | `sha512` ⚡ | `text` | SHA-512 哈希（Web Crypto） | `hello` | | `hmacSHA256` ⚡ | `msg`, `key` | HMAC-SHA256 消息认证码 | `msg`, `key` | | `passwordStrength` | `pwd` | 密码强度评估 | `Abc123!@` | | `generatePassword` | `length` | 安全密码生成 | `16` | | `timingSafeEqual` | `a`, `b` | 常量时间字符串比较（防时序攻击） | `abc`, `abc` | | `pbkdf2` ⚡ | `pwd`, `iterations` | PBKDF2 密钥派生 | `password`, `100000` | | `aesEncrypt+Decrypt` ⚡ | `text`, `password` | AES-GCM 加密后解密往返 | `secret`, `pwd` | > SHA / HMAC / AES / PBKDF2 依赖 Web Crypto API（需 HTTPS 或 localhost）。 --- ### 19. Concurrency — 并发与异步流程工具集 > 超时控制、竞速、重试、并发限制、互斥锁、通道通信 | 方法 | 参数 | 说明 | 示例输入 | | ------------------------ | ------------------------------- | ------------------ | ------------------ | | `withTimeout (超时)` ⚡ | `promiseMs`, `timeoutMs` | Promise 超时控制（超时抛错） | `500`, `200` | | `withTimeout (正常)` ⚡ | `promiseMs`, `timeoutMs` | Promise 超时控制（正常完成） | `100`, `600` | | `raceSuccess` ⚡ | `slowMs`, `fastMs` | 竞速：取第一个成功的 Promise | `300`, `50` | | `retry` ⚡ | `failTimes`, `retries`, `delay` | 指数退避重试 | `2`, `3`, `50` | | `pMap` ⚡ | `arr`, `limit` | 并发限制的异步 Map | `[1,2,3]`, `2` | | `pFilter` ⚡ | `arr`, `limit` | 并发限制的异步 Filter | `[1,2,3,4,5]`, `2` | | `parallelLimit` ⚡ | `limit` | 限制并发执行任务组 | `2` | | `debounce` ⚡ | `delay(ms)` | 异步防抖 | `100` | | `throttle` ⚡ | `interval(ms)` | 异步节流 | `100` | | `Semaphore.use` ⚡ | `max` | 信号量保护执行 | `2` | | `Mutex.runExclusive` ⚡ | `count` | 互斥锁保护执行 | `3` | | `Channel.send+receive` ⚡ | `msgA`, `msgB` | 通道发送与接收 | `A`, `B` | | `after` ⚡ | `ms` | 延迟 Channel（定时触发） | `50` | > 所有 Concurrency 测试均为异步，运行后需等待 Promise 完成。 --- ### 20. RequestUtils — HTTP 网络请求工具集 > HTTP 客户端封装，拦截器、取消令牌、认证管理 | 方法 | 参数 | 说明 | 示例输入 | | ----------------------- | ------------- | ----------------------- | ----------------------------------------------------------------------- | | `buildQuery` | `params` | 构建查询字符串 | `{ a: 1, b: [2, 3] }` | | `parseQuery` | `query` | 解析查询字符串 | `?a=1&b=2` | | `createCancelToken` | — | 创建取消令牌（AbortController） | — | | `setDefaults` | `config` | 设置全局默认配置 | `{ timeout: 5000 }` | | `setAuth` | `token` | 设置 Authorization 头 | `token123` | | `clearAuth` | — | 清除 Authorization 头 | — | | `addRequestInterceptor` | — | 添加请求拦截器（并移除） | — | | `get` ⚡ | `url` | GET 请求 | `https://jsonplaceholder.typicode.com/todos/1` | | `post` ⚡ | `url`, `data` | POST 请求 | `https://jsonplaceholder.typicode.com/posts`, `{ title, body, userId }` | > `get` / `post` 测试默认请求 JSONPlaceholder 公共 API，需要网络连接。 --- ### 21. CookieUtils — Cookie 操作工具集 > Cookie 的增删改查、序列化/解析 | 方法 | 参数 | 说明 | 示例输入 | | -------------- | ------------------------- | ------------------ | ------------------------------ | | `isSupported` | — | 检测是否支持 Cookie | — | | `list` | — | 列出所有 Cookie（键值对对象） | — | | `keys` | — | 列出所有 Cookie 键名 | — | | `get` | `key` | 获取指定 Cookie | `test_cookie` | | `has` | `key` | 判断 Cookie 是否存在 | `test_cookie` | | `set` | `key`, `value`, `expires` | 设置 Cookie | `test_cookie`, `hello123`, `7` | | `set + get 往返` | `key`, `value` | 写入后读取验证 | `rt_test`, `round-trip` | | `parse` | `cookieStr` | 解析 Cookie 字符串为对象 | `a=1; b=hello; c=world` | | `stringify` | `obj` | 对象序列化为 Cookie 字符串 | `{ a: "1", b: "2" }` | | `remove` | `key` | 删除指定 Cookie | `test_cookie` | --- ### 22. IndexDBUtils — IndexedDB 操作工具集 > IndexedDB 的数据库管理、CRUD、查询、存储配额 | 方法 | 参数 | 说明 | 示例输入 | | --------------------- | --------------------- | --------------- | ----------------------- | | `isSupported` | — | 检测 IndexedDB 支持 | — | | `estimate` ⚡ | — | 获取存储配额信息 | — | | `requestPersistent` ⚡ | — | 请求持久化存储权限 | — | | `isPersistent` ⚡ | — | 检查是否已持久化 | — | | `open` ⚡ | `dbName`, `version` | 打开/创建数据库（含表和索引） | `idb_test`, `1` | | `put` ⚡ | `id`, `name`, `email` | 插入/更新记录 | `1`, `Tom`, `tom@x.com` | | `get` ⚡ | `id` | 主键查询 | `1` | | `getAll` ⚡ | — | 获取全部记录 | — | | `count` ⚡ | — | 统计记录数 | — | | `filter` ⚡ | `name包含` | 按条件过滤 | `Tom` | | `remove` ⚡ | `id` | 删除记录 | `1` | | `clear` ⚡ | — | 清空表 | — | | `deleteDatabase` ⚡ | `dbName` | 删除整个数据库 | `idb_test` | > 建议按顺序运行：`open` → `put` → `get` / `getAll` / `filter` → `remove` → `clear` → `deleteDatabase` --- ### 23. VersionCompare — 版本号比较工具 > 语义化版本号（semver）解析、比较、差异检测 | 方法 | 参数 | 说明 | 示例输入 | | --------------- | ---------- | ---------------------------------- | ------------------------------ | | `compare` | `v1`, `v2` | 比较两版本（返回 -1/0/1） | `1.0.0`, `1.0.1` | | `gt` | `v1`, `v2` | 大于判定 | `1.2.0`, `1.1.0` | | `lt` | `v1`, `v2` | 小于判定 | `1.0.0`, `2.0.0` | | `eq` | `v1`, `v2` | 相等判定 | `1.0.0`, `1.0.0` | | `gte` | `v1`, `v2` | 大于等于判定 | `1.0.0`, `1.0.0` | | `diff` | `v1`, `v2` | 差异级别（major/minor/patch/prerelease） | `1.0.0`, `2.0.0` | | `parse` | `version` | 解析版本号结构 | `1.2.3-beta.1+build.5` | | `isValid` | `version` | 验证版本号格式 | `1.2.3-beta.1` | | `prerelease 比较` | `v1`, `v2` | 预发布版本排序 | `1.0.0-beta.1`, `1.0.0-beta.2` | | `正式版 > 预发布版` | `v1`, `v2` | 验证正式版优先级更高 | `1.0.0`, `1.0.0-rc.1` | --- ### 24. VersionManager — SPA 版本管理工具 > 前端应用版本检测、更新通知、定时轮询、页面可见性监听 | 方法 | 参数 | 说明 | | --------------------- | ----------------------- | -------------------------- | | `getVersion (本地)` | — | 获取本地版本号 | | `getVersion (远程未拉取)` | — | 未拉取远程时返回本地版本 | | `check (本地模拟 v2)` ⚡ | — | 强制检查版本，模拟 v2 更新 | | `onUpdate 回调` ⚡ | `localVer`, `remoteVer` | 验证版本变化时触发回调 | | `无更新 (版本相同)` ⚡ | — | 版本相同时不触发 onUpdate | | `降级版本 (不触发 update)` ⚡ | — | 远程版本低于本地时不触发更新 | | `事件订阅 on()` ⚡ | — | 验证事件系统（ready/update/check） | | `错误处理 (无效 URL)` ⚡ | — | 无效远程地址的错误捕获 | | `cache + destroy` ⚡ | — | 验证缓存写入和销毁（无定时器泄漏） | > VersionManager 测试使用 `data:` URL 模拟远程版本接口，无需真实网络请求。 --- ## 技术架构 ### 模块加载机制 ```text 浏览器 │ ├─ 加载 HTML（内联 CSS + JS） │ ├─ 动态 import() 模块文件 │ ├─ 24 个 ES Module 路径 │ ├─ 每个模块独立 try/catch │ └─ 失败时输出 console.error，不阻塞其他模块 │ └─ 渲染当前选中面板的测试卡片 ``` ### 测试执行流程 ```text 用户点击「运行」 │ ├─ 收集输入值（遍历 test-input 元素） │ └─ 根据 param.type 智能解析 │ ├─ string → 原样返回 │ ├─ number → Number() 转换 │ ├─ json → JSON.parse() │ └─ boolean → /^(true|1|yes|on)$/i │ ├─ 执行 test.fn(...values) │ ├─ 同步测试 → 直接返回 │ └─ 异步测试 → await 等待 │ ├─ 成功 → 绿色结果区 + JSON.stringify / String 展示 └─ 失败 → 红色结果区 + 错误信息 ``` ### 渲染机制 ```text testGroups 对象 │ ├─ 按模块分组（24 个 key） │ ├─ 每组包含： │ ├─ title 面板标题 │ └─ tests[] 测试用例数组 │ ├─ name 方法名 │ ├─ params 参数定义[] │ │ ├─ label 输入框标签 │ │ ├─ value 默认值 │ │ └─ type 输入类型 │ ├─ async 是否异步 │ └─ fn 执行函数 │ └─ renderPanel() → 动态生成 DOM ``` ### 事件系统 | 事件 | 绑定位置 | 处理逻辑 | | ------ | ---------------------- | ------------------- | | 侧边栏点击 | `.sidebar-item click` | 切换 active 状态，渲染对应面板 | | 运行按钮点击 | `.btn-run click`（事件委托） | 收集参数，执行测试，展示结果 | | 输入框回车 | `.test-input keydown` | 触发当前卡片运行 | | 全部运行 | `#btnRunAll click` | 遍历当前面板所有测试依次执行 | | 清空结果 | `#btnClearAll click` | 重置所有结果区为空状态 | --- ## 输入类型说明 | type | 行为 | 输入框中填写 | 传入 fn 的值 | | ------------ | -------------------------- | --------- | ---------- | | `string`（默认） | 原样传递 | `hello` | `"hello"` | | `number` | `Number()` 转换，NaN 回退为 0 | `42` | `42` | | `json` | `JSON.parse()`，失败回退为默认值 | `{"a":1}` | `{ a: 1 }` | | `boolean` | 匹配 `true/1/yes/on`（不区分大小写） | `true` | `true` | > **JSON 输入技巧**：复杂对象可直接在输入框中编辑 JSON，失败时自动使用测试定义中的默认值。 --- ## 目录结构要求 测试面板通过相对路径加载模块，项目目录应满足以下结构： ```text project/ ├── test-panel.html ← 测试面板（本文档对应的文件） │ ├── regexUtils.js ├── securityUtils.js ├── functionUtils.js ├── browserUtils.js ├── MaskerUtils.js ├── URLUtils.js ├── typeUtils.js ├── stringUtils.js ├── mathUtils.js ├── dateUtils.js ├── objectArrayUtils.js ├── cacheUtils.js ├── logger.js ├── domUtils.js ├── mediaUtils.js ├── notificationUtils.js ├── cameraUtils.js ├── requestUtils.js ├── cookieUtils.js ├── indexDBUtils.js │ ├── crypto/ │ └── cryptoUtils.js │ ├── Concurrency/ │ └── concurrencyUtils.js │ └── version/ ├── versionCompare.js └── VersionManager.js ``` > 模块路径区分大小写（如 `MaskerUtils.js` 和 `./Concurrency/concurrencyUtils.js`）。