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