-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
2173 lines (2056 loc) · 529 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>hexo+git搭建个人博客</title>
<url>/2022/07/01/a001-hexo+git%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/</url>
<content><![CDATA[<h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><ol>
<li>新建项目文件夹，安装hexo</li>
</ol>
<figure class="highlight cmake"><table><tr><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> hexo | npm <span class="hljs-keyword">install</span> hexo -g<br></code></pre></td></tr></table></figure>
<ol start="2">
<li>初始化</li>
</ol>
<figure class="highlight csharp"><table><tr><td class="code"><pre><code class="hljs csharp">hexo <span class="hljs-keyword">init</span><br></code></pre></td></tr></table></figure>
<ol start="3">
<li>安装git插件</li>
</ol>
<figure class="highlight ada"><table><tr><td class="code"><pre><code class="hljs ada">npm install hexo-deployer-git <span class="hljs-comment">--save</span><br></code></pre></td></tr></table></figure>
<ol start="4">
<li>配置_config.yml</li>
</ol>
<figure class="highlight yml"><table><tr><td class="code"><pre><code class="hljs yml"><span class="hljs-attr">deploy:</span><br> <span class="hljs-attr">type:</span> <span class="hljs-string">git</span><br> <span class="hljs-attr">repo:</span> <span class="hljs-string">[email protected]:xxx/xxx.github.io.git</span> <br> <span class="hljs-attr">branch:</span> [<span class="hljs-string">branch-name</span>] <span class="hljs-comment">#仓库默认分支</span><br></code></pre></td></tr></table></figure>
<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><ol>
<li>清空public文件夹</li>
</ol>
<figure class="highlight ebnf"><table><tr><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">hexo clean</span> <br></code></pre></td></tr></table></figure>
<ol start="2">
<li>生成public文件夹</li>
</ol>
<figure class="highlight verilog"><table><tr><td class="code"><pre><code class="hljs verilog">hexo g | hexo <span class="hljs-keyword">generate</span> <br></code></pre></td></tr></table></figure>
<ol start="3">
<li>启动本地服务,默认地址为<a href="http://localhost:4000/(%E5%8F%AF%E8%B7%B3%E8%BF%87)">http://localhost:4000/(可跳过)</a></li>
</ol>
<figure class="highlight 1c"><table><tr><td class="code"><pre><code class="hljs 1c">hexo s <span class="hljs-string">| hexo server </span><br></code></pre></td></tr></table></figure>
<ol start="4">
<li>部署站点，在本地生成.deploy_git文件夹，并将编译后的文件上传至 GitHub</li>
</ol>
<figure class="highlight 1c"><table><tr><td class="code"><pre><code class="hljs 1c">hexo d <span class="hljs-string">| hexo deploy</span><br></code></pre></td></tr></table></figure>
<h3 id="写作"><a href="#写作" class="headerlink" title="写作"></a>写作</h3><ol>
<li>新建md文件</li>
</ol>
<figure class="highlight vim"><table><tr><td class="code"><pre><code class="hljs vim">hexo <span class="hljs-keyword">new</span> [layout] <span class="hljs-symbol"><title></span> <br>//如：hexo <span class="hljs-keyword">new</span> photo <span class="hljs-string">'test'</span><br></code></pre></td></tr></table></figure>
<p>上述指令执行时，Hexo 会尝试在 scaffolds 中寻找photo.md布局，若找到，则根据该布局新建文章；<br>若未找到或指令中未指定该参数，则使用post.md新建文章。新建文章的名称在_config.yml中配置；<br>scaffolds 中的模板没有生成命令，需要手动生成。</p>
<ol start="2">
<li>layout的指定</li>
</ol>
<blockquote>
<p>不写默认：以post.md为模板，_posts下生成文件；<br>draft：以draft.md为模板，_draft文件夹下生成草稿；<br>page：以page.md为模板，source下生成文件夹，并自带index.md，可以通过xxx.github.io/文件夹名 访问，相当于新建一个页面；<br>自定义xxx：以xxx.md为模板，_posts下生成文件。</p>
</blockquote>
<h3 id="主题"><a href="#主题" class="headerlink" title="主题"></a>主题</h3><p><a href="https://hexo.fluid-dev.com/docs/start/">fluid</a></p>
<h3 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h3><p><a href="https://valine.js.org/quickstart.html">valine</a></p>
<h3 id="图床"><a href="#图床" class="headerlink" title="图床"></a>图床</h3><p><a href="https://picx-docs.xpoet.cn/">picx</a><br><a href="https://dash.cloudflare.com/">cloudflare</a><br>cloudflare解决github访问不了的问题<br><img src="https://picx-images-hosting-4r8.pages.dev/github-io/example/a001/cloudflare.1vyeulhqtf.jpg" alt="cloudflare使用"></p>
<hr>
<p>官方文档：<a href="https://hexo.io/zh-cn/">hexo</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>优雅的markdown</title>
<url>/2022/07/06/a002-%E4%BC%98%E9%9B%85%E7%9A%84markdown/</url>
<content><![CDATA[<h3 id="创建标题"><a href="#创建标题" class="headerlink" title="创建标题"></a>创建标题</h3><p>格式：#+空格+名称 ，最后回车。实现标题的添加，不同的#数量对应不同的标题，一级标题一个，二级两个类推。</p>
<h3 id="字体设置"><a href="#字体设置" class="headerlink" title="字体设置"></a>字体设置</h3><ol>
<li><p>加粗<br><strong>字体</strong>左右两边加两个*</p>
</li>
<li><p>斜体<br><em>字体</em>左右两边加一个*</p>
</li>
<li><p>删除线<br><del>字体</del>左右两边加两个波浪线~</p>
</li>
</ol>
<h3 id="添加引用"><a href="#添加引用" class="headerlink" title="添加引用"></a>添加引用</h3><blockquote>
<p>是通过大于号>+ 空格，文字最后回车</p>
</blockquote>
<h3 id="分割线"><a href="#分割线" class="headerlink" title="分割线"></a>分割线</h3><p>三个- 或三个*</p>
<h3 id="添加图片"><a href="#添加图片" class="headerlink" title="添加图片"></a>添加图片</h3><p>![自己起的图片名称]+(),可以在括号里添加本地图片或网络图片<br><img src="https://csfile.ossxrcloud.net/ydnImg/200X200/802dac9a93084_1641346280372.png" alt="实例"></p>
<h3 id="超链接"><a href="#超链接" class="headerlink" title="超链接"></a>超链接</h3><p>[名称]+()，括号里面添加1的网址<br><a href="https://markdown.com.cn/">实例</a></p>
<h3 id="添加列表"><a href="#添加列表" class="headerlink" title="添加列表"></a>添加列表</h3><h4 id="有序列表"><a href="#有序列表" class="headerlink" title="有序列表"></a>有序列表</h4><p>1+点号（英文输入法）+空格</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
<h4 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h4><p>*或+或- 加空格</p>
<ul>
<li>a</li>
<li>b</li>
</ul>
<h3 id="添加表格"><a href="#添加表格" class="headerlink" title="添加表格"></a>添加表格</h3><p>竖杠</p>
<table>
<thead>
<tr>
<th>名字</th>
<th>性别</th>
<th>生日</th>
</tr>
</thead>
<tbody><tr>
<td>s1xpences</td>
<td>男</td>
<td>18</td>
</tr>
</tbody></table>
<h3 id="添加代码块"><a href="#添加代码块" class="headerlink" title="添加代码块"></a>添加代码块</h3><p>代码片段<br>一个<code>或者两个</code>包裹</p>
<p><code>测试</code></p>
<p><code>测试测试</code></p>
<p>代码块<br>三个`+语言</p>
<figure class="highlight js"><table><tr><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> a = <span class="hljs-string">'0.0'</span><br></code></pre></td></tr></table></figure>
<hr>
<p>官方文档：<a href="https://markdown.com.cn/">markdown</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>markdown</tag>
</tags>
</entry>
<entry>
<title>有趣|有用的网站</title>
<url>/2022/07/06/a003-%E6%9C%89%E8%B6%A3-%E6%9C%89%E7%94%A8%E7%9A%84%E7%BD%91%E7%AB%99/</url>
<content>< [小牛加速器](https://aoxspeed.net/zhs/) [purefast](https://purefast.net/auth/register?code=ujr5) --></li>
<li><a href="http://emblemmatic.org/markmaker/#/">英文logo生成</a></li>
<li><a href="http://www.53bk.com/baokan/">全国报刊杂志大全</a></li>
<li><a href="https://github.com/zhaoolee/ChromeAppHeroes">chrome插件英雄榜</a></li>
<li><a href="https://www.sysmini.com/">极简系统</a></li>
<li><a href="https://www.polebrief.com/index">极简简历</a></li>
<li><a href="https://toonme.com/">生成卡通头像</a></li>
<li><a href="https://colleges.chat/">大学生活指北</a></li>
<li><a href="https://gifcam.en.softonic.com/download">gif制作工具</a></li>
<li><a href="https://eleduck.com/">电鸭兼职</a></li>
<li><a href="https://www.boce.com/">DNS查询</a></li>
<li><a href="https://www.fosshub.com/SpaceSniffer.html">硬盘资源分析软件：SpaceSniffer</a></li>
<li><a href="https://www.voidtools.com/zh-cn/">本地资源快速搜索软件：Everything</a></li>
<li><a href="https://msdn.itellyou.cn/">msdn纯净系统下载</a></li>
<li><a href="https://www.wepe.com.cn/">微PE:系统PE安装</a></li>
<li><a href="https://cli.im/">草料二维码</a></li>
<li><a href="https://weread.qnmlgb.tech/?offset=1">微信读书组队</a></li>
<li><a href="http://www.dajiadaohang.com/">打假导航</a></li>
<li><a href="https://c.runoob.com/">菜鸟工具</a></li>
<li><a href="https://c.runoob.com/front-end/59/">图片base64编码</a></li>
<li><a href="https://www.tiobe.com/tiobe-index/">编程语言排行</a></li>
<li><a href="https://picx-docs.xpoet.cn/docs/usage-guide/get-start.html">免费图床·picx</a></li>
</ol>
<h3 id="学习类"><a href="#学习类" class="headerlink" title="学习类"></a>学习类</h3><ol>
<li><a href="http://qzbltushu.ys168.com/">考研书籍视频资源网站,免费,时效性好</a></li>
<li><a href="https://bbs.qzzn.com/">公务员考试论坛</a></li>
<li><a href="http://rlsbj.cq.gov.cn/ywzl/rsks/gwyks/">重庆公务员官网</a></li>
<li><a href="http://v.huatu.com/">华图在线</a></li>
<li><a href="http://ntce.neea.edu.cn/">教资</a></li>
<li><a href="https://learn.freecodecamp.one/">前端学习</a></li>
<li><a href="https://docschina.org/">印记中文</a></li>
</ol>
<h3 id="素材类"><a href="#素材类" class="headerlink" title="素材类"></a>素材类</h3><ol>
<li><a href="https://flatuicolors.com/">flatuicolors.com/</a></li>
<li><a href="https://uigradients.com/#Cherryblossoms">渐变色</a></li>
<li><a href="http://zhongguose.com/#yunshuilan">中国色</a></li>
<li><a href="https://colorleap.app/home">根据图片配色</a></li>
<li><a href="https://www.bitbug.net/">favicon 生成</a></li>
<li><a href="https://icons8.com/">logo 素材</a></li>
<li><a href="https://www.aigei.com/">音效</a></li>
<li><a href="https://shields.io/">github 图标定制</a></li>
<li><a href="https://www.jq22.com/">jquery 插件库</a></li>
<li><a href="https://demo.gin-vue-admin.com/#/layout/dashboard">后台管理系统参考</a></li>
<li><a href="https://apps.timwhitlock.info/emoji/tables/unicode">emoji</a></li>
<li><a href="https://www.pexels.com/zh-cn/">免费图片素材</a></li>
<li><a href="http://www.htmleaf.com/">jQuery 之家</a></li>
<li><a href="particles.js.org/">炫酷网页背景</a></li>
<li><a href="https://9elements.github.io/fancy-border-radius/">圆角生成fancy-border-radius</a></li>
<li><a href="https://wweb.dev/resources/css-separator-generator/">页面分割css-separator-generator</a></li>
<li><a href="https://getwaves.io/">波浪线生成</a></li>
<li><a href="https://mp.weixin.qq.com/s/xYUjsf4IKYORqOLNNnEHlA">web前端开发(公众号)-64个css生成工具集合</a></li>
<li><a href="https://mp.weixin.qq.com/s/O91XIiumJJnG6P7mb3nI-w">web前端开发(公众号)-10个很棒的JavaScript 库</a></li>
</ol>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>网站大全</tag>
</tags>
</entry>
<entry>
<title>前端开发工具</title>
<url>/2022/07/08/a005-%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/</url>
<content><![CDATA[<h2 id="VScode篇"><a href="#VScode篇" class="headerlink" title="VScode篇"></a>VScode篇</h2><h3 id="自定义护眼主题"><a href="#自定义护眼主题" class="headerlink" title="自定义护眼主题"></a>自定义护眼主题</h3><ol>
<li><p>使用默认light主题<br>设置 => 工作台 => 主题 => Color Theme浅色默认</p>
</li>
<li><p>调整编辑区域颜色<br>设置 => 工作台 => 主题 => Color Customizations => 在settings.json中编辑</p>
<figure class="highlight json"><table><tr><td class="code"><pre><code class="hljs json"> <span class="hljs-attr">"workbench.colorCustomizations"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"foreground"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#75a478"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"editor.background"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"#C7EDCC"</span><span class="hljs-punctuation">,</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure></li>
</ol>
<h3 id="vue快捷生成代码块配置"><a href="#vue快捷生成代码块配置" class="headerlink" title="vue快捷生成代码块配置"></a>vue快捷生成代码块配置</h3><ol>
<li><p>配置<br>用户代码片段 => 输入vue回车进入vue.json.code-snippets</p>
<figure class="highlight json"><table><tr><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">{</span><br>\t\t\t\t<span class="hljs-attr">"Print to console"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br>\t\t\t\t\t\t\t\t<span class="hljs-attr">"prefix"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"vue"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t<span class="hljs-attr">"body"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"<template>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">" $2"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"</template>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"\n"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"<script lang=\"ts\">"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"export default {"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">" name: \"\""</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"}"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"</script>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"<script lang=\"ts\" setup>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"import { ref, reactive } from 'vue'"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"</script>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"\n"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"<style lang=\"less\" scoped>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">" $3"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t\t\t\t\t<span class="hljs-string">"</style>"</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t<span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br>\t\t\t\t\t\t\t\t<span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Log output to console"</span><br>\t\t\t\t<span class="hljs-punctuation">}</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>使用<br>在vscode中输入vue即可快捷生成指定的代码块</p>
</li>
</ol>
<h3 id="定位第三方包源码"><a href="#定位第三方包源码" class="headerlink" title="定位第三方包源码"></a>定位第三方包源码</h3><p>alt点击引入的第三方包(如：antd) => 在标签栏中右键 => 在资源管理视图中显示<br>不可在package.json中使用</p>
<h2 id="WebStorm篇"><a href="#WebStorm篇" class="headerlink" title="WebStorm篇"></a>WebStorm篇</h2><h3 id="free版webstorm获取"><a href="#free版webstorm获取" class="headerlink" title="free版webstorm获取"></a>free版webstorm获取</h3><p><a href="https://mp.weixin.qq.com/s/IL_2AdsLyhpZNy-jif8uNg">https://mp.weixin.qq.com/s/IL_2AdsLyhpZNy-jif8uNg</a></p>
<h3 id="自定义护眼主题-1"><a href="#自定义护眼主题-1" class="headerlink" title="自定义护眼主题"></a>自定义护眼主题</h3><ol>
<li><p>使用默认light主题<br>设置 => 编辑器 => 常规 => 方案IntelliJ Light</p>
</li>
<li><p>调整编辑区域颜色<br>设置 => 编辑器 => 常规 => 文本 => 默认文本 => 背景C7EDCC</p>
</li>
</ol>
<h3 id="定位第三方包源码-1"><a href="#定位第三方包源码-1" class="headerlink" title="定位第三方包源码"></a>定位第三方包源码</h3><p>ctrl点击引入的第三方包(如：antd) => 左侧项目目录上方点击追踪图标<br>可在package.json中使用</p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>VScode</tag>
<tag>WebStorm</tag>
</tags>
</entry>
<entry>
<title>常用的git命令</title>
<url>/2022/07/07/a004-%E5%B8%B8%E7%94%A8%E7%9A%84git%E5%91%BD%E4%BB%A4/</url>
<content><![CDATA[<h3 id="github-访问慢？"><a href="#github-访问慢？" class="headerlink" title="github 访问慢？"></a>github 访问慢？</h3><ol>
<li>使用 dns 查询工具，查询 github.com，将 TTL 最小的 ip 复制</li>
<li>找到对应路径 C:\Windows\System32\drivers\etc 下的 hosts 文件<br><img src="https://img-blog.csdnimg.cn/2021042623563665.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwODc0NA==,size_16,color_FFFFFF,t_70#pic_center" alt="图示"></li>
</ol>
<h3 id="本地信息配置"><a href="#本地信息配置" class="headerlink" title="本地信息配置"></a>本地信息配置</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git config --global --list<br>git config --global user.name<br>git config --global user.email<br></code></pre></td></tr></table></figure>
<h3 id="SSH-配置"><a href="#SSH-配置" class="headerlink" title="SSH 配置"></a>SSH 配置</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">ssh-keygen -t rsa -C '[email protected]'<br></code></pre></td></tr></table></figure>
<blockquote>
<p>公钥路径：C:/Users/Administrator/.ssh/id_rsa.pub<br>验证 ssh 是否生效：ssh -T <a href="mailto:git@github.com">git@github.com</a></p>
</blockquote>
<h3 id="提交注释"><a href="#提交注释" class="headerlink" title="提交注释"></a>提交注释</h3><p>feat: 增加新功能（feature）<br>fix: 修改bug<br>perf: 改进，性能优化<br>docs: 文档（documentation）<br>style: 空白/格式/缺少符号等（不影响代码运行的变动）<br>refactor: 重构（即不是新增功能，也不是修改 bug 的代码变动）<br>chore: 构建过程或辅助工具的变动<br>revert: 撤销，版本回退<br>test：测试<br>build: 打包 </p>
<h3 id="基本命令"><a href="#基本命令" class="headerlink" title="基本命令"></a>基本命令</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git branch -avv<br>git branch -vv<br>git remote -vv<br>git diff<br>git log --oneline<br>git checkout xxx 或 git switch xxx<br>git checkout -b xxx 或 git switch -c xxx<br></code></pre></td></tr></table></figure>
<h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">files change...<br>git pull<br>git add .<br>git commit -m 'xxx'<br>git push<br></code></pre></td></tr></table></figure>
<h3 id="创建新工作区并推送到远程仓库"><a href="#创建新工作区并推送到远程仓库" class="headerlink" title="创建新工作区并推送到远程仓库"></a>创建新工作区并推送到远程仓库</h3><ol>
<li>由自己创建仓库</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git init<br>git add .<br>git commit -m 'xxx'<br>git branch -M main //重命名当前本地分支，初始分支名为master<br>git remote add origin [email protected] //origin为远程仓库名，可以自定义<br>git push origin -u main:master //main为本地分支名，master为远程分支名，之后push需要指定远程仓库名<br>或<br>git push origin -u master //本地分支名和远程分支名一样，之后可直接push，本地分支名和远程分支名尽量保持一样<br></code></pre></td></tr></table></figure>
<ol start="2">
<li>由别人创建仓库</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git clone [email protected] //克隆默认分支，克隆后本地默认与指定远程分支建立联系<br>或<br>git clone -b xxx [email protected] //克隆其他分支，克隆后本地默认与指定远程分支建立联系<br></code></pre></td></tr></table></figure>
<h3 id="新建分支并推送远程仓库的对应分支"><a href="#新建分支并推送远程仓库的对应分支" class="headerlink" title="新建分支并推送远程仓库的对应分支"></a>新建分支并推送远程仓库的对应分支</h3><blockquote>
<p><strong>分支是用来开发不同功能的</strong></p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git checkout -b 新分支名<br>git push origin -u dev<br></code></pre></td></tr></table></figure>
<h3 id="分支重命名"><a href="#分支重命名" class="headerlink" title="分支重命名"></a>分支重命名</h3><ol>
<li>本地分支</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git branch -m 原分支名称 新分支名称<br></code></pre></td></tr></table></figure>
<ol start="2">
<li>远程分支</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git push origin -d 自己的原分支名称<br>git push origin -u 新分支名称<br></code></pre></td></tr></table></figure>
<ol start="3">
<li>重命名分支为远程默认分支时<blockquote>
<p>github 打开当前仓库——>settings——>branches——>手动重命名</p>
</blockquote>
</li>
</ol>
<h3 id="删除分支"><a href="#删除分支" class="headerlink" title="删除分支"></a>删除分支</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git branch -d 本地分支名<br>git push origin -d 远程分支名<br></code></pre></td></tr></table></figure>
<h3 id="合并分支"><a href="#合并分支" class="headerlink" title="合并分支"></a>合并分支</h3><blockquote>
<p>切换到合并分支，合并其他工作树干净的分支</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git merge 被合并分支名<br></code></pre></td></tr></table></figure>
<h3 id="拉取远程新的分支并与本地建立连接"><a href="#拉取远程新的分支并与本地建立连接" class="headerlink" title="拉取远程新的分支并与本地建立连接"></a>拉取远程新的分支并与本地建立连接</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git checkout -b 本地分支名 origin/远程分支名<br>files change...<br>git add .<br>git commit -m 'xxx'<br>git push<br><br>或<br><br>git fetch origin 远程分支名:本地分支名<br>git switch 本地分支名<br>files change...<br>git add .<br>git commit -m 'xxx'<br>git push origin -u 远程分支名<br></code></pre></td></tr></table></figure>
<h3 id="移除工作区修改"><a href="#移除工作区修改" class="headerlink" title="移除工作区修改"></a>移除工作区修改</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git checkout .<br><br>或<br><br>git checkout 文件路径<br></code></pre></td></tr></table></figure>
<h3 id="取消-add-操作"><a href="#取消-add-操作" class="headerlink" title="取消 add 操作"></a>取消 add 操作</h3><figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git reset<br></code></pre></td></tr></table></figure>
<h3 id="取消-commit-操作"><a href="#取消-commit-操作" class="headerlink" title="取消 commit 操作"></a>取消 commit 操作</h3><p>之前提交过</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git reset --soft HEAD^ //仅撤销commit<br>git reset --mixed HEAD^ //撤销commit，add<br></code></pre></td></tr></table></figure>
<p>第一次提交<br>删除.git文件夹重新提交</p>
<h3 id="版本控制"><a href="#版本控制" class="headerlink" title="版本控制"></a>版本控制</h3><ol>
<li>版本回退<blockquote>
<p>不会破坏之前的版本</p>
</blockquote>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git reset --hard commitid<br>files change...<br>git add .<br>git commit -m 'xxx'<br>git push<br>git pull 解决冲突<br></code></pre></td></tr></table></figure>
<blockquote>
<p>会破坏之前的版本</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git reset --hard commitid<br>git push -f<br></code></pre></td></tr></table></figure>
<ol start="2">
<li>切换新分支指向想要回退的版本</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs git">git checkout -b 分支名 commitid<br></code></pre></td></tr></table></figure>
<h3 id="tag"><a href="#tag" class="headerlink" title="tag"></a>tag</h3><blockquote>
<p><strong>tag 是用来记录版本的</strong><br>tag 给当前仓库 commitid 记录对应的版本信息，之后可以根据 tag 找到版本对应的 commitid 进行版本控制<br>开发完新功能后将功能分支合并到主分支，之后打 tag，一般只用给主分支打 tag</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">git tag xxx //给最近的commitid打tag，当前未提交则为上次commitid打tag，当前已提交则为本次commitid打tag<br>git tag xxx commitid //给指定的commitid打tag<br>git tag xxx -m <span class="hljs-string">"注释"</span> commitid //给指定的commitid打tag同时添加注释<br>git push origin xxx //将本地tag推送到远程<br>git push origin --tag //本地所有tag推送到远程<br>git tag -d xxx //删除本地tag，删除本地后git pull会将远程的tag拉下来<br>git push origin -d xxx //删除远程tag<br>git show xxx //查看对应tag提交信息<br>git tag //查看本地所有tag<br>git ls-remote --tag //查看远程所有tag<br></code></pre></td></tr></table></figure>
<h3 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h3><ol>
<li><p>改了文件名的大小写，git 会认为文件没有变化，从而导致本地和远程仓库不一致</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">git config core.ignorecase <span class="hljs-literal">false</span><br></code></pre></td></tr></table></figure>
<p></p>
</li>
</ol>
<hr>
<p>官方文档：<a href="https://git-scm.com/book/zh/v2">Git</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>前端工程化</title>
<url>/2022/07/11/a006-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/</url>
<content><![CDATA[<h2 id="工程化"><a href="#工程化" class="headerlink" title="工程化"></a>工程化</h2><p>前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。</p>
<h2 id="模块化篇"><a href="#模块化篇" class="headerlink" title="模块化篇"></a>模块化篇</h2><p>模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。<br>将一个复杂的程序依据一定的规范封装成几个块，并进行组合在一起。<br>块内部数据是私有的，只是向外部暴露一些接口与外部其它模块通信。</p>
<p><strong>发展史：</strong></p>
<blockquote>
<p>namespace(简单封装)，本质是对象，一点不安全<br>IIFE模式(匿名闭包)，利用立即执行函数，然后暴露<br>IIFE增强模式，当前模块化的基础</p>
</blockquote>
<p><strong>优点：</strong></p>
<blockquote>
<p>避免命名冲突(减少命名空间污染)<br>更好的分离, 按需加载<br>更高复用性<br>高可维护性</p>
</blockquote>
<p><strong>缺点：</strong></p>
<blockquote>
<p>需要很多的script标签<br>请求过多<br>依赖模糊<br>难以维护</p>
</blockquote>
<p><strong>规范：</strong></p>
<blockquote>
<p>common.js<br>AMD规范<br>CMD规范<br>es6规范</p>
</blockquote>
<h3 id="common-js"><a href="#common-js" class="headerlink" title="common.js"></a>common.js</h3><p>每个文件都可当作一个模块，常用于服务器端<br>在服务器端: 模块的加载是运行时同步加载的(node)<br>在浏览器端: 模块需要提前编译打包处理(Browserify工具)，浏览器不认识require</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">暴露模块 </span><br><span class="hljs-comment">暴露的本质都是导出expors对象 </span><br><span class="hljs-comment">*/</span><br><span class="hljs-variable language_">module</span> = {<br> <span class="hljs-attr">exports</span>:{}<br>}<br><br><span class="hljs-comment">/* </span><br><span class="hljs-comment">引入模块</span><br><span class="hljs-comment">第三方模块：xxx为模块名(包名),放在文件最上面</span><br><span class="hljs-comment">自定义模块：xxx为模块文件路径 </span><br><span class="hljs-comment">*/</span><br><span class="hljs-built_in">require</span>(xxx)<br></code></pre></td></tr></table></figure>
<h3 id="AMD规范-require-js"><a href="#AMD规范-require-js" class="headerlink" title="AMD规范 require.js"></a>AMD规范 require.js</h3><p>专门用于浏览器端, 模块的加载是异步的</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">导出</span><br><span class="hljs-comment">*/</span><br><span class="hljs-title function_">define</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {}) <span class="hljs-comment">//定义没有依赖的模块</span><br><span class="hljs-title function_">define</span>([<span class="hljs-string">'module1'</span>,<span class="hljs-string">'module2'</span>],<span class="hljs-keyword">function</span>(<span class="hljs-params">m1,m2</span>){}) <span class="hljs-comment">//定义有依赖的模块</span><br><br><span class="hljs-comment">/* </span><br><span class="hljs-comment">导入 </span><br><span class="hljs-comment">*/</span><br>requirejs([<span class="hljs-string">'module3'</span>],<span class="hljs-keyword">function</span>(<span class="hljs-params">m3</span>) {})<br>requirejs.<span class="hljs-title function_">config</span>({ <span class="hljs-comment">//配置数组中模块加载路径：</span><br> <span class="hljs-attr">baseUrl</span>:<span class="hljs-string">'js/'</span> <span class="hljs-comment">//不写模块路径相对于main.js,写的话相当于根路径下js+模块路径</span><br> <span class="hljs-attr">paths</span>:{<br> <span class="hljs-attr">module1</span>:<span class="hljs-string">'./module1'</span>, <span class="hljs-comment">//不用加js后缀，默认已经加上了</span><br> <span class="hljs-attr">module2</span>:<span class="hljs-string">'./module2'</span>,<br> <span class="hljs-attr">module3</span>:<span class="hljs-string">'./module3'</span>,<br> <span class="hljs-attr">jquery</span>:<span class="hljs-string">'./jQuery 1.11.1'</span> <span class="hljs-comment">//jquery要小写且支持amd规范</span><br> }<br>})<br></code></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><code class="hljs html"><span class="hljs-comment"><!-- 最后引入的时候使用一个script标签即可 --></span><br><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">data-main</span>=<span class="hljs-string">'main.js'</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'require.js'</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <br></code></pre></td></tr></table></figure>
<h3 id="CMD规范-Sea-js"><a href="#CMD规范-Sea-js" class="headerlink" title="CMD规范 Sea.js"></a>CMD规范 Sea.js</h3><p>专门用于浏览器端, 模块的加载是异步的<br>模块使用时才会加载执行</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">导出</span><br><span class="hljs-comment">*/</span><br><span class="hljs-title function_">define</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"><span class="hljs-built_in">require</span>,<span class="hljs-built_in">exports</span>,<span class="hljs-variable language_">module</span></span>) {<br> <span class="hljs-comment">//module.exports = xxx</span><br> <span class="hljs-built_in">exports</span>.<span class="hljs-property">a</span> = xxx<br>})<br><br><span class="hljs-comment">/* </span><br><span class="hljs-comment">引入 </span><br><span class="hljs-comment">*/</span> <br><span class="hljs-title function_">define</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"><span class="hljs-built_in">exports</span></span>) {<br> <span class="hljs-comment">//同步引入</span><br> <span class="hljs-keyword">let</span> module1 = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./module1'</span>) <span class="hljs-comment">//引入最后拿到这个模块暴露的东西，但是模块上面的代码也会执行</span><br> <span class="hljs-comment">//异步引入</span><br> <span class="hljs-built_in">require</span>.<span class="hljs-title function_">async</span>(<span class="hljs-string">'./module2'</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">module2</span>) {<br> module2.<span class="hljs-title function_">foo</span>()<br> })<br> <span class="hljs-built_in">exports</span>.<span class="hljs-property">b</span> = xxx<br>})<br></code></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><code class="hljs html"><span class="hljs-comment"><!-- 使用 --></span><br><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'Sea.js'</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- 先引入 --></span><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"><span class="hljs-title class_">Seajs</span>.<span class="hljs-title function_">use</span>(<span class="hljs-string">'main.js'</span>)</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-comment"><!-- 后使用 --></span><br></code></pre></td></tr></table></figure>
<h3 id="es6规范"><a href="#es6规范" class="headerlink" title="es6规范"></a>es6规范</h3><p>依赖模块需要编译打包处理，很多浏览器不支持es6语法，需要编译打包成es5<br> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/* </span><br><span class="hljs-comment">具名导出 </span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">export</span> value <span class="hljs-comment">//分别暴露</span><br><span class="hljs-keyword">export</span> {value,value} <span class="hljs-comment">//统一暴露</span><br><span class="hljs-comment">//引入：</span><br><span class="hljs-keyword">import</span> {名字<span class="hljs-number">1</span>,名字<span class="hljs-number">2</span>} <span class="hljs-keyword">from</span> 路径 <br><span class="hljs-comment">//或</span><br><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> 变量名 <span class="hljs-keyword">from</span> 路径 <br><span class="hljs-comment">//或</span><br><span class="hljs-keyword">import</span> {名字<span class="hljs-number">1</span>,名字<span class="hljs-number">2</span> <span class="hljs-keyword">as</span> 自定义名字} <span class="hljs-keyword">from</span> 路径 <span class="hljs-comment">//具名导出，引入的时候必须使用对象解构赋值的方式 </span><br><br><span class="hljs-comment">/* </span><br><span class="hljs-comment">统一导出 </span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> value <span class="hljs-comment">//一个模块中只能用一次</span><br><br><span class="hljs-comment">/* </span><br><span class="hljs-comment">引入 </span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">import</span> 自定义名字 <span class="hljs-keyword">from</span> 路径 <span class="hljs-comment">//引用第三方库，就是这种方式 </span><br></code></pre></td></tr></table></figure></p>
<p>实现(浏览器端)</p>
<blockquote>
<p>使用Babel将es6编译成es5代码(里面有commonjs的语法)，使用browserify编译打包js<br>配置.babelrc ,rc run control运行时控制文件</p>
</blockquote>
<h2 id="组件化篇"><a href="#组件化篇" class="headerlink" title="组件化篇"></a>组件化篇</h2><p>页面上的每个独立的、可视/可交互区域视为一个组件;<br>每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;<br>由于组件具有独立性,因此组件与组件之间可以 自由组合;<br>页面只不过是组件的容器,负责组合组件形成功能完整的界面;<br>当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。</p>
<hr>
<p>参考视频：<a href="https://www.bilibili.com/video/BV18s411E7Tj?spm_id_from=333.1007.top_right_bar_window_history.content.click">BV18s411E7Tj</a><br>参考博客：<a href="https://www.cnblogs.com/angel648/p/11370327.html">https://www.cnblogs.com/angel648/p/11370327.html</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>模块化</tag>
<tag>组件化</tag>
</tags>
</entry>
<entry>
<title>信息与存储</title>
<url>/2022/07/12/a008-%E4%BF%A1%E6%81%AF%E4%B8%8E%E5%AD%98%E5%82%A8/</url>
<content><![CDATA[<h3 id="信息"><a href="#信息" class="headerlink" title="信息"></a>信息</h3><h4 id="cookies"><a href="#cookies" class="headerlink" title="cookies"></a>cookies</h4><ol>
<li>关于cookies<blockquote>
<p>cookies不是缓存;</p>
<p>当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切，Cookie 是为了解决记住用户信息发明的;</p>
<p>使得基于无状态的http协议记录稳定的状态信息成为可能；</p>
<p>格式为键值对，名字自定义;</p>
<p>{key,value,domain,path,exprits,size};</p>
<p>第一次访问服务器通过响应头的set-cookie发送到用户浏览器并保存在本地的一小块数据;</p>
<p>它会在浏览器之后向同一服务器再次发送请求时被携带在http请求头Cookie并发送到服务器;</p>
</blockquote>
</li>
</ol>
<p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-8af4f72c16e0cf906027ed41f5e20e17_b.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660188325&t=f2070b56c0dfc213e52ca02de17990af" alt="原理图"></p>
<ol start="2">
<li><p>cookie的作用</p>
<blockquote>
<p>记录用户的登录状态，购物车的状态</p>
<p>主题风格等个性化的设置</p>
</blockquote>
</li>
<li><p>cookie的分类：</p>
<blockquote>
<p>会话级cookie：保存在内存，当前域名关闭时自动失效</p>
<p>持久级cookie：保存在硬盘，当失效时间到了自动失效；<br>存储位置：C:\Users\Public(公用)\AppData\Local\Google\Chrome\User Data\Default</p>
</blockquote>
</li>
<li><p>cookie的特点</p>
<blockquote>
<p>每一个域名只会存4k大小</p>
<p>保存在客户端，不安全</p>
<p>主domain污染，子域名发送请求时也会带上主域名的信息，造成臃肿</p>
<p>查看cookie：当前网页(开发者工具)，所有cookie(设置)</p>
<p>客户端状态管理技术：将状态存放在客户端。</p>
</blockquote>
</li>
</ol>
<h4 id="session"><a href="#session" class="headerlink" title="session"></a>session</h4><ol>
<li><p>关于session</p>
<blockquote>
<p>当我们用户第一次登录之后，在服务器就会生成一个会话标识(sessionid),并保存在服务器的内存中，默认保存30分钟</p>
<p>这个sessionid会通过set-cookie发送给客户端保存，下次访问通过cookie将sessionid传输给服务器，服务器就知道你是哪个用户</p>
<p>所以cookie中就不用保存用户密码等信息，只需保存sessionid就可以了</p>
<p>sessionid一般是通过会话级cookie保存和传输，提高了安全性</p>
</blockquote>
</li>
<li><p>session特点</p>
<blockquote>
<p>服务器状态管理技术：将状态存放在服务器中</p>
<p>增加了服务器的负担，影响服务器性能<br>解决：可以配置多台服务器</p>
<p>用户每次访问不同的服务器，且并不是每台服务器都记录了sessionid<br>解决1：ip捆绑(每次只访问同一台服务器)</p>
<p>解决2：session复制(每台服务器都复制一份相同的sessionid)</p>
<p>解决3：单点登录(所有用户都只请求单点登录服务器，所有的sessionid都保存在单点服务器上，之后分发请求)<br>缺点：用户过多还是会崩溃，sessionid可以被伪造</p>
</blockquote>
</li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/20210301190137744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2NjIwMTI5,size_16,color_FFFFFF,t_70#pic_center" alt="原理图"></p>
<h4 id="token"><a href="#token" class="headerlink" title="token"></a>token</h4><ol>
<li>token原理<blockquote>
<p>用户登录成功后，服务器生成一个令牌(token)，里面包含了userid等用户信息，保存在服务器的文本文档或数据库中</p>
<p>服务器再将token发送给客户端，本地可以存储起来</p>
<p>客户端每次向服务端请求资源的时候需要带着服务端签发的token</p>
<p>服务端收到请求，然后去验证客户端请求里面带着的token，如果验证成功，就向客户端返回请求的数据</p>
<p>客户端和服务器端之间的token验证是通过人为的加密的约定</p>
</blockquote>
</li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/20200904225849315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYyMjY3,size_16,color_FFFFFF,t_70#pic_center" alt="原理图"></p>
<ol start="2">
<li>加密方式<table>
<thead>
<tr>
<th>对称加密解密</th>
<th>双钥加密解密</th>
<th>只加密不解密</th>
</tr>
</thead>
<tbody><tr>
<td>DES、AES</td>
<td>RSA</td>
<td>MD5、SHA系列</td>
</tr>
</tbody></table>
<blockquote>
<p>缺点：金融项目、银行项目、第三方支付项目加密要求达不到<br>方法：签名和数字证书，主要用于接口测试</p>
</blockquote>
</li>
</ol>
<h4 id="三者的区别与联系"><a href="#三者的区别与联系" class="headerlink" title="三者的区别与联系"></a>三者的区别与联系</h4><p><strong>相同点：</strong></p>
<ul>
<li>都是在服务器产生的，都用于身份验证</li>
<li>用于客户端和服务器端状态保持的</li>
<li>请求接口都需要，cookie和session在请求头中，token在接口参数中</li>
</ul>
<p><strong>不同点：</strong></p>
<ul>
<li>cookie存储在客户端，session存储在服务器内存，默认30分钟，session安全性高于cookie，重要数据放session，次要数据放cookie；</li>
<li>token存储在服务器数据库中，比session更加节约服务器资源</li>
</ul>
<h3 id="存储"><a href="#存储" class="headerlink" title="存储"></a>存储</h3><h4 id="H5本地存储"><a href="#H5本地存储" class="headerlink" title="H5本地存储"></a>H5本地存储</h4><blockquote>
<p>localstorage 永久存储本地域名，除非手动删除，不同域名及子域名不共享</p>
<p>sessionstorage 关闭当前会话即消失，不同域名及相同域名子域名不共享</p>
<p>server端拿不到本地存储的信息，不会被拦截，可以通过地址拼接获取</p>
<p>存储大小为5m</p>
<p>利用本地存储，可以减少网络传输</p>
</blockquote>
<h4 id="indexedDB和webSQL"><a href="#indexedDB和webSQL" class="headerlink" title="indexedDB和webSQL"></a>indexedDB和webSQL</h4><blockquote>
<p>一种能在浏览器中持久的存储结构化数据的数据库，并为web应用提供了丰富的查询能力</p>
<p>按照域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间(表)，一个存储空间可以存储多个对象数据</p>
</blockquote>
<h4 id="H5离线缓存"><a href="#H5离线缓存" class="headerlink" title="H5离线缓存"></a>H5离线缓存</h4><blockquote>
<p>让web应用在离线的情况下继续使用，通过manifest文件指明需要缓存的资源</p>
</blockquote>
<hr>
<p>参考视频：<a href="https://www.bilibili.com/video/BV1UA411H77k?spm_id_from=333.999.0.0">BV1UA411H77k</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>cookies</tag>
<tag>session</tag>
<tag>token</tag>
<tag>H5本地存储</tag>
</tags>
</entry>
<entry>
<title>数据请求之axios</title>
<url>/2022/07/15/a009-%E6%95%B0%E6%8D%AE%E8%AF%B7%E6%B1%82%E4%B9%8Baxios/</url>
<content><![CDATA[<h3 id="数据请求的特点"><a href="#数据请求的特点" class="headerlink" title="数据请求的特点"></a>数据请求的特点</h3><p><strong>1. 无刷新更新数据</strong></p>
<p><strong>2. 异步与服务器通信</strong></p>
<p><strong>3. 前端和后端负载平衡</strong></p>
<p><strong>4. 基于、支持标准</strong></p>
<p><strong>5. 界面与应用分离</strong></p>
<h3 id="什么是axios"><a href="#什么是axios" class="headerlink" title="什么是axios"></a>什么是axios</h3><p>axios是基于promise的http客户端，可以在浏览器(发送AJAX)和node(发送http请求)环境中运行<br>axios的执行结果返回是一个promise对象</p>
<h3 id="响应结果结构"><a href="#响应结果结构" class="headerlink" title="响应结果结构"></a>响应结果结构</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">{config,data,headers,request,status,statusTxt}<br></code></pre></td></tr></table></figure>
<blockquote>
<p>config：发送请求的配置对象<br>data：响应体的结果，axios自动进行了json解析<br>headers：响应头信息<br>request：原生的ajax请求对象<br>status：响应状态码<br>statusTxt：响应状态字符串</p>
</blockquote>
<h3 id="请求配置对象"><a href="#请求配置对象" class="headerlink" title="请求配置对象"></a>请求配置对象</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">{url,method,baseURL,transformRequest,transformResponse,headers,params}<br></code></pre></td></tr></table></figure>
<blockquote>
<p>transformRequest：对请求参数进行预处理<br>transformResponse：对响应结果进行预处理</p>
</blockquote>
<h3 id="实例对象"><a href="#实例对象" class="headerlink" title="实例对象"></a>实例对象</h3><p>实例对象的功能和axios的功能几近一样，使用时一般不会使用全局的axios<br>可以应用实例给不同的域名设置默认配置</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">axios.<span class="hljs-property">defaults</span>.<span class="hljs-property">baseURL</span><br><span class="hljs-keyword">const</span> duanzi = axios.<span class="hljs-title function_">create</span>({<span class="hljs-attr">baseURL</span>:<span class="hljs-string">'http://b.com'</span>})<br></code></pre></td></tr></table></figure>
<h3 id="拦截器"><a href="#拦截器" class="headerlink" title="拦截器"></a>拦截器</h3><blockquote>
<p>拦截器类似于promise.prototype.then(成功回调，失败回调)<br>请求拦截器config：可以对请求参数进行处理<br>响应拦截器response：可以对响应结果进行处理<br>请求拦截器使用场景：</p>
<ul>
<li>config中的信息不符合服务器的要求，需要更改时</li>
<li>每次发送网络请求希望界面显示请求图标时(转圈效果)</li>
<li>某些网络请求(比如登录需要携带token)，必须携带一些特殊信息时</li>
</ul>
</blockquote>
<h3 id="网络模块的选择"><a href="#网络模块的选择" class="headerlink" title="网络模块的选择"></a>网络模块的选择</h3><blockquote>
<p>原生Ajax<br>特点：基于XMLHttpRequert，配置和调用非常混乱</p>
<p>fetch<br>特点：低层次的API，类似于原生的XHR，需要进行封装</p>
<p>jquery-Ajax<br>特点：Jqury代码1W+行，为了使用$ajax下载jquery大可不必</p>
<p>vue-resource<br>特点：支持vue1.x，不支持新版本，官方也不再推荐使用</p>
<p>axios<br>特点：本身是一个promise对象</p>
</blockquote>
<h3 id="跨域设置"><a href="#跨域设置" class="headerlink" title="跨域设置"></a>跨域设置</h3><p>接口示例：<a href="http://123.207.32.32:8000/home/multidata">coderwhy的接口</a></p>
<p>这里以vue为例：<br>跨域设置本地服务器需要加上协议，如target:”<a href="http://localhost:3000"">http://localhost:3000"</a><br>axios在解析域名时先在遇到/api前缀在其前加target后将/api转换为pathRewrite中对应的内容</p>
<h3 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h3><blockquote>
<p>取消请求使用配置对象canceltoken属性</p>
<p>axios发送并发请求axios.all(类似于Promise.all),并可使用axios.spread展开结果的数组</p>
<p>不传method默认get请求，get请求是通过query传递参数的,axios中是params；post是通过requesbody传递参数,axios中是data</p>
<p>axios的封装。不要在每一个组件中单独引用axios，万一axios不再维护需要另一个框架来替换的时候代码量太大</p>
</blockquote>
<hr>
<p>中文文档：<a href="http://www.axios-js.com/zh-cn/docs/">中文文档</a></p>
<p>参考视频：<br><a href="https://www.bilibili.com/video/BV1wr4y1K7tq?spm_id_from=333.999.0.0">BV1wr4y1K7tq</a> <a href="https://www.bilibili.com/video/BV17j411f74d?p=141">BV17j411f74d</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>axios</tag>
</tags>
</entry>
<entry>
<title>js静态模块打包器</title>
<url>/2022/07/15/a010-js%E9%9D%99%E6%80%81%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E5%99%A8/</url>
<content><![CDATA[<h2 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h2><h3 id="什么是webpack"><a href="#什么是webpack" class="headerlink" title="什么是webpack"></a>什么是webpack</h3><ol>
<li>webpack 是一种前端资源构建工具，一个静态资源打包器</li>
<li>浏览器中不能直接识别工程化项目中的less(通过loader编译)、esmodule(可直接编译)等语法，webpack这些编译成浏览器可以直接识别的语法</li>
</ol>
<h3 id="webpack的作用"><a href="#webpack的作用" class="headerlink" title="webpack的作用"></a>webpack的作用</h3><ol>
<li>模块化：<blockquote>
<p>帮助我们自动处理模块之间的依赖关系（包括嵌套依赖，只用打包main.js,main依赖的其他模块它会自动处理），不仅仅是js文件，css、图片、json文件等都可以被当作模块来使用</p>
</blockquote>
</li>
<li>打包：<blockquote>
<p>将webpack中的各种资源模块进行打包合并成一个或多个包（bundle），打包过程对资源进行处理，比如压缩图片、sass转成css、es6转es5，ts转js等操作</p>
</blockquote>
</li>
</ol>
<h3 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h3><blockquote>
<p>webpack依赖node环境，node环境为了能正常执行很多代码，必须包含各种依赖包，需要npm（包管理工具）</p>
<p>src源码;dist为打包后的文件配置到服务器即可</p>
<p>package.json scirpts 项中的使用<br>npm run + 指令 即可执行对应指令后面的命令，但是和直接执行不一样的地方在于会优先找本地安装的对应命令的包（不是-g安装的）若没找到则使用全局安装的包<br>在终端（cmd窗口、本地终端）中使用webpack会找全局安装的包</p>
<p>loader(转换器)：js代码webpack会自动处理，css、图片、es6、ts、.jsx、.vue等高级的东西webpack本身是不支持转化的，则需要给webpack扩展对应的loader<br>通过npm安装需要使用的loader，在webpack.config.js中的module关键字下进行配置</p>
<p>入口文件放最外层，功能相关的文件放相应的文件夹中</p>
<p>plugin(扩展器)：对webpack本身进行扩展，如打包优化、文件压缩等<br>npm安装需要使用的plugin(某些webpack内置的插件不需要安装),在webpack配置plugins项</p>
<p>webpack真实打包 是将有依赖的js文件，当成数组元素最终形成一个数组做为执行函数_webpack_require_的实参</p>
</blockquote>
<h3 id="vue-webpack"><a href="#vue-webpack" class="headerlink" title="vue-webpack"></a>vue-webpack</h3><p>vue有两种版本<br>runtime-only：代码中不可以有任何的template;<br>runtime-compiler,可以有template，compiler可以用于编译template</p>
<hr>
<p>官方文档：<a href="https://www.webpackjs.com/concepts/">webpackjs</a></p>
<p>参考视频：<a href="https://www.bilibili.com/video/BV1e7411j7T5?spm_id_from=333.999.0.0">BV1e7411j7T5</a> <a href="https://www.bilibili.com/video/BV1cv411C74F?spm_id_from=333.999.0.0">BV1cv411C74F</a> <a href="https://www.bilibili.com/video/BV17j411f74d?spm_id_from=333.999.0.0">BV17j411f74d</a></p>
<h2 id="Rollup"><a href="#Rollup" class="headerlink" title="Rollup"></a>Rollup</h2><ol>
<li>Rollup 是一款 ES Modules 打包器，从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。（识别commonJs需要插件）</li>
<li>热更新：Rollup不支持HMR，在对js以外的模块的支持上不如webpack，但是如果是打包纯js库例如react，前期的vue的话，使用rollup是很合适的，打包的产物比较干净，没有webpack那么多工具函数</li>
<li>Rollup 的插件机制设计得相对更干净简洁，单个模块的 resolve / load / transform 跟打包环节完全解耦，所以 Vite 才能在开发时模拟 Rollup 的插件机制，并且兼容大部分 Rollup 插件</li>
<li>rollup原生支持tree-shaking</li>
</ol>
<hr>
<p>官方文档：<a href="https://www.rollupjs.com/">rollupjs</a></p>
<h2 id="Vite"><a href="#Vite" class="headerlink" title="Vite"></a>Vite</h2><ol>
<li>一个开发服务器，它基于 原生 ES 模块 提供了丰富的内建功能，如速度很快的 【模块热更新HMR】</li>
<li>一套构建指令，它使用 Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源</li>
<li>快速的冷启动：vite会直接启动开发服务器，不需要进行打包操作，所以不需要分析模块的依赖、不需要编译，因此启动速度非常快<br>即时的模块热更新</li>
<li>真正的按需编译：利用现代浏览器支持ES Module的特性，当浏览器请求某个模块的时候，再根据需要对模块的内容进行编译，这种方式大大缩短了编译时间<br>Rollup 是一款 ES Modules 打包器，从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。（识别commonJs需要插件）<br>热更新：Rollup不支持HMR，在对js以外的模块的支持上不如webpack，但是如果是打包纯js库例如react，前期的vue的话，使用rollup是很合适的，打包的产物比较干净，没有webpack那么多工具函数<br>Rollup 的插件机制设计得相对更干净简洁，单个模块的 resolve / load / transform 跟打包环节完全解耦，所以 Vite 才能在开发时模拟 Rollup 的插件机制，并且兼容大部分 Rollup 插件<br>rollup原生支持tree-shaking</li>
</ol>
<hr>
<p>官方文档：<a href="https://cn.vitejs.dev/">vitejs</a><br>参考博客：<a href="https://blog.csdn.net/qq_41968486/article/details/125450518">csdn_qq_41968486</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>webpack</tag>
<tag>Rollup</tag>
<tag>vite</tag>
</tags>
</entry>
<entry>
<title>异步编程之Promise</title>
<url>/2022/07/12/a007-%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E4%B9%8BPromise/</url>
<content><![CDATA[<h3 id="理解和使用"><a href="#理解和使用" class="headerlink" title="理解和使用"></a>理解和使用</h3><ul>
<li><p>promise是js中异步编程的新的解决方案，旧方案是单纯使用回调函数</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//回调地狱</span><br><span class="hljs-keyword">var</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>);<br><br>fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'./views/index.html'</span>, <span class="hljs-function">(<span class="hljs-params">err, data</span>) =></span> {<br> <span class="hljs-keyword">if</span> (err) {<br> <span class="hljs-keyword">throw</span> err<br> }<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'./views/main.html'</span>, <span class="hljs-function">(<span class="hljs-params">err, data</span>) =></span> {<br> <span class="hljs-keyword">if</span> (err) {<br> <span class="hljs-keyword">throw</span> err<br> }<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'./views/update.html'</span>, <span class="hljs-function">(<span class="hljs-params">err, data</span>) =></span> {<br> <span class="hljs-keyword">if</span> (err) {<br> <span class="hljs-keyword">throw</span> err<br> }<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data.<span class="hljs-title function_">toString</span>());<br> }) <br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data.<span class="hljs-title function_">toString</span>());<br> })<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data.<span class="hljs-title function_">toString</span>());<br>})<br></code></pre></td></tr></table></figure>
</li>
<li><p>异步编程例子：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//fs 文件操作</span><br><span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>).<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'./index.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data</span>)=></span>{})<br><br><span class="hljs-comment">//数据库操作</span><br><span class="hljs-keyword">let</span> db = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mysql'</span>).<span class="hljs-title function_">createConnection</span>({<br> <span class="hljs-attr">host</span>:<span class="hljs-string">'localhost'</span>,<br> <span class="hljs-attr">port</span>:<span class="hljs-string">'3306'</span>, <span class="hljs-comment">// 可选,默认3306</span><br> <span class="hljs-attr">user</span>:<span class="hljs-string">'root'</span>,<br> <span class="hljs-attr">password</span>:<span class="hljs-string">'xxxxxx'</span>,<br> <span class="hljs-attr">database</span>:<span class="hljs-string">'mydbNew'</span><br>})<br><span class="hljs-keyword">let</span> strSql7 = <span class="hljs-string">'insert into studetNew (id,name,password) value (?,?,?)'</span><br>db.<span class="hljs-title function_">query</span>(strSql7,[<span class="hljs-number">123</span>,<span class="hljs-string">'s1xpences'</span>,<span class="hljs-string">'123123'</span>],<span class="hljs-function">(<span class="hljs-params">err,results</span>) =></span>{<br> <span class="hljs-keyword">if</span>(err){<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err)<br> }<span class="hljs-keyword">else</span>{<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'插入数据操作成功'</span>)<br> }<br>}<br><br><span class="hljs-comment">//AJAX</span><br> $.<span class="hljs-title function_">get</span>(<span class="hljs-string">'/server.json'</span>,<span class="hljs-function">(<span class="hljs-params">data</span>)=></span>{})<br><br><span class="hljs-comment">//定时器</span><br><span class="hljs-title function_">setTimeOut</span>(<span class="hljs-function">()=></span>{},<span class="hljs-number">1000</span>)<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="promise里面包裹一个异步操作"><a href="#promise里面包裹一个异步操作" class="headerlink" title="promise里面包裹一个异步操作"></a>promise里面包裹一个异步操作</h3><ul>
<li><p>异步操作成功调resolve，将promise对象的状态设置为成功；失败调reject，将promise对象的状态设置为失败</p>
</li>
<li><p>then指定成功使的回调，catch指定失败时的回调</p>
</li>
<li><p>获取成功和失败的结果值，通过resolve和reject传递，通过then的value,和catch的reason接受</p>
</li>
</ul>
<h3 id="promise对象的状态"><a href="#promise对象的状态" class="headerlink" title="promise对象的状态"></a>promise对象的状态</h3><ul>
<li><p>就是实例对象中的一个属性 PromiseState，有三种状态</p>
<blockquote>
<p>pendding 未决定的，初始化的默认值<br>resolved / fullfilled 成功<br>rejected 失败</p>
</blockquote>
</li>
<li><p>状态变换只有两种可能且只能改变一次 pending ==> resolved, pending ==> rejected</p>
</li>
</ul>
<h3 id="promise对象的值"><a href="#promise对象的值" class="headerlink" title="promise对象的值"></a>promise对象的值</h3><ul>
<li><p>实例对象的一个属性 PromiseResult，保存的是异步任务 成功/失败 的结果，只能通过reslove和reject对结果进行修改</p>
</li>
<li><p>调resolve和reject即修改状态又设置结果值</p>
</li>
</ul>
<h3 id="promise的基本流程"><a href="#promise的基本流程" class="headerlink" title="promise的基本流程"></a>promise的基本流程</h3><p><img src="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png" alt="基本流程"></p>
<h3 id="深入"><a href="#深入" class="headerlink" title="深入"></a>深入</h3><ol>
<li><p>executer函数：执行器(reslove,reject)=>{}</p>
<blockquote>
<p>即promise实例的参数，在promise内部立即同步执行，异步操作在执行器内部执行</p>
</blockquote>
</li>
<li><p>Promise.prototype.then,指定成功的回调，返回一个新的promise对象</p>
</li>
<li><p>promise.prototype.catch，指定失败的回调</p>
</li>
<li><p>Promise.resolve(参数)</p>
<blockquote>
<p>传入参数为非promise类型的对象，则返回成功的promise对象，值为参数<br>传入参数为promise对象，则参数决定resolve的结果，成功失败由内部promise决定，值也是</p>
</blockquote>
</li>
<li><p>Promise.reject(参数)</p>
<blockquote>
<p>返回一个失败的promise对象<br>不论传入的参数是何种类型，返回结果都是一个失败的promise对象，值为传入的参数<br>即使参数为一个成功的promise对象，返回的状态仍未失败，值为传入的promise对象<br>报错：当前有一个失败的promise而且没有对应的回调对其做处理</p>
</blockquote>
</li>
<li><p>Promise.all()</p>
<blockquote>
<p>参数是promise对象组成的数组<br>返回一个新的promise，所有成功则成功，一个失败即失败<br>成功则值为每一个promise值组成的数组，失败则值为其中第一个失败的promise对象的值</p>
</blockquote>
</li>
<li><p>Promise.race()</p>
<blockquote>
<p>参数是promise对象组成的数组<br>返回一个新的promise，第一个完成的promise状态即为最终状态，第一个的值则为最终值</p>
</blockquote>
</li>
</ol>
<h3 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h3><ol>
<li><p>改变promise对象的状态？</p>
<blockquote>
<p>reslove、reject、throw(异步任务里面不能抛错)</p>
</blockquote>
</li>
<li><p>改变状态和指定的回调函数谁先执行？</p>
<blockquote>
<p>如果executer函数中是同步任务，则先改变状态后执行回调<br>若executer函数中是异步任务，则先执行回调后改变状态<br>回调执行的时候既能拿到数据</p>
</blockquote>
</li>
<li><p>promise.then()返回的新的promise的结果状态由什么决定？</p>
<blockquote>
<p>then里面的回调是异步执行的<br>由then()指定的回调函数的返回(return)结果决定</p>
<ul>
<li>throw value，则状态rejected,值value</li>
<li>return value，则状态fullfilled,值value</li>
<li>return new Promise((reslove,reject)=>{})，状态和值都由里面promise决定</li>
</ul>
</blockquote>
</li>
<li><p>链式调用？</p>
<blockquote>
<p>通过then的链式调用串联多个 同步/异步 任务</p>
</blockquote>
</li>
<li><p>异常穿透？</p>
<blockquote>
<p>当使用promise的then链式调用时，可以在最后指定失败的回调<br>前面任何操作出了异常，都会传到最后失败的回调中处理</p>
</blockquote>
</li>
<li><p>中断promise链？</p>
<blockquote>
<p>当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数<br>方法：在调用函数中返回一个pending状态的promise对象,return new Promise(()=>{})</p>
</blockquote>
</li>
</ol>
<h3 id="async函数"><a href="#async函数" class="headerlink" title="async函数"></a>async函数</h3><ol>
<li><p>函数执行返回值为promise对象</p>
<blockquote>
<p>promise对象的结果由async函数执行的返回值决定(规则同then())</p>
</blockquote>
</li>
<li><p>await表达式</p>
<blockquote>
<p>await右侧的表达式一般为promise对象，但也可以是其他值<br>如果表达式是promise对象，await返回的是promise成功的结果值<br>如果表达式是其他值，直接将此值作为await的返回值<br>await必须写在async函数中，async函数中可以没有await<br>如果await的promise失败了，就会抛出异常，需要通过try…catch捕获处理，结合async和await使用<br>错误不用每一层都判断，只用在最外面加try…catch即可</p>
</blockquote>
</li>
<li><p>使用</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">try</span>{<br> <span class="hljs-comment">//有可能出现错误的代码写在这里</span><br>}<span class="hljs-keyword">catch</span>(e){<br> <span class="hljs-comment">//出错后的处理,e为错误对象</span><br>}<br><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">main</span>(<span class="hljs-params"></span>) {<br> <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">reslove,reject</span>)=></span>{<br> <span class="hljs-title function_">reject</span>(<span class="hljs-string">'error'</span>)<br> })<br> <span class="hljs-keyword">try</span>{<br> <span class="hljs-keyword">let</span> res = <span class="hljs-keyword">await</span> p<br> }<span class="hljs-keyword">catch</span>(e) {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e) <span class="hljs-comment">//拿到失败的结果值</span><br> }<br>}<br><span class="hljs-title function_">main</span>()<br></code></pre></td></tr></table></figure></li>
</ol>
<h3 id="代码演示"><a href="#代码演示" class="headerlink" title="代码演示"></a>代码演示</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//回调函数</span><br>fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index1.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data1</span>)=></span>{<br> <span class="hljs-keyword">if</span>(err) <span class="hljs-keyword">throw</span> err<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index2.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data2</span>)=></span>{<br> <span class="hljs-keyword">if</span>(err) <span class="hljs-keyword">throw</span> err<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index3.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data3</span>)=></span>{<br> <span class="hljs-keyword">if</span>(err) <span class="hljs-keyword">throw</span> err<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data1+data2+data3)<br> })<br> })<br>})<br><br><span class="hljs-comment">//Promise形式</span><br><span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">reslove,reject</span>)=></span>{<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index1.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data1</span>)=></span>{<br> <span class="hljs-title function_">reslove</span>(data1)<br> })<br>}).<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">value</span>)=></span>{<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=></span>{<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index2.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data2</span>)=></span>{<br> <span class="hljs-title function_">reslove</span>(value + data2)<br> })<br> })<br>}).<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">value</span>)=></span>{<br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=></span>{<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index3.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data3</span>)=></span>{<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value + data3)<br> })<br> })<br>}).<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">reason</span>)=></span>{<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reason)<br>})<br><br><span class="hljs-comment">//async形式</span><br><span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">reslove,reject</span>)=></span>{<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index1.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data1</span>)=></span>{<br> <span class="hljs-title function_">reslove</span>(data1)<br> })<br>})<br><span class="hljs-keyword">let</span> p2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">reslove,reject</span>)=></span>{<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index2.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data2</span>)=></span>{<br> <span class="hljs-title function_">reslove</span>(data2)<br> })<br>})<br><span class="hljs-keyword">let</span> p3 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">reslove,reject</span>)=></span>{<br> fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">'index1.html'</span>,<span class="hljs-function">(<span class="hljs-params">err,data3</span>)=></span>{<br> <span class="hljs-title function_">reslove</span>(data3)<br> })<br>})<br><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">main</span>(<span class="hljs-params"></span>) {<br> <span class="hljs-keyword">try</span>{<br> <span class="hljs-keyword">let</span> data1 = <span class="hljs-keyword">await</span> p1<br> <span class="hljs-keyword">let</span> data2 = <span class="hljs-keyword">await</span> p2<br> <span class="hljs-keyword">let</span> data1 = <span class="hljs-keyword">await</span> p3<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data1+data2+data3)<br> }<span class="hljs-keyword">catch</span>(err) {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err)<br> }<br>} <br><span class="hljs-title function_">main</span>()<br></code></pre></td></tr></table></figure>
<hr>
<p>官方文档：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise">mozilla</a></p>
<p>参考视频：<a href="https://www.bilibili.com/video/BV1GA411x7z1?spm_id_from=333.999.0.0">BV1GA411x7z1</a> <a href="https://www.bilibili.com/video/BV17j411f74d?spm_id_from=333.999.0.0">BV17j411f74d</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>Promise</tag>
</tags>
</entry>
<entry>
<title>electron构建跨平台桌面应用</title>
<url>/2022/07/22/a015-electron%E6%9E%84%E5%BB%BA%E8%B7%A8%E5%B9%B3%E5%8F%B0%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8/</url>
<content><![CDATA[<h3 id="electron-vue应用自动更新"><a href="#electron-vue应用自动更新" class="headerlink" title="electron-vue应用自动更新"></a>electron-vue应用自动更新</h3><ol>
<li>安装 npm i electron-updater –save<br>npm包版本：</li>
</ol>
<figure class="highlight json"><table><tr><td class="code"><pre><code class="hljs json"><span class="hljs-attr">"vue"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.5.16"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"vue-electron"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^1.0.6"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"electron-updater"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^4.3.0"</span><span class="hljs-punctuation">,</span><br></code></pre></td></tr></table></figure>
<ol start="2">
<li>package.json build下添加</li>
</ol>
<figure class="highlight json"><table><tr><td class="code"><pre><code class="hljs json"><span class="hljs-attr">"nsis"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"perMachine"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">false</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"allowToChangeInstallationDirectory"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">false</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"runAfterFinish"</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><br><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"publish"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"provider"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"generic"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"url"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"https://csfile.ossxrcloud.net/moon"</span><br> <span class="hljs-punctuation">}</span><br><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br></code></pre></td></tr></table></figure>
<ol start="3">
<li>util/update.js</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { autoUpdater } <span class="hljs-keyword">from</span> <span class="hljs-string">'electron-updater'</span><br><span class="hljs-keyword">import</span> { ipcMain } <span class="hljs-keyword">from</span> <span class="hljs-string">'electron'</span><br><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>)<br><span class="hljs-keyword">let</span> mainWindow = <span class="hljs-literal">null</span>;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">updateHandle</span>(<span class="hljs-params"><span class="hljs-variable language_">window</span>, feedUrl</span>) {<br> mainWindow = <span class="hljs-variable language_">window</span>;<br> <span class="hljs-keyword">let</span> message = {<br> <span class="hljs-attr">error</span>: <span class="hljs-string">'检查更新出错'</span>,<br> <span class="hljs-attr">checking</span>: <span class="hljs-string">'正在检查更新……'</span>,<br> <span class="hljs-attr">updateAva</span>: <span class="hljs-string">'检测到新版本，正在下载……'</span>,<br> <span class="hljs-attr">updateNotAva</span>: <span class="hljs-string">'现在使用的就是最新版本，不用更新'</span>,<br> };<br> <span class="hljs-comment">// autoUpdater.autoDownload = false</span><br> <span class="hljs-comment">//设置更新包的地址</span><br> autoUpdater.<span class="hljs-title function_">setFeedURL</span>(feedUrl);<br> <span class="hljs-comment">//监听升级失败事件</span><br> autoUpdater.<span class="hljs-title function_">on</span>(<span class="hljs-string">'error'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) {<br> <span class="hljs-title function_">sendUpdateMessage</span>({<br> <span class="hljs-attr">cmd</span>: <span class="hljs-string">'error'</span>,<br> <span class="hljs-attr">message</span>: error<br> })<br> });<br> <span class="hljs-comment">//监听开始检测更新事件</span><br> autoUpdater.<span class="hljs-title function_">on</span>(<span class="hljs-string">'checking-for-update'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">message</span>) {<br> <span class="hljs-title function_">sendUpdateMessage</span>({<br> <span class="hljs-attr">cmd</span>: <span class="hljs-string">'checking-for-update'</span>,<br> <span class="hljs-attr">message</span>: message<br> })<br> });<br> <span class="hljs-comment">//监听发现可用更新事件</span><br> autoUpdater.<span class="hljs-title function_">on</span>(<span class="hljs-string">'update-available'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">message</span>) {<br> <span class="hljs-comment">//先删除当前文件夹及其文件</span><br> <span class="hljs-title function_">deleteall</span>(<span class="hljs-string">'C:/Users/Administrator/AppData/Local/moonbox-updater/pending'</span>)<br> <span class="hljs-title function_">sendUpdateMessage</span>({<br> <span class="hljs-attr">cmd</span>: <span class="hljs-string">'update-available'</span>,<br> <span class="hljs-attr">message</span>: message<br> })<br> });<br><br> <span class="hljs-comment">//监听没有可用更新事件</span><br> autoUpdater.<span class="hljs-title function_">on</span>(<span class="hljs-string">'update-not-available'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">message</span>) {<br> <span class="hljs-title function_">sendUpdateMessage</span>({<br> <span class="hljs-attr">cmd</span>: <span class="hljs-string">'update-not-available'</span>,<br> <span class="hljs-attr">message</span>: message<br> })<br> });<br><br> <span class="hljs-comment">// 更新下载进度事件</span><br> autoUpdater.<span class="hljs-title function_">on</span>(<span class="hljs-string">'download-progress'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">progressObj</span>) {<br> <span class="hljs-title function_">sendUpdateMessage</span>({<br> <span class="hljs-attr">cmd</span>: <span class="hljs-string">'download-progress'</span>,<br> <span class="hljs-attr">message</span>: progressObj<br> })<br> mainWindow.<span class="hljs-property">webContents</span>.<span class="hljs-title function_">send</span>(<span class="hljs-string">'downloadProgress'</span>, progressObj)<br> });<br><br> <span class="hljs-comment">//监听下载完成事件</span><br> autoUpdater.<span class="hljs-title function_">on</span>(<span class="hljs-string">'update-downloaded'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">event, releaseNotes, releaseName, releaseDate, updateUrl</span>) {<br> <span class="hljs-title function_">sendUpdateMessage</span>({<br> <span class="hljs-attr">cmd</span>: <span class="hljs-string">'update-downloaded'</span>,<br> <span class="hljs-attr">message</span>: {<br> releaseNotes,<br> releaseName,<br> releaseDate,<br> updateUrl<br> }<br> })<br> <span class="hljs-comment">//退出并安装更新包</span><br> autoUpdater.<span class="hljs-title function_">quitAndInstall</span>();<br> });<br><br> ipcMain.<span class="hljs-title function_">on</span>(<span class="hljs-string">"checkForUpdate"</span>, <span class="hljs-function">(<span class="hljs-params">e, arg</span>) =></span> {<br> <span class="hljs-comment">//组件created执行自动更新检查</span><br> autoUpdater.<span class="hljs-title function_">checkForUpdates</span>();<br> })<br><br> ipcMain.<span class="hljs-title function_">on</span>(<span class="hljs-string">'downloadUpdate'</span>, <span class="hljs-function">() =></span> {<br> <span class="hljs-comment">//点击更新按钮</span><br> autoUpdater.<span class="hljs-title function_">downloadUpdate</span>()<br> })<br>}<br><br><span class="hljs-comment">//给渲染进程发送消息</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">sendUpdateMessage</span>(<span class="hljs-params">text</span>) {<br> mainWindow.<span class="hljs-property">webContents</span>.<span class="hljs-title function_">send</span>(<span class="hljs-string">'message'</span>, text)<br>}<br><br><span class="hljs-comment">//更新时删除文件夹及其文件</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">deleteall</span>(<span class="hljs-params">path</span>) {<br> <span class="hljs-keyword">var</span> files = [];<br> <span class="hljs-keyword">if</span> (fs.<span class="hljs-title function_">existsSync</span>(path)) {<br> files = fs.<span class="hljs-title function_">readdirSync</span>(path);<br> files.<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">file, index</span>) {<br> <span class="hljs-keyword">var</span> curPath = path + <span class="hljs-string">"/"</span> + file;<br> <span class="hljs-keyword">if</span> (fs.<span class="hljs-title function_">statSync</span>(curPath).<span class="hljs-title function_">isDirectory</span>()) { <span class="hljs-comment">// recurse</span><br> <span class="hljs-title function_">deleteall</span>(curPath);<br> } <span class="hljs-keyword">else</span> { <span class="hljs-comment">// delete file</span><br> fs.<span class="hljs-title function_">unlinkSync</span>(curPath);<br> }<br> });<br> fs.<span class="hljs-title function_">rmdirSync</span>(path);<br> }<br>};<br></code></pre></td></tr></table></figure>
<ol start="4">
<li>main/index.js 主进程</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> {<br> updateHandle<br>} <span class="hljs-keyword">from</span> <span class="hljs-string">'../renderer/utils/update'</span><br><br><span class="hljs-comment">//检测版本更新</span><br><span class="hljs-keyword">let</span> feedUrl = <span class="hljs-string">"https://csfile.ossxrcloud.net/moon"</span>;<br><span class="hljs-title function_">updateHandle</span>(mainWindow, feedUrl);<br></code></pre></td></tr></table></figure>
<ol start="5">
<li>.vue文件</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><template><br> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"homeview"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"update-model"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"updateModal.updateShow"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mask"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"wrap"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span></span><br><span class="language-xml"> 更新中...({{ updateModal.downloadPercent + "%" }})</span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"update-progress"</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">Progress</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">:percent</span>=<span class="hljs-string">"updateModal.downloadPercent"</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">:stroke-width</span>=<span class="hljs-string">"8"</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">:stroke-color</span>=<span class="hljs-string">"['#00C9FF', '#2D6FFF']"</span></span></span><br><span class="hljs-tag"><span class="language-xml"> <span class="hljs-attr">hide-info</span></span></span><br><span class="hljs-tag"><span class="language-xml"> /></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br></template><br><br><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> { shell, ipcRenderer } <span class="hljs-keyword">from</span> <span class="hljs-string">"electron"</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-keyword">return</span> {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-comment">//自动更新</span></span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-attr">updateModal</span>: {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-attr">downloadPercent</span>: <span class="hljs-number">0</span>,</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-attr">updateShow</span>: <span class="hljs-literal">false</span>,</span></span><br><span class="language-javascript"><span class="language-xml"> },</span></span><br><span class="language-javascript"><span class="language-xml"> }</span></span><br><span class="language-javascript"><span class="language-xml">},</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-title function_">created</span>(<span class="hljs-params"></span>) { </span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-comment">//自动更新</span></span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listenUpdate</span>();</span></span><br><span class="language-javascript"><span class="language-xml"> ipcRenderer.<span class="hljs-title function_">send</span>(<span class="hljs-string">"checkForUpdate"</span>);</span></span><br><span class="language-javascript"><span class="language-xml">},</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-attr">methods</span>: {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-comment">//自动更新</span></span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-title function_">listenUpdate</span>(<span class="hljs-params"></span>) {</span></span><br><span class="language-javascript"><span class="language-xml"> ipcRenderer.<span class="hljs-title function_">on</span>(<span class="hljs-string">"message"</span>, <span class="hljs-function">(<span class="hljs-params">event, arg</span>) =></span> {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-comment">// console.log(arg);</span></span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-keyword">if</span> (<span class="hljs-string">"update-available"</span> == arg.<span class="hljs-property">cmd</span>) {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">updateModal</span>.<span class="hljs-property">updateShow</span> = <span class="hljs-literal">true</span>;</span></span><br><span class="language-javascript"><span class="language-xml"> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-string">"download-progress"</span> == arg.<span class="hljs-property">cmd</span>) {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-variable language_">this</span>.<span class="hljs-property">updateModal</span>.<span class="hljs-property">downloadPercent</span> = <span class="hljs-built_in">parseInt</span>(arg.<span class="hljs-property">message</span>.<span class="hljs-property">percent</span>);</span></span><br><span class="language-javascript"><span class="language-xml"> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-string">"error"</span> == arg.<span class="hljs-property">cmd</span>) {</span></span><br><span class="language-javascript"><span class="language-xml"> <span class="hljs-comment">// this.updateModal.updateErrorShow = true;</span></span></span><br><span class="language-javascript"><span class="language-xml"> }</span></span><br><span class="language-javascript"><span class="language-xml"> });</span></span><br><span class="language-javascript"><span class="language-xml"> },</span></span><br><span class="language-javascript"><span class="language-xml">}</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span><br></code></pre></td></tr></table></figure>
<h3 id="应用打包踩坑"><a href="#应用打包踩坑" class="headerlink" title="应用打包踩坑"></a>应用打包踩坑</h3><ol>
<li>配置项 <blockquote>
<p>打包文件时将dist和release清除干净，否则有些项目的配置会将dist的剩余文件打包到exe文件中导致包体积过大；</p>
<p>下面的electron-builder.json5中的files配置为打包dist下的文件；</p>
<p>若项目中没有单独的build配置文件，则需在package.json中加入配置项build； </p>
<p><a href="http://www.icodebang.com/article/322621">参考博客</a>；</p>
<p>具体配置如下：</p>
</blockquote>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><code class="hljs json5">/**<br> * @see https://www.electron.build/configuration/configuration 官方文档<br> */<br>{<br> appId: 'YourAppID',<br> productName: '知识产权从业人员信息化管理系统V1.0',<br> asar: true,<br> directories: {<br> output: 'release'<br> },<br> files: ['dist'],<br> mac: {<br> icon: 'dist/renderer/icon.icns',<br> artifactName: '${productName}_${version}.${ext}',<br> target: ['dmg']<br> },<br> win: {<br> icon: 'dist/renderer/icon.ico',<br> target: [<br> {<br> target: 'nsis',<br> arch: ['x64']<br> }<br> ],<br> artifactName: '${productName}.${ext}'<br> },<br> nsis: {<br> oneClick: false,<br> perMachine: false,<br> allowToChangeInstallationDirectory: true,<br> deleteAppDataOnUninstall: false<br> }<br>}<br></code></pre></td></tr></table></figure>
<ol start="2">
<li>所需依赖包，报错问题<blockquote>
<p><a href="https://segmentfault.com/a/1190000018533945">参考博客</a></p>
</blockquote>
</li>
</ol>
<hr>
<p>官方文档：<a href="https://www.electronjs.org/">electronjs</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>electron</tag>
</tags>
</entry>
<entry>
<title>前端框架之vue</title>
<url>/2022/07/20/a014-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E4%B9%8Bvue/</url>
<content><![CDATA[<p><strong>版本答案（22.07.20）<code><script setup> + typescript + vite + vloar + pinia</code></strong></p>
<h3 id="vue3项目目录"><a href="#vue3项目目录" class="headerlink" title="vue3项目目录"></a>vue3项目目录</h3><p>主入口文件main.ts<br>main.ts中create方法，创建对应的应用，产生应用的实例对象<br>组件模板可以没有根标签<br>组件中defineComponent方法，定义组件，内部可以传入该组件的配置对象，配置对象和vue2的写法一样 </p>
<h3 id="Composition-API-常用部分"><a href="#Composition-API-常用部分" class="headerlink" title="Composition API(常用部分)"></a>Composition API(常用部分)</h3><p><strong>setup</strong><br>只在初始化时执行一次，函数中如果返回对象(包括属性和方法)，则当前组件的模板中可以直接使用；<br>setup在beforeCreate之前执行,且只执行一次,当前组件实例还没有创建，组件实例对象this不能用；<br>返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性；<br>返回对象中的方法会与methods中的方法合并成为组件对象的方法；<br>如果有重名setup优先(实际使用报错:有重复属性)；<br>methods可以访问setup中的方法，但是setup不能访问methods，一般不要混合使用；<br>setup加了async，返回promise对象，则模板中不能使用promise对象中的属性或方法。</p>
<p>setup(props,context)参数：<br>props：是一个对象，父向子传的并且在子中用props接收的数据<br>context：</p>
<blockquote>
<p>attrs：当前组件标签上且没有用props接收的数据<br>emit：分发事件<br>slots：插槽</p>
</blockquote>
<p><strong>ref</strong><br>定义一个<strong>基本类型的响应式的数据</strong>，返回的是ref对象.对象中有一个value，如果要对数据进行操作需要通过ref对象.value的方式；<br>组件模板中展示数据是不需要ref对象.value的方式,内部解析模板是自动添加.value；<br>类型是Ref类型；</p>
<p><strong>reactive</strong><br>定义多个数据的响应式,<strong>复杂类型的响应式数据</strong>.接收一个普通对象(目标对象)然后返回该目标对象的代理对象；<br>直接更改普通对象中的成员值，是不响应的；<br>类型是Proxy类型；<br>响应式的影响是深层次的，会影响内部嵌套对象的属性；<br>内部基于es6的Proxy实现；</p>
<p><strong>ref和reactive细节</strong><br>如果用ref代理对象/数组，内部会自动将value转换为reactive的代理对象；<br>ref实现原理：通过给value添加getter/setter实现数据响应式；<br>reactive实现原理：递归深度响应式，通过Proxy实现目标对象数据的劫持，通过Reflect操作对象内部数据；<br>vue3响应式原理，通过Proxy和Reflect</p>
<h4 id="计算属性和watch"><a href="#计算属性和watch" class="headerlink" title="计算属性和watch"></a>计算属性和watch</h4><p>计算属性如果值传入一个回调，则表示get；<br>计算属性返回的是一个ref对象；<br>watch可以监视多个数据(数据必须是响应式数据)，监视非响应式数据需要回调函数写法；</p>
<h4 id="生命周期对比"><a href="#生命周期对比" class="headerlink" title="生命周期对比"></a>生命周期对比</h4><p>vue3.x中使用组合式api；<br>beforeCreate和Created使用setup代替；<br>3.x中的同级生命周期要比2.x中的执行更快；</p>
<h4 id="自定义hook函数"><a href="#自定义hook函数" class="headerlink" title="自定义hook函数"></a>自定义hook函数</h4><p>类似于mixin；<br>请求的json数据需要放在public中，请求时/data/data.json不用补全相对路径；</p>
<h4 id="toRefs的使用"><a href="#toRefs的使用" class="headerlink" title="toRefs的使用"></a>toRefs的使用</h4><p>toRefs可以把一个响应式对象转换为普通对象，该普通对象的每一个属性都是ref对象</p>
<h3 id="Composition-API-其他部分"><a href="#Composition-API-其他部分" class="headerlink" title="Composition API(其他部分)"></a>Composition API(其他部分)</h3><h4 id="shallowReactive与shallowRef"><a href="#shallowReactive与shallowRef" class="headerlink" title="shallowReactive与shallowRef"></a>shallowReactive与shallowRef</h4><p>shallowReactive：只处理代理对象最外层属性的响应式，浅响应式(实际使用失效)；<br>shallowRef：只处理value的响应式，不进行ref代理对象的响应式(实际使用失效)；<br>一般使用reactive和ref即可；</p>
<h4 id="readonly和shallowReadonly"><a href="#readonly和shallowReadonly" class="headerlink" title="readonly和shallowReadonly"></a>readonly和shallowReadonly</h4><p>readonly：深度只读，接收一个响应式对象；<br>shallowReadonly：浅只读，深层的属性可以更改。</p>
<h4 id="toRaw和markRaw"><a href="#toRaw和markRaw" class="headerlink" title="toRaw和markRaw"></a>toRaw和markRaw</h4><p>toRaw：返回由reactive和readonly方法转换成响应式的普通对象；<br>markRaw：标记一个对象，使其永远不会转换为代理对象，返回对象本身。</p>
<h4 id="toRef的特点及使用"><a href="#toRef的特点及使用" class="headerlink" title="toRef的特点及使用"></a>toRef的特点及使用</h4><p>toRef与响应式数据是关联的，不管改变哪个数据都会改变；将普通数据变为Ref类型数据；<br>ref是拷贝一份当前响应式数据，互不影响；</p>
<h4 id="customRef的使用"><a href="#customRef的使用" class="headerlink" title="customRef的使用"></a>customRef的使用</h4><p>防抖案例</p>
<h4 id="provide和injec"><a href="#provide和injec" class="headerlink" title="provide和injec"></a>provide和injec</h4><p>跨层级组件通信</p>
<h4 id="响应式数据的判断"><a href="#响应式数据的判断" class="headerlink" title="响应式数据的判断"></a>响应式数据的判断</h4><p>isRef：判断是否为ref对象；<br>isReactive：是否为reactive创建的响应式代理；<br>isReadonly：是否为readonly创建的只读代理；<br>isProxy：检查是否为reactive和readonly创建的代理；</p>
<h3 id="新组件"><a href="#新组件" class="headerlink" title="新组件"></a>新组件</h3><p>Fragment(片段)：</p>
<blockquote>
<p>组件可以没有根标签，内部会将多个标签包含在Fragment虚拟元素中<br>减少标签层级，减少内存占用</p>
</blockquote>
<p>Teleport(瞬移)：提供了一种方法，让组件在父组件外的标签下显示</p>
<p>Suspense(不确定的)：应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验</p>
<h3 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h3><p>父向子传值props；<br>子向父传值emit；<br>后代调用父的方法，父通过props将自己的方法传给后代，后代调用。</p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ol>
<li>2020年9月发布正式版</li>
<li>Vue3支持大部分Vue2的特性</li>
<li>Vue3设计了一套强大的Composition API代替了Vue2中的Option API，复用性更好</li>
<li>更好的支持ts</li>
<li>Vue3使用了Proxy配合Reflect代替了Vue2中的Object.defineProperty()方法数据响应式</li>
<li>重写了虚拟DOM，速度更快</li>
<li>新的组件：Fragment(片段)、Teleport(瞬移)、Suspense(不确定)</li>
<li>设计了新的脚手架工具vite</li>
</ol>
<hr>
<p>官方文档：<a href="https://v3.cn.vuejs.org/">vue</a></p>
<p>参考视频：<a href="https://www.bilibili.com/video/BV1ra4y1H7ih">BV1ra4y1H7ih</a> <a href="https://www.bilibili.com/video/BV1BA4y1X7bp?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=1b26e7eb1ec7cfea25ba7eb77782eb66">BV19P4y1g7Vp</a></p>
]]></content>
<categories>
<category>前端学习</category>
</categories>
<tags>
<tag>vue3</tag>
</tags>
</entry>
<entry>
<title>小程序开发</title>
<url>/2022/09/09/a017-%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/</url>
<content><![CDATA[<h3 id="不同形式的移动客户端"><a href="#不同形式的移动客户端" class="headerlink" title="不同形式的移动客户端"></a>不同形式的移动客户端</h3><ol>
<li><p>H5</p>
</li>
<li><p>原生App</p>
</li>
<li><p>基于App的二级生态</p>
<blockquote>
<p> 公众号<br> 小程序</p>
</blockquote>
</li>
</ol>
<h3 id="各部分组成"><a href="#各部分组成" class="headerlink" title="各部分组成"></a>各部分组成</h3><ol>
<li><p>App</p>
<blockquote>
<p> 是一个全局对象，代表整个小程序，有且只有一个</p>
<p> app.js 监听app的生命周期，存储全局数据 是否必须(否)</p>
<p> app.wxss 全局样式配置 是否必须(否)</p>
<p> app.json pages注册，必须注册pages，至少一个；window窗口；导航栏；tabbar选项卡等 是否必须(是)</p>
</blockquote>
</li>
<li><p>Page</p>
<blockquote>
<p> 用户所看到的一整个页面</p>
<p> page.js 监听page的生命周期，页面数据，页面逻辑 是否必须(是)</p>
<p> page.wxml 页面结构，数据渲染，事件绑定 是否必须(是)</p>
<p> page.wxss 页面样式 是否必须(否)</p>
<p> page.json component注册，导航栏，上下拉刷新等 是否必须(否)</p>
</blockquote>
</li>
<li><p>Component</p>
<blockquote>
<p> 组成页面的一小部分</p>
<p> component.js 组件数据，组件逻辑 是否必须(是)</p>
<p> component.wxml 数据渲染，事件绑定 是否必须(是)</p>
<p> component.wxss 组件样式 是否必须(否)</p>
<p> component.json 组件设置”component”: true；组件注册 是否必须(否)</p>
</blockquote>
</li>
</ol>
<h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><p>小程序开发不需要依赖其他的库或自己写功能，好多功能都有自带的配置</p>
<ol>
<li><p>项目开发配置</p>
<blockquote>
<p> project.config.json</p>
<p> 也可以通过可视化界面设置：开发工具右上角 => 详情 => 本地设置</p>
</blockquote>
</li>
<li><p>小程序收录配置</p>
<blockquote>
<p> <a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html">sitemap.json</a></p>
<p> 微信小程序在20190329推出了sitemap功能</p>
<p> 将会默认收录所有小程序的页面内容，用于微信搜索场景。类似于网站的SEO</p>
<p> 这意味着开发者的小程序曝光率的增加</p>
</blockquote>
</li>
<li><p>全局配置</p>
<blockquote>
<p> <a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html">app.json</a></p>
<p> 对小程序进行全局配置</p>
<p> 决定页面路径；窗口表现；设置网络超时时间等。重点掌握window|pages|tabBar</p>
</blockquote>
</li>
<li><p>页面配置</p>
<blockquote>
<p> <a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html">page.json</a></p>
<p> 对小程序单个页面生效</p>
</blockquote>
</li>
</ol>
<h3 id="WXML"><a href="#WXML" class="headerlink" title="WXML"></a>WXML</h3><ol>
<li><p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html">数据绑定</a></p>
<blockquote>
<p> 数据绑定使用 Mustache 语法（双大括号）将变量包起来</p>
<p> <code>{{}}</code>中只能写表达式，不能写代码。同vue和react</p>
</blockquote>
</li>
<li><p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html">条件渲染</a></p>
<blockquote>
<p> <code><block/></code> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。</p>
<p> hidden 组件始终会被渲染，只是简单的控制显示与隐藏。</p>
<p> wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗</p>
</blockquote>
</li>
<li><p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html">列表渲染</a></p>
<blockquote>
<p> wx:key 默认为index</p>
<p> wx:key 的值以两种形式提供<br> 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。<br> 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。</p>
<p> setData 数据更新并触发视图更新，增量式更新。同react</p>