-
Notifications
You must be signed in to change notification settings - Fork 1
/
search.xml
5645 lines (5141 loc) · 818 KB
/
search.xml
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
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Flex布局</title>
<url>/2020/02/21/2875753233/</url>
<content><![CDATA[<h1 id="Flex布局"><a href="#Flex布局" class="headerlink" title="Flex布局"></a>Flex布局</h1><p><img src="http://img.chensenran.top/1582300462845.jpg" alt=""></p>
<h2 id="容器属性"><a href="#容器属性" class="headerlink" title="容器属性"></a>容器属性</h2><h3 id="flex-direction"><a href="#flex-direction" class="headerlink" title="flex-direction"></a>flex-direction</h3><blockquote>
<p>主轴方向。</p>
</blockquote>
<ul>
<li><p>row : 从左向右</p>
</li>
<li><p>row-reverse : 从右向左</p>
</li>
<li><p>column : 从上向下</p>
</li>
<li><p>column-reverse : 从下向上</p>
</li>
</ul>
<h3 id="flex-wrap"><a href="#flex-wrap" class="headerlink" title="flex-wrap"></a>flex-wrap</h3><blockquote>
<p>单行或者多行，是否允许换行</p>
</blockquote>
<ul>
<li>nowrap : 不换行</li>
<li>wrap : 第一行在上方</li>
<li>wrap-reverse : 第一行在下方</li>
</ul>
<h3 id="flex-flow"><a href="#flex-flow" class="headerlink" title="flex-flow"></a>flex-flow</h3><blockquote>
<p>flex-direction | flex- wrap 简写</p>
</blockquote>
<h3 id="justify-content"><a href="#justify-content" class="headerlink" title="justify-content"></a>justify-content</h3><blockquote>
<p>主轴对齐方式</p>
</blockquote>
<ul>
<li>flex-start : 左对齐</li>
<li>flex-end : 右对齐</li>
<li>center : 居中</li>
<li>space-between : 两端对齐，中间间隔相等</li>
<li>space-around : 每个项目两侧的间隔相等，所以项目之间的间隔比边缘大一倍</li>
</ul>
<h3 id="align-items"><a href="#align-items" class="headerlink" title="align-items"></a>align-items</h3><blockquote>
<p>交叉轴上的对齐方式</p>
</blockquote>
<ul>
<li>stretch : 充满（默认）</li>
<li>flex-start : 起点对齐</li>
<li>flex-end : 终点对齐</li>
<li>center : 中点对齐</li>
<li>baseline : 第一行文字底部为基准线</li>
</ul>
<h3 id="align-content"><a href="#align-content" class="headerlink" title="align-content"></a>align-content</h3><blockquote>
<p>多跟轴线对齐方式</p>
</blockquote>
<ul>
<li>stretch : 充满（默认）</li>
<li>flex-start : 起点对齐</li>
<li>flex-end : 终点对齐</li>
<li>center : 中点对齐</li>
<li>space-between : 轴线两端对齐，中间间隔相等</li>
<li>space-around : 每个项目两侧的间隔相等，所以项目之间的间隔比边缘大一倍</li>
</ul>
<h2 id="项目属性"><a href="#项目属性" class="headerlink" title="项目属性"></a>项目属性</h2><h3 id="order"><a href="#order" class="headerlink" title="order"></a>order</h3><blockquote>
<p>定义项目排列顺序</p>
</blockquote>
<h3 id="flex-basis"><a href="#flex-basis" class="headerlink" title="flex-basis"></a>flex-basis</h3><blockquote>
<p>定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间</p>
</blockquote>
<h3 id="flex-grow"><a href="#flex-grow" class="headerlink" title="flex-grow"></a>flex-grow</h3><blockquote>
<p>定义项目的放大比例</p>
</blockquote>
<ul>
<li><p>默认值为 0，即如果存在剩余空间，也不放大 </p>
</li>
<li><p>如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。</p>
</li>
<li><p>如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。</p>
</li>
</ul>
<h3 id="flex-shrink"><a href="#flex-shrink" class="headerlink" title="flex-shrink"></a>flex-shrink</h3><blockquote>
<p>定义了项目的缩小比例</p>
</blockquote>
<ul>
<li>默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。 </li>
<li>如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。 </li>
</ul>
<h3 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h3><blockquote>
<p>flex-grow , flex-shrink, flex-basis 缩写</p>
</blockquote>
<ul>
<li>flex 的默认值是 0 1 auto </li>
<li>auto ：1 1 auto</li>
<li>none：0 0 auto</li>
</ul>
<h3 id="align-self"><a href="#align-self" class="headerlink" title="align-self"></a>align-self</h3><blockquote>
<p>单个项目与其他项目不一样的对齐方式</p>
</blockquote>
<ul>
<li>align-self: auto | flex-start | flex-end | center | baseline | stretch;</li>
</ul>
]]></content>
<categories>
<category>CSS</category>
</categories>
<tags>
<tag>Flex</tag>
</tags>
</entry>
<entry>
<title>Git命令整理</title>
<url>/2020/02/23/2687911277/</url>
<content><![CDATA[<h1 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git init</span><br></pre></td></tr></table></figure>
<h1 id="版本管理"><a href="#版本管理" class="headerlink" title="版本管理"></a>版本管理</h1><ul>
<li>添加文件：git add <fileName></li>
<li>提交至暂存区：git commit -m “something”</li>
<li>查看状态：git status</li>
<li>查看不同：git diff <fileName></li>
<li>查看日志：git log</li>
<li>回滚历史版本：git reset –hard <commit_id></li>
<li>查看命令历史：git reflog</li>
<li>丢弃工作区修改：git checkout – file</li>
<li>丢弃暂存区修改：git reset HEAD <fileName></li>
<li>删除文件：git rm <fileName></li>
</ul>
<h1 id="远程仓库"><a href="#远程仓库" class="headerlink" title="远程仓库"></a>远程仓库</h1><ul>
<li>关联远程仓库：git remote add origin <address></li>
<li>推送并关联master分支：git push -u origin master</li>
<li>推送master分支：git push origin master</li>
<li>克隆项目：git clone <address></li>
</ul>
<h1 id="分支"><a href="#分支" class="headerlink" title="分支"></a>分支</h1><ul>
<li>创建分支：git branch <name></li>
<li>切换分支：git checkout <name></li>
<li>创建并切换分支：git checkout -b <name></li>
<li>查看当前分支：git branch</li>
<li>与当前分支合并：git merge <name></li>
<li>删除分支：git branch -d <name></li>
<li>产看合并图：git log –graph</li>
<li>推送分支：git push origin <name></li>
<li>拉取：git pull</li>
<li>链接关系创建：git branch –set-upstream-to <name> origin/<name></li>
<li>查看远程库信息：git remote -v<h2 id="新版本命令"><a href="#新版本命令" class="headerlink" title="新版本命令"></a>新版本命令</h2></li>
<li>创建：git switch -c <name></li>
<li>切换：git switch <name></li>
</ul>
<h2 id="Bug分支"><a href="#Bug分支" class="headerlink" title="Bug分支"></a>Bug分支</h2><ul>
<li>暂存当前分支：git stash</li>
<li>查看当前暂存列表：git stash list</li>
<li>恢复暂存：git stash apply</li>
<li>删除暂存：git stash drop</li>
<li>恢复暂存并删除：git stash pop</li>
<li>复制bug分支修改内容到当前分支：git cherry-pick <commit></li>
</ul>
<h1 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h1><ul>
<li>创建标签：git tag <name> ?<commit></li>
<li>查看所有标签：git tag</li>
<li>查看标签详情：git show <name></li>
<li>创建带注释的标签：git tag -a <name> -m “<message>” <commit></li>
<li>删除标签：git tag -d <name></li>
<li>推送标签：git push origin <name></li>
<li>推送所有标签：git push origin –tags</li>
<li>删除远程标签：git push origin :refs/tags/<name></li>
</ul>
]]></content>
<tags>
<tag>git</tag>
</tags>
</entry>
<entry>
<title>Grid布局</title>
<url>/2020/02/22/3615068729/</url>
<content><![CDATA[<h1 id="Grid布局"><a href="#Grid布局" class="headerlink" title="Grid布局"></a>Grid布局</h1><p><img src="http://img.chensenran.top/1582385835420.png" alt=""></p>
<h2 id="容器属性"><a href="#容器属性" class="headerlink" title="容器属性"></a>容器属性</h2><h3 id="display"><a href="#display" class="headerlink" title="display"></a>display</h3><ul>
<li>grid</li>
<li>inline-grid</li>
<li>subgrid : 嵌套</li>
</ul>
<h3 id="grid-template-columns-grid-template-rows"><a href="#grid-template-columns-grid-template-rows" class="headerlink" title="grid-template-columns / grid-template-rows"></a>grid-template-columns / grid-template-rows</h3><blockquote>
<p>定义轨道大小和线名</p>
</blockquote>
<ul>
<li>[line-name line-name-second] <tarck-size> [line-name]</li>
<li>repeat(num, value) : 重复部分<ul>
<li>repeat(auto-fill, 100px) : 单元格宽度确定，容器不确定。auto-fill：尽可能多的排列</li>
</ul>
</li>
<li>fr : 设置为自由空间的一部分</li>
<li>minmax(minValue, maxValue) : 产生长度的范围</li>
<li>auto : 浏览器决定</li>
</ul>
<h3 id="grid-template-areas"><a href="#grid-template-areas" class="headerlink" title="grid-template-areas"></a>grid-template-areas</h3><blockquote>
<p>重复网格区域的名称，扩展到这些单元格。（grid-area 引用名称）</p>
</blockquote>
<ul>
<li>‘.‘ : 空单元</li>
<li>‘none’ : 没有定义网格的区域</li>
</ul>
<h3 id="grid-template"><a href="#grid-template" class="headerlink" title="grid-template"></a>grid-template</h3><blockquote>
<p>grid-template-columns 、grid-template-rows、grid-template-areas 简写</p>
</blockquote>
<ul>
<li><p>none : 初始值</p>
</li>
<li><p>subgrid : grid-template-columns 、grid-template-rows为subgrid，grid-template-areas为初始值</p>
</li>
<li><p>grid-template-rows / grid-template-columns</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">grid-template</span>: <span class="selector-attr">[header-left]</span> "<span class="selector-tag">head</span> <span class="selector-tag">head</span>" 30<span class="selector-tag">px</span> <span class="selector-attr">[header-right]</span></span><br><span class="line"> <span class="selector-attr">[main-left]</span> "<span class="selector-tag">nav</span> <span class="selector-tag">main</span>" 1<span class="selector-tag">fr</span> <span class="selector-attr">[main-right]</span></span><br><span class="line"> <span class="selector-attr">[footer-left]</span> "<span class="selector-tag">nav</span> <span class="selector-tag">foot</span>" 30<span class="selector-tag">px</span> <span class="selector-attr">[footer-right]</span></span><br><span class="line"> / 120px 1fr;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="column-gap-row-gap"><a href="#column-gap-row-gap" class="headerlink" title="column-gap / row-gap"></a>column-gap / row-gap</h3><blockquote>
<p>网格线的大小，行列的间距</p>
</blockquote>
<ul>
<li><number></li>
</ul>
<h3 id="gap"><a href="#gap" class="headerlink" title="gap"></a>gap</h3><blockquote>
<p><row-gap> / <column-gap>简写</p>
</blockquote>
<h3 id="justify-items-align-items-place-items"><a href="#justify-items-align-items-place-items" class="headerlink" title="justify-items / align-items / place-items"></a>justify-items / align-items / place-items</h3><ul>
<li>jusify-items : 项目的水平位置</li>
</ul>
<p><img src="http://img.chensenran.top/1582384374826.png" alt=""></p>
<ul>
<li>align-items : 项目的垂直位置</li>
</ul>
<p><img src="http://img.chensenran.top/1582384444138.png" alt=""></p>
<ul>
<li><p>place-items</p>
<blockquote>
<p><align-items> 和 <justify-items> 缩写</p>
</blockquote>
</li>
</ul>
<p>可选值为：</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>stretch</li>
</ul>
<h3 id="justify-content-align-content-place-content"><a href="#justify-content-align-content-place-content" class="headerlink" title="justify-content / align-content / place-content"></a>justify-content / align-content / place-content</h3><ul>
<li>justify-content : 表格的水平位置</li>
</ul>
<p><img src="http://img.chensenran.top/1582384766966.png" alt=""></p>
<ul>
<li><p>align-content : 表格的垂直位置</p>
</li>
<li><p>place-content</p>
<blockquote>
<p><align-content> 和 <justify-content> 简写</p>
</blockquote>
</li>
</ul>
<p>可选值为：</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>space-between</li>
<li>space-around</li>
<li>space-evenly</li>
</ul>
<h3 id="grid-auto-columns-grid-auto-rows"><a href="#grid-auto-columns-grid-auto-rows" class="headerlink" title="grid-auto-columns / grid-auto-rows"></a>grid-auto-columns / grid-auto-rows</h3><blockquote>
<p>隐式网格大小，和 grid-template-columns 、grid-template-rows 用法相同</p>
</blockquote>
<h3 id="grid-auto-flow"><a href="#grid-auto-flow" class="headerlink" title="grid-auto-flow"></a>grid-auto-flow</h3><blockquote>
<p>容器放置的顺序</p>
</blockquote>
<ul>
<li>row <dense></li>
<li>column <dense></li>
</ul>
<p>下图为 grid-auto-flow : column</p>
<p><img src="http://img.chensenran.top/1582385208388.png" alt=""></p>
<p>下图为 grid-auto-flow : column dense</p>
<p><img src="http://img.chensenran.top/1582385281591.png" alt=""></p>
<h3 id="grid"><a href="#grid" class="headerlink" title="grid"></a>grid</h3><ul>
<li><grid-template> </li>
<li><grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?</li>
<li>[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns></li>
</ul>
<h2 id="项目属性"><a href="#项目属性" class="headerlink" title="项目属性"></a>项目属性</h2><h3 id="grid-column-start-grid-column-end-grid-row-start-grid-row-end"><a href="#grid-column-start-grid-column-end-grid-row-start-grid-row-end" class="headerlink" title="grid-column-start / grid-column-end / grid-row-start / grid-row-end"></a>grid-column-start / grid-column-end / grid-row-start / grid-row-end</h3><blockquote>
<p>griditem 的起始位置</p>
</blockquote>
<ul>
<li><line> : 线名字</li>
<li>span <number> : 跨越指定数量的网格</li>
<li>span <name> : 跨域网格，直到指定的网格线</li>
<li>auto</li>
</ul>
<h3 id="grid-column-grid-row"><a href="#grid-column-grid-row" class="headerlink" title="grid-column / grid-row"></a>grid-column / grid-row</h3><blockquote>
<p>grid-column : 为 grid-column-start / grid-column-end 简写</p>
<p>grid-row : 为 grid-row-start / grid-row-end 简写</p>
</blockquote>
<h3 id="grid-area"><a href="#grid-area" class="headerlink" title="grid-area"></a>grid-area</h3><blockquote>
<p>放置在哪个区域内</p>
</blockquote>
<ul>
<li><name> : 与 grid-template-area 内设置的值相对应 或与grid-column 、grid-row 一起确定</li>
</ul>
<h3 id="justify-self-align-self"><a href="#justify-self-align-self" class="headerlink" title="justify-self / align-self"></a>justify-self / align-self</h3><blockquote>
<p>单元格内的位置</p>
</blockquote>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>stretch</li>
</ul>
]]></content>
<categories>
<category>CSS</category>
</categories>
<tags>
<tag>Grid</tag>
</tags>
</entry>
<entry>
<title>JS源码实现</title>
<url>/2020/02/27/3789819937/</url>
<content><![CDATA[<p>最近面试或多或少要求写一写JS的源码，看了很多博客，在此整理一下。</p>
<h1 id="改变this指向"><a href="#改变this指向" class="headerlink" title="改变this指向"></a>改变this指向</h1><h2 id="call"><a href="#call" class="headerlink" title="call"></a>call</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模拟call</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{Object}</span> <span class="variable">obj</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{*}</span> <span class="variable">args</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{*}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.call = <span class="function"><span class="keyword">function</span> (<span class="params">obj, ...args</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="keyword">this</span> !== <span class="string">'function'</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`<span class="subst">${<span class="keyword">this</span>}</span> is not function...`</span>);</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> _fn = <span class="built_in">Symbol</span>(<span class="string">'_fn'</span>); <span class="comment">// 唯一</span></span><br><span class="line"> obj[_fn] = <span class="keyword">this</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> result = obj[_fn](...args); <span class="comment">// 调用</span></span><br><span class="line"> <span class="keyword">delete</span> obj[_fn];</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="apply"><a href="#apply" class="headerlink" title="apply"></a>apply</h2><blockquote>
<p>apply和call的区别在于传参的方式不同，apply第二个参数为数组</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模拟apply方法</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{Object}</span> <span class="variable">obj</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{Array}</span> <span class="variable">args</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{*}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.$apply = <span class="function"><span class="keyword">function</span> (<span class="params">obj, args = []</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="keyword">this</span> !== <span class="string">'function'</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`<span class="subst">${<span class="keyword">this</span>}</span> is not function...`</span>);</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> _fn = <span class="built_in">Symbol</span>(<span class="string">'_fn'</span>);</span><br><span class="line"> obj[_fn] = <span class="keyword">this</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> result = obj[_fn](...args);</span><br><span class="line"> <span class="keyword">delete</span> obj[_fn];</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="bind"><a href="#bind" class="headerlink" title="bind"></a>bind</h2><ul>
<li>作为构造函数，new绑定的优先级高于显示绑定和硬绑定</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模拟bind方法</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{Object}</span> <span class="variable">obj</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{*}</span> <span class="variable">args</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{function}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">Function</span>.prototype.bind = <span class="function"><span class="keyword">function</span> (<span class="params">obj, ...args</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="keyword">this</span> !== <span class="string">'function'</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`<span class="subst">${<span class="keyword">this</span>}</span> is not function...`</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> self = <span class="keyword">this</span>;</span><br><span class="line"> <span class="keyword">const</span> Fun = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{} <span class="comment">// 用于保存原函数的原型</span></span><br><span class="line"> <span class="keyword">const</span> bound = <span class="function"><span class="keyword">function</span> (<span class="params">...funArgs</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> self.call(</span><br><span class="line"> <span class="keyword">this</span> <span class="keyword">instanceof</span> Fun ? <span class="keyword">this</span> : obj, <span class="comment">// 判断是否 new 调用</span></span><br><span class="line"> ...args,</span><br><span class="line"> ...funArgs</span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> Fun.prototype = self.prototype;</span><br><span class="line"> bound.prototype = <span class="keyword">new</span> Fun(); <span class="comment">// 修改绑定函数的原型</span></span><br><span class="line"> <span class="keyword">return</span> bound;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="reduce"><a href="#reduce" class="headerlink" title="reduce"></a>reduce</h1><blockquote>
<p>array.reduce(function(total, currentValue, currentIndex, arr), initialValue)</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模拟reduce实现</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{function}</span> <span class="variable">cb</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{*}</span> <span class="variable">initialValue</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{Array|*}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">Array</span>.prototype.reduce = <span class="function"><span class="keyword">function</span> (<span class="params">cb, initialValue</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> cb !== <span class="string">'function'</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="built_in">TypeError</span>(<span class="string">`<span class="subst">${cb}</span> is not function...`</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.length === <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> pre = <span class="built_in">arguments</span>.length < <span class="number">2</span> ? <span class="keyword">this</span>[<span class="number">0</span>] : initialValue;</span><br><span class="line"> <span class="comment">// 循环遍历，每一项都调用函数</span></span><br><span class="line"> <span class="keyword">this</span>.forEach(<span class="function">(<span class="params">item, index, array</span>) =></span> {</span><br><span class="line"> pre = cb(pre, item, index, array);</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> pre;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="new"><a href="#new" class="headerlink" title="new"></a>new</h1><ol>
<li>创建新对象</li>
<li>修改作用域</li>
<li>运行构造函数</li>
<li>返回新对象或构造函数返回结果<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模拟new</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{function}</span> <span class="variable">constructor</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">{*}</span><span class="variable">args</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{*}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myNew</span>(<span class="params">constructor, ...args</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> obj = {}; <span class="comment">// 创建对象</span></span><br><span class="line"> obj.__proto__ = <span class="keyword">constructor</span>.prototype; // 继承，访问构造器属性</span><br><span class="line"> const result = <span class="keyword">constructor</span>.apply(obj, args);</span><br><span class="line"></span><br><span class="line"> // 如果构造函数返回的是引用类型，则返回该引用类型</span><br><span class="line"> return typeof result === 'object'</span><br><span class="line"> ? result</span><br><span class="line"> : obj;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="Object-create"><a href="#Object-create" class="headerlink" title="Object.create"></a>Object.create</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Object.create实现</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">prototype</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">properties</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{Object}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">Object</span>.create = <span class="function"><span class="keyword">function</span> (<span class="params">prototype, properties</span>) </span>{</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>{</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> F.prototype = properties;</span><br><span class="line"> <span class="keyword">const</span> obj = <span class="keyword">new</span> F();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (properties) {</span><br><span class="line"> <span class="built_in">Object</span>.defineProperties(obj, properties);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> obj;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="extend"><a href="#extend" class="headerlink" title="extend"></a>extend</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 继承实现</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">child</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">parent</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">$extend</span>(<span class="params">child, parent</span>) </span>{</span><br><span class="line"> <span class="comment">// 改变__proto__</span></span><br><span class="line"> <span class="built_in">Object</span>.setPrototypeOf(child, parent);</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">_fun</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.constructor = child;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> child.prototype =</span><br><span class="line"> parent === <span class="literal">null</span></span><br><span class="line"> ? <span class="built_in">Object</span>.create(<span class="literal">null</span>)</span><br><span class="line"> : ((_fun.prototype = parent.prototype), <span class="keyword">new</span> _fun());</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="instanceof"><a href="#instanceof" class="headerlink" title="instanceof"></a>instanceof</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">instanceOf</span>(<span class="params">obj, target</span>) </span>{</span><br><span class="line"> obj = <span class="built_in">Object</span>.getPrototypeOf(obj);</span><br><span class="line"> <span class="keyword">while</span> (obj) {</span><br><span class="line"> <span class="keyword">if</span> (target.prototype === obj) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> obj = <span class="built_in">Object</span>.getPrototypeOf(obj);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="Promise-all"><a href="#Promise-all" class="headerlink" title="Promise.all"></a>Promise.all</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Promise</span>.all = <span class="function"><span class="keyword">function</span>(<span class="params">promiseArray</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">const</span> len = promiseArray.length</span><br><span class="line"> <span class="keyword">const</span> result = <span class="keyword">new</span> <span class="built_in">Array</span>(len).fill(<span class="literal">null</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> promiseArray.forEach(<span class="function">(<span class="params">p, index</span>) =></span> {</span><br><span class="line"> p.then(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> result[index] = res;</span><br><span class="line"> count++;</span><br><span class="line"> <span class="keyword">if</span> (count === len) {</span><br><span class="line"> resolve(result);</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }).catch(<span class="function"><span class="params">err</span> =></span> reject(err))</span><br><span class="line"> })</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h1 id="Promise-all-并发控制"><a href="#Promise-all-并发控制" class="headerlink" title="Promise.all 并发控制"></a>Promise.all 并发控制</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 实现并发控制</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>limitCount 并发上限</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>array 请求参数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>fun 处理函数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{Promise}</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">asyncPool</span>(<span class="params">limitCount, array, fun</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> loading = [] <span class="comment">// 正在请求数组</span></span><br><span class="line"> <span class="keyword">const</span> res = []; <span class="comment">// 结果数组</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">queue</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 递归判断</span></span><br><span class="line"> <span class="keyword">if</span> (array.length === <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> item = <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="params">()</span> =></span> fun(array.shift()));</span><br><span class="line"> res.push(item);</span><br><span class="line"> <span class="keyword">const</span> e = item.then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> loading.splice(loading.indexOf(e), <span class="number">1</span>); <span class="comment">// 请求结束,删除元素</span></span><br><span class="line"> })</span><br><span class="line"> loading.push(e);</span><br><span class="line"> <span class="keyword">let</span> t = <span class="built_in">Promise</span>.resolve();</span><br><span class="line"> <span class="keyword">if</span> (loading.length >= limitCount) {</span><br><span class="line"> t = <span class="built_in">Promise</span>.race(loading); <span class="comment">// 达到并发上限,等待最先返回</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> t.then(<span class="function"><span class="params">()</span> =></span> queue());</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> queue().then(<span class="function"><span class="params">()</span> =></span> <span class="built_in">Promise</span>.all(res))</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>JavaScript</category>
</categories>
<tags>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title>Mockjs</title>
<url>/2020/02/24/577341194/</url>
<content><![CDATA[<h1 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h1><h2 id="DTD（数据模板定义规范）"><a href="#DTD（数据模板定义规范）" class="headerlink" title="DTD（数据模板定义规范）"></a>DTD（数据模板定义规范）</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 属性名 name</span></span><br><span class="line"><span class="comment">// 生成规则 rule</span></span><br><span class="line"><span class="comment">// 属性值 value</span></span><br><span class="line"><span class="string">'name|rule'</span>: value</span><br></pre></td></tr></table></figure>
<p>生成规则 有 7 种格式：</p>
<ol>
<li>‘name|min-max’: value</li>
<li>‘name|count’: value</li>
<li>‘name|min-max.dmin-dmax’: value</li>
<li>‘name|min-max.dcount’: value</li>
<li>‘name|count.dmin-dmax’: value</li>
<li>‘name|count.dcount’: value</li>
<li>‘name|+step’: value</li>
</ol>
<p>生成规则和示例：</p>
<ol>
<li><p>属性值是字符串 String</p>
<ul>
<li><p>‘name|min-max’: string</p>
<p>通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。</p>
</li>
<li><p>‘name|count’: string</p>
<p>通过重复 string 生成一个字符串，重复次数等于 count。</p>
</li>
</ul>
</li>
<li><p>属性值是数字 Number</p>
<ul>
<li><p>‘name|+1’: number</p>
<p>属性值自动加 1，初始值为 number。</p>
</li>
<li><p>‘name|min-max’: number</p>
<p>生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。</p>
</li>
<li><p>‘name|min-max.dmin-dmax’: number</p>
<p>生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Mock.mock({</span><br><span class="line"> <span class="string">'number1|1-100.1-10'</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="string">'number2|123.1-10'</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="string">'number3|123.3'</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="string">'number4|123.10'</span>: <span class="number">1.123</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// =></span></span><br><span class="line">{</span><br><span class="line"> <span class="string">"number1"</span>: <span class="number">12.92</span>,</span><br><span class="line"> <span class="string">"number2"</span>: <span class="number">123.51</span>,</span><br><span class="line"> <span class="string">"number3"</span>: <span class="number">123.777</span>,</span><br><span class="line"> <span class="string">"number4"</span>: <span class="number">123.1231091814</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>属性值是布尔型 Boolean</p>
<ul>
<li><p>‘name|1’: boolean</p>
<p>随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。</p>
</li>
<li><p>‘name|min-max’: value</p>
<p>随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。</p>
</li>
</ul>
</li>
<li><p>属性值是对象 Object</p>
<ul>
<li><p>‘name|count’: object</p>
<p>从属性值 object 中随机选取 count 个属性。</p>
</li>
<li><p>‘name|min-max’: object</p>
<p>从属性值 object 中随机选取 min 到 max 个属性。</p>
</li>
</ul>
</li>
<li><p>属性值是数组 Array</p>
<ul>
<li><p>‘name|1’: array</p>
<p>从属性值 array 中随机选取 1 个元素，作为最终值。</p>
</li>
<li><p>‘name|+1’: array</p>
<p>从属性值 array 中顺序选取 1 个元素，作为最终值。</p>
</li>
<li><p>‘name|min-max’: array</p>
<p>通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。</p>
</li>
<li><p>‘name|count’: array</p>
<p>通过重复属性值 array 生成一个新数组，重复次数为 count。</p>
</li>
</ul>
</li>
<li><p>属性值是函数 Function</p>
<ul>
<li><p>‘name’: function</p>
<p>执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。</p>
</li>
</ul>
</li>
<li><p>属性值是正则表达式 RegExp</p>
<ul>
<li><p>‘name’: regexp</p>
<p>根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Mock.mock({</span><br><span class="line"> <span class="string">'regexp1'</span>: <span class="regexp">/[a-z][A-Z][0-9]/</span>,</span><br><span class="line"> <span class="string">'regexp2'</span>: <span class="regexp">/\w\W\s\S\d\D/</span>,</span><br><span class="line"> <span class="string">'regexp3'</span>: <span class="regexp">/\d{5,10}/</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// =></span></span><br><span class="line">{</span><br><span class="line"> <span class="string">"regexp1"</span>: <span class="string">"pJ7"</span>,</span><br><span class="line"> <span class="string">"regexp2"</span>: <span class="string">"F)\fp1G"</span>,</span><br><span class="line"> <span class="string">"regexp3"</span>: <span class="string">"561659409"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
<h2 id="DPD（数据占位符定义规范）"><a href="#DPD（数据占位符定义规范）" class="headerlink" title="DPD（数据占位符定义规范）"></a>DPD（数据占位符定义规范）</h2><p>占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@占位符</span><br><span class="line">@占位符(参数 [, 参数])</span><br></pre></td></tr></table></figure>
<h1 id="Mock-mock"><a href="#Mock-mock" class="headerlink" title="Mock.mock()"></a>Mock.mock()</h1><blockquote>
<p>Mock.mock( rurl?, rtype?, template|function( options ) )</p>
</blockquote>
<ul>
<li>rurl：需要拦截的URL，字符串或正则</li>
<li>rtype：Ajax请求类型</li>
<li>template：数据模板，对象或模板</li>
<li>function：响应数据的函数</li>
<li>options：本请求的选项集，包含url/type/body</li>
</ul>
<h1 id="Mock-setup"><a href="#Mock-setup" class="headerlink" title="Mock.setup()"></a>Mock.setup()</h1><blockquote>
<p>配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Mock.setup({</span><br><span class="line"> timeout: <span class="string">'200-600'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h1 id="Mock-Random"><a href="#Mock-Random" class="headerlink" title="Mock.Random"></a>Mock.Random</h1><blockquote>
<p>Mock.Random 是一个工具类，用于生成各种随机数据。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> Random = Mock.Random</span><br><span class="line">Random.email()</span><br><span class="line"><span class="comment">// => "n.clark@miller.io"</span></span><br><span class="line">Mock.mock(<span class="string">'@email'</span>)</span><br><span class="line"><span class="comment">// => "y.lee@lewis.org"</span></span><br><span class="line">Mock.mock( { <span class="attr">email</span>: <span class="string">'@email'</span> } )</span><br><span class="line"><span class="comment">// => { email: "v.lewis@hall.gov" }</span></span><br></pre></td></tr></table></figure>
<p>扩展</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Random.extend({</span><br><span class="line"> constellation: <span class="function"><span class="keyword">function</span>(<span class="params">date</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> constellations = [<span class="string">'白羊座'</span>, <span class="string">'金牛座'</span>, <span class="string">'双子座'</span>, <span class="string">'巨蟹座'</span>, <span class="string">'狮子座'</span>, <span class="string">'处女座'</span>, <span class="string">'天秤座'</span>, <span class="string">'天蝎座'</span>, <span class="string">'射手座'</span>, <span class="string">'摩羯座'</span>, <span class="string">'水瓶座'</span>, <span class="string">'双鱼座'</span>]</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.pick(constellations)</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line">Random.constellation()</span><br><span class="line"><span class="comment">// => "水瓶座"</span></span><br><span class="line">Mock.mock(<span class="string">'@CONSTELLATION'</span>)</span><br><span class="line"><span class="comment">// => "天蝎座"</span></span><br><span class="line">Mock.mock({</span><br><span class="line"> constellation: <span class="string">'@CONSTELLATION'</span></span><br><span class="line">})</span><br><span class="line"><span class="comment">// => { constellation: "射手座" }</span></span><br></pre></td></tr></table></figure>
<h2 id="Basic"><a href="#Basic" class="headerlink" title="Basic"></a>Basic</h2><ol>
<li>Random.boolean( min?, max?, current? ) => 一个随机的布尔值</li>
<li>Random.natural( min?, max? ) => 一个随机的自然数</li>
<li>Random.integer( min?, max? ) => 一个随机的整数</li>
<li>Random.float( min?, max?, dmin?, dmax? ) => 一个浮点数</li>
<li>Random.character( pool? ) => 一个随机字符<br> pool: ‘lower’/ ‘upper’/‘number’/‘symbol’/字符串选项</li>
<li>Random.string( pool?, min?, max? ) => 一个随机字符串</li>
<li>Random.range( start, stop?, step? ) => 一个整型数组</li>
</ol>
<h2 id="Date"><a href="#Date" class="headerlink" title="Date"></a>Date</h2><ol>
<li>Random.date( format? ) => 一个随机日期的字符串</li>
<li>Random.time( format? ) => 一个随机时间的字符串</li>
<li>Random.datetime( format? ) => 一个随机的日期和时间的字符串</li>
<li>Random.now( unit?, format? ) => 当前的日期和时间字符串</li>
</ol>
<h2 id="Image"><a href="#Image" class="headerlink" title="Image"></a>Image</h2><ol>
<li>Random.image( size?, background?, foreground?, format?, text? )</li>
<li>Random.dataImage( size?, text? ) => 一段随机的base64编码</li>
</ol>
<h2 id="Color"><a href="#Color" class="headerlink" title="Color"></a>Color</h2><ol>
<li>Random.color()</li>
<li>Random.hex()</li>
<li>Random.rgb()</li>
<li>Random.rgba()</li>
<li>Random.hsl()</li>
</ol>
<h2 id="Text"><a href="#Text" class="headerlink" title="Text"></a>Text</h2><ol>
<li>Random.paragraph( min?, max? ) => 一段文本</li>
<li>Random.cparagraph( min?, max? ) => 一段中文文本</li>
<li>Random.sentence( min?, max? ) => 一句话</li>
<li>Random.csentence( min?, max? ) => 一句中文句子</li>
<li>Random.word( min?, max? ) => 几个个字母</li>
<li>Random.cword( pool?, min?, max? ) => 几个汉字</li>
<li>Random.title( min?, max? ) => 一句标题</li>
<li>Random.ctitle( min?, max? ) => 一个中文标题</li>
</ol>
<h2 id="Name"><a href="#Name" class="headerlink" title="Name"></a>Name</h2><ol>
<li>Random.first()</li>
<li>Random.last()</li>
<li>Random.name( middle? )</li>
<li>Random.cfirst()</li>
<li>Random.clast()</li>
<li>Random.cname()</li>
</ol>
<h2 id="Web"><a href="#Web" class="headerlink" title="Web"></a>Web</h2><ol>
<li>Random.url( protocol?, host? )</li>
<li>Random.protocol()</li>
<li>Random.domain()</li>
<li>Random.tld() => 一个顶级域名</li>
<li>Random.email( domain? ) => 随机邮箱</li>
<li>Random.ip()</li>
</ol>
<h2 id="Address"><a href="#Address" class="headerlink" title="Address"></a>Address</h2><ol>
<li>Random.region() => 区域（华北）</li>
<li>Random.province() => 省</li>
<li>Random.city( prefix? ) => 市</li>
<li>Random.county( prefix? ) => 县</li>
<li>Random.zip() => 邮政编码</li>
</ol>
<h2 id="Helper"><a href="#Helper" class="headerlink" title="Helper"></a>Helper</h2><ol>
<li>Random.capitalize( word ) => 首字母大写</li>
<li>Random.upper( str ) => 全部大写</li>
<li>Random.lower( str ) => 全部小写</li>
<li>Random.pick( arr ) => 随机选取元素</li>
<li>Random.shuffle( arr ) => 打乱数组</li>
</ol>
<h2 id="Miscellaneous"><a href="#Miscellaneous" class="headerlink" title="Miscellaneous"></a>Miscellaneous</h2><ol>
<li>Random.guid() => GUID</li>
<li>Random.id() => 18位身份证</li>
<li>Random.increment( step? ) => 全局递增整数</li>
</ol>
<h1 id="在Vue2项目中结合webpack4使用mock"><a href="#在Vue2项目中结合webpack4使用mock" class="headerlink" title="在Vue2项目中结合webpack4使用mock"></a>在Vue2项目中结合webpack4使用mock</h1><h2 id="方案"><a href="#方案" class="headerlink" title="方案"></a>方案</h2><p>基于webpack-dev-server实现mock-serve。 通过chokidar来观察mock 文件夹内容的变化 ，并在发生变化时会清除之前注册的mock-api接口，重新动态挂载新的接口，从而支持热更新。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 参考：https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/mock-server.js</span></span><br><span class="line"><span class="keyword">const</span> chokidar = <span class="built_in">require</span>(<span class="string">'chokidar'</span>)</span><br><span class="line"><span class="keyword">const</span> bodyParser = <span class="built_in">require</span>(<span class="string">'body-parser'</span>)</span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>)</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="keyword">const</span> Mock = <span class="built_in">require</span>(<span class="string">'mockjs'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取绝对路径</span></span><br><span class="line"><span class="keyword">const</span> mockDir = path.join(process.cwd(), <span class="string">'mock'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 注册路由</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">app</span></span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">{{mockStartIndex: number, mockRoutesLength: number}</span></span>}</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">registerRoutes</span>(<span class="params">app</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> mockLastIndex</span><br><span class="line"> <span class="keyword">const</span> mocks = <span class="built_in">require</span>(<span class="string">'./index.js'</span>) <span class="comment">// Mock数据</span></span><br><span class="line"> <span class="keyword">const</span> mocksForServer = mocks.map(<span class="function"><span class="params">route</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> responseFake(route.url, route.type, route.response)</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> mock <span class="keyword">of</span> mocksForServer) {</span><br><span class="line"> app[mock.type](mock.url, mock.response) <span class="comment">// 添加路由 mock serve</span></span><br><span class="line"> mockLastIndex = app._router.stack.length</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> mockRoutesLength = <span class="built_in">Object</span>.keys(mocksForServer).length</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> mockRoutesLength: mockRoutesLength,</span><br><span class="line"> mockStartIndex: mockLastIndex - mockRoutesLength</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 删除缓存</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unregisterRoutes</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">Object</span>.keys(<span class="built_in">require</span>.cache).forEach(<span class="function"><span class="params">i</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (i.includes(mockDir)) {</span><br><span class="line"> <span class="keyword">delete</span> <span class="built_in">require</span>.cache[<span class="built_in">require</span>.resolve(i)]</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建mock server</span></span><br><span class="line"><span class="keyword">const</span> responseFake = <span class="function">(<span class="params">url, type, respond</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> url: <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">`<span class="subst">${process.env.VUE_APP_BASE_API}</span><span class="subst">${url}</span>`</span>),</span><br><span class="line"> type: type || <span class="string">'get'</span>,</span><br><span class="line"> response(req, res) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'request invoke:'</span> + req.path)</span><br><span class="line"> res.json(Mock.mock(respond <span class="keyword">instanceof</span> <span class="built_in">Function</span> ? respond(req, res) : respond))</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="params">app</span> =></span> {</span><br><span class="line"> <span class="comment">// parse app.body</span></span><br><span class="line"> <span class="comment">// https://expressjs.com/en/4x/api.html#req.body</span></span><br><span class="line"> app.use(bodyParser.json())</span><br><span class="line"> app.use(bodyParser.urlencoded({</span><br><span class="line"> extended: <span class="literal">true</span></span><br><span class="line"> }))</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> mockRoutes = registerRoutes(app)</span><br><span class="line"> <span class="keyword">let</span> mockRoutesLength = mockRoutes.mockRoutesLength</span><br><span class="line"> <span class="keyword">let</span> mockStartIndex = mockRoutes.mockStartIndex</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 监测文件，热跟新</span></span><br><span class="line"> chokidar.watch(mockDir, {</span><br><span class="line"> ignored: <span class="regexp">/mock-server/</span>,</span><br><span class="line"> ignoreInitial: <span class="literal">true</span></span><br><span class="line"> }).on(<span class="string">'all'</span>, (event, path) => {</span><br><span class="line"> <span class="keyword">if</span> (event === <span class="string">'change'</span> || event === <span class="string">'add'</span>) {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="comment">// 移除mock route</span></span><br><span class="line"> app._router.stack.splice(mockStartIndex, mockRoutesLength)</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 清除缓存</span></span><br><span class="line"> unregisterRoutes()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> mockRoutes = registerRoutes(app)</span><br><span class="line"> mockRoutesLength = mockRoutes.mockRoutesLength</span><br><span class="line"> mockStartIndex = mockRoutes.mockStartIndex</span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(chalk.magentaBright(<span class="string">`\n > Mock Server hot reload success! changed <span class="subst">${path}</span>`</span>))</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="built_in">console</span>.log(chalk.redBright(error))</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>mockjs</category>
</categories>
<tags>
<tag>mockjs</tag>
</tags>
</entry>
<entry>
<title>Vue Router笔记</title>
<url>/2020/03/01/1000998621/</url>
<content><![CDATA[<h1 id="Vue-Router功能"><a href="#Vue-Router功能" class="headerlink" title="Vue Router功能"></a>Vue Router功能</h1><ul>
<li>嵌套的路由/视图表</li>
<li>模块化的、基于组件的路由配置</li>
<li>路由参数、查询、通配符</li>
<li>基于 Vue.js 过渡系统的视图过渡效果</li>
<li>细粒度的导航控制</li>
<li>带有自动激活的 CSS class 的链接</li>
<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>
<li>自定义的滚动条行为</li>
</ul>
<h1 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 定义 (路由) 组件。</span></span><br><span class="line"><span class="comment">// 可以从其他文件 import 进来</span></span><br><span class="line"><span class="keyword">const</span> Foo = { <span class="attr">template</span>: <span class="string">'<div>foo</div>'</span> }</span><br><span class="line"><span class="keyword">const</span> Bar = { <span class="attr">template</span>: <span class="string">'<div>bar</div>'</span> }</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 定义路由</span></span><br><span class="line"><span class="comment">// 每个路由应该映射一个组件。 其中"component" 可以是</span></span><br><span class="line"><span class="comment">// 通过 Vue.extend() 创建的组件构造器，</span></span><br><span class="line"><span class="comment">// 或者，只是一个组件配置对象。</span></span><br><span class="line"><span class="comment">// 我们晚点再讨论嵌套路由。</span></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/foo'</span>, <span class="attr">component</span>: Foo },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/bar'</span>, <span class="attr">component</span>: Bar }</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 创建 router 实例，然后传 `routes` 配置</span></span><br><span class="line"><span class="comment">// 你还可以传别的配置参数, 不过先这么简单着吧。</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes <span class="comment">// (缩写) 相当于 routes: routes</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 创建和挂载根实例。</span></span><br><span class="line"><span class="comment">// 记得要通过 router 配置参数注入路由，</span></span><br><span class="line"><span class="comment">// 从而让整个应用都有路由功能</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> router</span><br><span class="line">}).$mount(<span class="string">'#app'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 现在，应用已经启动了！</span></span><br></pre></td></tr></table></figure>
<h1 id="动态路由匹配"><a href="#动态路由匹配" class="headerlink" title="动态路由匹配"></a>动态路由匹配</h1><blockquote>
<p>/user/:id</p>
</blockquote>
<p>一个“路径参数”使用冒号 <code>:</code> 标记。当匹配到一个路由时，参数值会被设置到 <code>this.$route.params</code></p>
<table>
<thead>
<tr>
<th align="left">模式</th>
<th align="left">匹配路径</th>
<th align="left">$route.params</th>
</tr>
</thead>
<tbody><tr>
<td align="left">/user/:username</td>
<td align="left">/user/evan</td>
<td align="left"><code>{ username: 'evan' }</code></td>
</tr>
<tr>
<td align="left">/user/:username/post/:post_id</td>
<td align="left">/user/evan/post/123</td>
<td align="left"><code>{ username: 'evan', post_id: '123' }</code></td>
</tr>
</tbody></table>
<p>$route.query： URL查询参数、$route.hash</p>
<h2 id="响应路由参数的变化"><a href="#响应路由参数的变化" class="headerlink" title="响应路由参数的变化"></a>响应路由参数的变化</h2><blockquote>
<p>从 <code>/user/foo</code> 导航到 <code>/user/bar</code>，<strong>原来的组件实例会被复用</strong>。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会再被调用</strong>。</p>
</blockquote>
<ol>
<li><p>监测$route对象</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> User = {</span><br><span class="line"> template: <span class="string">'...'</span>,</span><br><span class="line"> watch: {</span><br><span class="line"> <span class="string">'$route'</span> (to, <span class="keyword">from</span>) {</span><br><span class="line"> <span class="comment">// 对路由变化作出响应...</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>beforeRouteUpdate</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> User = {</span><br><span class="line"> template: <span class="string">'...'</span>,</span><br><span class="line"> beforeRouteUpdate (to, <span class="keyword">from</span>, next) {</span><br><span class="line"> <span class="comment">// react to route changes...</span></span><br><span class="line"> <span class="comment">// don't forget to call next()</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="捕获所有路由"><a href="#捕获所有路由" class="headerlink" title="捕获所有路由"></a>捕获所有路由</h2><p>匹配任意路径，通配符*</p>
<p><strong>注意使用顺序，应放最后</strong>，this.$route.params.pathMatch存放匹配路由</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="comment">// 会匹配所有路径</span></span><br><span class="line"> path: <span class="string">'*'</span></span><br><span class="line">}</span><br><span class="line">{</span><br><span class="line"> <span class="comment">// 会匹配以 `/user-` 开头的任意路径</span></span><br><span class="line"> path: <span class="string">'/user-*'</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="匹配顺序"><a href="#匹配顺序" class="headerlink" title="匹配顺序"></a>匹配顺序</h2><p>先定义先匹配</p>
<h1 id="嵌套路由"><a href="#嵌套路由" class="headerlink" title="嵌套路由"></a>嵌套路由</h1><p>在 VueRouter 的参数中使用children配置</p>
<p><strong>以 <code>/</code> 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/user/:id'</span>, <span class="attr">component</span>: User,</span><br><span class="line"> children: [</span><br><span class="line"> <span class="comment">// 当 /user/:id 匹配成功，</span></span><br><span class="line"> <span class="comment">// UserHome 会被渲染在 User 的 <router-view> 中</span></span><br><span class="line"> { <span class="attr">path</span>: <span class="string">''</span>, <span class="attr">component</span>: UserHome },</span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// 当 /user/:id/profile 匹配成功，</span></span><br><span class="line"> <span class="comment">// UserProfile 会被渲染在 User 的 <router-view> 中</span></span><br><span class="line"> path: <span class="string">'profile'</span>,</span><br><span class="line"> component: UserProfile</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// 当 /user/:id/posts 匹配成功</span></span><br><span class="line"> <span class="comment">// UserPosts 会被渲染在 User 的 <router-view> 中</span></span><br><span class="line"> path: <span class="string">'posts'</span>,</span><br><span class="line"> component: UserPosts</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h1 id="编程式导航"><a href="#编程式导航" class="headerlink" title="编程式导航"></a>编程式导航</h1><ol>
<li><p>router.push(location, onComplete?, onAbort?)</p>
<p>onComplete：导航成功完成 (在所有的异步钩子被解析之后) </p>
<p>onAbort：终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用</p>
<p>返回Promise</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody><tr>
<td><router-link :to=”…></td>
<td><code>router.push(...)</code></td>
</tr>
</tbody></table>
<p><strong>path存在，则params会被忽略</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 字符串</span></span><br><span class="line">router.push(<span class="string">'home'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象</span></span><br><span class="line">router.push({ <span class="attr">path</span>: <span class="string">'home'</span> })</span><br><span class="line"></span><br><span class="line"><span class="comment">// 命名的路由</span></span><br><span class="line">router.push({ <span class="attr">name</span>: <span class="string">'user'</span>, <span class="attr">params</span>: { <span class="attr">userId</span>: <span class="string">'123'</span> }})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 带查询参数，变成 /register?plan=private</span></span><br><span class="line">router.push({ <span class="attr">path</span>: <span class="string">'register'</span>, <span class="attr">query</span>: { <span class="attr">plan</span>: <span class="string">'private'</span> }})</span><br></pre></td></tr></table></figure>
</li>
<li><p>router.replace(location, onComplete?, onAbort?)</p>
<p>替换掉当前的 history 记录。</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody><tr>
<td><router-link :to=”…” replace></td>
<td>router.replace(…)</td>
</tr>
</tbody></table>
</li>
<li><p>router.go(n)</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在浏览器记录中前进一步，等同于 history.forward()</span></span><br><span class="line">router.go(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 后退一步记录，等同于 history.back()</span></span><br><span class="line">router.go(<span class="number">-1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 前进 3 步记录</span></span><br><span class="line">router.go(<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果 history 记录不够用，那就默默地失败呗</span></span><br><span class="line">router.go(<span class="number">-100</span>)</span><br><span class="line">router.go(<span class="number">100</span>)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="命名路由"><a href="#命名路由" class="headerlink" title="命名路由"></a>命名路由</h1><p>在创建 Router 实例的时候，在 <code>routes</code> 配置中给某个路由设置名称</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'/user/:userId'</span>,</span><br><span class="line"> name: <span class="string">'user'</span>,</span><br><span class="line"> component: User</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br><span class="line">router.push({ <span class="attr">name</span>: <span class="string">'user'</span>, <span class="attr">params</span>: { <span class="attr">userId</span>: <span class="number">123</span> }})</span><br></pre></td></tr></table></figure>
<h1 id="命名视图"><a href="#命名视图" class="headerlink" title="命名视图"></a>命名视图</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/settings/emails /settings/profile</span><br><span class="line">+-----------------------------------+ +------------------------------+</span><br><span class="line">| UserSettings | | UserSettings |</span><br><span class="line">| +-----+-------------------------+ | | +-----+--------------------+ |</span><br><span class="line">| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |</span><br><span class="line">| | +-------------------------+ | | | +--------------------+ |</span><br><span class="line">| | | | | | | | UserProfilePreview | |</span><br><span class="line">| +-----+-------------------------+ | | +-----+--------------------+ |</span><br><span class="line">+-----------------------------------+ +------------------------------+</span><br></pre></td></tr></table></figure>
<ul>
<li><code>Nav</code> 只是一个常规组件。</li>
<li><code>UserSettings</code> 是一个视图组件。</li>
<li><code>UserEmailsSubscriptions</code>、<code>UserProfile</code>、<code>UserProfilePreview</code> 是嵌套的视图组件。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment"><!-- UserSettings.vue --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>User Settings<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">NavBar</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"helper"</span>/></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> path: <span class="string">'/settings'</span>,</span><br><span class="line"> <span class="comment">// 你也可以在顶级路由就配置命名视图</span></span><br><span class="line"> component: UserSettings,</span><br><span class="line"> children: [{</span><br><span class="line"> path: <span class="string">'emails'</span>,</span><br><span class="line"> component: UserEmailsSubscriptions</span><br><span class="line"> }, {</span><br><span class="line"> path: <span class="string">'profile'</span>,</span><br><span class="line"> components: {</span><br><span class="line"> <span class="keyword">default</span>: UserProfile,</span><br><span class="line"> helper: UserProfilePreview</span><br><span class="line"> }</span><br><span class="line"> }]</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="重定向和别名"><a href="#重定向和别名" class="headerlink" title="重定向和别名"></a>重定向和别名</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/a'</span>, <span class="attr">redirect</span>: { <span class="attr">name</span>: <span class="string">'foo'</span> }, <span class="attr">alias</span>: <span class="string">'/b'</span>}</span><br><span class="line"> ]</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/a'</span>, <span class="attr">redirect</span>: <span class="function"><span class="params">to</span> =></span> {</span><br><span class="line"> <span class="comment">// 方法接收 目标路由 作为参数</span></span><br><span class="line"> <span class="comment">// return 重定向的 字符串路径/路径对象</span></span><br><span class="line"> }}</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h1 id="路由组件传参"><a href="#路由组件传参" class="headerlink" title="路由组件传参"></a>路由组件传参</h1><p>使用props将组件与路由解耦</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/user/:id'</span>, <span class="attr">component</span>: User, <span class="attr">props</span>: <span class="literal">true</span> },</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：</span></span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'/user/:id'</span>,</span><br><span class="line"> components: { <span class="attr">default</span>: User, <span class="attr">sidebar</span>: Sidebar },</span><br><span class="line"> props: { <span class="attr">default</span>: <span class="literal">true</span>, <span class="attr">sidebar</span>: <span class="literal">false</span> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="Props类型"><a href="#Props类型" class="headerlink" title="Props类型"></a>Props类型</h2><ol>
<li><p>Boolean</p>
<p>route.params 将会被设置为组件属性</p>
</li>
<li><p>对象</p>
<p>props是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用</p>
</li>
<li><p>函数</p>
<p>创建一个函数返回 props</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/search'</span>, <span class="attr">component</span>: SearchUser, <span class="attr">props</span>: <span class="function">(<span class="params">route</span>) =></span> ({ <span class="attr">query</span>: route.query.q }) }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="History模式"><a href="#History模式" class="headerlink" title="History模式"></a>History模式</h1><blockquote>
<p>mode: ‘history’</p>
</blockquote>
<h1 id="导航守卫"><a href="#导航守卫" class="headerlink" title="导航守卫"></a>导航守卫</h1><h2 id="全局守卫"><a href="#全局守卫" class="headerlink" title="全局守卫"></a>全局守卫</h2><ol>
<li><p>全局前置守卫</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =></span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<ul>
<li>to: Route: 即将要进入的目标 路由对象</li>
<li>from: Route: 当前导航正要离开的路由</li>
<li>next: Function: 一定要调用该方法来 <strong>resolve</strong> 这个钩子。执行效果依赖 next 方法的调用参数。<ul>
<li>next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 <strong>confirmed</strong> (确认的)。</li>
<li>next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。</li>
<li>next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。</li>
<li>next(error): (2.4.0+) 如果传入next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。</li>
</ul>
</li>
</ul>
</li>
<li><p>全局解析守卫</p>
<p>router.beforeResolve</p>
<p>导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用</p>
</li>
<li><p>全局后置守卫</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">router.afterEach(<span class="function">(<span class="params">to, <span class="keyword">from</span></span>) =></span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="路由独享守卫"><a href="#路由独享守卫" class="headerlink" title="路由独享守卫"></a>路由独享守卫</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"> routes: [</span><br><span class="line"> {</span><br><span class="line"> path: <span class="string">'/foo'</span>,</span><br><span class="line"> component: Foo,</span><br><span class="line"> beforeEnter: <span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =></span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="组件内守卫"><a href="#组件内守卫" class="headerlink" title="组件内守卫"></a>组件内守卫</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Foo = {</span><br><span class="line"> template: <span class="string">`...`</span>,</span><br><span class="line"> beforeRouteEnter (to, <span class="keyword">from</span>, next) {</span><br><span class="line"> <span class="comment">// 在渲染该组件的对应路由被 confirm 前调用</span></span><br><span class="line"> <span class="comment">// 不！能！获取组件实例 `this`</span></span><br><span class="line"> <span class="comment">// 因为当守卫执行前，组件实例还没被创建</span></span><br><span class="line"> next(<span class="function"><span class="params">vm</span> =></span> {</span><br><span class="line"> <span class="comment">// 通过 `vm` 访问组件实例</span></span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> beforeRouteUpdate (to, <span class="keyword">from</span>, next) {</span><br><span class="line"> <span class="comment">// 在当前路由改变，但是该组件被复用时调用</span></span><br><span class="line"> <span class="comment">// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，</span></span><br><span class="line"> <span class="comment">// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</span></span><br><span class="line"> <span class="comment">// 可以访问组件实例 `this`</span></span><br><span class="line"> },</span><br><span class="line"> beforeRouteLeave (to, <span class="keyword">from</span>, next) {</span><br><span class="line"> <span class="comment">// 导航离开该组件的对应路由时调用</span></span><br><span class="line"> <span class="comment">// 可以访问组件实例 `this`</span></span><br><span class="line"> next(<span class="literal">false</span>) <span class="comment">// 取消离开</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="导航解析流程"><a href="#导航解析流程" class="headerlink" title="导航解析流程"></a>导航解析流程</h2><ol>
<li>导航被触发。</li>
<li>在失活的组件里调用离开守卫。</li>
<li>调用全局的 beforeEach 守卫。</li>
<li>在重用的组件里调用 beforeRouteUpdate 守卫。</li>
<li>在路由配置里调用 beforeEnter。</li>
<li>解析异步路由组件。</li>
<li>在被激活的组件里调用 beforeRouteEnter。</li>
<li>调用全局的 beforeResolve守卫 。</li>
<li>导航被确认。</li>
<li>调用全局的 afterEach 钩子。</li>
<li>触发 DOM 更新。</li>
<li>用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。</li>
</ol>
<h1 id="路由元信息"><a href="#路由元信息" class="headerlink" title="路由元信息"></a>路由元信息</h1><p>定义路由的时候可以配置 <code>meta</code> 字段</p>
<p>通过$route.matched 数组访问</p>
<h1 id="过渡效果"><a href="#过渡效果" class="headerlink" title="过渡效果"></a>过渡效果</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">transition</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">transition</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="单个路由过渡"><a href="#单个路由过渡" class="headerlink" title="单个路由过渡"></a>单个路由过渡</h2><p>可在大部分组件内使用transition</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Foo = {</span><br><span class="line"> template: <span class="string">`</span></span><br><span class="line"><span class="string"> <transition name="slide"></span></span><br><span class="line"><span class="string"> <div class="foo">...</div></span></span><br><span class="line"><span class="string"> </transition></span></span><br><span class="line"><span class="string"> `</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="基于路由的动态过渡"><a href="#基于路由的动态过渡" class="headerlink" title="基于路由的动态过渡"></a>基于路由的动态过渡</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment"><!-- 使用动态的 transition name --></span></span><br><span class="line"><span class="tag"><<span class="name">transition</span> <span class="attr">:name</span>=<span class="string">"transitionName"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">transition</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 接着在父组件内</span></span><br><span class="line"><span class="comment">// watch $route 决定使用哪种过渡</span></span><br><span class="line">watch: {</span><br><span class="line"> <span class="string">'$route'</span> (to, <span class="keyword">from</span>) {</span><br><span class="line"> <span class="keyword">const</span> toDepth = to.path.split(<span class="string">'/'</span>).length</span><br><span class="line"> <span class="keyword">const</span> fromDepth = <span class="keyword">from</span>.path.split(<span class="string">'/'</span>).length</span><br><span class="line"> <span class="keyword">this</span>.transitionName = toDepth < fromDepth ? <span class="string">'slide-right'</span> : <span class="string">'slide-left'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="数据获取"><a href="#数据获取" class="headerlink" title="数据获取"></a>数据获取</h1><ol>
<li>导航完成后，在组件生命周期钩子中获取数据</li>
<li>导航完成之前获取（beforeRouteEnter、beforeRouteUpdate）</li>
</ol>
<h1 id="滚动"><a href="#滚动" class="headerlink" title="滚动"></a>滚动</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">scrollBehavior (to, <span class="keyword">from</span>, savedPosition) {</span><br><span class="line"> <span class="comment">// return 期望滚动到哪个的位置</span></span><br><span class="line"> <span class="keyword">if</span> (savedPosition) {</span><br><span class="line"> <span class="keyword">return</span> savedPosition <span class="comment">// 浏览器 前进/后退 保持原状</span></span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span>(to.hash){</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> selector: to.hash</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>异步滚动</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">scrollBehavior (to, <span class="keyword">from</span>, savedPosition) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> resolve({ <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span> })</span><br><span class="line"> }, <span class="number">500</span>)</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="路由懒加载"><a href="#路由懒加载" class="headerlink" title="路由懒加载"></a>路由懒加载</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Foo = <span class="function"><span class="params">()</span> =></span> <span class="keyword">import</span>(<span class="string">'./Foo.vue'</span>)</span><br></pre></td></tr></table></figure>
<p>组件按组分块</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Foo = <span class="function"><span class="params">()</span> =></span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: "group-foo" */</span> <span class="string">'./Foo.vue'</span>)</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>vue-router</category>
</categories>
<tags>
<tag>vue-router</tag>
</tags>
</entry>
<entry>
<title>Vuex笔记</title>
<url>/2020/02/29/2056824029/</url>
<content><![CDATA[<h1 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h1><ul>
<li>Vuex 的状态存储是响应式的</li>
<li>改变 store 中的状态的唯一途径就是显式地<strong>提交 (commit) mutation</strong></li>
</ul>
<h1 id="Sate"><a href="#Sate" class="headerlink" title="Sate"></a>Sate</h1><p>单一状态树</p>
<p>在计算属性中返回某个状态。</p>
<ul>
<li><p>store.state.count</p>
</li>
<li><p>把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">this</span>.$store.state.count</span><br></pre></td></tr></table></figure>
</li>
<li><p>mapSate</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">mapState({</span><br><span class="line"> <span class="comment">// 箭头函数可使代码更简练</span></span><br><span class="line"> count: <span class="function"><span class="params">state</span> =></span> state.count,</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 传字符串参数 'count' 等同于 `state => state.count`</span></span><br><span class="line"> countAlias: <span class="string">'count'</span>,</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 为了能够使用 `this` 获取局部状态，必须使用常规函数</span></span><br><span class="line"> countPlusLocalState (state) {</span><br><span class="line"> <span class="keyword">return</span> state.count + <span class="keyword">this</span>.localCount</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="Getter"><a href="#Getter" class="headerlink" title="Getter"></a>Getter</h1><p>store 的计算属性</p>
<ul>
<li><p>通过属性访问</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">getters: {</span><br><span class="line"> doneTodos: <span class="function"><span class="params">state</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> state.todos.filter(<span class="function"><span class="params">todo</span> =></span> todo.done)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 接受getters作为第二参数</span></span><br><span class="line">doneTodosCount: <span class="function">(<span class="params">state, getters</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> getters.doneTodos.length</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>通过函数访问</p>
<p>返回函数，这样可以实现根据id查询，不会有缓存</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">getTodoById: <span class="function">(<span class="params">state</span>) =></span> <span class="function">(<span class="params">id</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> state.todos.find(<span class="function"><span class="params">todo</span> =></span> todo.id === id)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>mapGetters</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">...mapGetters([</span><br><span class="line"> <span class="string">'doneTodosCount'</span>,</span><br><span class="line"> <span class="string">'anotherGetter'</span>,</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">])</span><br><span class="line"></span><br><span class="line">mapGetters({</span><br><span class="line"> <span class="comment">// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`</span></span><br><span class="line"> doneCount: <span class="string">'doneTodosCount'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h1 id="Mutation"><a href="#Mutation" class="headerlink" title="Mutation"></a>Mutation</h1><ul>
<li><p>更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。每个 mutation 都有一个字符串的 <strong>事件类型 (type)</strong> 和 一个 <strong>回调函数 (handler)</strong>。</p>
</li>
<li><p><strong>mutation 必须是同步函数</strong></p>
</li>
<li><p>使用常量替代 Mutation 事件类型</p>
<p>在mutation-types.js导出常量</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">mutations: {</span><br><span class="line"> increment (state, payload) {</span><br><span class="line"> state.count += payload.amount</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">store.commit(<span class="string">'increment'</span>, {</span><br><span class="line"> amount: <span class="number">10</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<ul>
<li>mapMutations</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">...mapMutations([</span><br><span class="line"> <span class="string">'increment'</span>, <span class="comment">// 将 `this.increment()` 映射为 `this.$store.commit('increment')`</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// `mapMutations` 也支持载荷：</span></span><br><span class="line"> <span class="string">'incrementBy'</span> <span class="comment">// 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`</span></span><br><span class="line">]),</span><br><span class="line">...mapMutations({</span><br><span class="line"> add: <span class="string">'increment'</span> <span class="comment">// 将 `this.add()` 映射为 `this.$store.commit('increment')`</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h1 id="Action"><a href="#Action" class="headerlink" title="Action"></a>Action</h1><ul>
<li>ction 提交的是 mutation，而不是直接变更状态。</li>
<li>Action 可以包含任意异步操作。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> increment ({ commit }) {</span><br><span class="line"> commit(<span class="string">'increment'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">store.dispatch(<span class="string">'increment'</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>mapActions</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">...mapActions([</span><br><span class="line"> <span class="string">'increment'</span>, <span class="comment">// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// `mapActions` 也支持载荷：</span></span><br><span class="line"> <span class="string">'incrementBy'</span> <span class="comment">// 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`</span></span><br><span class="line">]),</span><br><span class="line">...mapActions({</span><br><span class="line"> add: <span class="string">'increment'</span> <span class="comment">// 将 `this.add()` 映射为 `this.$store.dispatch('increment')`</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<ul>
<li>Promise、async/await</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> actionA ({ commit }) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> commit(<span class="string">'someMutation'</span>)</span><br><span class="line"> resolve()</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> actionB ({ dispatch, commit }) {</span><br><span class="line"> <span class="keyword">await</span> dispatch(<span class="string">'actionA'</span>) <span class="comment">// 等待 actionA 完成</span></span><br><span class="line"> commit(<span class="string">'gotOtherData'</span>, <span class="keyword">await</span> getOtherData())</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="Module"><a href="#Module" class="headerlink" title="Module"></a>Module</h1><h2 id="局部状态"><a href="#局部状态" class="headerlink" title="局部状态"></a>局部状态</h2><p>可以访问模块的局部状态对象</p>
<p>根节点状态则为 <code>context.rootState</code></p>
<h2 id="命名空间"><a href="#命名空间" class="headerlink" title="命名空间"></a>命名空间</h2><p><code>namespaced: true</code> 的方式使其成为带命名空间的模块</p>
<h3 id="在带命名空间的模块内访问全局内容"><a href="#在带命名空间的模块内访问全局内容" class="headerlink" title="在带命名空间的模块内访问全局内容"></a>在带命名空间的模块内访问全局内容</h3><ul>
<li>全局 state 和 getter，<code>rootState</code> 和 <code>rootGetters</code> 会作为第三和第四参数传入 getter，也会通过 <code>context</code> 对象的属性传入 action</li>
<li>全局命名空间内分发 action 或提交 mutation，将 <code>{ root: true }</code> 作为第三参数传给 <code>dispatch</code> 或 <code>commit</code> 即可</li>
<li>注册全局 action，你可添加 <code>root: true</code>，并将这个 action 的定义放在函数 <code>handler</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">...mapActions(<span class="string">'some/nested/module'</span>, [</span><br><span class="line"> <span class="string">'foo'</span>, <span class="comment">// -> this.foo()</span></span><br><span class="line"> <span class="string">'bar'</span> <span class="comment">// -> this.bar()</span></span><br><span class="line">])</span><br></pre></td></tr></table></figure>
<ul>
<li>通过使用 <code>createNamespacedHelpers</code> 创建基于某个命名空间辅助函数</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { createNamespacedHelpers } <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> { mapState, mapActions } = createNamespacedHelpers(<span class="string">'some/nested/module'</span>)</span><br></pre></td></tr></table></figure>
<h1 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h1><p>严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。<strong>不要在发布环境下启用严格模式</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">strict: process.env.NODE_ENV !== <span class="string">'production'</span></span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>Vuex</category>
</categories>
<tags>
<tag>Vuex</tag>
</tags>
</entry>
<entry>
<title>Widget小部件</title>
<url>/2020/02/18/2959249981/</url>
<content><![CDATA[<h1 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h1><ul>
<li>Center</li>
<li>Container 容器</li>
<li>ListView</li>
<li>ListTile</li>
<li>GirdView</li>
<li>Column</li>
<li>Row</li>
<li>wrap</li>
<li>Padding</li>
<li>Expanded flex布局</li>
<li>Stack</li>
<li>Align</li>
<li>Positioned</li>
<li>AspectRatio 子元素宽高比</li>
<li>SizedBox<h1 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h1></li>
<li>Image</li>
<li>NetWorkImage</li>
<li>CircleAvatar<h1 id="元素"><a href="#元素" class="headerlink" title="元素"></a>元素</h1></li>
<li>StatelessWidget</li>
<li>Text</li>
<li>MaterialApp</li>
<li>Scaffold</li>
<li>ChipOval 圆角</li>
<li>Icon</li>
<li>Card</li>
<li>RaisedButton</li>
<li>Chip</li>
</ul>
]]></content>
</entry>
<entry>
<title>cli工具(node)</title>
<url>/2020/05/25/2011156422/</url>
<content><![CDATA[<h1 id="初始化工程"><a href="#初始化工程" class="headerlink" title="初始化工程"></a>初始化工程</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bin/index.js 指定脚本解释器为node</span></span><br><span class="line"><span class="meta">#!/usr/bin/env node</span></span><br></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line">"bin": {</span><br><span class="line"> "create": "./bin/index.js"</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">// 将npm 模块链接到对应的运⾏项⽬中去</span><br><span class="line">npm link</span><br></pre></td></tr></table></figure>
<h1 id="定制命令行界面"><a href="#定制命令行界面" class="headerlink" title="定制命令行界面"></a>定制命令行界面</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bin/index.js</span></span><br><span class="line"><span class="keyword">const</span> program = <span class="built_in">require</span>(<span class="string">'commander'</span>); <span class="comment">// commander包</span></span><br><span class="line">program.version(<span class="built_in">require</span>(<span class="string">'../package'</span>).version);</span><br><span class="line"></span><br><span class="line">program</span><br><span class="line"> .command(<span class="string">'init <name>'</span>)</span><br><span class="line"> .description(<span class="string">'init project'</span>)</span><br><span class="line"> .action(<span class="function"><span class="params">name</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'init '</span> + name);</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">program.parse(process.argv);</span><br></pre></td></tr></table></figure>
<h1 id="欢迎界面"><a href="#欢迎界面" class="headerlink" title="欢迎界面"></a>欢迎界面</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// /lib/init.js</span></span><br><span class="line"><span class="keyword">const</span> { promisify } = <span class="built_in">require</span>(<span class="string">'util'</span>);</span><br><span class="line"><span class="keyword">const</span> figlet = promisify(<span class="built_in">require</span>(<span class="string">'figlet'</span>));</span><br><span class="line"><span class="keyword">const</span> clear = <span class="built_in">require</span>(<span class="string">'clear'</span>);</span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">'chalk'</span>);</span><br><span class="line"><span class="keyword">const</span> log = <span class="function"><span class="params">content</span> =></span> <span class="built_in">console</span>.log(chalk.green(content));</span><br><span class="line"><span class="built_in">module</span>.exports = <span class="keyword">async</span> name => {</span><br><span class="line"> <span class="comment">// 打印欢迎画⾯</span></span><br><span class="line"> clear();</span><br><span class="line"> <span class="keyword">const</span> data = <span class="keyword">await</span> figlet(<span class="string">'Create'</span> + name);</span><br><span class="line"> log(data);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">program</span><br><span class="line"> .command(<span class="string">'init <name>'</span>)</span><br><span class="line"> .description(<span class="string">'init project'</span>)</span><br><span class="line"> .action(<span class="built_in">require</span>(<span class="string">'../lib/init'</span>))</span><br></pre></td></tr></table></figure>
<h1 id="克隆模板"><a href="#克隆模板" class="headerlink" title="克隆模板"></a>克隆模板</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// /lib/download.js</span></span><br><span class="line"><span class="keyword">const</span> { promisify } = <span class="built_in">require</span>(<span class="string">'util'</span>);</span><br><span class="line"><span class="built_in">module</span>.exports.clone = <span class="keyword">async</span> <span class="function"><span class="keyword">function</span>(<span class="params">repo,desc</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> download =promisify(<span class="built_in">require</span>(<span class="string">'download-git-repo'</span>));</span><br><span class="line"> <span class="keyword">const</span> ora = <span class="built_in">require</span>(<span class="string">'ora'</span>);</span><br><span class="line"> <span class="keyword">const</span> process = ora(<span class="string">`下载.....<span class="subst">${repo}</span>`</span>);</span><br><span class="line"> process.start();</span><br><span class="line"> <span class="keyword">await</span> download(repo, desc);</span><br><span class="line"> process.succeed();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// /lib/init.js</span></span><br><span class="line">log(<span class="string">'创建项⽬:'</span> + name);</span><br><span class="line"><span class="keyword">await</span> clone(<span class="string">'github:monkeycf/vue-template'</span>, name); <span class="comment">// 项目</span></span><br></pre></td></tr></table></figure>
<h1 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// promisiy化spawn</span></span><br><span class="line"><span class="comment">// 对接输出流</span></span><br><span class="line"><span class="keyword">const</span> spawnHandler = <span class="keyword">async</span> (...args) => {</span><br><span class="line"> <span class="keyword">const</span> spawn = <span class="built_in">require</span>(<span class="string">'cross-spawn'</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> proc = spawn(...args)</span><br><span class="line"> proc.on(<span class="string">'close'</span>, () => {</span><br><span class="line"> resolve()</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">log(<span class="string">'安装依赖'</span>);</span><br><span class="line"><span class="keyword">await</span> spawnHandler(<span class="string">'npm'</span>, [<span class="string">'install'</span>], {</span><br><span class="line"> stdio: <span class="string">'inherit'</span>,</span><br><span class="line"> cwd: <span class="string">`./<span class="subst">${name}</span>`</span>,</span><br><span class="line">});</span><br><span class="line">log(chalk.green(<span class="string">'安装依赖成功'</span>));</span><br></pre></td></tr></table></figure>
]]></content>
</entry>
<entry>
<title>es6-es10语法整理</title>
<url>/2019/10/30/3122517155/</url>
<content><![CDATA[<h1 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h1><h2 id="类"><a href="#类" class="headerlink" title="类"></a>类</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>{</span><br><span class="line"> <span class="comment">// constructor 构造函数</span></span><br><span class="line"> <span class="keyword">constructor</span>(name, color) {</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.color = color;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> toString() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`name: <span class="subst">${<span class="keyword">this</span>.name}</span>, color: <span class="subst">${<span class="keyword">this</span>.color}</span>`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> animal = <span class="keyword">new</span> Animal(<span class="string">'dog'</span>, <span class="string">'black'</span>);</span><br><span class="line">animal.toString(); <span class="comment">// name: dog, color: black</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(animal.hasOwnProperty(<span class="string">'name'</span>)); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(animal.hasOwnProperty(<span class="string">'color'</span>)); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(animal.__proto__.hasOwnProperty(<span class="string">'toString'</span>)); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 类的继承</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cat</span> <span class="keyword">extends</span> <span class="title">Animal</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(action) {</span><br><span class="line"> <span class="keyword">super</span>(<span class="string">'cat'</span>, <span class="string">'white'</span>);</span><br><span class="line"> <span class="keyword">this</span>.action = action;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> toString() {</span><br><span class="line"> <span class="keyword">super</span>.toString();</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> cat = <span class="keyword">new</span> Cat(<span class="string">'run'</span>);</span><br><span class="line">cat.toString(); <span class="comment">// name: cat, color: white</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(cat <span class="keyword">instanceof</span> Cat); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(cat <span class="keyword">instanceof</span> Animal); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><p><strong>ES6允许在一个模块中使用export来导出多个变量或函数。</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> name = <span class="string">'Tom'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> sqrt = <span class="built_in">Math</span>.sqrt;</span><br><span class="line"><span class="keyword">export</span> {name, sqrt};</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'hello'</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入</span></span><br><span class="line"><span class="keyword">import</span> {name} form <span class="string">'dome'</span></span><br></pre></td></tr></table></figure>
<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><p><strong>注意this</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="params">()</span> =></span> <span class="number">1</span>)</span><br><span class="line">(<span class="function"><span class="params">v</span> =></span> v + <span class="number">1</span>)</span><br><span class="line">(<span class="function">(<span class="params">a, b</span>) =></span> a + b)</span><br><span class="line">(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> alert(<span class="string">"hello"</span>);</span><br><span class="line">})</span><br><span class="line">(<span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> !e</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="设置默认值"><a href="#设置默认值" class="headerlink" title="设置默认值"></a>设置默认值</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function">(<span class="params">a, b = <span class="number">10</span></span>) =></span> a + b)</span><br></pre></td></tr></table></figure>
<h2 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">`name is <span class="subst">${name}</span>`</span>;</span><br></pre></td></tr></table></figure>
<h2 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> foo = [<span class="string">"one"</span>, <span class="string">"two"</span>, <span class="string">"three"</span>, <span class="string">"four"</span>];</span><br><span class="line"><span class="keyword">let</span> [one, two, ...dome] = foo</span><br><span class="line"><span class="built_in">console</span>.log(one, two, dome) <span class="comment">// one two [ 'three', 'four' ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 交换</span></span><br><span class="line"><span class="built_in">console</span>.log(one, two);</span><br><span class="line">([one, two] = [two, one]);</span><br><span class="line"><span class="built_in">console</span>.log(one, two);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> student = {</span><br><span class="line"> stuName: <span class="string">'Tom'</span>,</span><br><span class="line"> age: <span class="number">20</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> {stuName, age} = student;</span><br><span class="line"><span class="built_in">console</span>.log(stuName, age)</span><br></pre></td></tr></table></figure>
<h2 id="延展操作符"><a href="#延展操作符" class="headerlink" title="延展操作符"></a>延展操作符</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>],</span><br><span class="line"> arr2 = [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="keyword">let</span> arr3 = [...arr1, ...arr2];</span><br><span class="line"><span class="keyword">let</span> obj1 = {<span class="attr">name</span>: <span class="string">'Tome'</span>},</span><br><span class="line"> obj2 = {<span class="attr">name</span>: <span class="string">'Sam'</span>};</span><br><span class="line"><span class="keyword">let</span> obj3 = {...obj1, ...obj2};</span><br></pre></td></tr></table></figure>
<h2 id="对象属性简写"><a href="#对象属性简写" class="headerlink" title="对象属性简写"></a>对象属性简写</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> t1 = <span class="string">'hello'</span>, t2 = <span class="number">2</span>;</span><br><span class="line"><span class="keyword">const</span> objDome = {</span><br><span class="line"> t1, t2</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> waitSecond = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(resolve, <span class="number">1000</span>)</span><br><span class="line">})</span><br><span class="line">waitSecond</span><br><span class="line"> .then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'hello'</span>)</span><br><span class="line"> <span class="keyword">return</span> waitSecond;</span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'hi'</span>)</span><br><span class="line"> })</span><br><span class="line"> .catch(<span class="function">(<span class="params">e</span>) =></span> <span class="built_in">console</span>.error(e))</span><br><span class="line"> .finally(<span class="function"><span class="params">()</span> =></span> <span class="built_in">console</span>.log(<span class="string">'finally'</span>))</span><br></pre></td></tr></table></figure>
<h2 id="let-和-const"><a href="#let-和-const" class="headerlink" title="let 和 const"></a>let 和 const</h2><h1 id="ES7"><a href="#ES7" class="headerlink" title="ES7"></a>ES7</h1><h2 id="Array-prototype-includes"><a href="#Array-prototype-includes" class="headerlink" title="Array.prototype.includes()"></a>Array.prototype.includes()</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">6</span>, <span class="number">2</span>, <span class="number">5</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.includes(<span class="number">6</span>, <span class="number">1</span>)); <span class="comment">// false 从下表1开始寻找6</span></span><br></pre></td></tr></table></figure>
<h2 id="幂指数运算"><a href="#幂指数运算" class="headerlink" title="幂指数运算"></a>幂指数运算</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span> ** <span class="number">10</span>); <span class="comment">// 1024</span></span><br></pre></td></tr></table></figure>
<h1 id="ES8"><a href="#ES8" class="headerlink" title="ES8"></a>ES8</h1><h2 id="async-await"><a href="#async-await" class="headerlink" title="async await"></a>async await</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">process</span>(<span class="params">array</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> <span class="keyword">await</span> (<span class="keyword">let</span> i <span class="keyword">of</span> array) {</span><br><span class="line"> <span class="built_in">console</span>.log(i)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Object-values"><a href="#Object-values" class="headerlink" title="Object.values()"></a>Object.values()</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = {</span><br><span class="line"> a: <span class="number">1</span>,</span><br><span class="line"> b: <span class="number">2</span>,</span><br><span class="line"> c: <span class="number">3</span>,</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> value = <span class="built_in">Object</span>.values(obj);</span><br><span class="line"><span class="built_in">console</span>.log(value); <span class="comment">// [ 1, 2, 3 ]</span></span><br></pre></td></tr></table></figure>
<h2 id="Object-entries"><a href="#Object-entries" class="headerlink" title="Object.entries()"></a>Object.entries()</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> <span class="built_in">Object</span>.entries(obj)) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`key:<span class="subst">${key}</span>,value:<span class="subst">${value}</span>`</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="String-padding"><a href="#String-padding" class="headerlink" title="String padding"></a>String padding</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// String.prototype.padStart</span></span><br><span class="line"><span class="comment">// String.padStart(targetLength,[padString])</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'0.0'</span>.padStart(<span class="number">5</span>, <span class="string">'12'</span>)) <span class="comment">// 120.0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'0.0'</span>.padStart(<span class="number">10</span>)) <span class="comment">// 0.0 ,参数省略为空格</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// String.prototype.padEnd</span></span><br><span class="line"><span class="comment">// String.padEnd(targetLength,padString])</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'0.0'</span>.padEnd(<span class="number">5</span>, <span class="string">'1'</span>)) <span class="comment">// 0.011</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'0.0'</span>.padEnd(<span class="number">5</span>)) <span class="comment">// 0.0 ,参数省略为空格</span></span><br></pre></td></tr></table></figure>
<h2 id="函数参数列表结尾允许逗号"><a href="#函数参数列表结尾允许逗号" class="headerlink" title="函数参数列表结尾允许逗号"></a>函数参数列表结尾允许逗号</h2><h2 id="Object-getOwnPropertyDescriptors"><a href="#Object-getOwnPropertyDescriptors" class="headerlink" title="Object.getOwnPropertyDescriptors()"></a>Object.getOwnPropertyDescriptors()</h2><blockquote>
<p>用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> obj2 = {</span><br><span class="line"> name: <span class="string">'Tom'</span>,</span><br><span class="line"> getName(){</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.name;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptors(obj2))</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">{ name:</span></span><br><span class="line"><span class="comment"> { value: 'Tom',</span></span><br><span class="line"><span class="comment"> writable: true,</span></span><br><span class="line"><span class="comment"> enumerable: true,</span></span><br><span class="line"><span class="comment"> configurable: true },</span></span><br><span class="line"><span class="comment"> getName:</span></span><br><span class="line"><span class="comment"> { value: [Function: getName],</span></span><br><span class="line"><span class="comment"> writable: true,</span></span><br><span class="line"><span class="comment"> enumerable: true,</span></span><br><span class="line"><span class="comment"> configurable: true } }</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>
<h2 id="SharedArrayBuffer对象"><a href="#SharedArrayBuffer对象" class="headerlink" title="SharedArrayBuffer对象"></a>SharedArrayBuffer对象</h2><blockquote>
<p>SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。</p>
</blockquote>
<h2 id="Atomics对象"><a href="#Atomics对象" class="headerlink" title="Atomics对象"></a>Atomics对象</h2><p>详见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Atomics" target="_blank" rel="noopener">MDN</a></p>
<h1 id="ES9"><a href="#ES9" class="headerlink" title="ES9"></a>ES9</h1><h2 id="异步迭代"><a href="#异步迭代" class="headerlink" title="异步迭代"></a>异步迭代</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fun = <span class="keyword">async</span> (arr) => {</span><br><span class="line"> <span class="keyword">for</span> <span class="keyword">await</span> (<span class="keyword">let</span> i <span class="keyword">of</span> arr) {</span><br><span class="line"> <span class="built_in">console</span>.log(i)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="Promise-finally"><a href="#Promise-finally" class="headerlink" title="Promise.finally()"></a>Promise.finally()</h2><blockquote>
<p>finally()允许你指定最终的逻辑</p>
</blockquote>
<h2 id="Rest-Spread-属性"><a href="#Rest-Spread-属性" class="headerlink" title="Rest/Spread 属性"></a>Rest/Spread 属性</h2><blockquote>
<p>可以使用扩展运算符拷贝一个对象，像是这样 obj2 = {…obj1}，但是 这只是一个对象的浅拷贝。另外，如果一个对象A的属性是对象B，那么在克隆后的对象cloneB中，该属性指向对象B。</p>
</blockquote>
<h2 id="正则表达式命名捕获组"><a href="#正则表达式命名捕获组" class="headerlink" title="正则表达式命名捕获组"></a>正则表达式命名捕获组</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> reDate = <span class="regexp">/(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/</span>,</span><br><span class="line"> match = reDate.exec(<span class="string">'2019-10-30'</span>),</span><br><span class="line"> {year, month, day} = match.groups</span><br><span class="line"><span class="built_in">console</span>.log(year, month, day) <span class="comment">// 2019 10 30</span></span><br><span class="line"><span class="built_in">console</span>.log((<span class="string">'2019-10-30'</span>).replace(reDate, <span class="string">`<span class="subst">${month}</span>-<span class="subst">${day}</span>-<span class="subst">${year}</span>`</span>)); <span class="comment">// 10-30-2019</span></span><br></pre></td></tr></table></figure>
<h2 id="正则表达式反向断言"><a href="#正则表达式反向断言" class="headerlink" title="正则表达式反向断言"></a>正则表达式反向断言</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 肯定反向断言</span></span><br><span class="line"><span class="keyword">const</span> reLookbehind = <span class="regexp">/(?<=\D)\d+/</span>,</span><br><span class="line"> match1 = reLookbehind.exec(<span class="string">'$123.89'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(match1[<span class="number">0</span>]); <span class="comment">// 123</span></span><br><span class="line"><span class="comment">// 否定反向断言</span></span><br><span class="line"><span class="keyword">const</span> reLookBehindNeg = <span class="regexp">/(?<!\D)\d+/</span>,</span><br><span class="line"> match2 = reLookBehindNeg.exec(<span class="string">'$123.89'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(match2[<span class="number">0</span>]) <span class="comment">// 23</span></span><br></pre></td></tr></table></figure>
<h2 id="正则表达式dotAll模式"><a href="#正则表达式dotAll模式" class="headerlink" title="正则表达式dotAll模式"></a>正则表达式dotAll模式</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/hello.world/</span>.test(<span class="string">'hello\nworld'</span>)); <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="regexp">/hello.world/</span>s.test(<span class="string">'hello\nworld'</span>)); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h2 id="正则表达式-Unicode-转义"><a href="#正则表达式-Unicode-转义" class="headerlink" title="正则表达式 Unicode 转义"></a>正则表达式 Unicode 转义</h2><blockquote>
<p>此特性可以避免使用特定 Unicode 区间来进行内容类型判断，提升可读性和可维护性.</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> reGreekSymbol = <span class="regexp">/\p{Script=Greek}/u</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reGreekSymbol.test(<span class="string">'π'</span>)); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h2 id="非转义序列的模板字符串"><a href="#非转义序列的模板字符串" class="headerlink" title="非转义序列的模板字符串"></a>非转义序列的模板字符串</h2><h1 id="ES10"><a href="#ES10" class="headerlink" title="ES10"></a>ES10</h1><h2 id="行分隔符（U-2028）和段分隔符（U-2029）符号现在允许在字符串文字中，与JSON匹配"><a href="#行分隔符（U-2028）和段分隔符（U-2029）符号现在允许在字符串文字中，与JSON匹配" class="headerlink" title="行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配"></a>行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配</h2><blockquote>
<p>以前，这些符号在字符串文字中被视为行终止符，因此使用它们会导致SyntaxError异常。</p>
</blockquote>
<h2 id="更加友好的-JSON-stringify"><a href="#更加友好的-JSON-stringify" class="headerlink" title="更加友好的 JSON.stringify"></a>更加友好的 JSON.stringify</h2><blockquote>
<p>如果输入 Unicode 格式但是超出范围的字符，在原先JSON.stringify返回格式错误的Unicode字符串。现在实现了一个改变JSON.stringify的第3阶段提案，因此它为其输出转义序列，使其成为有效Unicode（并以UTF-8表示）</p>
</blockquote>
<h2 id="Array的-flat-方法和-flatMap-方法"><a href="#Array的-flat-方法和-flatMap-方法" class="headerlink" title="Array的 flat()方法和 flatMap()方法"></a>Array的 flat()方法和 flatMap()方法</h2><blockquote>
<p>node -v >= 11</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * flat()和 flatMap()本质上就是是归纳（reduce） 与 合并（concat）的操作。</span></span><br><span class="line"><span class="comment"> * Array.prototype.flat()</span></span><br><span class="line"><span class="comment"> * flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>]];</span><br><span class="line"><span class="built_in">console</span>.log(arr1.flat());<span class="comment">// [ 1, 2, 3, 4 ] 默认值是 1</span></span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>, [<span class="number">5</span>, <span class="number">6</span>, [<span class="number">7</span>, <span class="number">8</span>, [<span class="number">9</span>, <span class="number">10</span>]]]]];</span><br><span class="line"><span class="built_in">console</span>.log(arr2.flat(<span class="literal">Infinity</span>));<span class="comment">// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</span></span><br><span class="line"><span class="comment">// flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。这里我们拿map方法与flatMap方法做一个比较。</span></span><br><span class="line"><span class="keyword">let</span> arr3 = [<span class="string">"今天天气不错"</span>, <span class="string">""</span>, <span class="string">"早上好"</span>]</span><br><span class="line">arr3.flatMap(<span class="function"><span class="params">s</span> =></span> s.split(<span class="string">''</span>));<span class="comment">// ["今", "天", "天", "气", "不", "错", "早", "上", "好"]</span></span><br></pre></td></tr></table></figure>