mazey 3.11.1 → 3.11.3
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 +318 -176
- package/lib/index.cjs.js +1 -1
- package/lib/index.d.ts +795 -166
- package/lib/index.d.ts.map +1 -1
- package/lib/index.esm.js +1 -1
- package/lib/mazey.min.js +1 -1
- package/package.json +5 -3
- package/scripts/build-helper.js +2 -1
package/README.md
CHANGED
|
@@ -16,13 +16,13 @@ English | [简体中文](https://github.com/mazeyqian/mazey/blob/master/README_Z
|
|
|
16
16
|
|
|
17
17
|
Use mazey via [npm](https://www.npmjs.com/package/mazey).
|
|
18
18
|
|
|
19
|
-
```
|
|
19
|
+
```shell
|
|
20
20
|
npm install mazey --save
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
Use mazey from CDN.
|
|
24
24
|
|
|
25
|
-
```
|
|
25
|
+
```html
|
|
26
26
|
<script type="text/javascript" src="//i.mazey.net/mazey/lib/mazey.min.js"></script>
|
|
27
27
|
```
|
|
28
28
|
|
|
@@ -34,7 +34,7 @@ Example: Use a function to load JavaScript script.
|
|
|
34
34
|
|
|
35
35
|
Import from [npm](https://www.npmjs.com/package/mazey).
|
|
36
36
|
|
|
37
|
-
```
|
|
37
|
+
```javascript
|
|
38
38
|
import { isNumber } from 'mazey';
|
|
39
39
|
|
|
40
40
|
const x = Infinity;
|
|
@@ -44,7 +44,7 @@ isNumber(x); // <=> typeof x === 'string' && !isNaN(x) && isFinite(x)
|
|
|
44
44
|
|
|
45
45
|
Import from CDN.
|
|
46
46
|
|
|
47
|
-
```
|
|
47
|
+
```html
|
|
48
48
|
<script type="text/javascript" src="//i.mazey.net/mazey/lib/mazey.min.js"></script>
|
|
49
49
|
<script>
|
|
50
50
|
const x = Infinity;
|
|
@@ -57,53 +57,53 @@ Import from CDN.
|
|
|
57
57
|
|
|
58
58
|
There are some examples maintained by hand below. For more information, please check the [full documentation](https://mazey.cn/t/m).
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
### Table of Contents
|
|
61
61
|
|
|
62
62
|
<!-- toc - begin -->
|
|
63
63
|
- Generated with ❤️
|
|
64
64
|
- [Load Resource](#load-resource)
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
- [loadScript](#loadscript)
|
|
66
|
+
- [loadScriptIfUndefined](#loadscriptifundefined)
|
|
67
|
+
- [loadCSS](#loadcss)
|
|
68
|
+
- [loadImage](#loadimage)
|
|
69
|
+
- [windowLoaded](#windowloaded)
|
|
70
70
|
- [Util](#util)
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
71
|
+
- [isNumber](#isnumber)
|
|
72
|
+
- [isJSONString](#isjsonstring)
|
|
73
|
+
- [isValidData](#isvaliddata)
|
|
74
|
+
- [genRndNumString](#genrndnumstring)
|
|
75
|
+
- [formatDate](#formatdate)
|
|
76
|
+
- [debounce](#debounce)
|
|
77
|
+
- [throttle](#throttle)
|
|
78
|
+
- [convertCamelToKebab](#convertcameltokebab)
|
|
79
|
+
- [convertCamelToUnder](#convertcameltounder)
|
|
80
|
+
- [deepCopy](#deepcopy)
|
|
81
81
|
- [URL](#url)
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
82
|
+
- [getQueryParam](#getqueryparam)
|
|
83
|
+
- [getUrlParam](#geturlparam)
|
|
84
|
+
- [getHashQueryParam](#gethashqueryparam)
|
|
85
|
+
- [getDomain](#getdomain)
|
|
86
|
+
- [updateQueryParam](#updatequeryparam)
|
|
87
|
+
- [isValidUrl](#isvalidurl)
|
|
88
|
+
- [isValidHttpUrl](#isvalidhttpurl)
|
|
89
89
|
- [Cache Data](#cache-data)
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
- [Cookie](#cookie)
|
|
91
|
+
- [Storage](#storage)
|
|
92
92
|
- [DOM](#dom)
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
- [addStyle](#addstyle)
|
|
94
|
+
- [Class](#class)
|
|
95
|
+
- [newLine](#newline)
|
|
96
96
|
- [Calculate and Formula](#calculate-and-formula)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
97
|
+
- [inRate](#inrate)
|
|
98
|
+
- [longestComSubstring](#longestcomsubstring)
|
|
99
|
+
- [longestComSubsequence](#longestcomsubsequence)
|
|
100
100
|
- [Browser Information](#browser-information)
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
- [getBrowserInfo](#getbrowserinfo)
|
|
102
|
+
- [isSafePWAEnv](#issafepwaenv)
|
|
103
103
|
- [Web Performance](#web-performance)
|
|
104
|
-
|
|
104
|
+
- [getPerformance](#getperformance)
|
|
105
105
|
- [Debug](#debug)
|
|
106
|
-
|
|
106
|
+
- [genCustomConsole](#gencustomconsole)
|
|
107
107
|
<!-- toc - end -->
|
|
108
108
|
|
|
109
109
|
### Load Resource
|
|
@@ -112,9 +112,9 @@ There are some examples maintained by hand below. For more information, please c
|
|
|
112
112
|
|
|
113
113
|
Load a JavaScript file from the server and execute it.
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
Usage:
|
|
116
116
|
|
|
117
|
-
```
|
|
117
|
+
```javascript
|
|
118
118
|
loadScript(
|
|
119
119
|
'http://example.com/static/js/plugin-2.1.1.min.js',
|
|
120
120
|
{
|
|
@@ -135,27 +135,41 @@ loadScript(
|
|
|
135
135
|
);
|
|
136
136
|
```
|
|
137
137
|
|
|
138
|
+
Output:
|
|
139
|
+
|
|
140
|
+
```text
|
|
141
|
+
Load JavaScript script: loaded
|
|
142
|
+
```
|
|
143
|
+
|
|
138
144
|
#### loadScriptIfUndefined
|
|
139
145
|
|
|
140
146
|
Load a script from the given URL if it (`window['attribute']`) has not already been loaded.
|
|
141
147
|
|
|
142
|
-
|
|
143
|
-
|
|
148
|
+
Usage:
|
|
149
|
+
|
|
150
|
+
```javascript
|
|
151
|
+
loadScriptIfUndefined('xyz', 'https://example.com/lib/xyz.min.js')
|
|
144
152
|
.then(() => {
|
|
145
|
-
console.log('
|
|
153
|
+
console.log('xyz is loaded.');
|
|
146
154
|
})
|
|
147
155
|
.catch(err => {
|
|
148
|
-
console.log('Failed to load
|
|
156
|
+
console.log('Failed to load xyz.', err);
|
|
149
157
|
});
|
|
150
158
|
```
|
|
151
159
|
|
|
160
|
+
Output:
|
|
161
|
+
|
|
162
|
+
```text
|
|
163
|
+
xyz is loaded.
|
|
164
|
+
```
|
|
165
|
+
|
|
152
166
|
#### loadCSS
|
|
153
167
|
|
|
154
168
|
Load a CSS file from the server.
|
|
155
169
|
|
|
156
|
-
|
|
170
|
+
Usage:
|
|
157
171
|
|
|
158
|
-
```
|
|
172
|
+
```javascript
|
|
159
173
|
loadCSS(
|
|
160
174
|
'http://example.com/path/example.css',
|
|
161
175
|
{
|
|
@@ -174,6 +188,12 @@ loadCSS(
|
|
|
174
188
|
);
|
|
175
189
|
```
|
|
176
190
|
|
|
191
|
+
Output:
|
|
192
|
+
|
|
193
|
+
```text
|
|
194
|
+
Load CSS Success: loaded
|
|
195
|
+
```
|
|
196
|
+
|
|
177
197
|
#### loadImage
|
|
178
198
|
|
|
179
199
|
Load an image from the given URL.
|
|
@@ -182,7 +202,9 @@ The target image will be loaded in the background, and the Promise status will c
|
|
|
182
202
|
|
|
183
203
|
Note that this method will not add the image to the DOM.
|
|
184
204
|
|
|
185
|
-
|
|
205
|
+
Usage:
|
|
206
|
+
|
|
207
|
+
```javascript
|
|
186
208
|
loadImage('https://example.com/example.png')
|
|
187
209
|
.then((img) => {
|
|
188
210
|
console.log(img);
|
|
@@ -196,34 +218,47 @@ loadImage('https://example.com/example.png')
|
|
|
196
218
|
|
|
197
219
|
Check whether the page is loaded successfully (Keep the compatibility if the browser's `load` event has been triggered).
|
|
198
220
|
|
|
199
|
-
|
|
221
|
+
Usage:
|
|
200
222
|
|
|
201
|
-
```
|
|
223
|
+
```javascript
|
|
202
224
|
windowLoaded(30) // second
|
|
203
225
|
.then(res => {
|
|
204
|
-
console.log(`Load Success: ${res}`);
|
|
226
|
+
console.log(`Load Success: ${res}`);
|
|
205
227
|
})
|
|
206
228
|
.catch(err => {
|
|
207
229
|
console.log(`Load Timeout or Fail: ${err.message}`);
|
|
208
230
|
});
|
|
209
231
|
```
|
|
210
232
|
|
|
233
|
+
Output:
|
|
234
|
+
|
|
235
|
+
```text
|
|
236
|
+
Load Success: load
|
|
237
|
+
```
|
|
238
|
+
|
|
211
239
|
### Util
|
|
212
240
|
|
|
213
241
|
#### isNumber
|
|
214
242
|
|
|
215
243
|
Check whether it is a right number.
|
|
216
244
|
|
|
217
|
-
|
|
245
|
+
Usage:
|
|
218
246
|
|
|
219
|
-
```
|
|
220
|
-
isNumber(123);
|
|
221
|
-
isNumber('123');
|
|
247
|
+
```javascript
|
|
248
|
+
const ret1 = isNumber(123);
|
|
249
|
+
const ret2 = isNumber('123');
|
|
222
250
|
// Default: NaN, Infinity is not Number
|
|
223
|
-
isNumber(Infinity);
|
|
224
|
-
isNumber(Infinity, { isInfinityAsNumber: true });
|
|
225
|
-
isNumber(NaN);
|
|
226
|
-
isNumber(NaN, { isNaNAsNumber: true, isInfinityAsNumber: true });
|
|
251
|
+
const ret3 = isNumber(Infinity);
|
|
252
|
+
const ret4 = isNumber(Infinity, { isInfinityAsNumber: true });
|
|
253
|
+
const ret5 = isNumber(NaN);
|
|
254
|
+
const ret6 = isNumber(NaN, { isNaNAsNumber: true, isInfinityAsNumber: true });
|
|
255
|
+
console.log(ret1, ret2, ret3, ret4, ret5, ret6);
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
Output:
|
|
259
|
+
|
|
260
|
+
```text
|
|
261
|
+
true false false true false true
|
|
227
262
|
```
|
|
228
263
|
|
|
229
264
|
#### isJSONString
|
|
@@ -232,14 +267,16 @@ Check whether it is a valid JSON string.
|
|
|
232
267
|
|
|
233
268
|
Usage:
|
|
234
269
|
|
|
235
|
-
```
|
|
236
|
-
isJSONString(`['a', 'b', 'c']`);
|
|
237
|
-
isJSONString(`["a", "b", "c"]`);
|
|
270
|
+
```javascript
|
|
271
|
+
const ret1 = isJSONString(`['a', 'b', 'c']`);
|
|
272
|
+
const ret2 = isJSONString(`["a", "b", "c"]`);
|
|
273
|
+
console.log(ret1);
|
|
274
|
+
console.log(ret2);
|
|
238
275
|
```
|
|
239
276
|
|
|
240
277
|
Output:
|
|
241
278
|
|
|
242
|
-
```
|
|
279
|
+
```text
|
|
243
280
|
false
|
|
244
281
|
true
|
|
245
282
|
```
|
|
@@ -250,7 +287,7 @@ Determine the validity of the data.
|
|
|
250
287
|
|
|
251
288
|
Usage:
|
|
252
289
|
|
|
253
|
-
```
|
|
290
|
+
```javascript
|
|
254
291
|
const validData = {
|
|
255
292
|
a: {
|
|
256
293
|
b: {
|
|
@@ -270,7 +307,7 @@ console.log('isValidDataResC:', isValidDataResC);
|
|
|
270
307
|
|
|
271
308
|
Output:
|
|
272
309
|
|
|
273
|
-
```
|
|
310
|
+
```text
|
|
274
311
|
isValidDataResA: false
|
|
275
312
|
isValidDataResB: true
|
|
276
313
|
isValidDataResC: false
|
|
@@ -280,9 +317,20 @@ isValidDataResC: false
|
|
|
280
317
|
|
|
281
318
|
Produce a random string of number, `genRndNumString(7)` => '7658495'.
|
|
282
319
|
|
|
320
|
+
Usage:
|
|
321
|
+
|
|
322
|
+
```javascript
|
|
323
|
+
const ret1 = genRndNumString(4);
|
|
324
|
+
const ret2 = genRndNumString(7);
|
|
325
|
+
console.log(ret1);
|
|
326
|
+
console.log(ret2);
|
|
283
327
|
```
|
|
284
|
-
|
|
285
|
-
|
|
328
|
+
|
|
329
|
+
Output:
|
|
330
|
+
|
|
331
|
+
```text
|
|
332
|
+
9730
|
|
333
|
+
2262490
|
|
286
334
|
```
|
|
287
335
|
|
|
288
336
|
#### formatDate
|
|
@@ -291,16 +339,20 @@ Return the formatted date string in the given format.
|
|
|
291
339
|
|
|
292
340
|
Usage:
|
|
293
341
|
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
342
|
+
```javascript
|
|
343
|
+
const ret1 = formatDate();
|
|
344
|
+
const ret2 = formatDate('Tue Jan 11 2022 14:12:26 GMT+0800 (China Standard Time)', 'yyyy-MM-dd hh:mm:ss');
|
|
345
|
+
const ret3 = formatDate(1641881235000, 'yyyy-MM-dd hh:mm:ss');
|
|
346
|
+
const ret4 = formatDate(new Date(2014, 1, 11), 'MM/dd/yyyy');
|
|
347
|
+
console.log('Default formatDate value:', ret1);
|
|
348
|
+
console.log('String formatDate value:', ret2);
|
|
349
|
+
console.log('Number formatDate value:', ret3);
|
|
350
|
+
console.log('Date formatDate value:', ret4);
|
|
299
351
|
```
|
|
300
352
|
|
|
301
353
|
Output:
|
|
302
354
|
|
|
303
|
-
```
|
|
355
|
+
```text
|
|
304
356
|
Default formatDate value: 2023-01-11
|
|
305
357
|
String formatDate value: 2022-01-11 14:12:26
|
|
306
358
|
Number formatDate value: 2022-01-11 14:07:15
|
|
@@ -311,9 +363,9 @@ Date formatDate value: 02/11/2014
|
|
|
311
363
|
|
|
312
364
|
Debounce
|
|
313
365
|
|
|
314
|
-
|
|
366
|
+
Usage:
|
|
315
367
|
|
|
316
|
-
```
|
|
368
|
+
```javascript
|
|
317
369
|
const foo = debounce(() => {
|
|
318
370
|
console.log('The debounced function will only be invoked in 1000 milliseconds, the other invoking will disappear during the wait time.');
|
|
319
371
|
}, 1000, true);
|
|
@@ -323,9 +375,9 @@ const foo = debounce(() => {
|
|
|
323
375
|
|
|
324
376
|
Throttle
|
|
325
377
|
|
|
326
|
-
|
|
378
|
+
Usage:
|
|
327
379
|
|
|
328
|
-
```
|
|
380
|
+
```javascript
|
|
329
381
|
const foo = throttle(() => {
|
|
330
382
|
console.log('The function will be invoked at most once per every wait 1000 milliseconds.');
|
|
331
383
|
}, 1000, { leading: true });
|
|
@@ -337,18 +389,40 @@ Reference: [Lodash](https://lodash.com/docs/4.17.15#throttle)
|
|
|
337
389
|
|
|
338
390
|
Transfer CamelCase to KebabCase.
|
|
339
391
|
|
|
392
|
+
Usage:
|
|
393
|
+
|
|
394
|
+
```javascript
|
|
395
|
+
const ret1 = convertCamelToKebab('ABC');
|
|
396
|
+
const ret2 = convertCamelToKebab('aBC');
|
|
397
|
+
console.log(ret1);
|
|
398
|
+
console.log(ret2);
|
|
340
399
|
```
|
|
341
|
-
|
|
342
|
-
|
|
400
|
+
|
|
401
|
+
Output:
|
|
402
|
+
|
|
403
|
+
```text
|
|
404
|
+
a-b-c
|
|
405
|
+
a-b-c
|
|
343
406
|
```
|
|
344
407
|
|
|
345
408
|
#### convertCamelToUnder
|
|
346
409
|
|
|
347
410
|
Transfer CamelCase to Underscore.
|
|
348
411
|
|
|
412
|
+
Usage:
|
|
413
|
+
|
|
414
|
+
```javascript
|
|
415
|
+
const ret1 = convertCamelToUnder('ABC');
|
|
416
|
+
const ret2 = convertCamelToUnder('aBC');
|
|
417
|
+
console.log(ret1);
|
|
418
|
+
console.log(ret2);
|
|
349
419
|
```
|
|
350
|
-
|
|
351
|
-
|
|
420
|
+
|
|
421
|
+
Output:
|
|
422
|
+
|
|
423
|
+
```text
|
|
424
|
+
a_b_c
|
|
425
|
+
a_b_c
|
|
352
426
|
```
|
|
353
427
|
|
|
354
428
|
#### deepCopy
|
|
@@ -357,16 +431,18 @@ Copy/Clone Object deeply.
|
|
|
357
431
|
|
|
358
432
|
Usage:
|
|
359
433
|
|
|
360
|
-
```
|
|
361
|
-
deepCopy(['a', 'b', 'c']);
|
|
362
|
-
deepCopy('abc');
|
|
434
|
+
```javascript
|
|
435
|
+
const ret1 = deepCopy(['a', 'b', 'c']);
|
|
436
|
+
const ret2 = deepCopy('abc');
|
|
437
|
+
console.log(ret1);
|
|
438
|
+
console.log(ret2);
|
|
363
439
|
```
|
|
364
440
|
|
|
365
441
|
Output:
|
|
366
442
|
|
|
367
|
-
```
|
|
443
|
+
```text
|
|
368
444
|
['a', 'b', 'c']
|
|
369
|
-
|
|
445
|
+
abc
|
|
370
446
|
```
|
|
371
447
|
|
|
372
448
|
### URL
|
|
@@ -375,20 +451,38 @@ Output:
|
|
|
375
451
|
|
|
376
452
|
Get the query param's value of the current Web URL(`location.search`).
|
|
377
453
|
|
|
378
|
-
|
|
454
|
+
Usage:
|
|
455
|
+
|
|
456
|
+
```javascript
|
|
379
457
|
// http://example.com/?t1=1&t2=2&t3=3&t4=4#2333
|
|
380
458
|
// ?t1=1&t2=2&t3=3&t4=4
|
|
381
|
-
getQueryParam('t3');
|
|
382
|
-
getQueryParam('t4');
|
|
459
|
+
const p1 = getQueryParam('t3');
|
|
460
|
+
const p2 = getQueryParam('t4');
|
|
461
|
+
console.log(p1, p2);
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
Output:
|
|
465
|
+
|
|
466
|
+
```text
|
|
467
|
+
3 4
|
|
383
468
|
```
|
|
384
469
|
|
|
385
470
|
#### getUrlParam
|
|
386
471
|
|
|
387
472
|
Returns the value of the specified query parameter in the input URL.
|
|
388
473
|
|
|
474
|
+
Usage:
|
|
475
|
+
|
|
476
|
+
```javascript
|
|
477
|
+
const p1 = getUrlParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3');
|
|
478
|
+
const p2 = getUrlParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't4');
|
|
479
|
+
console.log(p1, p2);
|
|
389
480
|
```
|
|
390
|
-
|
|
391
|
-
|
|
481
|
+
|
|
482
|
+
Output:
|
|
483
|
+
|
|
484
|
+
```text
|
|
485
|
+
3 4
|
|
392
486
|
```
|
|
393
487
|
|
|
394
488
|
#### getHashQueryParam
|
|
@@ -397,18 +491,18 @@ Get the hash query param's value of the current Web URL(`location.hash`).
|
|
|
397
491
|
|
|
398
492
|
Usage:
|
|
399
493
|
|
|
400
|
-
```
|
|
494
|
+
```javascript
|
|
401
495
|
// http://example.com/?#2333?t1=1&t2=2&t3=3&t4=4
|
|
402
496
|
// #2333?t1=1&t2=2&t3=3&t4=4
|
|
403
|
-
getHashQueryParam('t3');
|
|
404
|
-
getHashQueryParam('t4');
|
|
497
|
+
const p1 = getHashQueryParam('t3');
|
|
498
|
+
const p2 = getHashQueryParam('t4');
|
|
499
|
+
console.log(p1, p2);
|
|
405
500
|
```
|
|
406
501
|
|
|
407
502
|
Output:
|
|
408
503
|
|
|
409
|
-
```
|
|
410
|
-
3
|
|
411
|
-
4
|
|
504
|
+
```text
|
|
505
|
+
3 4
|
|
412
506
|
```
|
|
413
507
|
|
|
414
508
|
#### getDomain
|
|
@@ -417,18 +511,24 @@ Get the domain of URL, and other params.
|
|
|
417
511
|
|
|
418
512
|
Usage:
|
|
419
513
|
|
|
420
|
-
```
|
|
421
|
-
getDomain('http://example.com/?t1=1&t2=2&t3=3&t4=4');
|
|
422
|
-
getDomain('http://example.com/test/thanks?t1=1&t2=2&t3=3&t4=4', ['hostname', 'pathname']);
|
|
423
|
-
getDomain('http://example.com:7890/test/thanks', ['hostname']);
|
|
424
|
-
getDomain('http://example.com:7890/test/thanks', ['host']); // With Port
|
|
425
|
-
getDomain('http://example.com:7890/test/thanks', ['origin']);
|
|
426
|
-
getDomain('http://example.com:7890/test/thanks?id=1', ['origin', 'pathname', 'search']);
|
|
514
|
+
```javascript
|
|
515
|
+
const ret1 = getDomain('http://example.com/?t1=1&t2=2&t3=3&t4=4');
|
|
516
|
+
const ret2 = getDomain('http://example.com/test/thanks?t1=1&t2=2&t3=3&t4=4', ['hostname', 'pathname']);
|
|
517
|
+
const ret3 = getDomain('http://example.com:7890/test/thanks', ['hostname']);
|
|
518
|
+
const ret4 = getDomain('http://example.com:7890/test/thanks', ['host']); // With Port
|
|
519
|
+
const ret5 = getDomain('http://example.com:7890/test/thanks', ['origin']);
|
|
520
|
+
const ret6 = getDomain('http://example.com:7890/test/thanks?id=1', ['origin', 'pathname', 'search']);
|
|
521
|
+
console.log(ret1);
|
|
522
|
+
console.log(ret2);
|
|
523
|
+
console.log(ret3);
|
|
524
|
+
console.log(ret4);
|
|
525
|
+
console.log(ret5);
|
|
526
|
+
console.log(ret6);
|
|
427
527
|
```
|
|
428
528
|
|
|
429
529
|
Output:
|
|
430
530
|
|
|
431
|
-
```
|
|
531
|
+
```text
|
|
432
532
|
example.com
|
|
433
533
|
example.com/test/thanks
|
|
434
534
|
example.com
|
|
@@ -443,14 +543,16 @@ Update the query param's value of the input URL.
|
|
|
443
543
|
|
|
444
544
|
Usage:
|
|
445
545
|
|
|
446
|
-
```
|
|
447
|
-
updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3', 'three');
|
|
448
|
-
updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't4', 'four');
|
|
546
|
+
```javascript
|
|
547
|
+
const ret1 = updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3', 'three');
|
|
548
|
+
const ret2 = updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't4', 'four');
|
|
549
|
+
console.log(ret1);
|
|
550
|
+
console.log(ret2);
|
|
449
551
|
```
|
|
450
552
|
|
|
451
553
|
Output:
|
|
452
554
|
|
|
453
|
-
```
|
|
555
|
+
```text
|
|
454
556
|
http://example.com/?t1=1&t2=2&t3=three&t4=4
|
|
455
557
|
http://example.com/?t1=1&t2=2&t3=3&t4=four
|
|
456
558
|
```
|
|
@@ -459,12 +561,21 @@ http://example.com/?t1=1&t2=2&t3=3&t4=four
|
|
|
459
561
|
|
|
460
562
|
Checks if the given string is a valid URL, including **scheme URLs**.
|
|
461
563
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
isValidUrl('https://www.example.com
|
|
466
|
-
isValidUrl('http://
|
|
467
|
-
isValidUrl('
|
|
564
|
+
Usage:
|
|
565
|
+
|
|
566
|
+
```javascript
|
|
567
|
+
const ret1 = isValidUrl('https://www.example.com');
|
|
568
|
+
const ret2 = isValidUrl('http://example.com/path/exx/ss');
|
|
569
|
+
const ret3 = isValidUrl('https://www.example.com/?q=hello&age=24#world');
|
|
570
|
+
const ret4 = isValidUrl('http://www.example.com/#world?id=9');
|
|
571
|
+
const ret5 = isValidUrl('ftp://example.com');
|
|
572
|
+
console.log(ret1, ret2, ret3, ret4, ret5);
|
|
573
|
+
```
|
|
574
|
+
|
|
575
|
+
Output:
|
|
576
|
+
|
|
577
|
+
```text
|
|
578
|
+
true true true true true
|
|
468
579
|
```
|
|
469
580
|
|
|
470
581
|
If you are specifically checking for HTTP/HTTPS URLs, it is recommended to use the `isValidHttpUrl` function instead.
|
|
@@ -474,12 +585,21 @@ The `isValidUrl` function matches all scheme URLs, including FTP and other non-H
|
|
|
474
585
|
|
|
475
586
|
Check if the given string is a valid HTTP/HTTPS URL.
|
|
476
587
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
isValidHttpUrl('https://www.example.com
|
|
481
|
-
isValidHttpUrl('http://
|
|
482
|
-
isValidHttpUrl('
|
|
588
|
+
Usage:
|
|
589
|
+
|
|
590
|
+
```javascript
|
|
591
|
+
const ret1 = isValidHttpUrl('https://www.example.com');
|
|
592
|
+
const ret2 = isValidHttpUrl('http://example.com/path/exx/ss');
|
|
593
|
+
const ret3 = isValidHttpUrl('https://www.example.com/?q=hello&age=24#world');
|
|
594
|
+
const ret4 = isValidHttpUrl('http://www.example.com/#world?id=9');
|
|
595
|
+
const ret5 = isValidHttpUrl('ftp://example.com');
|
|
596
|
+
console.log(ret1, ret2, ret3, ret4, ret5);
|
|
597
|
+
```
|
|
598
|
+
|
|
599
|
+
Output:
|
|
600
|
+
|
|
601
|
+
```text
|
|
602
|
+
true true true true false
|
|
483
603
|
```
|
|
484
604
|
|
|
485
605
|
### Cache Data
|
|
@@ -488,24 +608,32 @@ isValidHttpUrl('ftp://example.com'); // false
|
|
|
488
608
|
|
|
489
609
|
Handle Cookie.
|
|
490
610
|
|
|
491
|
-
|
|
611
|
+
Usage:
|
|
492
612
|
|
|
493
|
-
```
|
|
613
|
+
```javascript
|
|
494
614
|
setCookie('test', '123', 30, 'example.com'); // key value day domain
|
|
495
|
-
getCookie('test');
|
|
615
|
+
const ret = getCookie('test');
|
|
616
|
+
console.log(ret);
|
|
617
|
+
```
|
|
618
|
+
|
|
619
|
+
Output:
|
|
620
|
+
|
|
621
|
+
```text
|
|
622
|
+
123
|
|
496
623
|
```
|
|
497
624
|
|
|
498
625
|
#### Storage
|
|
499
626
|
|
|
500
627
|
Handle Storage (Keep fit for JSON, it can transfer format automatically).
|
|
501
628
|
|
|
502
|
-
|
|
629
|
+
Usage:
|
|
503
630
|
|
|
504
|
-
```
|
|
631
|
+
```javascript
|
|
505
632
|
setSessionStorage('test', '123');
|
|
506
|
-
getSessionStorage('test');
|
|
633
|
+
const ret1 = getSessionStorage('test');
|
|
507
634
|
setLocalStorage('test', '123');
|
|
508
|
-
getLocalStorage('test');
|
|
635
|
+
const ret2 = getLocalStorage('test');
|
|
636
|
+
console.log(ret1, ret2);
|
|
509
637
|
|
|
510
638
|
// or package in usage
|
|
511
639
|
const projectName = 'mazey';
|
|
@@ -518,17 +646,21 @@ function mGetLocalStorage (key) {
|
|
|
518
646
|
}
|
|
519
647
|
```
|
|
520
648
|
|
|
649
|
+
Output:
|
|
650
|
+
|
|
651
|
+
```text
|
|
652
|
+
123 123
|
|
653
|
+
```
|
|
654
|
+
|
|
521
655
|
### DOM
|
|
522
656
|
|
|
523
657
|
#### addStyle
|
|
524
658
|
|
|
525
659
|
Add `<style>` in `<head>`.
|
|
526
660
|
|
|
527
|
-
<!-- ZH: 添加样式标签; style: 样式标签内的字符串; id: `<style>` 标签的 `id`; 返回: 添加成功/失败 -->
|
|
528
|
-
|
|
529
661
|
Example 1: Add the `<style>` with `id`, and repeated invoking will update the content instead of adding a new one.
|
|
530
662
|
|
|
531
|
-
```
|
|
663
|
+
```javascript
|
|
532
664
|
addStyle(
|
|
533
665
|
`
|
|
534
666
|
body {
|
|
@@ -548,7 +680,7 @@ addStyle(
|
|
|
548
680
|
|
|
549
681
|
Example 2: Add the `<style>` without `id`, and repeated invoking will add a new one.
|
|
550
682
|
|
|
551
|
-
```
|
|
683
|
+
```javascript
|
|
552
684
|
addStyle(
|
|
553
685
|
`
|
|
554
686
|
body {
|
|
@@ -567,7 +699,9 @@ addStyle(
|
|
|
567
699
|
|
|
568
700
|
Modify `class`.
|
|
569
701
|
|
|
570
|
-
|
|
702
|
+
Usage:
|
|
703
|
+
|
|
704
|
+
```javascript
|
|
571
705
|
const dom = document.querySelector('#box');
|
|
572
706
|
|
|
573
707
|
// Determine `class`
|
|
@@ -582,9 +716,20 @@ removeClass(dom, 'test');
|
|
|
582
716
|
|
|
583
717
|
Make a new line of HTML.
|
|
584
718
|
|
|
719
|
+
Usage:
|
|
720
|
+
|
|
721
|
+
```javascript
|
|
722
|
+
const ret1 = newLine('a\nb\nc');
|
|
723
|
+
const ret2 = newLine('a\n\nbc');
|
|
724
|
+
console.log(ret1);
|
|
725
|
+
console.log(ret2);
|
|
585
726
|
```
|
|
586
|
-
|
|
587
|
-
|
|
727
|
+
|
|
728
|
+
Output:
|
|
729
|
+
|
|
730
|
+
```text
|
|
731
|
+
a<br />b<br />c
|
|
732
|
+
a<br /><br />bc
|
|
588
733
|
```
|
|
589
734
|
|
|
590
735
|
### Calculate and Formula
|
|
@@ -593,23 +738,22 @@ newLine('a\n\nbc'); // 'a<br /><br />bc'
|
|
|
593
738
|
|
|
594
739
|
Hit probability (1% ~ 100%).
|
|
595
740
|
|
|
596
|
-
<!-- ZH: 百分位概率 -->
|
|
597
|
-
|
|
598
741
|
Usage:
|
|
599
742
|
|
|
600
|
-
```
|
|
601
|
-
inRate(0.5); // 0.01 ~ 1 true/false
|
|
743
|
+
```javascript
|
|
744
|
+
const ret = inRate(0.5); // 0.01 ~ 1 true/false
|
|
745
|
+
console.log(ret);
|
|
602
746
|
```
|
|
603
747
|
|
|
604
748
|
Output:
|
|
605
749
|
|
|
606
|
-
```
|
|
750
|
+
```text
|
|
607
751
|
true
|
|
608
752
|
```
|
|
609
753
|
|
|
610
754
|
Example: Test the precision.
|
|
611
755
|
|
|
612
|
-
```
|
|
756
|
+
```javascript
|
|
613
757
|
// Test
|
|
614
758
|
let trueCount = 0;
|
|
615
759
|
let falseCount = 0;
|
|
@@ -629,13 +773,14 @@ Computes the longest common substring of two strings.
|
|
|
629
773
|
|
|
630
774
|
Usage:
|
|
631
775
|
|
|
632
|
-
```
|
|
633
|
-
longestComSubstring('fish', 'finish');
|
|
776
|
+
```javascript
|
|
777
|
+
const ret = longestComSubstring('fish', 'finish');
|
|
778
|
+
console.log(ret);
|
|
634
779
|
```
|
|
635
780
|
|
|
636
781
|
Output:
|
|
637
782
|
|
|
638
|
-
```
|
|
783
|
+
```text
|
|
639
784
|
3
|
|
640
785
|
```
|
|
641
786
|
|
|
@@ -645,13 +790,14 @@ Computes the longest common subsequence of two strings.
|
|
|
645
790
|
|
|
646
791
|
Usage:
|
|
647
792
|
|
|
648
|
-
```
|
|
649
|
-
longestComSubsequence('fish', 'finish');
|
|
793
|
+
```javascript
|
|
794
|
+
const ret = longestComSubsequence('fish', 'finish');
|
|
795
|
+
console.log(ret);
|
|
650
796
|
```
|
|
651
797
|
|
|
652
798
|
Output:
|
|
653
799
|
|
|
654
|
-
```
|
|
800
|
+
```text
|
|
655
801
|
4
|
|
656
802
|
```
|
|
657
803
|
|
|
@@ -661,17 +807,16 @@ Output:
|
|
|
661
807
|
|
|
662
808
|
Browser Information
|
|
663
809
|
|
|
664
|
-
<!-- ZH: 返回浏览器信息 https://github.com/JowayYoung/juejin-code/blob/master/browser-type.js -->
|
|
665
|
-
|
|
666
810
|
Usage:
|
|
667
811
|
|
|
668
|
-
```
|
|
669
|
-
getBrowserInfo();
|
|
812
|
+
```javascript
|
|
813
|
+
const ret = getBrowserInfo();
|
|
814
|
+
console.log(ret);
|
|
670
815
|
```
|
|
671
816
|
|
|
672
817
|
Output:
|
|
673
818
|
|
|
674
|
-
```
|
|
819
|
+
```text
|
|
675
820
|
{"engine":"webkit","engineVs":"537.36","platform":"desktop","supporter":"chrome","supporterVs":"85.0.4183.121","system":"windows","systemVs":"10"}
|
|
676
821
|
```
|
|
677
822
|
|
|
@@ -680,7 +825,7 @@ Results:
|
|
|
680
825
|
| Attribute | Description | Type | Values |
|
|
681
826
|
| :------------ | :------------ | :------------ | :------------ |
|
|
682
827
|
| **system** | System | string | android, ios, windows, macos, linux |
|
|
683
|
-
| systemVs | System version | string |
|
|
828
|
+
| systemVs | System version | string | Windows: 2000, xp, 2003, vista, 7, 8, 8.1, 10 macOS: ... |
|
|
684
829
|
| platform | Platform | string | desktop, mobile |
|
|
685
830
|
| engine | Engine | string | webkit, gecko, presto, trident |
|
|
686
831
|
| engineVs | Engine version | string | - |
|
|
@@ -692,7 +837,7 @@ Results:
|
|
|
692
837
|
|
|
693
838
|
Example: Determine the environment of the mobile QQ.
|
|
694
839
|
|
|
695
|
-
```
|
|
840
|
+
```javascript
|
|
696
841
|
const { system, shell } = getBrowserInfo();
|
|
697
842
|
const isMobileQQ = ['android', 'ios'].includes(system) && ['qq_browser', 'qq_app'].includes(shell);
|
|
698
843
|
```
|
|
@@ -701,17 +846,16 @@ const isMobileQQ = ['android', 'ios'].includes(system) && ['qq_browser', 'qq_app
|
|
|
701
846
|
|
|
702
847
|
Detect the margin of Safety. Determine if it is a secure PWA environment that it can run.
|
|
703
848
|
|
|
704
|
-
<!-- ZH: 判断是否是安全的 PWA 环境 -->
|
|
705
|
-
|
|
706
849
|
Usage:
|
|
707
850
|
|
|
708
|
-
```
|
|
709
|
-
isSafePWAEnv();
|
|
851
|
+
```javascript
|
|
852
|
+
const ret = isSafePWAEnv();
|
|
853
|
+
console.log(ret);
|
|
710
854
|
```
|
|
711
855
|
|
|
712
856
|
Output:
|
|
713
857
|
|
|
714
|
-
```
|
|
858
|
+
```text
|
|
715
859
|
true
|
|
716
860
|
```
|
|
717
861
|
|
|
@@ -723,11 +867,11 @@ Get page load time(`PerformanceNavigationTiming`).
|
|
|
723
867
|
|
|
724
868
|
This function uses the [`PerformanceNavigationTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming) API to get page load time data.
|
|
725
869
|
The `PerformanceNavigationTiming` API provides more accurate and detailed information about page load time than the deprecated [`PerformanceTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming) API.
|
|
726
|
-
If you are using an older browser that does not support `PerformanceNavigationTiming`, you can still use the `PerformanceTiming` API by using the previous version of this library ([`v3.9.7`](https://
|
|
870
|
+
If you are using an older browser that does not support `PerformanceNavigationTiming`, you can still use the `PerformanceTiming` API by using the previous version of this library ([`v3.9.7`](https://github.com/mazeyqian/mazey/releases/tag/v3.9.7)).
|
|
727
871
|
|
|
728
872
|
Usage:
|
|
729
873
|
|
|
730
|
-
```
|
|
874
|
+
```javascript
|
|
731
875
|
// `camelCase:false` (Default) Return underline(`a_b`) data.
|
|
732
876
|
// `camelCase:true` Return hump(`aB`) data.
|
|
733
877
|
getPerformance()
|
|
@@ -739,7 +883,7 @@ getPerformance()
|
|
|
739
883
|
|
|
740
884
|
Output:
|
|
741
885
|
|
|
742
|
-
```
|
|
886
|
+
```text
|
|
743
887
|
{"source":"PerformanceNavigationTiming","os":"others","os_version":"","device_type":"pc","network":"4g","screen_direction":"","unload_time":0,"redirect_time":0,"dns_time":0,"tcp_time":0,"ssl_time":0,"response_time":2,"download_time":2,"first_paint_time":288,"first_contentful_paint_time":288,"dom_ready_time":0,"onload_time":0,"white_time":0,"render_time":0,"decoded_body_size":718,"encoded_body_size":718}
|
|
744
888
|
```
|
|
745
889
|
|
|
@@ -765,11 +909,9 @@ Results:
|
|
|
765
909
|
|
|
766
910
|
Custom console printing (`console`).
|
|
767
911
|
|
|
768
|
-
<!-- ZH: 生成自定义控制台打印 -->
|
|
769
|
-
|
|
770
912
|
Usage:
|
|
771
913
|
|
|
772
|
-
```
|
|
914
|
+
```javascript
|
|
773
915
|
const myConsole = genCustomConsole('MazeyLog:');
|
|
774
916
|
myConsole.log('I am string.');
|
|
775
917
|
myConsole.info('I am boolean.', true);
|
|
@@ -779,7 +921,7 @@ myConsole.info('I am object.', { a: 123, b: 456});
|
|
|
779
921
|
|
|
780
922
|
Output:
|
|
781
923
|
|
|
782
|
-
```
|
|
924
|
+
```text
|
|
783
925
|
MazeyLog: I am string.
|
|
784
926
|
MazeyLog: I am boolean. true
|
|
785
927
|
MazeyLog: I am number. 123 456
|
|
@@ -801,33 +943,33 @@ MazeyLog: I am object. {a: 123, b: 456}
|
|
|
801
943
|
|
|
802
944
|
### Scripts
|
|
803
945
|
|
|
804
|
-
|
|
946
|
+
Install Dependencies:
|
|
805
947
|
|
|
806
|
-
```
|
|
948
|
+
```shell
|
|
807
949
|
npm i
|
|
808
950
|
```
|
|
809
951
|
|
|
810
|
-
|
|
952
|
+
Development:
|
|
811
953
|
|
|
812
|
-
```
|
|
954
|
+
```shell
|
|
813
955
|
npm run dev
|
|
814
956
|
```
|
|
815
957
|
|
|
816
|
-
|
|
958
|
+
Build:
|
|
817
959
|
|
|
818
|
-
```
|
|
960
|
+
```shell
|
|
819
961
|
npm run build
|
|
820
962
|
```
|
|
821
963
|
|
|
822
|
-
|
|
964
|
+
Document:
|
|
823
965
|
|
|
824
|
-
```
|
|
966
|
+
```shell
|
|
825
967
|
npm run docs
|
|
826
968
|
```
|
|
827
969
|
|
|
828
|
-
|
|
970
|
+
Test:
|
|
829
971
|
|
|
830
|
-
```
|
|
972
|
+
```shell
|
|
831
973
|
npm run test
|
|
832
974
|
```
|
|
833
975
|
|