jsly 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +171 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,13 +4,182 @@
|
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### npm 安装
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install jsly
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
###
|
|
13
|
+
### cdn 引入
|
|
14
14
|
```html
|
|
15
15
|
<script src="https://cdn.jsdelivr.net/npm/jsly@<version>/dist/index.umd.js"></script>
|
|
16
|
+
```
|
|
17
|
+
引入后,全局对象 `Jsly` 将包含所有工具函数。
|
|
18
|
+
|
|
19
|
+
## 使用示例
|
|
20
|
+
|
|
21
|
+
### 防抖函数
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
import { debounce } from 'jsly'
|
|
25
|
+
|
|
26
|
+
// 防抖函数示例
|
|
27
|
+
const handler = debounce(() => console.log('Debounced!'), 300)
|
|
28
|
+
window.addEventListener('resize', handler)
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 节流函数
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import { throttle } from 'jsly'
|
|
36
|
+
|
|
37
|
+
const handler = throttle(() => console.log('Throttled!'), 300)
|
|
38
|
+
window.addEventListener('scroll', handler)
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### SHA-256 加密
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
import { sha256 } from 'jsly'
|
|
46
|
+
|
|
47
|
+
const hash = sha256('hello world')
|
|
48
|
+
console.log(hash)
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### UUID SHA-256 哈希
|
|
53
|
+
|
|
54
|
+
```javascript
|
|
55
|
+
import { randomHash } from 'jsly'
|
|
56
|
+
|
|
57
|
+
// 默认 v1 UUID
|
|
58
|
+
console.log(randomHash())
|
|
59
|
+
|
|
60
|
+
// v1 UUID
|
|
61
|
+
console.log(randomHash('v1'))
|
|
62
|
+
|
|
63
|
+
// v2 UUID
|
|
64
|
+
console.log(randomHash('v2'))
|
|
65
|
+
|
|
66
|
+
// v3 UUID
|
|
67
|
+
console.log(randomHash('v3'))
|
|
68
|
+
|
|
69
|
+
// v4 UUID
|
|
70
|
+
console.log(randomHash('v4'))
|
|
71
|
+
|
|
72
|
+
// v5 UUID
|
|
73
|
+
console.log(randomHash('v5'))
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 浏览器指纹 ID
|
|
78
|
+
|
|
79
|
+
```javascript
|
|
80
|
+
import { generateBrowserId } from 'jsly'
|
|
81
|
+
|
|
82
|
+
const browserId = generateBrowserId()
|
|
83
|
+
console.log(browserId) // 64 位 SHA-256 哈希
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 对象构建 FormData
|
|
88
|
+
|
|
89
|
+
```javascript
|
|
90
|
+
import { buildObjFormData } from 'jsly'
|
|
91
|
+
|
|
92
|
+
const formData = buildObjFormData({
|
|
93
|
+
name: 'John',
|
|
94
|
+
files: [file1, file2],
|
|
95
|
+
date: new Date(),
|
|
96
|
+
extra: null
|
|
97
|
+
})
|
|
98
|
+
|
|
99
|
+
console.log(formData)
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### 剪贴板复制
|
|
104
|
+
|
|
105
|
+
```javascript
|
|
106
|
+
import { copyToClipboard, copyByClipboardAPI, copyByExecCommand } from 'jsly'
|
|
107
|
+
|
|
108
|
+
// 1️⃣ 自动选择最佳方案复制
|
|
109
|
+
await copyToClipboard('Hello World!')
|
|
110
|
+
console.log('Text copied to clipboard!')
|
|
111
|
+
|
|
112
|
+
// 2️⃣ 直接使用 Clipboard API(现代浏览器推荐)
|
|
113
|
+
try {
|
|
114
|
+
await copyByClipboardAPI('Hello Clipboard API!')
|
|
115
|
+
console.log('Copied via Clipboard API!')
|
|
116
|
+
} catch (err) {
|
|
117
|
+
console.error('Clipboard API failed:', err)
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// 3️⃣ 通过 textarea + execCommand(兼容旧浏览器)
|
|
121
|
+
try {
|
|
122
|
+
await copyByExecCommand('Hello execCommand!')
|
|
123
|
+
console.log('Copied via execCommand!')
|
|
124
|
+
} catch (err) {
|
|
125
|
+
console.error('execCommand failed:', err)
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### 字符串与对象命名转换
|
|
131
|
+
|
|
132
|
+
```javascript
|
|
133
|
+
import { camelToSnake, snakeToCamel, toggleConvertCase, convertObjKeysToCamel } from 'jsly'
|
|
134
|
+
|
|
135
|
+
console.log(camelToSnake('myVariable')) // my_variable
|
|
136
|
+
console.log(snakeToCamel('my_variable')) // myVariable
|
|
137
|
+
console.log(toggleConvertCase('myVariable')) // my_variable
|
|
138
|
+
console.log(toggleConvertCase('my_variable')) // myVariable
|
|
139
|
+
|
|
140
|
+
const obj = { my_variable: 123, another_key: 'abc' }
|
|
141
|
+
console.log(convertObjKeysToCamel(obj)) // { myVariable: 123, anotherKey: 'abc' }
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### 对象差异对比
|
|
146
|
+
|
|
147
|
+
```javascript
|
|
148
|
+
import { shallowDiff, deepDiff } from 'jsly'
|
|
149
|
+
|
|
150
|
+
const oldObj = { a: 1, b: { x: 10, y: 20 } }
|
|
151
|
+
const newObj = { a: 2, b: { x: 10, y: 30 } }
|
|
152
|
+
|
|
153
|
+
// 第一层差异
|
|
154
|
+
console.log(shallowDiff(oldObj, newObj)) // { a: 2, b: { x: 10, y: 30 } }
|
|
155
|
+
|
|
156
|
+
// 深度差异
|
|
157
|
+
console.log(deepDiff(oldObj, newObj)) // { a: 2, b: { x: 10, y: 30 } }
|
|
158
|
+
|
|
159
|
+
// 深度差异最小化
|
|
160
|
+
console.log(deepDiff(oldObj, newObj, true)) // { a: 2, b: { y: 30 } }
|
|
161
|
+
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### 事件总线
|
|
165
|
+
|
|
166
|
+
```javascript
|
|
167
|
+
import { $bus } from 'jsly'
|
|
168
|
+
|
|
169
|
+
// 订阅事件
|
|
170
|
+
$bus.on('test', data => console.log('Received:', data))
|
|
171
|
+
|
|
172
|
+
// 触发事件
|
|
173
|
+
$bus.emit('test', { a: 1 })
|
|
174
|
+
|
|
175
|
+
// 一次性事件
|
|
176
|
+
$bus.once('onceEvent', () => console.log('This runs only once'))
|
|
177
|
+
|
|
178
|
+
// 取消订阅
|
|
179
|
+
function listener() {}
|
|
180
|
+
$bus.off('test', listener)
|
|
181
|
+
|
|
182
|
+
// 移除所有监听器
|
|
183
|
+
$bus.removeAllListeners()
|
|
184
|
+
|
|
16
185
|
```
|