npm package: @sunzan/js-utils-toolkit-pro
Description: 一个功能丰富的JavaScript工具函数库，兼容Vue2、Vue3、React17、React18等主流框架
Author: sunzan
Latest version: 2.0.0

# js-utils-toolkit-pro

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

## 功能特性

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

## 安装

### npm
```bash
npm install js-utils-toolkit-pro-pro
```

### yarn
```bash
yarn add js-utils-toolkit-pro-pro
```

### pnpm
```bash
pnpm add js-utils-toolkit-pro-pro
```

## 使用

### 完整导入
```javascript
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('要复制的文本');
```

### 按需导入
```javascript
// 导入特定工具函数
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
```javascript
const Utils = require('js-utils-toolkit-pro');

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

### 浏览器直接使用
```html
<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. 日期时间工具

```javascript
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. 字符串工具

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

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

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

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

// 验证邮箱
isValidEmail('test@example.com'); // true
```

### 3. 数组工具

```javascript
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. 对象工具

```javascript
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工具

```javascript
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. 加密工具

```javascript
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. 验证工具

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

// 验证邮箱
isValidEmail('test@example.com'); // 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: 'alice@example.com'
}, schema);
```

### 8. 常用工具

```javascript
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. 框架兼容工具

```javascript
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. 剪贴板工具

```javascript
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工具

```javascript
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 兼容

```javascript
// 自动检测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 兼容

```javascript
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 组件中使用

```vue
<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 组件中使用

```jsx
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>
  );
}
```

## 开发

### 安装依赖
```bash
npm install
# 或
yarn install
# 或
pnpm install
```

### 构建
```bash
npm run build
```

### 开发模式
```bash
npm run dev
```

### 测试
```bash
npm test
```

### 代码格式化
```bash
npm run format
```

### 代码检查
```bash
npm run lint
```

## 发布到npm

1. 登录npm账号
```bash
npm login
```

2. 发布包
```bash
npm publish
```

3. 更新版本
```bash
npm version patch  # 补丁版本
npm version minor  # 次要版本
npm version major  # 主要版本
```

## 贡献

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

## 许可证

MIT License