diff --git a/README.md b/README.md
index 697ce5e..f96e17e 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,53 @@
# Pandora.js 完整 API 文档
-## 1. 基础工具函数
+## 📖 简介
+
+Pandora.js 是一款专为新手优化的 JavaScript 插件,提供前端开发中常用的功能模块,API 设计简洁,支持链式调用。
+
+### 核心特性
+
+- **轻量级**:零依赖,开箱即用
+- **链式调用**:大多数方法支持链式写法
+- **原生 JS**:基于原生 JavaScript 实现,兼容性好
+- **功能丰富**:涵盖 DOM 操作、网络请求、组件交互等
+
+### 快速开始
+
+```html
+
+
+
+
+
+```
+
+---
+
+## 1️⃣ 基础工具函数
### 1.1 alert - 自定义提示框
-**说明**:重写原生 alert,提供美观的提示效果
+**功能说明**:
+- 提供美观的自定义提示框,替代原生 alert
+- 支持自定义显示时间和主题样式
+- 支持点击遮罩立即关闭
+- 具有平滑的淡入淡出动画效果
**使用方式**:
```javascript
alert(content, speed = 800)
```
-**参数**:
+**参数说明**:
- `content` (string): 提示内容
-- `speed` (number, 可选): 自动消失时间,默认 800ms
+- `speed` (number, 可选): 自动消失时间(毫秒),默认 800ms
**示例**:
```javascript
+// 基础用法
alert('操作成功!')
+
+// 自定义显示时间
alert('加载中...', 2000) // 2秒后消失
```
@@ -31,18 +61,29 @@ alert('加载中...', 2000) // 2秒后消失
}
```
+**全局配置**:
+```javascript
+// 禁用 alert 重写
+window.resetAlert = false
+```
+
---
### 1.2 confirm - 自定义确认框
-**说明**:重写原生 confirm,返回 Promise
+**功能说明**:
+- 提供美观的自定义确认框,替代原生 confirm
+- 返回 Promise 对象,支持异步回调
+- 支持自定义按钮文本、标题和内容
+- 支持显示/隐藏确认和取消按钮
+- 支持主题样式自定义
**使用方式**:
```javascript
confirm(config)
```
-**参数**:
+**参数说明**:
```javascript
{
title: '标题', // 可选
@@ -50,7 +91,9 @@ confirm(config)
confirmText: '确认', // 可选,默认"确认"
cancelText: '取消', // 可选,默认"取消"
showConfirm: true, // 可选,是否显示确认按钮
- showCancel: true // 可选,是否显示取消按钮
+ showCancel: true, // 可选,是否显示取消按钮
+ success() {}, // 可选,确认回调
+ fail() {} // 可选,取消回调
}
```
@@ -68,45 +111,98 @@ confirm({
title: '提示',
content: '是否继续操作?',
confirmText: '继续',
- cancelText: '放弃'
+ cancelText: '放弃',
+ showConfirm: true,
+ showCancel: true
}).then(() => {
- // 确认回调
+ console.log('确认回调')
}).catch(() => {
- // 取消回调
+ console.log('取消回调')
})
+
+// 仅显示确认按钮
+confirm({
+ content: '操作完成',
+ showCancel: false
+}).then(() => {
+ console.log('已确认')
+})
+```
+
+**CSS 变量自定义**:
+```css
+:root {
+ --confirmTheme: #fff; /* 背景色 */
+ --confirmBg: transparent; /* 遮罩色 */
+ --confirmFontSize: 1rem; /* 字体大小 */
+ --confirmColor: #636363; /* 字体颜色 */
+ --confirmBtnBg: #fafafa; /* 按钮背景 */
+ --confirmBtnColor: #636363; /* 按钮文字颜色 */
+ --confirmBtnBorder: #f1f1f1; /* 按钮边框颜色 */
+}
+```
+
+**全局配置**:
+```javascript
+// 禁用 confirm 重写
+window.resetConfirm = false
```
---
### 1.3 showLoading / hideLoading - 加载遮罩
+**功能说明**:
+- 显示全屏加载遮罩层
+- 支持显示进度文字或数字
+- 使用 SVG 加载动画图标
+- 可随时调用 hideLoading 关闭遮罩
+
**使用方式**:
```javascript
-showLoading(progress = null) // progress: 显示进度文字
+showLoading(progress = null)
hideLoading()
```
+**参数说明**:
+- `progress` (string | number, 可选): 显示进度文字或百分比
+
**示例**:
```javascript
+// 基础用法
showLoading()
setTimeout(() => hideLoading(), 2000)
+// 显示进度
showLoading('加载中 50%...')
-setTimeout(() => hideLoading(), 2000)
+setTimeout(() => {
+ showLoading('加载中 80%...')
+ setTimeout(() => hideLoading(), 1000)
+}, 1000)
+
+// 显示数字进度
+showLoading(25) // 显示 25%
```
---
-## 2. DOM 操作
+## 2️⃣ DOM 操作
### 2.1 选择器方法
-**说明**:支持 CSS 选择器语法,类似 jQuery
+**功能说明**:
+- 支持 CSS 选择器语法选择 DOM 元素
+- 返回 Pandora 实例,支持链式调用
+- 支持类选择器、ID 选择器、标签选择器等
+- 支持层级选择器
+
+**使用方式**:
+```javascript
+const $ = Pandora
+```
**示例**:
```javascript
-const $ = Pandora
-
// 基础选择
$('.class') // 类选择器
$('#id') // ID 选择器
@@ -118,15 +214,24 @@ $('#box')
.find('.item')
.eq(0)
.addClass('active')
+ .css({ color: 'red' })
```
---
### 2.2 元素遍历与筛选
+**功能说明**:
+- 支持通过索引选择指定元素
+- 支持选择父级、子级、同级元素
+- 支持遍历元素集合
+- 返回新的 Pandora 实例,支持链式调用
+
+**示例**:
```javascript
// eq(index) - 选择指定下标元素
$('.item').eq(0).text()
+$('.item').eq(2).css('color', 'red')
// child(name) - 选择子级元素
$('#box').child('.item')
@@ -139,6 +244,7 @@ $('.item').parent()
// siblings(name) - 选择同级元素
$('.item').siblings()
+$('.item').siblings('.active')
// prev() - 上一个同级元素
$('.item').prev()
@@ -162,14 +268,23 @@ $('.item').each((el, index) => {
### 2.3 样式操作
+**功能说明**:
+- 支持获取和设置元素样式
+- 支持获取元素位置和尺寸信息
+- 支持显示/隐藏元素
+- 支持淡入淡出动画效果
+
+**示例**:
```javascript
// css(name) - 获取样式
const color = $('#box').css('color')
+const width = $('#box').css('width')
// css({key: value}) - 设置样式
$('#box').css({
'color': 'red',
- 'font-size': '14px'
+ 'font-size': '14px',
+ 'background': '#f0f0f0'
})
// show(callback) - 显示
@@ -181,7 +296,7 @@ $('#box').hide(() => console.log('隐藏完成'))
// fadeIn(speed, callback) - 淡入
$('#box').fadeIn('fast') // fast: 快速
$('#box').fadeIn('slow') // slow: 慢速
-$('#box').fadeIn(5) // 自定义速度
+$('#box').fadeIn(5) // 自定义速度(数字)
// fadeOut(speed, callback) - 淡出
$('#box').fadeOut('fast')
@@ -193,6 +308,7 @@ const rect = $('#box').offset()
// width(width) - 获取/设置宽度
const w = $('#box').width()
$('#box').width('100px')
+$('#box').width('50%')
// height(height) - 获取/设置高度
const h = $('#box').height()
@@ -203,6 +319,13 @@ $('#box').height('100px')
### 2.4 内容操作
+**功能说明**:
+- 支持获取和设置元素的文本内容
+- 支持获取和设置元素的 HTML 内容
+- 支持获取和设置表单元素的值
+- 支持在元素内部追加或前置内容
+
+**示例**:
```javascript
// text(str) - 获取/设置文本
const txt = $('#box').text()
@@ -235,6 +358,13 @@ $('#box').remove()
### 2.5 属性与类名操作
+**功能说明**:
+- 支持获取和设置元素属性
+- 支持移除元素属性
+- 支持添加和移除 CSS 类名
+- 支持检查元素是否包含指定类名
+
+**示例**:
```javascript
// attr(name, value) - 获取/设置属性
const src = $('#img').attr('src')
@@ -246,13 +376,14 @@ $('#box').removeAttr('data-id')
// addClass(name) - 添加类名
$('#box').addClass('active')
+$('#box').addClass('active hidden')
// removeClass(name) - 移除类名
$('#box').removeClass('active')
// hasClass(name) - 检查类名
if ($('#box').hasClass('active')) {
- // ...
+ console.log('包含 active 类')
}
```
@@ -260,6 +391,13 @@ if ($('#box').hasClass('active')) {
### 2.6 事件操作
+**功能说明**:
+- 支持绑定和解绑事件
+- 支持点击、双击、长按等快捷事件
+- 支持主动触发事件
+- 支持焦点获取和失去
+
+**示例**:
```javascript
// bind(eventName, fn, options) - 绑定事件
$('#box').bind('click', function() {
@@ -295,13 +433,25 @@ $('#box').taping(
---
-## 3. 网络请求
+## 3️⃣ 网络请求
### 3.1 ajax - AJAX 请求
+**功能说明**:
+- 支持 GET 和 POST 请求
+- 支持同步和异步请求
+- 支持自定义请求头
+- 支持上传进度监听
+- 支持取消请求
+
**使用方式**:
```javascript
-$('#').ajax({
+$('#').ajax(config)
+```
+
+**参数说明**:
+```javascript
+{
url: '/api/data', // 接口地址
type: 'get', // 请求类型:get/post
async: false, // 是否异步
@@ -320,7 +470,7 @@ $('#').ajax({
error: (err) => { // 失败回调
console.error(err)
}
-})
+}
```
**示例**:
@@ -363,9 +513,20 @@ window.cancelAjax()
### 3.2 fetch - Fetch API 封装
+**功能说明**:
+- 基于 Fetch API 的简洁封装
+- 支持 GET 和 POST 请求
+- 支持自定义返回数据格式化
+- 返回 Promise 对象
+
**使用方式**:
```javascript
-$('#').fetch({
+$('#').fetch(config)
+```
+
+**参数说明**:
+```javascript
+{
url: '/api/data',
type: 'get', // get/post
headers: {
@@ -375,7 +536,7 @@ $('#').fetch({
returnData: (res) => { // 返回数据格式化
return res.json()
}
-})
+}
```
**示例**:
@@ -397,41 +558,65 @@ $('#').fetch({
---
-## 4. 表单操作
+## 4️⃣ 表单操作
### 4.1 serialize - 表单序列化
-**说明**:将表单数据转换为对象
+**功能说明**:
+- 自动遍历表单内所有带 `name` 属性的元素
+- 自动处理 input、select、radio、checkbox 等不同类型
+- 返回键值对对象,便于发送到服务器
**示例**:
```javascript
const formData = $('#form').serialize()
-// { username: 'admin', password: '123456' }
+// { username: 'admin', password: '123456', gender: 'male' }
```
---
### 4.2 setForm - 设置表单值
+**功能说明**:
+- 根据对象键名自动匹配表单元素的 `name` 属性
+- 自动处理 input、select、radio、checkbox 等不同类型
+- 快速填充表单数据
+
**使用方式**:
```javascript
+$('#form').setForm(obj)
+```
+
+**示例**:
+```javascript
$('#form').setForm({
username: 'admin',
password: '123456',
- gender: 'male' // radio
+ gender: 'male', // radio
hobbies: ['reading'] // checkbox
})
```
---
-## 5. 模板渲染
+## 5️⃣ 模板渲染
### 5.1 Mush - Mustache 模板渲染
+**功能说明**:
+- 支持 `{{变量}}` 格式的模板语法
+- 支持数据响应式,数据变化自动更新视图
+- 提供生命周期回调(Init、Update)
+- 简化前端数据绑定操作
+
**使用方式**:
```javascript
-$('#container').Mush({
+$('#container').Mush(config)
+```
+
+**参数说明**:
+```javascript
+{
data: { // 渲染数据
name: '张三',
age: 18
@@ -442,20 +627,32 @@ $('#container').Mush({
Update: (data) => { // 每次更新完成
console.log('数据更新', data)
}
-})
+}
```
-**HTML 模板**:
-```html
+**示例**:
+```javascript
+// HTML 模板
-```
-**动态更新**:
-```javascript
-// 修改数据会自动更新视图
+// 初始化渲染
+$('#container').Mush({
+ data: {
+ name: '张三',
+ age: 18
+ },
+ Init: (data) => {
+ console.log('初始渲染', data)
+ },
+ Update: (data) => {
+ console.log('数据更新', data)
+ }
+})
+
+// 动态更新(会自动更新视图)
$('#container').setData({ name: '李四' })
```
@@ -463,6 +660,12 @@ $('#container').setData({ name: '李四' })
### 5.2 全局数据管理
+**功能说明**:
+- 提供全局数据存储机制
+- 支持设置和获取全局数据
+- 配合 Mush 模板实现数据共享
+
+**示例**:
```javascript
// setData - 设置全局数据
$('#box').setData({
@@ -478,22 +681,57 @@ const userInfo = $('#box').getData('userInfo')
### 5.3 template - 模板加载
+**功能说明**:
+- 从 `` 标签加载 HTML 模板
+- 支持从远程 URL 加载模板
+- 自动加载关联的 CSS 和 JS 文件
+- 简化页面组件化管理
+
**使用方式**:
```javascript
-$('#container').template('home', document.body)
+$('#container').template(route, container)
```
-**HTML 模板定义**:
-```html
+**示例**:
+```javascript
+// HTML 模板定义
+
+// 加载模板
+$('#container').template('home', document.body)
```
---
-## 6. 路由 - Router
+## 6️⃣ 路由 - Router
+
+**功能说明**:
+- 基于 History API 实现单页应用路由
+- 支持路由参数传递
+- 自动处理 `` 标签点击事件
+- 支持路由回调函数
**使用方式**:
```javascript
+$('#app').Router(config)
+```
+
+**参数说明**:
+```javascript
+{
+ routes: [
+ {
+ path: '/',
+ component: '/pages/home.html',
+ callback: (state) => console.log('首页', state)
+ }
+ ]
+}
+```
+
+**示例**:
+```javascript
+// 初始化路由
$('#app').Router({
routes: [
{
@@ -512,15 +750,29 @@ $('#app').Router({
// 跳转路由
$('#app').to('/about')
$('#app').to('/about?id=123')
+
+// 带参数跳转
+$('#app').to('/detail?pid=123&name=test')
```
---
-## 7. 轮播图 - Switcher
+## 7️⃣ 轮播图 - Switcher
+
+**功能说明**:
+- 支持滑动和淡入淡出两种切换效果
+- 支持触摸手势和鼠标滚轮控制
+- 支持自动播放和循环模式
+- 支持分页器和悬浮暂停
**使用方式**:
```javascript
-$('#slider').Switcher({
+$('#slider').Switcher(config)
+```
+
+**参数说明**:
+```javascript
+{
Speed: 1, // 过渡速度(秒)
Curve: 'ease', // 动画曲线
Effect: 'slider', // 切换效果:slider/fade
@@ -535,6 +787,23 @@ $('#slider').Switcher({
Loop: true, // 循环
onChange: (index) => console.log('切换到', index),
AutoResize: true // 窗口变化自动调整
+}
+```
+
+**示例**:
+```javascript
+$('#slider').Switcher({
+ Speed: 1,
+ Curve: 'ease',
+ Effect: 'slider',
+ Direction: 'horizontal',
+ AutoSpeed: 3,
+ Pagination: true,
+ Hover: true,
+ Loop: true,
+ onChange: (index) => {
+ console.log('切换到', index)
+ }
})
// 控制方法
@@ -556,11 +825,21 @@ $('#slider').enable() // 启用
---
-## 8. 响应式 - AutoSize
+## 8️⃣ 响应式 - AutoSize
+
+**功能说明**:
+- 自动计算并设置 ``
+- 根据屏幕尺寸设置根元素字体大小
+- 支持窗口变化时重新计算
**使用方式**:
```javascript
-$('#').AutoSize({
+$('#').AutoSize(config)
+```
+
+**参数说明**:
+```javascript
+{
PageSize: 'device-width', // 固定尺寸
InitScale: 1, // 初始缩放
MinScale: 1, // 最小缩放
@@ -568,16 +847,37 @@ $('#').AutoSize({
Ratio: window.devicePixelRatio, // DPI缩放
Resize: true, // 窗口变化重新计算
ScaleFont: true // 缩放字体大小
+}
+```
+
+**示例**:
+```javascript
+$('#').AutoSize({
+ PageSize: 'device-width',
+ Ratio: window.devicePixelRatio,
+ Resize: true,
+ ScaleFont: true
})
```
---
-## 9. 弹框 - Dialog
+## 9️⃣ 弹框 - Dialog
+
+**功能说明**:
+- 创建遮罩层和弹框元素
+- 支持多种进出动画效果(无、缩放、从上/下方进入)
+- 支持点击遮罩关闭
+- 支持确认和取消按钮回调
**使用方式**:
```javascript
-$('#dialog').Dialog({
+$('#dialog').Dialog(config)
+```
+
+**参数说明**:
+```javascript
+{
mask: true, // 显示遮罩
maskColor: 'rgba(0,0,0,.85)',
maskOut: true, // 点击遮罩退出
@@ -600,6 +900,29 @@ $('#dialog').Dialog({
close()
}
}
+}
+```
+
+**示例**:
+```javascript
+$('#dialog').Dialog({
+ mask: true,
+ maskOut: true,
+ Direction: 'zoom',
+ Confirm: {
+ btn: '.confirm-btn',
+ callback: ({ close }) => {
+ console.log('确认')
+ close()
+ }
+ },
+ Cancel: {
+ btn: '.cancel-btn',
+ callback: ({ close }) => {
+ console.log('取消')
+ close()
+ }
+ }
})
// 打开弹框
@@ -620,13 +943,24 @@ $('#dialog').close()
---
-## 10. 图片处理
+## 🔟 图片处理
### 10.1 ImgLoader - 图片预加载
+**功能说明**:
+- 自动解析 HTML 获取所有图片地址
+- 使用 `Promise.all` 批量加载图片
+- 支持 CSS 背景图加载
+- 支持容器内和全局两种模式
+
**使用方式**:
```javascript
-$('#container').ImgLoader({
+$('#container').ImgLoader(config)
+```
+
+**参数说明**:
+```javascript
+{
lazy: true, // 渐进式
loading: (progress) => { // 加载进度
console.log(progress + '%')
@@ -637,6 +971,30 @@ $('#container').ImgLoader({
error: (err) => { // 加载错误
console.error(err)
}
+}
+```
+
+**示例**:
+```javascript
+// 容器内图片预加载
+$('#container').ImgLoader({
+ lazy: true,
+ loading: (progress) => {
+ showLoading(`加载中 ${progress}%`)
+ },
+ callback: () => {
+ hideLoading()
+ },
+ error: (err) => {
+ alert('加载失败')
+ }
+})
+
+// 全局图片预加载
+$().ImgLoader({
+ lazy: false,
+ loading: (progress) => console.log(progress + '%'),
+ callback: () => console.log('加载完成')
})
```
@@ -644,9 +1002,20 @@ $('#container').ImgLoader({
### 10.2 ImgUpload - 图片上传
+**功能说明**:
+- 使用 `FormData` 上传文件
+- 支持图片压缩和尺寸裁切
+- 支持拖拽上传
+- 支持多文件上传
+
**使用方式**:
```javascript
-$('#upload').ImgUpload({
+$('#upload').ImgUpload(config)
+```
+
+**参数说明**:
+```javascript
+{
apiUrl: '/api/upload', // 接口地址
Format: '*', // 格式限制:jpg/png/gif/*
type: 'default', // 选择类型:default/camera
@@ -665,6 +1034,27 @@ $('#upload').ImgUpload({
fail: () => console.log('上传失败')
},
Uid: 'user_123' // 唯一ID
+}
+```
+
+**示例**:
+```javascript
+$('#upload').ImgUpload({
+ apiUrl: '/api/upload',
+ Max: 5,
+ Quality: 80,
+ Events: {
+ ready: () => showLoading(),
+ progress: (p) => showLoading(`上传中 ${p}%`),
+ success: (data) => {
+ hideLoading()
+ $('#preview').append(`
`)
+ },
+ fail: () => {
+ hideLoading()
+ alert('上传失败')
+ }
+ }
})
```
@@ -679,9 +1069,20 @@ $('#upload').ImgUpload({
### 10.3 ImgTransit - 图片移动缩放
+**功能说明**:
+- 支持图片移动、缩放、旋转操作
+- 支持多点触控手势
+- 支持边界限制
+- 提供控制图标和边框显示
+
**使用方式**:
```javascript
-$('#container').ImgTransit({
+$('#container').ImgTransit(config)
+```
+
+**参数说明**:
+```javascript
+{
icon: true, // 显示控制图标
iconSize: 30, // 图标大小
border: true, // 显示边框
@@ -703,6 +1104,20 @@ $('#container').ImgTransit({
callback: (data) => { // 操作回调
console.log(data.type, data.obj)
}
+}
+```
+
+**示例**:
+```javascript
+$('#container').ImgTransit({
+ icon: true,
+ scale: { enable: true, min: 50, max: 200 },
+ rotate: { enable: true },
+ delete: true,
+ bounds: true,
+ callback: (data) => {
+ console.log('操作类型:', data.type)
+ }
})
```
@@ -718,12 +1133,31 @@ $('#container').ImgTransit({
### 10.4 LazyLoad - 懒加载
+**功能说明**:
+- 监听滚动事件检测元素位置
+- 当图片进入视口时延迟加载
+- 支持自定义缺省尺寸和图标
+
**使用方式**:
```javascript
-$('#container').LazyLoad({
+$('#container').LazyLoad(config)
+```
+
+**参数说明**:
+```javascript
+{
width: 100, // 缺省尺寸
height: 100,
icon: '/loader.svg' // 缺省图标
+}
+```
+
+**示例**:
+```javascript
+$('#container').LazyLoad({
+ width: 200,
+ height: 150,
+ icon: '/loader.svg'
})
```
@@ -737,11 +1171,21 @@ $('#container').LazyLoad({
---
-## 11. 微信 SDK - wxSDK
+## 1️⃣1️⃣ 微信 SDK - wxSDK
+
+**功能说明**:
+- 动态加载微信 JS-SDK
+- 配置微信分享参数
+- 支持服务端签名
**使用方式**:
```javascript
-$('#').wxSDK({
+$('#').wxSDK(config)
+```
+
+**参数说明**:
+```javascript
+{
apiUrl: '/api/wechat/sign', // 获取签名接口
sdk: 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js',
title: ['分享至朋友圈', '分享至好友'],
@@ -756,30 +1200,76 @@ $('#').wxSDK({
success: () => console.log('分享成功'),
error: () => console.log('分享失败')
}
+}
+```
+
+**示例**:
+```javascript
+$('#').wxSDK({
+ apiUrl: '/api/wechat/sign',
+ title: ['分享标题', '分享标题'],
+ desc: '分享描述',
+ shareIcon: 'https://example.com/icon.jpg',
+ shareLinks: window.location.href,
+ debug: false,
+ jsApiList: ['chooseImage', 'previewImage'],
+ callback: {
+ ready: () => console.log('分享就绪'),
+ success: () => console.log('分享成功'),
+ error: () => console.log('分享失败')
+ }
})
```
---
-## 12. OSS 上传 - ossUpload
+## 1️⃣2️⃣ OSS 上传 - ossUpload
+
+**功能说明**:
+- 使用阿里云 OSS 客户端签名上传
+- 支持文件大小限制
+- 支持上传进度监听
**使用方式**:
```javascript
-const uploader = $('#').ossUpload({
+const uploader = $('#').ossUpload(config)
+uploader.start(options)
+```
+
+**参数说明**:
+```javascript
+{
AccessId: 'your-access-id',
AccessKey: 'your-access-key',
Endpoint: 'https://bucket.oss-cn-hangzhou.aliyuncs.com',
maxSize: 2 // MB
-})
+}
-// 上传文件
-uploader.start({
+// start 参数
+{
fileObj: file,
fileName: 'image',
dirName: 'images',
headers: null,
async: true,
progress: (p) => console.log(p + '%')
+}
+```
+
+**示例**:
+```javascript
+const uploader = $('#').ossUpload({
+ AccessId: 'your-access-id',
+ AccessKey: 'your-access-key',
+ Endpoint: 'https://bucket.oss-cn-hangzhou.aliyuncs.com',
+ maxSize: 2
+})
+
+uploader.start({
+ fileObj: file,
+ fileName: 'image',
+ dirName: 'images',
+ progress: (p) => console.log(p + '%')
}).then(res => {
console.log('上传成功', res.url)
}).catch(err => {
@@ -789,18 +1279,29 @@ uploader.start({
---
-## 13. 工具方法
+## 1️⃣3️⃣ 工具方法
### 13.1 guid - 生成唯一ID
+**功能说明**:
+- 生成 UUID 格式的唯一标识符
+- 每个实例自动分配唯一 ID
+
+**示例**:
```javascript
$('#box').pid // 获取当前实例的GUID
+// 例如: PandoraEX_3a4b-5c6d-7e8f-9a0b-1c2d3e4f5a6b
```
---
### 13.2 extend - 对象合并
+**功能说明**:
+- 将默认配置与用户配置合并
+- 实现配置对象的扩展
+
+**示例**:
```javascript
const config = $('#box').extend({ a: 1 }, { b: 2 })
// { a: 1, b: 2 }
@@ -810,6 +1311,11 @@ const config = $('#box').extend({ a: 1 }, { b: 2 })
### 13.3 getParams - URL参数解析
+**功能说明**:
+- 解析 URL 查询字符串
+- 返回键值对对象
+
+**示例**:
```javascript
const params = $('#box').getParams()
// URL: ?id=123&name=test
@@ -820,6 +1326,10 @@ const params = $('#box').getParams()
### 13.4 Array - 数组工具
+**功能说明**:
+- 提供数组随机打乱、判断重复、求和等常用操作
+
+**示例**:
```javascript
// 随机打乱
const shuffled = $('#box').Array.Random()
@@ -833,7 +1343,7 @@ const sum = $('#box').Array.Sum()
---
-## 14. 全局配置
+## 1️⃣4️⃣ 全局配置
### 禁用原生重写
@@ -844,7 +1354,7 @@ window.resetConfirm = false // 禁用 confirm 重写
---
-## 15. 最佳实践示例
+## 1️⃣5️⃣ 最佳实践示例
### 15.1 完整的 CRUD 操作
@@ -1010,7 +1520,7 @@ $('.nav-item').click((el) => {
---
-## 注意事项
+## 📝 注意事项
1. **浏览器兼容性**:支持现代浏览器,需要 ES6 支持
2. **依赖文件**:需要 `base64.js` 和 `icoConfig.json`
@@ -1020,4 +1530,10 @@ $('.nav-item').click((el) => {
---
-*文档版本:1.0.0*
\ No newline at end of file
+## 📄 许可证
+
+详见 LICENSE 文件
+
+---
+
+*文档版本:2.0.0*
\ No newline at end of file