js-utils-toolkit-pro

一个功能丰富的JavaScript工具函数库，兼容Vue2、Vue3、React17、React18等主流框架。

功能特性

• 📅 日期时间工具 - 格式化、解析、计算日期
• 📝 字符串工具 - 字符串处理、验证、转换
• 📊 数组工具 - 数组操作、过滤、排序
• 🗂️ 对象工具 - 对象操作、深拷贝、合并
• 🌐 HTTP工具 - HTTP请求、URL处理
• 🔐 加密工具 - 哈希、加密解密
• ✅ 验证工具 - 数据验证、类型检查
• 🛠️ 常用工具 - 防抖、节流、格式化等
• 🔧 框架兼容工具 - Vue2/3、React17/18兼容
• 📋 剪贴板工具 - 复制文案、图片等
• 🎯 DOM工具 - DOM操作、事件处理

安装

npm

npm install js-utils-toolkit-pro-pro

yarn

yarn add js-utils-toolkit-pro-pro

pnpm

pnpm add js-utils-toolkit-pro-pro

使用

完整导入

import * as Utils from 'js-utils-toolkit-pro'-pro';

// 使用工具函数
console.log(Utils.formatDate(new Date(), 'YYYY-MM-DD'));
console.log(Utils.capitalize('hello world'));
await Utils.copyText('要复制的文本');

按需导入

// 导入特定工具函数
import * as Utils from 'js-utils-toolkit-pro'-pro';

// 导入特定模块
import * as Utils from 'js-utils-toolkit-pro'-pro/date';
import * as Utils from 'js-utils-toolkit-pro'-pro/clipboard';
import * as Utils from 'js-utils-toolkit-pro'-pro/framework';

CommonJS

const Utils = require('js-utils-toolkit-pro');

// 使用工具函数
console.log(Utils.formatDate(new Date(), 'YYYY-MM-DD'));

浏览器直接使用

<script src="https://unpkg.com/js-utils-toolkit-pro/dist/index.min.js"></script>
<script>
  // 使用全局变量
  console.log(JsUtilsToolkit.formatDate(new Date(), 'YYYY-MM-DD'));
</script>

工具函数分类

1. 日期时间工具

import { formatDate, parseDate, getRelativeTime, getDaysDiff } from 'js-utils-toolkit-pro/date';

// 格式化日期
formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'); // "2024-01-01 12:00:00"

// 解析日期字符串
parseDate('2024-01-01', 'YYYY-MM-DD'); // Date对象

// 获取相对时间
getRelativeTime('2024-01-01 10:00:00'); // "2小时前"

// 计算天数差
getDaysDiff('2024-01-01', '2024-01-10'); // 9

2. 字符串工具

import { capitalize, camelToSnake, truncate, isValidEmail } from 'js-utils-toolkit-pro/string';

// 首字母大写
capitalize('hello world'); // "Hello world"

// 驼峰转下划线
camelToSnake('userName'); // "user_name"

// 截断字符串
truncate('这是一段很长的文本', 10); // "这是一段很长的..."

// 验证邮箱
isValidEmail('[email protected]'); // true

3. 数组工具

import { unique, groupBy, sortBy, chunk } from 'js-utils-toolkit-pro/array';

// 数组去重
unique([1, 2, 2, 3, 3, 4]); // [1, 2, 3, 4]

// 数组分组
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 }
];
groupBy(users, 'age'); // { 25: [...], 30: [...] }

// 数组排序
sortBy(users, 'age', 'desc'); // 按年龄降序排列

// 数组分块
chunk([1, 2, 3, 4, 5, 6], 2); // [[1, 2], [3, 4], [5, 6]]

4. 对象工具

import { deepClone, merge, get, set } from 'js-utils-toolkit-pro/object';

// 深拷贝对象
const obj = { a: 1, b: { c: 2 } };
const cloned = deepClone(obj);

// 合并对象
merge({ a: 1 }, { b: 2 }, { c: 3 }); // { a: 1, b: 2, c: 3 }

// 获取嵌套属性
get({ user: { name: 'Alice' } }, 'user.name'); // "Alice"

// 设置嵌套属性
set({}, 'user.name', 'Alice'); // { user: { name: 'Alice' } }

5. HTTP工具

import { http, createHttpClient, parseURL } from 'js-utils-toolkit-pro/http';

// 创建HTTP客户端
const api = createHttpClient('https://api.example.com');

// GET请求
const data = await api.get('/users', { page: 1, limit: 10 });

// POST请求
const result = await api.post('/users', { name: 'Alice', age: 25 });

// 解析URL
parseURL('https://example.com/path?param=value');

6. 加密工具

import * as Utils from 'js-utils-toolkit-pro'-pro/crypto';

// SHA-256哈希
const hash = await sha256('password');

// AES加密
const encrypted = await aesEncrypt('secret text', 'key');

// AES解密
const decrypted = await aesDecrypt(encrypted, 'key');

// 生成JWT
const token = generateJWT({ userId: 123 }, 'secret');

7. 验证工具

import * as Utils from 'js-utils-toolkit-pro'-pro/validate';

// 验证邮箱
isValidEmail('[email protected]'); // true

// 验证手机号
isValidPhone('13800138000'); // true

// 验证对象
const schema = {
  name: { required: true, type: 'string', minLength: 2 },
  age: { type: 'number', min: 0, max: 150 },
  email: { type: 'email' }
};

const result = validateObject({
  name: 'Alice',
  age: 25,
  email: '[email protected]'
}, schema);

8. 常用工具

import * as Utils from 'js-utils-toolkit-pro'-pro/common';

// 防抖函数
const debouncedSearch = debounce(searchFunction, 300);

// 节流函数
const throttledScroll = throttle(scrollFunction, 100);

// 格式化文件大小
formatFileSize(1024); // "1 KB"

// 复制到剪贴板
await copyToClipboard('要复制的文本');

9. 框架兼容工具

import * as Utils from 'js-utils-toolkit-pro'-pro/framework';

// 检测当前框架
const framework = detectFramework();
console.log(framework); // { vue: true, vueVersion: '3.0.0', ... }

// 创建事件总线（Vue2/3兼容）
const eventBus = createEventBus();
eventBus.on('user-login', (user) => {
  console.log('用户登录:', user);
});

// 响应式数据转换（Vue2/3兼容）
const reactiveData = toReactive({ count: 0 });

10. 剪贴板工具

import * as Utils from 'js-utils-toolkit-pro'-pro/clipboard';

// 复制文本
await copyText('要复制的文本');

// 复制HTML内容
await copyHTML('<h1>标题</h1>', '标题');

// 复制图片
await copyImageFromUrl('https://example.com/image.jpg');

// 创建复制按钮
const button = createCopyButton('要复制的文本', {
  buttonText: '复制',
  successText: '已复制'
});

// 为元素添加复制功能
addCopyToElement(document.querySelector('.content'), {
  buttonText: '复制内容'
});

11. DOM工具

import * as Utils from 'js-utils-toolkit-pro'-pro/dom';

// 选择元素
const element = $('.my-class');
const elements = $$('.my-class');

// 添加类名
addClass(element, 'active');

// 事件委托
const removeListener = delegate(document.body, '.btn', 'click', (e, target) => {
  console.log('按钮被点击:', target);
});

// 等待元素出现
const newElement = await waitForElement('.dynamic-content');

// 表单操作
const formData = getFormData(document.querySelector('form'));
setFormData(document.querySelector('form'), { name: 'Alice', age: 25 });

框架兼容性

Vue2/Vue3 兼容

// 自动检测Vue版本并使用相应的API
import * as Utils from 'js-utils-toolkit-pro'-pro/framework';

const { vue, vueVersion } = detectFramework();

if (vue) {
  // 响应式数据（自动适配Vue2/3）
  const reactiveData = toReactive({ count: 0 });
  
  // 事件总线（Vue2使用Vue实例，Vue3使用mitt）
  const eventBus = createEventBus();
}

React17/React18 兼容

import * as Utils from 'js-utils-toolkit-pro'-pro/framework';

const { react, reactVersion } = detectFramework();

if (react) {
  // 获取React组件实例（兼容React17/18）
  const instance = getReactInstance(componentRef.current);
}

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

注意事项

1. 加密功能：部分加密功能使用了Web Crypto API，需要HTTPS环境或localhost
2. 异步函数：加密相关的函数都是异步的，需要使用await或.then()
3. 浏览器API：某些功能依赖浏览器API，在Node.js环境中可能不可用
4. 剪贴板API：现代剪贴板API需要HTTPS环境，会自动降级到传统方法
5. 框架检测：框架兼容工具会自动检测当前环境，无需手动配置

使用示例

Vue3 组件中使用

<template>
  <div>
    <button @click="copyContent">复制内容</button>
    <div ref="contentRef">要复制的内容</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as Utils from 'js-utils-toolkit-pro'';

const contentRef = ref(null);

const copyContent = async () => {
  await copyText('要复制的内容');
};

onMounted(() => {
  // 为元素添加复制按钮
  addCopyToElement(contentRef.value, {
    buttonText: '复制',
    buttonPosition: 'after'
  });
});
</script>

React 组件中使用

import React, { useEffect, useRef } from 'react';
import * as Utils from 'js-utils-toolkit-pro'';

function MyComponent() {
  const contentRef = useRef(null);

  const handleCopy = async () => {
    await copyText('要复制的内容');
  };

  useEffect(() => {
    if (contentRef.current) {
      addCopyToElement(contentRef.current, {
        buttonText: '复制',
        buttonPosition: 'after'
      });
    }
  }, []);

  return (
    <div>
      <button onClick={handleCopy}>复制内容</button>
      <div ref={contentRef}>要复制的内容</div>
    </div>
  );
}

开发

安装依赖

npm install
# 或
yarn install
# 或
pnpm install

构建

npm run build

开发模式

npm run dev

测试

npm test

代码格式化

npm run format

代码检查

npm run lint

发布到npm

1. 登录npm账号

npm login

2. 发布包

npm publish

3. 更新版本

npm version patch  # 补丁版本
npm version minor  # 次要版本
npm version major  # 主要版本

贡献

欢迎提交Issue和Pull Request来改进这个工具库。

许可证

MIT License