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 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
- **Table of Contents**
60
+ ### Table of Contents
61
61
 
62
62
  <!-- toc - begin -->
63
63
  - Generated with ❤️
64
64
  - [Load Resource](#load-resource)
65
- * [loadScript](#loadscript)
66
- * [loadScriptIfUndefined](#loadscriptifundefined)
67
- * [loadCSS](#loadcss)
68
- * [loadImage](#loadimage)
69
- * [windowLoaded](#windowloaded)
65
+ - [loadScript](#loadscript)
66
+ - [loadScriptIfUndefined](#loadscriptifundefined)
67
+ - [loadCSS](#loadcss)
68
+ - [loadImage](#loadimage)
69
+ - [windowLoaded](#windowloaded)
70
70
  - [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)
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
- * [getQueryParam](#getqueryparam)
83
- * [getUrlParam](#geturlparam)
84
- * [getHashQueryParam](#gethashqueryparam)
85
- * [getDomain](#getdomain)
86
- * [updateQueryParam](#updatequeryparam)
87
- * [isValidUrl](#isvalidurl)
88
- * [isValidHttpUrl](#isvalidhttpurl)
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
- * [Cookie](#cookie)
91
- * [Storage](#storage)
90
+ - [Cookie](#cookie)
91
+ - [Storage](#storage)
92
92
  - [DOM](#dom)
93
- * [addStyle](#addstyle)
94
- * [Class](#class)
95
- * [newLine](#newline)
93
+ - [addStyle](#addstyle)
94
+ - [Class](#class)
95
+ - [newLine](#newline)
96
96
  - [Calculate and Formula](#calculate-and-formula)
97
- * [inRate](#inrate)
98
- * [longestComSubstring](#longestcomsubstring)
99
- * [longestComSubsequence](#longestcomsubsequence)
97
+ - [inRate](#inrate)
98
+ - [longestComSubstring](#longestcomsubstring)
99
+ - [longestComSubsequence](#longestcomsubsequence)
100
100
  - [Browser Information](#browser-information)
101
- * [getBrowserInfo](#getbrowserinfo)
102
- * [isSafePWAEnv](#issafepwaenv)
101
+ - [getBrowserInfo](#getbrowserinfo)
102
+ - [isSafePWAEnv](#issafepwaenv)
103
103
  - [Web Performance](#web-performance)
104
- * [getPerformance](#getperformance)
104
+ - [getPerformance](#getperformance)
105
105
  - [Debug](#debug)
106
- * [genCustomConsole](#gencustomconsole)
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
- <!-- ZH: 动态加载 JavaScript 文件 -->
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
- ```js
143
- loadScriptIfUndefined('jQuery', 'https://example.com/lib/jquery.min.js')
148
+ Usage:
149
+
150
+ ```javascript
151
+ loadScriptIfUndefined('xyz', 'https://example.com/lib/xyz.min.js')
144
152
  .then(() => {
145
- console.log('jQuery is loaded.');
153
+ console.log('xyz is loaded.');
146
154
  })
147
155
  .catch(err => {
148
- console.log('Failed to load jQuery.', err);
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
- <!-- ZH: 动态加载 CSS 文件 -->
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
- ```js
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
- <!-- ZH: 页面加载完成 -->
221
+ Usage:
200
222
 
201
- ```
223
+ ```javascript
202
224
  windowLoaded(30) // second
203
225
  .then(res => {
204
- console.log(`Load Success: ${res}`); // Load Success: load
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
- <!-- ZH: 判断是否有效数字 -->
245
+ Usage:
218
246
 
219
- ```
220
- isNumber(123); // true
221
- isNumber('123'); // false
247
+ ```javascript
248
+ const ret1 = isNumber(123);
249
+ const ret2 = isNumber('123');
222
250
  // 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
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
- genRndNumString(4); // '9730'
285
- genRndNumString(7); // '2262490'
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
- 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'));
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
- <!-- ZH: 去抖 -->
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
- <!-- ZH: 节流 -->
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
- convertCamelToKebab('ABC'); // a-b-c
342
- convertCamelToKebab('aBC'); // a-b-c
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
- convertCamelToUnder('ABC'); // a_b_c
351
- convertCamelToUnder('aBC'); // a_b_c
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
- 'abc'
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'); // 3
382
- getQueryParam('t4'); // 4
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
- 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'
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
- ```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
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
- ```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
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
- <!-- ZH: 设置/获取 Cookie -->
611
+ Usage:
492
612
 
493
- ```
613
+ ```javascript
494
614
  setCookie('test', '123', 30, 'example.com'); // key value day domain
495
- getCookie('test'); // 123
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
- <!-- ZH: 存储/获取数据到 sessionStorage/localStorage -->
629
+ Usage:
503
630
 
504
- ```
631
+ ```javascript
505
632
  setSessionStorage('test', '123');
506
- getSessionStorage('test'); // 123
633
+ const ret1 = getSessionStorage('test');
507
634
  setLocalStorage('test', '123');
508
- getLocalStorage('test'); // 123
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
- newLine('a\nb\nc'); // 'a<br />b<br />c'
587
- newLine('a\n\nbc'); // 'a<br /><br />bc'
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 | windows: 2000, xp, 2003, vista, 7, 8, 8.1, 10 <br />macos: ... |
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://www.npmjs.com/package/mazey/v/3.9.7)).
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
- **Install Dependencies**
946
+ Install Dependencies:
805
947
 
806
- ```
948
+ ```shell
807
949
  npm i
808
950
  ```
809
951
 
810
- **Development**
952
+ Development:
811
953
 
812
- ```
954
+ ```shell
813
955
  npm run dev
814
956
  ```
815
957
 
816
- **Build**
958
+ Build:
817
959
 
818
- ```
960
+ ```shell
819
961
  npm run build
820
962
  ```
821
963
 
822
- **Document**
964
+ Document:
823
965
 
824
- ```
966
+ ```shell
825
967
  npm run docs
826
968
  ```
827
969
 
828
- **Test**
970
+ Test:
829
971
 
830
- ```
972
+ ```shell
831
973
  npm run test
832
974
  ```
833
975