-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
844 lines (830 loc) · 49.4 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>珠峰架构师成长计划</title>
<link rel="stylesheet" type="text/css" href="../static/css/main.css">
<script>
function ismobile(){var mobileArry=["iPhone","iPad","Android","Windows Phone","BB10; Touch","BB10; Touch","PlayBook","Nokia"];var ua=navigator.userAgent;var res=mobileArry.filter(function(arr){return ua.indexOf(arr)>0});return res.length>0}var flag=ismobile();if(!flag){let zftoken=localStorage.getItem('zftoken');if(zftoken){var str=window.atob(zftoken);if(!/\d+@\d+/.test(str)){localStorage.removeItem('zftoken')}}let zftoken2=localStorage.getItem('zftoken');if(!zftoken2){let str=prompt('please input your username');if(/\d+@\d{4}/.test(str)){var enc=window.btoa(str);localStorage.setItem('zftoken',enc)}else{window.location='http://www.zhufengpeixun.cn'}}}
</script>
</head>
<body>
<div class="nav">
<div class="logo">
珠峰架构师成长计划
</div>
<ul>
<li><a href="../index.html">0.Async</a></li>
<li><a href="../html/0.editor.html">0.editor</a></li>
<li><a href="../html/0.module.html">0.module</a></li>
<li><a href="../html/1.ES2015.html">1.ES2015</a></li>
<li><a href="../html/2.Promise.html">2.Promise</a></li>
<li><a href="../html/3.Node.html">3.Node</a></li>
<li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li>
<li><a href="../html/5.REPL.html">5.REPL</a></li>
<li><a href="../html/6.NodeCore.html">6.NodeCore</a></li>
<li class="active"><a href="../html/7.module&NPM.html">7.module&NPM</a></li>
<li><a href="../html/8.Encoding.html">8.Encoding</a></li>
<li><a href="../html/9.Buffer.html">9.Buffer</a></li>
<li><a href="../html/10.fs.html">10.fs</a></li>
<li><a href="../html/11.Stream-1.html">11.Stream-1</a></li>
<li><a href="../html/11.Stream-2.html">11.Stream-2</a></li>
<li><a href="../html/11.Stream-3.html">11.Stream-3</a></li>
<li><a href="../html/11.Stream-4.html">11.Stream-4</a></li>
<li><a href="../html/12-Network-2.html">12-Network-2</a></li>
<li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li>
<li><a href="../html/12.Network-1.html">12.Network-1</a></li>
<li><a href="../html/13.tcp.html">13.tcp</a></li>
<li><a href="../html/14.http-1.html">14.http-1</a></li>
<li><a href="../html/14.http-2.html">14.http-2</a></li>
<li><a href="../html/15.compress.html">15.compress</a></li>
<li><a href="../html/16.crypto.html">16.crypto</a></li>
<li><a href="../html/17.process.html">17.process</a></li>
<li><a href="../html/18.yargs.html">18.yargs</a></li>
<li><a href="../html/19.cache.html">19.cache</a></li>
<li><a href="../html/20.action.html">20.action</a></li>
<li><a href="../html/21.https.html">21.https</a></li>
<li><a href="../html/22.cookie.html">22.cookie</a></li>
<li><a href="../html/23.session.html">23.session</a></li>
<li><a href="../html/24.express-1.html">24.express-1</a></li>
<li><a href="../html/24.express-2.html">24.express-2</a></li>
<li><a href="../html/24.express-3.html">24.express-3</a></li>
<li><a href="../html/24.express-4.html">24.express-4</a></li>
<li><a href="../html/25.koa-1.html">25.koa-1</a></li>
<li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li>
<li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li>
<li><a href="../html/26.webpack-3-file.html">26.webpack-3-file</a></li>
<li><a href="../html/26.webpack-4.tapable.html">26.webpack-4.tapable</a></li>
<li><a href="../html/26.webpack-5-AST.html">26.webpack-5-AST</a></li>
<li><a href="../html/26.webpack-6-sources.html">26.webpack-6-sources</a></li>
<li><a href="../html/26.webpack-7-loader.html">26.webpack-7-loader</a></li>
<li><a href="../html/26.webpack-8-plugin.html">26.webpack-8-plugin</a></li>
<li><a href="../html/26.webpack-9-hand.html">26.webpack-9-hand</a></li>
<li><a href="../html/26.webpack-10-prepare.html">26.webpack-10-prepare</a></li>
<li><a href="../html/28.redux.html">28.redux</a></li>
<li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li>
<li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li>
<li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li>
<li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li>
<li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li>
<li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li>
<li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li>
<li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li>
<li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li>
<li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li>
<li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li>
<li><a href="../html/30.cms-4-nunjucks.html">30.cms-4-nunjucks</a></li>
<li><a href="../html/30.cms-5-mock.html">30.cms-5-mock</a></li>
<li><a href="../html/30.cms-6-egg.html">30.cms-6-egg</a></li>
<li><a href="../html/30.cms-7-api.html">30.cms-7-api</a></li>
<li><a href="../html/30.cms-8-roadhog.html">30.cms-8-roadhog</a></li>
<li><a href="../html/30.cms-9-yaml.html">30.cms-9-yaml</a></li>
<li><a href="../html/30.cms-10-umi.html">30.cms-10-umi</a></li>
<li><a href="../html/30.cms-12-dva.html">30.cms-12-dva</a></li>
<li><a href="../html/30.cms-13-dva-ant.html">30.cms-13-dva-ant</a></li>
<li><a href="../html/30.cms-14-front.html">30.cms-14-front</a></li>
<li><a href="../html/30.cms-15-deploy.html">30.cms-15-deploy</a></li>
<li><a href="../html/31.dva.html">31.dva</a></li>
<li><a href="../html/31.cms-13-dva-antdesign.html">31.cms-13-dva-antdesign</a></li>
<li><a href="../html/33.redis.html">33.redis</a></li>
<li><a href="../html/34.unittest.html">34.unittest</a></li>
<li><a href="../html/35.jwt.html">35.jwt</a></li>
<li><a href="../html/36.websocket-1.html">36.websocket-1</a></li>
<li><a href="../html/36.websocket-2.html">36.websocket-2</a></li>
<li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li>
<li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li>
<li><a href="../html/38.chat-3.html">38.chat-3</a></li>
<li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li>
<li><a href="../html/38.chat.html">38.chat</a></li>
<li><a href="../html/38.chat2.html">38.chat2</a></li>
<li><a href="../html/38.chat2.html">38.chat2</a></li>
<li><a href="../html/39.crawl-0.html">39.crawl-0</a></li>
<li><a href="../html/39.crawl-1.html">39.crawl-1</a></li>
<li><a href="../html/39.crawl-2.html">39.crawl-2</a></li>
<li><a href="../html/40.deploy.html">40.deploy</a></li>
<li><a href="../html/41.safe.html">41.safe</a></li>
<li><a href="../html/42.test.html">42.test</a></li>
<li><a href="../html/43.nginx.html">43.nginx</a></li>
<li><a href="../html/44.enzyme.html">44.enzyme</a></li>
<li><a href="../html/45.docker.html">45.docker</a></li>
<li><a href="../html/46.elastic.html">46.elastic</a></li>
<li><a href="../html/47.oauth.html">47.oauth</a></li>
<li><a href="../html/48.wxpay.html">48.wxpay</a></li>
<li><a href="../html/index.html">index</a></li>
<li><a href="../html/51.typescript.html">51.typescript</a></li>
<li><a href="../html/52.UML.html">52.UML</a></li>
<li><a href="../html/53.design.html">53.design</a></li>
<li><a href="../html/index.html">index</a></li>
<li><a href="../html/54.linux.html">54.linux</a></li>
<li><a href="../html/57.ts.html">57.ts</a></li>
<li><a href="../html/56.react-ssr.html">56.react-ssr</a></li>
<li><a href="../html/58.ts_react.html">58.ts_react</a></li>
<li><a href="../html/59.ketang.html">59.ketang</a></li>
<li><a href="../html/59.ketang2.html">59.ketang2</a></li>
<li><a href="../html/61.1.devops-linux.html">61.1.devops-linux</a></li>
<li><a href="../html/61.2.devops-vi.html">61.2.devops-vi</a></li>
<li><a href="../html/61.3.devops-user.html">61.3.devops-user</a></li>
<li><a href="../html/61.4.devops-auth.html">61.4.devops-auth</a></li>
<li><a href="../html/61.5.devops-shell.html">61.5.devops-shell</a></li>
<li><a href="../html/61.6.devops-install.html">61.6.devops-install</a></li>
<li><a href="../html/61.7.devops-system.html">61.7.devops-system</a></li>
<li><a href="../html/61.8.devops-service.html">61.8.devops-service</a></li>
<li><a href="../html/61.9.devops-network.html">61.9.devops-network</a></li>
<li><a href="../html/61.10.devops-nginx.html">61.10.devops-nginx</a></li>
<li><a href="../html/61.11.devops-docker.html">61.11.devops-docker</a></li>
<li><a href="../html/61.12.devops-jekins.html">61.12.devops-jekins</a></li>
<li><a href="../html/61.13.devops-groovy.html">61.13.devops-groovy</a></li>
<li><a href="../html/61.14.devops-php.html">61.14.devops-php</a></li>
<li><a href="../html/61.15.devops-java.html">61.15.devops-java</a></li>
<li><a href="../html/61.16.devops-node.html">61.16.devops-node</a></li>
<li><a href="../html/61.17.devops-k8s.html">61.17.devops-k8s</a></li>
<li><a href="../html/62.1.react-basic.html">62.1.react-basic</a></li>
<li><a href="../html/62.2.react-state.html">62.2.react-state</a></li>
<li><a href="../html/62.3.react-high.html">62.3.react-high</a></li>
<li><a href="../html/62.4.react-optimize.html">62.4.react-optimize</a></li>
<li><a href="../html/62.5.react-hooks.html">62.5.react-hooks</a></li>
<li><a href="../html/62.6.react-immutable.html">62.6.react-immutable</a></li>
<li><a href="../html/62.7.react-mobx.html">62.7.react-mobx</a></li>
<li><a href="../html/62.8.react-source.html">62.8.react-source</a></li>
<li><a href="../html/63.1.redux.html">63.1.redux</a></li>
<li><a href="../html/63.2.redux-middleware.html">63.2.redux-middleware</a></li>
<li><a href="../html/63.3.redux-hooks.html">63.3.redux-hooks</a></li>
<li><a href="../html/63.4.redux-saga.html">63.4.redux-saga</a></li>
<li><a href="../html/63.5.redux-saga-hand.html">63.5.redux-saga-hand</a></li>
<li><a href="../html/64.1.router.html">64.1.router</a></li>
<li><a href="../html/64.2.router-connected.html">64.2.router-connected</a></li>
<li><a href="../html/65.1.typescript.html">65.1.typescript</a></li>
<li><a href="../html/65.2.typescript.html">65.2.typescript</a></li>
<li><a href="../html/65.3.typescript.html">65.3.typescript</a></li>
<li><a href="../html/65.4.antd.html">65.4.antd</a></li>
<li><a href="../html/65.4.definition.html">65.4.definition</a></li>
<li><a href="../html/66-1.vue-base.html">66-1.vue-base</a></li>
<li><a href="../html/66-2.vue-component.html">66-2.vue-component</a></li>
<li><a href="../html/66-3.vue-cli3.0.html">66-3.vue-cli3.0</a></li>
<li><a href="../html/66-4.$message组件.html">66-4.$message组件</a></li>
<li><a href="../html/66-5.Form组件.html">66-5.Form组件</a></li>
<li><a href="../html/66-6.tree.html">66-6.tree</a></li>
<li><a href="../html/66-7.vue-router-apply.html">66-7.vue-router-apply</a></li>
<li><a href="../html/66-8.axios-apply.html">66-8.axios-apply</a></li>
<li><a href="../html/66-9.vuex-apply.html">66-9.vuex-apply</a></li>
<li><a href="../html/66-10.jwt-vue.html">66-10.jwt-vue</a></li>
<li><a href="../html/66-11.vue-ssr.html">66-11.vue-ssr</a></li>
<li><a href="../html/66-12.nuxt-apply.html">66-12.nuxt-apply</a></li>
<li><a href="../html/66-13.pwa.html">66-13.pwa</a></li>
<li><a href="../html/66-14.vue单元测试.html">66-14.vue单元测试</a></li>
<li><a href="../html/66-15.权限校验.html">66-15.权限校验</a></li>
<li><a href="../html/67-1-network.html">67-1-network</a></li>
<li><a href="../html/68-2-wireshark.html">68-2-wireshark</a></li>
<li><a href="../html/7.npm2.html">7.npm2</a></li>
<li><a href="../html/69-hooks.html">69-hooks</a></li>
<li><a href="../html/70-deploy.html">70-deploy</a></li>
<li><a href="../html/71-hmr.html">71-hmr</a></li>
<li><a href="../html/72.deploy.html">72.deploy</a></li>
<li><a href="../html/73.import.html">73.import</a></li>
<li><a href="../html/74.mobile.html">74.mobile</a></li>
<li><a href="../html/75.webpack-1.文件分析.html">75.webpack-1.文件分析</a></li>
<li><a href="../html/75.webpack-2.loader.html">75.webpack-2.loader</a></li>
<li><a href="../html/75.webpack-3.源码流程.html">75.webpack-3.源码流程</a></li>
<li><a href="../html/75.webpack-4.tapable.html">75.webpack-4.tapable</a></li>
<li><a href="../html/75.webpack-5.prepare.html">75.webpack-5.prepare</a></li>
<li><a href="../html/75.webpack-6.resolve.html">75.webpack-6.resolve</a></li>
<li><a href="../html/75.webpack-7.loader.html">75.webpack-7.loader</a></li>
<li><a href="../html/75.webpack-8.module.html">75.webpack-8.module</a></li>
<li><a href="../html/75.webpack-9.chunk.html">75.webpack-9.chunk</a></li>
<li><a href="../html/75.webpack-10.asset.html">75.webpack-10.asset</a></li>
<li><a href="../html/75.webpack-11.实现.html">75.webpack-11.实现</a></li>
<li><a href="../html/76.react_optimize.html">76.react_optimize</a></li>
<li><a href="../html/77.ts_ketang_back.html">77.ts_ketang_back</a></li>
<li><a href="../html/77.ts_ketang_front.html">77.ts_ketang_front</a></li>
<li><a href="../html/78.vue-domdiff.html">78.vue-domdiff</a></li>
<li><a href="../html/79.grammar.html">79.grammar</a></li>
<li><a href="../html/80.tree.html">80.tree</a></li>
<li><a href="../html/81.axios.html">81.axios</a></li>
<li><a href="../html/82.1.react.html">82.1.react</a></li>
<li><a href="../html/82.2.react-high.html">82.2.react-high</a></li>
<li><a href="../html/82.3.react-router.html">82.3.react-router</a></li>
<li><a href="../html/82.4.redux.html">82.4.redux</a></li>
<li><a href="../html/82.5.redux_middleware.html">82.5.redux_middleware</a></li>
<li><a href="../html/82.6.connected.html">82.6.connected</a></li>
<li><a href="../html/82.7.saga.html">82.7.saga</a></li>
<li><a href="../html/82.8.dva.html">82.8.dva</a></li>
<li><a href="../html/82.8.dva-source.html">82.8.dva-source</a></li>
<li><a href="../html/82.9.roadhog.html">82.9.roadhog</a></li>
<li><a href="../html/82.10.umi.html">82.10.umi</a></li>
<li><a href="../html/82.11.antdesign.html">82.11.antdesign</a></li>
<li><a href="../html/82.12.ketang-front.html">82.12.ketang-front</a></li>
<li><a href="../html/82.12.ketang-back.html">82.12.ketang-back</a></li>
<li><a href="../html/83.upload.html">83.upload</a></li>
<li><a href="../html/84.graphql.html">84.graphql</a></li>
<li><a href="../html/85.antpro.html">85.antpro</a></li>
<li><a href="../html/86.1.uml.html">86.1.uml</a></li>
<li><a href="../html/86.2.design.html">86.2.design</a></li>
<li><a href="../html/87.postcss.html">87.postcss</a></li>
<li><a href="../html/88.react16-1.html">88.react16-1</a></li>
<li><a href="../html/89.nextjs.html">89.nextjs</a></li>
<li><a href="../html/90.react-test.html">90.react-test</a></li>
<li><a href="../html/91.react-ts.html">91.react-ts</a></li>
<li><a href="../html/92.rbac.html">92.rbac</a></li>
<li><a href="../html/93.tsnode.html">93.tsnode</a></li>
<li><a href="../html/94.1.JavaScript.html">94.1.JavaScript</a></li>
<li><a href="../html/94.2.JavaScript.html">94.2.JavaScript</a></li>
<li><a href="../html/94.3.MODULE.html">94.3.MODULE</a></li>
<li><a href="../html/94.4.EventLoop.html">94.4.EventLoop</a></li>
<li><a href="../html/94.5.文件上传.html">94.5.文件上传</a></li>
<li><a href="../html/94.6.https.html">94.6.https</a></li>
<li><a href="../html/94.7. nginx.html">94.7. nginx</a></li>
<li><a href="../html/95.1. react.html">95.1. react</a></li>
<li><a href="../html/95.2.react.html">95.2.react</a></li>
<li><a href="../html/96.1.react16.html">96.1.react16</a></li>
<li><a href="../html/96.2.fiber.html">96.2.fiber</a></li>
<li><a href="../html/96.3.fiber.html">96.3.fiber</a></li>
<li><a href="../html/97.serverless.html">97.serverless</a></li>
<li><a href="../html/98.websocket.html">98.websocket</a></li>
<li><a href="../html/100.1.react-basic.html">100.1.react-basic</a></li>
<li><a href="../html/101.1.monitor.html">101.1.monitor</a></li>
<li><a href="../html/101.2.monitor.html">101.2.monitor</a></li>
<li><a href="../html/102.java.html">102.java</a></li>
<li><a href="../html/103.1.webpack-bundle.html">103.1.webpack-bundle</a></li>
<li><a href="../html/103.2.webpack-flow.html">103.2.webpack-flow</a></li>
<li><a href="../html/103.3.webpack-loader.html">103.3.webpack-loader</a></li>
<li><a href="../html/103.4.webpack-tapable.html">103.4.webpack-tapable</a></li>
<li><a href="../html/103.5.webpack-ast.html">103.5.webpack-ast</a></li>
<li><a href="../html/103.6.webpack-plugin.html">103.6.webpack-plugin</a></li>
<li><a href="../html/103.7.webpack-hand.html">103.7.webpack-hand</a></li>
<li><a href="../html/103.8.webpack-hot.html">103.8.webpack-hot</a></li>
<li><a href="../html/103.9.webpack-sourcemap.html">103.9.webpack-sourcemap</a></li>
<li><a href="../html/104.1.binary.html">104.1.binary</a></li>
<li><a href="../html/104.2.binary.html">104.2.binary</a></li>
<li><a href="../html/103.5.webpack-compiler.html">103.5.webpack-compiler</a></li>
<li><a href="../html/105.skeleton.html">105.skeleton</a></li>
<li><a href="../html/103.10.webpack-optimize.html">103.10.webpack-optimize</a></li>
<li><a href="../html/103.11.webpack-optimize.html">103.11.webpack-optimize</a></li>
<li><a href="../html/106.1.react.html">106.1.react</a></li>
<li><a href="../html/106.2.react_hooks.html">106.2.react_hooks</a></li>
<li><a href="../html/106.3.react_router.html">106.3.react_router</a></li>
<li><a href="../html/106.4.redux.html">106.4.redux</a></li>
<li><a href="../html/106.6.connected-react-router.html">106.6.connected-react-router</a></li>
<li><a href="../html/107.fiber.html">107.fiber</a></li>
<li><a href="../html/106.1.react_source.html">106.1.react_source</a></li>
<li><a href="../html/106.5.redux_middleware.html">106.5.redux_middleware</a></li>
<li><a href="../html/106.7.redux-saga.html">106.7.redux-saga</a></li>
<li><a href="../html/106.8.dva.html">106.8.dva</a></li>
<li><a href="../html/106.9.umi.html">106.9.umi</a></li>
<li><a href="../html/108.http.html">108.http</a></li>
</ul>
</div>
<div class="warpper">
<div class="page-toc">
<ul>
<li><a href="#t01. JS模块化方面的不足">1. JS模块化方面的不足</a></li>
<li><a href="#t12. CommonJS规范">2. CommonJS规范</a></li>
<li><a href="#t23. Node中的CommonJS">3. Node中的CommonJS</a></li>
<li><a href="#t34. 模块分类">4. 模块分类</a>
<ul>
<li><a href="#t44.1 原生模块">4.1 原生模块</a></li>
<li><a href="#t54.2 文件模块">4.2 文件模块</a></li>
<li><a href="#t64.3 第三方模块">4.3 第三方模块</a>
<ul>
<li><a href="#t74.3.1 . 全局目录">4.3.1 . 全局目录</a></li>
</ul>
</li>
<li><a href="#t84.4 模块的加载策略">4.4 模块的加载策略</a></li>
<li><a href="#t94.5 文件模块查找规则">4.5 文件模块查找规则</a></li>
</ul>
</li>
<li><a href="#t105. 从模块外部访问模块内的成员">5. 从模块外部访问模块内的成员</a></li>
<li><a href="#t116. 模块对象的属性">6. 模块对象的属性</a></li>
<li><a href="#t127. 包">7. 包</a></li>
<li><a href="#t138. NPM">8. NPM</a>
<ul>
<li><a href="#t148.1 npm提供的功能">8.1 npm提供的功能</a></li>
<li><a href="#t158.2 npm命令">8.2 npm命令</a>
<ul>
<li><a href="#t168.2.1 (npm install)安装包">8.2.1 (npm install)安装包</a></li>
<li><a href="#t178.2.2 卸载包">8.2.2 卸载包</a></li>
<li><a href="#t188.2.3 更新包">8.2.3 更新包</a></li>
</ul>
</li>
<li><a href="#t198.3 包的安装模式">8.3 包的安装模式</a>
<ul>
<li><a href="#t208.3.1 本地安装">8.3.1 本地安装</a></li>
<li><a href="#t218.3.2 全局安装">8.3.2 全局安装</a></li>
</ul>
</li>
<li><a href="#t228.3 注册、登录和发布模块">8.3 注册、登录和发布模块</a></li>
<li><a href="#t238.4 npx">8.4 npx</a>
<ul>
<li><a href="#t248.4.1 调用项目安装的模块">8.4.1 调用项目安装的模块</a></li>
<li><a href="#t258.4.2 避免全局安装模块">8.4.2 避免全局安装模块</a></li>
<li><a href="#t268.4.3 --no-install 参数和--ignore-existing 参数">8.4.3 --no-install
参数和--ignore-existing 参数</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#t279. yarn">9. yarn</a>
<ul>
<li><a href="#t289.1 初始化一个新的项目">9.1 初始化一个新的项目</a></li>
<li><a href="#t299.2 添加一个依赖包">9.2 添加一个依赖包</a></li>
<li><a href="#t309.3 更新一个依赖包">9.3 更新一个依赖包</a></li>
<li><a href="#t319.4 删除一个依赖包">9.4 删除一个依赖包</a></li>
<li><a href="#t329.5 安装所有的依赖包">9.5 安装所有的依赖包</a></li>
</ul>
</li>
<li><a href="#t33参考">参考</a></li>
<li><a href="#t34参考资料">参考资料</a></li>
</ul>
</div>
<div class="content markdown-body">
<h2 id="t01. JS模块化方面的不足">1.
JS模块化方面的不足 <a
href="#t01. JS模块化方面的不足"> # </a></h2>
<ul>
<li>JS没有模块系统，不支持封闭的作用域和依赖管理
</li>
<li>没有标准库，没有文件系统和IO流API
</li>
<li>也没有包管理系统</li>
</ul>
<h2 id="t12. CommonJS规范">2. CommonJS规范 <a href="#t12. CommonJS规范">
# </a></h2>
<ul>
<li>封装功能</li>
<li>封闭作用域</li>
<li>可能解决依赖问题</li>
<li>工作效率更高，重构方便</li>
</ul>
<h2 id="t23. Node中的CommonJS">3. Node中的CommonJS <a
href="#t23. Node中的CommonJS"> # </a></h2>
<ul>
<li>在node.js
里，模块划分所有的功能，每个JS都是一个模块
</li>
<li>实现require方法,NPM实现了模块的自动加载和安装依赖
<pre><code>(function(exports,require,module,__filename,__dirname){
exports = module.exports={}
exports.name = 'zfpx';
exports = {name:'zfpx'};
return module.exports;
})
</code></pre>
</li>
</ul>
<h2 id="t34. 模块分类">4. 模块分类 <a
href="#t34. 模块分类"> # </a></h2>
<h3 id="t44.1 原生模块">4.1 原生模块 <a
href="#t44.1 原生模块"> # </a></h3>
<p><code>http</code> <code>path</code> <code>fs</code> <code>util</code> <code>events</code>
编译成二进制,加载速度最快，原来模块通过名称来加载
</p>
<h3 id="t54.2 文件模块">4.2 文件模块 <a
href="#t54.2 文件模块"> # </a></h3>
<p>在硬盘的某个位置，加载速度非常慢，文件模块通过名称或路径来加载
文件模块的后缀有三种</p>
<ul>
<li>后缀名为.js的JavaScript脚本文件,需要先读入内存再运行
</li>
<li>后缀名为.json的JSON文件,fs
读入内存 转化成JSON对象</li>
<li>后缀名为.node的经过编译后的二进制C/C++扩展模块文件,可以直接使用
<blockquote>
<p>一般自己写的通过路径来加载,别人写的通过名称去当前目录或全局的node_modules下面去找
</p>
</blockquote>
</li>
</ul>
<h3 id="t64.3 第三方模块">4.3 第三方模块 <a
href="#t64.3 第三方模块"> # </a></h3>
<ul>
<li>如果require函数只指定名称则视为从node_modules下面加载文件，这样的话你可以移动模块而不需要修改引用的模块路径
</li>
<li>第三方模块的查询路径包括module.paths和全局目录
</li>
</ul>
<h4 id="t74.3.1 . 全局目录">4.3.1 . 全局目录 <a
href="#t74.3.1 . 全局目录"> # </a></h4>
<p>window如果在环境变量中设置了<code>NODE_PATH</code>变量，并将变量设置为一个有效的磁盘目录，require在本地找不到此模块时向在此目录下找这个模块。
UNIX操作系统中会从 $HOME/.node_modules
$HOME/.node_libraries目录下寻找</p>
<h3 id="t84.4 模块的加载策略">4.4
模块的加载策略 <a
href="#t84.4 模块的加载策略"> # </a></h3>
<p><img src="http://img.zhufengpeixun.cn/lookmodule.png" alt="lookmodule"></p>
<h3 id="t94.5 文件模块查找规则">4.5
文件模块查找规则 <a
href="#t94.5 文件模块查找规则"> # </a></h3>
<p><img src="http://img.zhufengpeixun.cn/lookfile.png" alt="lookmodule"></p>
<h2
id="t105. 从模块外部访问模块内的成员">
5.
从模块外部访问模块内的成员
<a
href="#t105. 从模块外部访问模块内的成员">
# </a></h2>
<ul>
<li>使用exports对象</li>
<li>使用module.exports导出引用类型</li>
</ul>
<h2 id="t116. 模块对象的属性">6.
模块对象的属性 <a
href="#t116. 模块对象的属性"> # </a></h2>
<ul>
<li>module.id</li>
<li>module.filename</li>
<li>module.loaded</li>
<li>module.parent</li>
<li>module.children</li>
<li>module.paths</li>
</ul>
<h2 id="t127. 包">7. 包 <a href="#t127. 包"> # </a></h2>
<p>在Node.js中，可以通过包来对一组具有相互依赖关系的模块进行统一管理，通过包可以把某个独立功能封装起来
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm
install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境
</p>
<table>
<thead>
<tr>
<th style="text-align:left">项目</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">name</td>
<td style="text-align:left">项目名称</td>
</tr>
<tr>
<td style="text-align:left">version</td>
<td style="text-align:left">版本号</td>
</tr>
<tr>
<td style="text-align:left">description</td>
<td style="text-align:left">项目描述</td>
</tr>
<tr>
<td style="text-align:left">keywords: {Array}</td>
<td style="text-align:left">
关键词，便于用户搜索到我们的项目
</td>
</tr>
<tr>
<td style="text-align:left">homepage</td>
<td style="text-align:left">项目url主页</td>
</tr>
<tr>
<td style="text-align:left">bugs</td>
<td style="text-align:left">
项目问题反馈的Url或email配置
</td>
</tr>
<tr>
<td style="text-align:left">license</td>
<td style="text-align:left">项目许可证</td>
</tr>
<tr>
<td style="text-align:left">author,contributors</td>
<td style="text-align:left">作者和贡献者</td>
</tr>
<tr>
<td style="text-align:left">main</td>
<td style="text-align:left">主文件</td>
</tr>
<tr>
<td style="text-align:left">bin</td>
<td style="text-align:left">
项目用到的可执行文件配置
</td>
</tr>
<tr>
<td style="text-align:left">repository</td>
<td style="text-align:left">
项目代码存放地方</td>
</tr>
<tr>
<td style="text-align:left">scripts</td>
<td style="text-align:left">
声明一系列npm脚本指令</td>
</tr>
<tr>
<td style="text-align:left">dependencies</td>
<td style="text-align:left">
项目在生产环境中依赖的包
</td>
</tr>
<tr>
<td style="text-align:left">devDependencies</td>
<td style="text-align:left">
项目在生产环境中依赖的包
</td>
</tr>
<tr>
<td style="text-align:left">peerDependencies</td>
<td style="text-align:left">
应用运行依赖的宿主包
</td>
</tr>
</tbody>
</table>
<p><a href="https://docs.npmjs.com/files/package.json">package.json</a>
<a href="http://javascript.ruanyifeng.com/nodejs/packagejson.html">packagejson</a></p>
<h2 id="t138. NPM">8. NPM <a href="#t138. NPM"> # </a></h2>
<ul>
<li>安装完node之后只能使用Node语言特性及核心函数，我们还需要一个系统来下载、安装和管理第三方模块
</li>
<li>在Node里这个系统被称为Node包管理器(Node
Package Manager,NPM)</li>
</ul>
<h3 id="t148.1 npm提供的功能">8.1
npm提供的功能 <a
href="#t148.1 npm提供的功能"> # </a></h3>
<ul>
<li>公共注册服务，用户可以把自己写的包上传到服务器上
</li>
<li>命令行下载工具，用户可以通过npm命令把别人写的包下载到自己电脑上，还可以管理自己模块依赖的其它模块
</li>
</ul>
<p>搜索第三方包的地址</p>
<pre><code>https://www.npmjs.com/search
</code></pre>
<h3 id="t158.2 npm命令">8.2 npm命令 <a href="#t158.2 npm命令"> #
</a></h3>
<h5 id="t168.2.1 (npm install)安装包">8.2.1 (npm install)安装包
<a href="#t168.2.1 (npm install)安装包"> # </a></h5>
<ul>
<li>打开命令行或终端，进入要安装包的目录,然后执行以下命令安装依赖的模块
</li>
</ul>
<pre><code>npm install <package-name>
npm i mime
</code></pre>
<blockquote>
<p>此命令会从服务器上下载此模块到当前目录下的node_modules目录下，如果node_modules目录不存在则会创建一个
</p>
</blockquote>
<ul>
<li>
<p>也可以安装特定的版本</p>
<pre><code>npm install <package name>@<version spec>
npm i [email protected]
</code></pre>
</li>
<li>
<p>还可以使用一个版本号范围来替换
<version spec>点位符</version>
</p>
</li>
</ul>
<pre><code>npm i [email protected]
</code></pre>
<h5 id="t178.2.2 卸载包">8.2.2 卸载包 <a
href="#t178.2.2 卸载包"> # </a></h5>
<pre><code>npm uninstall <package name>
</code></pre>
<h5 id="t188.2.3 更新包">8.2.3 更新包 <a
href="#t188.2.3 更新包"> # </a></h5>
<p>我们还可以通过以下指令更新已经安装的包
</p>
<pre><code>npm update <package name>
</code></pre>
<h3 id="t198.3 包的安装模式">8.3
包的安装模式 <a
href="#t198.3 包的安装模式"> # </a></h3>
<h4 id="t208.3.1 本地安装">8.3.1 本地安装 <a
href="#t208.3.1 本地安装"> # </a></h4>
<ul>
<li>默认情况下安装命令会把对应的包安装到当前目录下，这叫本地安装，如果包里有可执行的文件NPM会把可执行文件安装到<code>./node_modules/.bin</code>目录下
</li>
<li>本地安装的模块只能在当前目录和当前目录的子目录里面使用
</li>
</ul>
<h4 id="t218.3.2 全局安装">8.3.2 全局安装 <a
href="#t218.3.2 全局安装"> # </a></h4>
<ul>
<li>如果希望安装的包能够在计算机机的所有目录下面都能使用就需要全局安装
</li>
</ul>
<pre><code class="lang-js">npm install <package-name> -g
npm install mime -g
<span class="hljs-attr">C</span>:\Users\zhufeng\AppData\Roaming\npm\node_modules\mime
</code></pre>
<ul>
<li>在全局安装的模式下，npm会把包安装到全局目录，通过此命令可以查看当前全局目录的位置
</li>
</ul>
<pre><code class="lang-js">npm root -g
<span class="hljs-attr">C</span>:\Users\Administrator\AppData\Roaming\npm\node_modules
</code></pre>
<ul>
<li>如果包里有可执行文件，会把可执行文件安装到此node_modules的上一级目录中。
</li>
</ul>
<pre><code class="lang-js">C:\Users\Administrator\AppData\Roaming\npm
</code></pre>
<ul>
<li>全局安装的一般是需要在任意目录下面执行的命令，比如<code>babel</code>
</li>
</ul>
<pre><code class="lang-js">npm install babel-cli -g
</code></pre>
<ul>
<li>如果全局安装的命令不能用则可能是没有正确配置用户变量<code>PATH</code>,需要在系统变量中为<code>PATH</code>变量添加全局安装目录
</li>
</ul>
<h3 id="t228.3 注册、登录和发布模块">8.3
注册、登录和发布模块 <a
href="#t228.3 注册、登录和发布模块">
# </a></h3>
<ol>
<li>注册npm账号</li>
</ol>
<p><a href="https://www.npmjs.com">npmjs</a></p>
<ol start="2">
<li>登录</li>
</ol>
<pre><code class="lang-js">npm login
</code></pre>
<ol start="3">
<li>发布</li>
</ol>
<pre><code class="lang-js">npm publish
</code></pre>
<h3 id="t238.4 npx">8.4 npx <a href="#t238.4 npx"> # </a></h3>
<ul>
<li>npm 从5.2版开始，增加了 npx 命令
</li>
</ul>
<h4 id="t248.4.1 调用项目安装的模块">8.4.1
调用项目安装的模块 <a
href="#t248.4.1 调用项目安装的模块"> #
</a></h4>
<ul>
<li>npx
想要解决的主要问题，就是调用项目内部安装的模块
</li>
</ul>
<pre><code class="lang-js">npm install -D mocha
</code></pre>
<blockquote>
<p>一般来说，调用mocha只能在<code>package.json</code>的scripts字段里面使用
</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"test"</span>: <span class="hljs-string">"mocha -version"</span>
}
</code></pre>
<pre><code class="lang-js">npx mocha --version
</code></pre>
<blockquote>
<p>npx
的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在
</p>
</blockquote>
<h4 id="t258.4.2 避免全局安装模块">8.4.2
避免全局安装模块 <a
href="#t258.4.2 避免全局安装模块"> # </a>
</h4>
<ul>
<li>除了调用项目内部模块，npx
还能避免全局安装的模块。比如，<code>create-react-app</code>这个模块是全局安装,npx
可以运行它,而且不进行全局安装
</li>
</ul>
<pre><code class="lang-js">$ npx create-react-app my-react-app
</code></pre>
<blockquote>
<p>上面代码运行时，npx
将create-react-app下载到一个临时目录，使用以后再删除
</p>
</blockquote>
<h4 id="t268.4.3 --no-install 参数和--ignore-existing 参数">8.4.3
--no-install 参数和--ignore-existing 参数 <a
href="#t268.4.3 --no-install 参数和--ignore-existing 参数"> #
</a></h4>
<ul>
<li>如果想让 npx
强制使用本地模块，不下载远程模块，可以使用<code>--no-install</code>参数。如果本地不存在该模块，就会报错
</li>
<li>反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用<code>--ignore-existing</code>参数
</li>
</ul>
<h2 id="t279. yarn">9. yarn <a href="#t279. yarn"> # </a></h2>
<p>Yarn
是一个依赖管理工具。它能够管理你的代码，并与全世界的开发者分享代码。
代码是通过包（有时也被称为模块）进行共享的。
在每一个包中包含了所有需要共享的代码，另外还定义了一个<code>package.json</code>文件，用来描述这个包。
</p>
<h3 id="t289.1 初始化一个新的项目">9.1
初始化一个新的项目 <a
href="#t289.1 初始化一个新的项目"> #
</a></h3>
<pre><code>yarn init
</code></pre>
<h3 id="t299.2 添加一个依赖包">9.2
添加一个依赖包 <a
href="#t299.2 添加一个依赖包"> # </a></h3>
<pre><code>yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
</code></pre>
<h3 id="t309.3 更新一个依赖包">9.3
更新一个依赖包 <a
href="#t309.3 更新一个依赖包"> # </a></h3>
<pre><code>yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
</code></pre>
<h3 id="t319.4 删除一个依赖包">9.4
删除一个依赖包 <a
href="#t319.4 删除一个依赖包"> # </a></h3>
<pre><code>yarn remove [package]
</code></pre>
<h3 id="t329.5 安装所有的依赖包">9.5
安装所有的依赖包 <a
href="#t329.5 安装所有的依赖包"> # </a></h3>
<pre><code>yarn
</code></pre>
<p>或者</p>
<pre><code>yarn install
</code></pre>
<h2 id="t33参考">参考 <a href="#t33参考"> # </a></h2>
<ul>
<li><a href="https://yarn.bootcss.com/">yarn</a></li>
</ul>
<h2 id="t34参考资料">参考资料 <a
href="#t34参考资料"> # </a></h2>
<ul>
<li><a
href="https://docs.npmjs.com/getting-started/what-is-npm">npm官方手册</a>
</li>
<li><a href="http://www.tuicool.com/articles/VB7nYn">npm总结</a></li>
</ul>
<div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc"
target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
$('.warpper .page-toc ul ul li a').removeClass('my-active')
$(this).addClass('my-active')
})
$('.logo').on('mouseenter',function(){
$('.nav').height('450px');
})
$('.nav').on('mouseleave',function(){
$('.nav').height('80px');
})
$('.logo').on('click',function(){
$('.nav').css('display','none');
$('.warpper').css('padding','0px');
})
// if (!$('.understand-me').length) {
// var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
// var count = bar / 26 / 2;
// var barHeight = $('.page-toc').outerHeight();
// $('.page-toc li').eq(0).children('a').addClass('red');
// var arr = [];
// $("h1,h2,h3,h4,h5,h6").each(function () {
// arr.push($(this).position().top);
// });
// var timer
// function dark() {
// clearTimeout(timer)
// timer = setTimeout(function () {
// var top = Math.abs($('.page-toc > ul').position().top);
// var cur = $('.content').scrollTop();
// for (var i = arr.length; i >= 0; i--) {
// if (arr[i] <= cur) {
// break;
// }
// }
// if (i === -1) {
// i = 0;
// }
// $('.page-toc li a').removeClass('red');
// $('.page-toc li').eq(i).children('a').addClass('red');
// let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
// $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
// },200)
// }
// $('.content').on('scroll', dark);
// }
</script>
<style>
/* ::-webkit-scrollbar{width:14px;}
::-webkit-scrollbar-track{background-color:transparent;}
::-webkit-scrollbar-thumb{background-color:transparent;}
::-webkit-scrollbar-thumb:hover {background-color:transparent}
::-webkit-scrollbar-thumb:active {background-color:transparent} */
.page-toc>ul .red {
background: #f3f3f3;
z-index: 1;
border-left: 3px solid #009a61;
-webkit-transition: all .2s ease;
transition: all .2s ease;
color: #000
}
</style>
</body>
</html>