sky-tools-utils
v1.0.4
Published
一个现代化的前端工具函数库,提供丰富的实用工具函数
Maintainers
Readme
Sky Tools
一个现代化的前端工具函数库,提供丰富的实用工具函数
📖 使用文档 | 🚀 快速开始 | 💡 示例 | 🧪 在线测试
✨ 特性
- 🚀 轻量级 - 无外部依赖,体积小巧
- 📦 多格式支持 - ES Module、CommonJS、UMD 全覆盖
- 🔧 TypeScript 原生支持 - 完整的类型定义和智能提示
- 🧪 测试覆盖完整 - 每个函数都有对应的单元测试
- 📖 文档详尽 - 详细的使用文档和在线示例
- ⚡ 性能优化 - 包含防抖、节流、记忆化等性能工具
- 🌐 浏览器兼容 - 支持现代浏览器和 Node.js 环境
- 🎯 按需引入 - 支持 Tree Shaking,只打包使用的函数
安装
NPM 安装
npm install sky-tools-utilsCDN 引入
<!-- UMD 版本 -->
<script src="https://unpkg.com/sky-tools-utils/dist/index.umd.js"></script>
<!-- ES Module 版本 -->
<script type="module">
import { capitalize } from 'https://unpkg.com/sky-tools-utils/dist/index.esm.js';
</script>使用方式
ES Module
// 按需引入
import { capitalize, unique, formatDate } from 'sky-tools-utils';
// 全量引入
import SkyTools from 'sky-tools-utils';
console.log(capitalize('hello world')); // Hello world
console.log(unique([1, 2, 2, 3])); // [1, 2, 3]CommonJS
const { capitalize, unique } = require('sky-tools-utils');
// 或
const SkyTools = require('sky-tools-utils');UMD (浏览器直接引入)
<script src="https://unpkg.com/sky-tools-utils/dist/index.umd.js"></script>
<script>
console.log(SkyTools.string.capitalize('hello')); // Hello
console.log(SkyTools.array.unique([1, 2, 2, 3])); // [1, 2, 3]
</script>API 文档
字符串工具 (String Utils)
capitalize(str)- 首字母大写camelCase(str)- 转换为驼峰命名kebabCase(str)- 转换为短横线命名snakeCase(str)- 转换为下划线命名truncate(str, length, suffix)- 截断字符串stripHtml(str)- 移除HTML标签randomString(length, chars)- 生成随机字符串
数组工具 (Array Utils)
unique(arr)- 数组去重chunk(arr, size)- 数组分块flatten(arr)- 数组扁平化shuffle(arr)- 数组随机排序intersection(arr1, arr2)- 获取数组交集difference(arr1, arr2)- 获取数组差集groupBy(arr, key)- 数组分组
对象工具 (Object Utils)
deepClone(obj)- 深拷贝对象merge(target, ...sources)- 对象合并get(obj, path, defaultValue)- 获取对象深层属性值set(obj, path, value)- 设置对象深层属性值getPaths(obj)- 获取对象所有键的路径
日期工具 (Date Utils)
formatDate(date, format)- 格式化日期getRelativeTime(date)- 获取相对时间描述isToday(date)- 判断是否为今天getDateRange(startDate, endDate)- 获取日期范围addTime(date, amount, unit)- 添加时间
数字工具 (Number Utils)
formatNumber(num, separator)- 格式化数字randomNumber(min, max)- 生成随机数toFixed(num, digits)- 保留小数位数numberToChinese(num)- 数字转中文isEven(num)- 判断是否为偶数isOdd(num)- 判断是否为奇数percentage(value, total, digits)- 计算百分比
DOM 工具 (DOM Utils)
$(selector)- 获取元素$$(selector)- 获取所有匹配元素addClass/removeClass/toggleClass/hasClass- 类名操作setStyle(element, styles)- 设置样式getElementPosition(element)- 获取元素位置scrollTo/scrollToElement- 滚动操作
存储工具 (Storage Utils)
setLocalStorage/getLocalStorage/removeLocalStorage- localStorage 操作setSessionStorage/getSessionStorage- sessionStorage 操作setStorageWithExpiry/getStorageWithExpiry- 带过期时间的存储
URL 工具 (URL Utils)
parseUrlParams(url)- 解析URL参数buildUrlParams(params)- 构建URL参数addUrlParams/removeUrlParams- 添加/移除URL参数getUrlParam(key)- 获取URL参数isValidUrl(str)- 验证URL格式
验证工具 (Validator Utils)
isEmail(email)- 验证邮箱格式isPhone(phone)- 验证手机号格式isIdCard(idCard)- 验证身份证号格式isStrongPassword(password)- 验证密码强度isUrl/isIP/isNumeric/isChinese/isBankCard- 各种格式验证
性能工具 (Performance Utils) 🆕
debounce(func, wait, immediate)- 防抖函数throttle(func, limit)- 节流函数deepEqual(a, b)- 深度比较memoize(fn, getKey)- 记忆化函数delay(ms)- 延迟执行retry(fn, maxAttempts, delayMs)- 重试机制
UUID 工具 (UUID Utils) 🆕
generateUUID()- 生成标准UUID v4格式generateShortId()- 生成32位短ID(无连字符)generateCustomId(length, options)- 自定义长度和字符类型的IDgenerateTimestampId()- 带时间戳的唯一IDgenerateHighPrecisionId()- 高精度时间戳IDgenerateBase62Id(length)- Base62编码ID(更紧凑)generateObjectId()- MongoDB风格的ObjectIdisValidUUID(uuid)- 验证UUID格式generateUUIDs(count)- 批量生成UUID
📊 工具函数总览
| 模块 | 函数数量 | 主要功能 | |------|----------|----------| | 字符串 | 7 | 格式转换、截断、随机生成 | | 数组 | 7 | 去重、分块、排序、集合运算 | | 对象 | 6 | 深拷贝、合并、路径操作 | | 日期 | 5 | 格式化、相对时间、范围计算 | | 数字 | 7 | 格式化、随机数、中文转换 | | DOM | 10 | 元素操作、样式设置、滚动 | | 存储 | 8 | localStorage、sessionStorage、过期管理 | | URL | 6 | 参数解析、构建、验证 | | 验证 | 9 | 邮箱、手机、身份证等验证 | | 性能 | 6 | 防抖、节流、记忆化、重试 | | UUID | 9 | UUID生成、自定义ID、格式验证 |
总计:80+ 个实用工具函数
🚀 快速示例
import {
capitalize, unique, formatDate,
debounce, isEmail, formatNumber,
generateUUID, generateCustomId
} from 'sky-tools-utils';
// 字符串处理
capitalize('hello world'); // "Hello world"
// 数组去重
unique([1, 2, 2, 3, 4, 4]); // [1, 2, 3, 4]
// 日期格式化
formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'); // "2023-12-25 10:30:45"
// 防抖函数
const debouncedSearch = debounce((query) => {
console.log('搜索:', query);
}, 300);
// 邮箱验证
isEmail('[email protected]'); // true
// 数字格式化
formatNumber(1234567); // "1,234,567"
// UUID生成
generateUUID(); // "550e8400-e29b-41d4-a716-446655440000"
// 自定义ID生成
generateCustomId(8, { includeNumbers: true, includeUppercase: false }); // "a7b2c9d4"🛠️ 开发
# 安装依赖
npm install --legacy-peer-deps
# 开发模式(监听文件变化)
npm run dev
# 构建生产版本
npm run build
# 运行测试
npm run test
# 测试覆盖率
npm run test:coverage
# 代码检查
npm run lint
# 修复代码格式
npm run lint:fix
# 类型检查
npm run type-check
# 完整验证(类型检查 + 代码检查 + 测试)
npm run validate📁 项目结构
sky-tools/
├── src/
│ ├── utils/ # 工具函数模块
│ │ ├── __tests__/ # 测试文件
│ │ ├── string.ts # 字符串工具
│ │ ├── array.ts # 数组工具
│ │ ├── object.ts # 对象工具
│ │ ├── date.ts # 日期工具
│ │ ├── number.ts # 数字工具
│ │ ├── dom.ts # DOM 工具
│ │ ├── storage.ts # 存储工具
│ │ ├── url.ts # URL 工具
│ │ ├── validator.ts # 验证工具
│ │ └── performance.ts # 性能工具
│ ├── index.ts # 主入口文件
│ └── setupTests.ts # 测试配置
├── examples/
│ └── index.html # 交互式示例
├── dist/ # 构建输出目录
├── test-browser.html # 浏览器测试页面
├── USAGE.md # 详细使用文档
└── 配置文件...🤝 贡献
欢迎提交 Issue 和 Pull Request!
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
📄 许可证
本项目基于 MIT License 开源协议。
🔗 相关链接
如果这个项目对你有帮助,请给个 ⭐️ Star 支持一下!
Made with ❤️ by Sky Tools Team
