-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
3049 lines (2920 loc) · 439 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>2024-11-13 日报 Day5</title>
<url>/undefined/2024-11-13/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>理想是赶路人的月，是逆流者的桨<br>是荆棘尽处的繁华，是万仞山上的日出<br>让人在现实的泥沼中甘愿苦苦跋涉</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《图解HTTP》 P141-200
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><ul>
<li>1、在HTTP协议中有可能存在信息窃听或身份伪装等安全问题。使用HTTPS通信机制可以有效地防止这些问题。</li>
<li>2、HTTP的缺点:<br> 通信使用明文(不加密)，内容可能会被窃听。<br> 不验证通信方的身份，因此有可能遭遇伪装。<br> 无法证明报文的完整性，所以有可能已遭篡改。</li>
<li>3、HTTP协议中没有加密机制，但可以通过和SSL(Secure Socket Layer, 安全套接层)或TLS(Transport Layer Security, 传输层安全)的组合使用，加密HTTP的通信内容。</li>
<li>4、认证本人核对的信息通常是指:<ul>
<li>密码: 只有本人才知道的字符串信息。</li>
<li>动态令牌: 仅限本人持有的设备内显示的一次性密码。</li>
<li>数字证书: 仅限本人(终端)持有的信息。</li>
<li>生物认证: 指纹和虹膜等本人的生理信息。</li>
<li>IC卡等: 仅限本人持有的信息。</li>
</ul>
</li>
<li>5、HTTP/1.1使用的认证方式:<ul>
<li>BASIC认证（基本认证）</li>
<li>DIGEST认证（摘要认证）</li>
<li>SSL客户端认证</li>
<li>FormBase认证（基于表单认证）</li>
</ul>
</li>
<li>6、WebSocket是一种在单个TCP连接上进行全双工通信的协议。通过WebSocket，浏览器和服务器之间的数据交换变得更加高效。为实现WebSocket通信，需要借助于HTTP协议。<br>HTTP的Upgrade首部字段可以将通信的协议切换为其他协议。通过发送Upgrade: websocket首部字段，通信过程从HTTP协议变成了WebSocket协议。同时Connection也会变为Upgrade。</li>
<li>7、HTTP防火墙(80/tcp)和HTTPS防火墙(443/tcp)</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-14 日报 Day6</title>
<url>/undefined/2024-11-14/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>遇见，获得，失去，成长，释怀，完结<br>我与旧事归于尽，来年依旧迎花开</p>
<p>Encounter, gain, loss, growth, release, and completion.<br>I am at the end of old things, and the next year will still welcome the blooming flowers.</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《图解HTTP》 P141-完结
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、CGI(Common Gateway Interface)是一种Web服务器和应用程序之间的接口标准。通过CGI，Web服务器可以调用外部程序处理客户端发送的请求。CGI程序是一种独立于服务器的程序，可以用任何语言编写。<br>2、Java Servlet可以处理 HTTP 请求并生成动态响应。与 CGI 不同，Servlet 直接运行在服务器中，无需每次请求都启动新的进程，因此性能更高。Servlet 部署在 Servlet 容器中（如 Apache Tomcat）。</p>
<h3 id="术语"><a href="#术语" class="headerlink" title="术语"></a>术语</h3><ul>
<li>CGI(Common Gateway Interface): 通用网关接口</li>
<li>XSS(Cross-Site Scripting): 跨站脚本攻击</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-15 日报 Day7</title>
<url>/undefined/2024-11-15/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>无人扶我青云志，我自踏雪至山巅。</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《JavaScript数据结构与算法》 P1-53
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、JS的基本数据类型有: Undefined、Null、Boolean、Number、String、Symbol、BigInt。<br>2、JS的引用数据类型有: Object、Array、Function、Date、RegExp、Error。<br>3、JS中的真值和假值: </p>
<table>
<thead>
<tr>
<th>数值类型</th>
<th>转换成布尔值</th>
</tr>
</thead>
<tbody><tr>
<td><strong>undefined</strong></td>
<td><strong>false</strong></td>
</tr>
<tr>
<td><strong>null</strong></td>
<td><strong>false</strong></td>
</tr>
<tr>
<td><strong>布尔值</strong></td>
<td><strong>true时true false时false</strong></td>
</tr>
<tr>
<td><strong>数字</strong></td>
<td><strong>+0、-0和NaN都是false，其他都是true</strong></td>
</tr>
<tr>
<td><strong>字符串</strong></td>
<td><strong>如果字符串是空的（长度是0）就是false，其他都是true</strong></td>
</tr>
<tr>
<td><strong>对象</strong></td>
<td><strong>true</strong></td>
</tr>
</tbody></table>
<p>4、相等运算符（ == 和 === ）</p>
<ul>
<li><strong>==</strong></li>
</ul>
<table>
<thead>
<tr>
<th>类型(x)</th>
<th>类型(y)</th>
<th>结果</th>
</tr>
</thead>
<tbody><tr>
<td>null</td>
<td>undefined</td>
<td>True</td>
</tr>
<tr>
<td>undefined</td>
<td>null</td>
<td>True</td>
</tr>
<tr>
<td>数字</td>
<td>字符串</td>
<td>x == toNumber(y)</td>
</tr>
<tr>
<td>字符串</td>
<td>数字</td>
<td>toNumber(x) == y</td>
</tr>
<tr>
<td>布尔值</td>
<td>任何类型</td>
<td>toNumber(x) == y</td>
</tr>
<tr>
<td>任何类型</td>
<td>布尔值</td>
<td>x == toNumber(y)</td>
</tr>
<tr>
<td>字符串或数字</td>
<td>对象</td>
<td>x == toPrimitive(y)</td>
</tr>
<tr>
<td>对象</td>
<td>字符串或数字</td>
<td>toPrimitive(x) == y</td>
</tr>
</tbody></table>
<p>toNumber</p>
<table>
<thead>
<tr>
<th>值类型</th>
<th>结果</th>
</tr>
</thead>
<tbody><tr>
<td>undefined</td>
<td>NaN</td>
</tr>
<tr>
<td>null</td>
<td>+0</td>
</tr>
<tr>
<td>布尔值</td>
<td>如果是true,返回1;如果是false,返回+0;</td>
</tr>
<tr>
<td>数字</td>
<td>数字对应的值</td>
</tr>
<tr>
<td>字符串</td>
<td>将字符串解析成数字。如果字符串中包含字母，返回NaN；如果是由数字字符组成的，转换成数字</td>
</tr>
<tr>
<td>对象</td>
<td>Number(toPrimitive(value))</td>
</tr>
</tbody></table>
<p>toPrimitive</p>
<table>
<thead>
<tr>
<th>值类型</th>
<th>结果</th>
</tr>
</thead>
<tbody><tr>
<td>对象</td>
<td>如果对象的valueOf方法的结果是原始值，返回原始值。如果对象的toString方法返回原始值，就返回这个值；其他情况都返回一个错误。</td>
</tr>
</tbody></table>
<ul>
<li><strong>===</strong></li>
</ul>
<table>
<thead>
<tr>
<th>类型(x)</th>
<th>值</th>
<th>结果</th>
</tr>
</thead>
<tbody><tr>
<td>数字</td>
<td>x和y数值相同(但不是NaN)</td>
<td>true</td>
</tr>
<tr>
<td>字符串</td>
<td>x和y是相同的字符</td>
<td>true</td>
</tr>
<tr>
<td>布尔值</td>
<td>x和y都是true或false</td>
<td>true</td>
</tr>
<tr>
<td>对象</td>
<td>x和y引用同一个对象</td>
<td>true</td>
</tr>
</tbody></table>
<p>5、在类的定义里声明每个实例都会创建自己的函数副本。使用原型方法可以节约内存和降低实例化的开销。不过原型方法只能声明公共函数和属性，而类定义可以声明只在类的内部访问的私有函数和属性。<br>6、ES6展开运算符（…）可以将数组展开成参数列表，也可以将对象展开成键值对列表。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> params = [<span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">add</span>(...params)); <span class="comment">// 12</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在函数中展开操作符可以代替arguments,当作剩余参数使用</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">restParamaterFunction</span>(<span class="params">x, y, ...a</span>) {</span><br><span class="line"> <span class="keyword">return</span> (x + y) * a.<span class="property">length</span>;</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">restParamaterFunction</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="string">"hello"</span>, <span class="literal">true</span>, <span class="number">7</span>)); <span class="comment">// 9</span></span><br></pre></td></tr></table></figure></div>
<p>等价于</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">restParamaterFunction</span> (x, y) {</span><br><span class="line"> <span class="keyword">var</span> a = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>, <span class="number">2</span>);</span><br><span class="line"> <span class="keyword">return</span> (x + y) * a.<span class="property">length</span>;</span><br><span class="line">}; </span><br></pre></td></tr></table></figure></div>
<p>7、ES6引入了数组解构的概念，可以用来一次初始化多个变量。<br>8、虽然ES6引入了声明类的方法但是JavaScript仍然是基于原型的。类只是原型的语法糖。使用新的类语法可以为属性创建存取器函数。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">name</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_name</span> = name;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">get</span> <span class="title function_">name</span>() {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">_name</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">set</span> <span class="title function_">name</span>(<span class="params">value</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_name</span> = value;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-16 日报 Day8</title>
<url>/undefined/2024-11-16/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>心存希冀，目有繁星；<br>追光而遇，沐光而行。</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《JavaScript数据结构与算法》 P54-78
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、数据方法: </p>
<table>
<thead>
<tr>
<th>方法名</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>concat</td>
<td>连接2个或更多数组，并返回结果</td>
</tr>
<tr>
<td>every</td>
<td>对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true</td>
</tr>
<tr>
<td>filter</td>
<td>对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组</td>
</tr>
<tr>
<td>forEach</td>
<td>对数组中的每一项运行给定函数。这个方法没有返回值</td>
</tr>
<tr>
<td>join</td>
<td>将所有的数组元素连接成一个字符串</td>
</tr>
<tr>
<td>indexOf</td>
<td>返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1</td>
</tr>
<tr>
<td>lastIndexOf</td>
<td>返回在数组中搜索到的与给定参数相等的元素的索引里最大的值</td>
</tr>
<tr>
<td>map</td>
<td>对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组</td>
</tr>
<tr>
<td>reverse</td>
<td>颠倒数组中元素的顺序，原先第一个元素现在变成最后一个，同样原先的最后一个元素变成了现在 的第一个</td>
</tr>
<tr>
<td>slice</td>
<td>传入索引值，将数组里对应索引范围内的元素作为新数组返回</td>
</tr>
<tr>
<td>some</td>
<td>对数组中的每一项运行给定函数，如果任一项返回true，则返回true</td>
</tr>
<tr>
<td>sort</td>
<td>按照字母顺序对数组排序，支持传入指定排序方法的函数作为参数</td>
</tr>
<tr>
<td>toString</td>
<td>将数组作为字符串返回</td>
</tr>
<tr>
<td>valueOf</td>
<td>和toString类似，将数组作为字符串返回</td>
</tr>
<tr>
<td>reduce</td>
<td>array.reduce(callback, initialValue) callback接收四个参数 。accumulator：累加器，保存回调函数的返回值，并将其在下一次迭代中传递。currentValue：当前处理的数组元素。currentIndex：当前元素的索引（可选）。array：调用 reduce 的数组本身（可选）。</td>
</tr>
</tbody></table>
<p>2、栈</p>
<p>栈实现</p>
<p>最简单的: 存在的缺点 希望Stack类的用户只能访问暴露给类的方法。否则，就有 可能从栈的中间移除元素（因为我们用数组来存储其值），这不是我们希望看到的。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Stack</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">items</span> = []; <span class="comment">// 用数组存储栈元素</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 入栈操作：添加一个元素到栈顶</span></span><br><span class="line"> <span class="title function_">push</span>(<span class="params">element</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="title function_">push</span>(element);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 出栈操作：移除并返回栈顶元素</span></span><br><span class="line"> <span class="title function_">pop</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="title function_">isEmpty</span>()) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">"Stack is empty, cannot pop"</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="title function_">pop</span>();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 查看栈顶元素</span></span><br><span class="line"> <span class="title function_">peek</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="title function_">isEmpty</span>()) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">"Stack is empty, no top element"</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>[<span class="variable language_">this</span>.<span class="property">items</span>.<span class="property">length</span> - <span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 检查栈是否为空</span></span><br><span class="line"> <span class="title function_">isEmpty</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="property">length</span> === <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 获取栈的大小</span></span><br><span class="line"> <span class="title function_">size</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="property">length</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 清空栈</span></span><br><span class="line"> <span class="title function_">clear</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">items</span> = [];</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p>用ES6的限定作用域Symbol实现</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> _items = <span class="title class_">Symbol</span>();</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Stack</span> {</span><br><span class="line"> <span class="title function_">constructor</span> () {</span><br><span class="line"> <span class="variable language_">this</span>[_items] = []; <span class="comment">//{2}</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//Stack方法</span></span><br><span class="line">} </span><br><span class="line"><span class="keyword">let</span> stack = <span class="keyword">new</span> <span class="title class_">Stack</span>();</span><br><span class="line">stack.<span class="title function_">push</span>(<span class="number">5</span>);</span><br><span class="line">stack.<span class="title function_">push</span>(<span class="number">8</span>);</span><br><span class="line"><span class="keyword">let</span> objectSymbols = <span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(stack);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(objectSymbols.<span class="property">length</span>); <span class="comment">// 1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(objectSymbols); <span class="comment">// [Symbol()]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(objectSymbols[<span class="number">0</span>]); <span class="comment">// Symbol()</span></span><br><span class="line">stack[objectSymbols[<span class="number">0</span>]].<span class="title function_">push</span>(<span class="number">1</span>);</span><br><span class="line">stack.<span class="title function_">print</span>(); <span class="comment">//输出 5, 8, 1</span></span><br></pre></td></tr></table></figure></div>
<p>虽然创建了一个symbol属性 但是依然可以获取到数组</p>
<p>用ES6的WeakMap</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> items = <span class="keyword">new</span> <span class="title class_">WeakMap</span>(); <span class="comment">//{1}</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Stack</span> {</span><br><span class="line"> <span class="title function_">constructor</span> () {</span><br><span class="line"> items.<span class="title function_">set</span>(<span class="variable language_">this</span>, []); <span class="comment">//{2}</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">push</span>(<span class="params">element</span>) {</span><br><span class="line"> <span class="keyword">let</span> s = items.<span class="title function_">get</span>(<span class="variable language_">this</span>); <span class="comment">//{3}</span></span><br><span class="line"> s.<span class="title function_">push</span>(element);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">pop</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> s = items.<span class="title function_">get</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="keyword">let</span> r = s.<span class="title function_">pop</span>();</span><br><span class="line"> <span class="keyword">return</span> r;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//其他方法</span></span><br><span class="line">} </span><br></pre></td></tr></table></figure></div>
<h3 id="数据结构总结"><a href="#数据结构总结" class="headerlink" title="数据结构总结"></a>数据结构总结</h3><p>栈: 例子(书堆) 先进后出(LIFO)<br>方法包含: push、pop、peek、isEmpty、getSize、clear<br>应用: 回溯问题中，它可以存储访问过的任务或路径、撤销的操作（后<br>面的章节讨论图和回溯问题时，</p>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-17 日报 Day9</title>
<url>/undefined/2024-11-17/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>少年应有鸿鹄志，当骑骏马踏平川。</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《JavaScript数据结构与算法》 P79-88
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、队列是一种遵循先进先出（FIFO）原则的有序集合。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾。</p>
<ul>
<li>enqueue(element(s))：向队列尾部添加一个（或多个）新的项。</li>
<li>dequeue()：移除队列的第一（即排在队列最前面的）项，并返回被移除的元素。</li>
<li>front()：返回队列中第一个元素——最先被添加，也将是最先被移除的元素。队列不做任何变动（不移除元素，只返回元素信息——与Stack类的peek方法非常类似）。</li>
<li>isEmpty()：如果队列中不包含任何元素，返回true，否则返回false。</li>
<li>size()：返回队列包含的元素个数，与数组的length属性类似。<br>2、普通队列类实现<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Queue</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">items</span> = [];</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="title function_">enqueue</span>(<span class="params">element</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="title function_">push</span>(element);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="title function_">dequeue</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="title function_">shift</span>();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="title function_">front</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>[<span class="number">0</span>];</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="title function_">isEmpty</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="property">length</span> === <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="title function_">size</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">items</span>.<span class="property">length</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div></li>
</ul>
<h3 id="数据结构总结"><a href="#数据结构总结" class="headerlink" title="数据结构总结"></a>数据结构总结</h3><p>队列: 先进先出(FIFO)<br>方法包含: enqueue, dequeue, front, isEmpty, size<br>应用: 任务队列，因为每个标签页都是单线程处理的，它被称为事件循环。</p>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-11 日报 Day3</title>
<url>/undefined/2024-11-11/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>最慢的步伐不是跬步，而是徘徊;<br>最快的脚步不是冲刺，而是坚持。<br>The slowest pace is not a step, but wandering;<br>The fastest pace is not to sprint, but to persevere.</p>
</div>
</div>
<h3 id="今日思考"><a href="#今日思考" class="headerlink" title="今日思考"></a>今日思考</h3><p>今天看到了一个youtube博主分享的一个行为习惯视频(<a class="link" href="https://www.youtube.com/watch?v=4zXTyc2ZjXM)%EF%BC%8C%E5%85%B6%E4%B8%AD%E6%8F%90%E5%88%B0%E7%9A%84%E8%BF%99%E6%9C%AC%E3%80%8AThe" >https://www.youtube.com/watch?v=4zXTyc2ZjXM)，其中提到的这本《The <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a> 5 AM CLUB》以及5 AM Project.想要做到真正的早起需要一个明确的5 AM Project.<br> <img
lazyload
src="/images/loading.svg"
data-src="https://raw.githubusercontent.com/YuZeZhang/myImgslib/main/202411110002901.jpg"
alt="image-202411110002901"
></p>
<p>这边就有一个问题，为什么非得是早上起来为什么不能是晚上熬夜呢？<br>早起奥义:<br>早上大脑是清空的 因此可以更好的学习自己的事情<br>晚上大脑经历了早上忙碌的工作，下班之后的时间都是垃圾时间，因此晚上经常会习惯刷短视频 一刷刷到后半夜</p>
<p>-针对这个视频内容对我个人有什么思考呢？<br>可以考虑把下班后的学习时间提前到上班前。</p>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《网络是怎样连接的》 P75 - 完结🎉
2、https://www.sonarsource.com/learn/monorepo/
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><ul>
<li><p>1、地址转换的基本原理是在转发网络包时对IP头部中的IP地址和端口号进行修改。</p>
</li>
<li><p>2、缓存服务器是一台通过<strong>代理机制</strong>对数据进行缓存的服务器。代理介于Web服务器和客户端之间，具有对Web服务器访问进行中转的功能。</p>
</li>
<li><p>3、正向代理: 在客户端部署一个代理。比如VPN、科学上网工具等。</p>
</li>
<li><p>4、反向代理: Nginx反向代理用于负载均衡和缓存、CDN加速服务。</p>
</li>
<li><p>5、CDN（Content Delivery Network）内容分发网络: 通过将内容分发到全球各地的服务器，使用户可以从距离较近的服务器获取内容，提高访问速度。<br>CDN基于WEB服务器运营者和网络运营商签约将自己的缓存服务器放在客户端的运营商处。一般有厂商提供CDN服务，提供这种服务的厂商称为CDSP（Content Delivery Service Provider）。</p>
<p><img
lazyload
src="/images/loading.svg"
data-src="https://raw.githubusercontent.com/YuZeZhang/myImgslib/main/202411110345416.png"
alt="image-20241111034457433"
></p>
</li>
</ul>
<p>Reference: <a class="link" href="https://bg.qianzhan.com/trends/detail/506/240226-8132891d.html" >https://bg.qianzhan.com/trends/detail/506/240226-8132891d.html <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<ul>
<li>6、根据响应头的Content-Type字段，浏览器会决定如何处理响应的内容。例如，如果Content-Type字段的值是text/html，浏览器会将响应的内容解析为HTML文档并显示在页面上。</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-12-10 日报 Day12</title>
<url>/undefined/2024-12-10/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>山不让尘，<br>川不辞盈。</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><p>最近已经要求开始写大论文了，所以学习的时间会减少，但是我会尽量保持每天的学习时间，不会放弃的。<br> 1、《JavaScript数据结构与算法》 P93-105</p>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、链表简单实现</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">LinkedList</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> <span class="title class_">Node</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">element</span> = element;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">next</span> = <span class="literal">null</span>;</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> length = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">let</span> head = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">append</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="keyword">let</span> node = <span class="keyword">new</span> <span class="title class_">Node</span>(element),</span><br><span class="line"> current;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(head === <span class="literal">null</span>){</span><br><span class="line"> head = node;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> current = head;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span>(current.<span class="property">next</span>){</span><br><span class="line"> current = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> current.<span class="property">next</span> = node;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> length++;</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">insert</span> = <span class="keyword">function</span>(<span class="params">position, element</span>){</span><br><span class="line"> <span class="keyword">if</span>(positio >= <span class="number">0</span> && position <= length){</span><br><span class="line"> <span class="keyword">let</span> node = <span class="keyword">new</span> <span class="title class_">Node</span>(element),</span><br><span class="line"> current = head,</span><br><span class="line"> previous,</span><br><span class="line"> index = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span>(position === <span class="number">0</span>){</span><br><span class="line"> node.<span class="property">next</span> = current;</span><br><span class="line"> head = node;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">while</span>(index++ < position){</span><br><span class="line"> previous = current;</span><br><span class="line"> current = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"> node.<span class="property">next</span> = current;</span><br><span class="line"> previous.<span class="property">next</span> = node;</span><br><span class="line"> }</span><br><span class="line"> length++;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">removeAt</span> = <span class="keyword">function</span>(<span class="params">position</span>){</span><br><span class="line"> <span class="keyword">if</span>(position > -<span class="number">1</span> && position < length){</span><br><span class="line"> <span class="keyword">let</span> current = head,</span><br><span class="line"> previous,</span><br><span class="line"> index = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(position === <span class="number">0</span>){</span><br><span class="line"> head = current.<span class="property">next</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">while</span>(index++ < position){</span><br><span class="line"> previous = current;</span><br><span class="line"> current = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> previous.<span class="property">next</span> = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> length--;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> current.<span class="property">element</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">remove</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="keyword">let</span> index = <span class="variable language_">this</span>.<span class="title function_">indexOf</span>(element);</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">removeAt</span>(index);</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">indexOf</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="keyword">let</span> current = head,</span><br><span class="line"> index = -<span class="number">1</span>;</span><br><span class="line"> <span class="keyword">while</span>(current){</span><br><span class="line"> <span class="keyword">if</span>(element === current.<span class="property">element</span>){</span><br><span class="line"> <span class="keyword">return</span> index;</span><br><span class="line"> }</span><br><span class="line"> index++;</span><br><span class="line"> current = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> -<span class="number">1</span><span class="string">'</span></span><br><span class="line"><span class="string"> };</span></span><br><span class="line"><span class="string"> this.isEmpty = function(){</span></span><br><span class="line"><span class="string"> return length === 0;</span></span><br><span class="line"><span class="string"> };</span></span><br><span class="line"><span class="string"> this.size = function(){</span></span><br><span class="line"><span class="string"> return length;</span></span><br><span class="line"><span class="string"> };</span></span><br><span class="line"><span class="string"> this.getHead = function(){</span></span><br><span class="line"><span class="string"> return head;</span></span><br><span class="line"><span class="string"> };</span></span><br><span class="line"><span class="string"> this.toString = function(){</span></span><br><span class="line"><span class="string"> let current = head;</span></span><br><span class="line"><span class="string"> string = '</span><span class="string">';</span></span><br><span class="line"><span class="string"> while(current){</span></span><br><span class="line"><span class="string"> string += current.element + (current.next ? '</span>n<span class="string">': '</span><span class="string">');</span></span><br><span class="line"><span class="string"> current = current.next;</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"> return string;</span></span><br><span class="line"><span class="string"> };</span></span><br><span class="line"><span class="string"> this.print = function(){};</span></span><br><span class="line"><span class="string">}</span></span><br></pre></td></tr></table></figure></div>
<p>2、双向链表: 双向链表和普通链表的区别在于，双向链表的节点有两个指针，一个指向前一个节点，一个指向后一个节点。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">DoublyLinkedList</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> <span class="title class_">Node</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">element</span> = element;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">next</span> = <span class="literal">null</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">prev</span> = <span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> length = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">let</span> head = <span class="literal">null</span>;</span><br><span class="line"> <span class="keyword">let</span> tail = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 这里是方法</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p>3、循环链表: 循环链表和链表的区别在于，链表的最后一个节点指向null，而循环链表的最后一个节点指向第一个节点。<br>4、双向循环链表有指向head元素的tail.next,和指向tail元素的head.prev。</p>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-12-11 日报 Day13</title>
<url>/undefined/2024-12-11/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>世间从不缺少辉煌的花冠，缺少的是不被花冠晕染的淡定。</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《JavaScript数据结构与算法》 P106-112
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、构建数据集合</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Set</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> items = {};</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p>2、集合的一些基本方法</p>
<ul>
<li>add(value)：向集合添加一个新的项。</li>
<li>delete(value)：从集合移除一个值。</li>
<li>has(value)：如果值在集合中，返回true，否则返回false。</li>
<li>clear()：移除集合中的所有项。</li>
<li>size()：返回集合所包含元素的数量。与数组的length属性类似。</li>
<li>values()：返回一个包含集合中所有值的数组。<br>3、集合的实现<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Set</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> items = {};</span><br><span class="line"> <span class="comment">// this.has = function(value){</span></span><br><span class="line"> <span class="comment">// return value in items;</span></span><br><span class="line"> <span class="comment">// };</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">has</span> = <span class="keyword">function</span>(<span class="params">value</span>){</span><br><span class="line"> <span class="keyword">return</span> items.<span class="title function_">hasOwnProperty</span>(value);</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">add</span> = <span class="keyword">function</span>(<span class="params">value</span>){</span><br><span class="line"> <span class="keyword">if</span>(!<span class="variable language_">this</span>.<span class="title function_">has</span>(value)){</span><br><span class="line"> items[value] = value;</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">remove</span> = <span class="keyword">function</span>(<span class="params">value</span>){</span><br><span class="line"> <span class="keyword">if</span>(<span class="variable language_">this</span>.<span class="title function_">has</span>(value)){</span><br><span class="line"> <span class="keyword">delete</span> items[value];</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">clear</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> items = {};</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">size</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Object</span>.<span class="title function_">keys</span>(items).<span class="property">length</span>;</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">values</span> = <span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> values = [];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>, keys = <span class="title class_">Object</span>.<span class="title function_">keys</span>(items); i < keys.<span class="property">length</span>; i++){</span><br><span class="line"> values.<span class="title function_">push</span>(items[keys[i]]);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
4、集合操作</li>
<li>并集：对于给定的两个集合，返回一个包含两个集合中所有元素的新集合。</li>
<li>交集：对于给定的两个集合，返回一个包含两个集合中共有元素的新集合。</li>
<li>差集：对于给定的两个集合，返回一个包含所有存在于第一个集合且不存在于第二个集合的元素的新集合。</li>
<li>子集：验证一个集合是否是另一个集合的子集。</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-9 日报 Day1</title>
<url>/undefined/2024-11-9/</url>
<content><![CDATA[<h2 id="写在本类目的最前面"><a href="#写在本类目的最前面" class="headerlink" title="写在本类目的最前面"></a>写在本类目的最前面</h2><p> 不知道以什么开始，就以最近看到的《我与地坛》中的一句话作为本类目的开头吧：</p>
<blockquote>
<p>但是太阳，它每时每刻都是夕阳也都是旭日。当它熄灭着走下山去收尽苍凉残照之际，正是它在另一面燃烧着爬上山巅布散烈烈朝晖之时。<br>那一天，我也将沉静着走下山去，扶着我的拐杖。有一天，在某一处山洼里，势必会跑上来一个欢蹦的孩子，抱着他的玩具。<br>当然，那不是我。<br>但是，那不是我吗？</p>
</blockquote>
<h3 id="今天的思考"><a href="#今天的思考" class="headerlink" title="今天的思考"></a>今天的思考</h3><pre><code>不满足于当前的苟且，却又无能为力改变现状。何以破局，唯有涅槃重生。所以从今天开始从最基本的知识学起，每日保持不间断的更新，去到自己想要去到的高度。
</code></pre>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《网络是怎样连接的》 P1 - P12
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>URL协议标识符如HTTP、HTTPS、FTP等，是用来标识资源的协议的。URL的格式如下：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line">scheme://host:port/path?query#fragment</span><br></pre></td></tr></table></figure></div>
<ul>
<li>scheme：协议标识符，如HTTP、HTTPS、FTP等</li>
</ul>
<p>native上还有一些特殊的scheme，如：</p>
<ul>
<li>tell：用于电话号码</li>
<li>sms：用于短信</li>
<li>mailto：用于发送邮件</li>
<li>geo：用于地理位置</li>
<li>AppName：用于调起App</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-12-8 日报 Day10</title>
<url>/undefined/2024-12-8/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>勇敢的人不是不落泪，而是含着泪继续前行。</p>
</div>
</div>
<h2 id="动态规划"><a href="#动态规划" class="headerlink" title="动态规划"></a>动态规划</h2><p>动态规划是一种基于分治法与递归思想结合的优化方法。其主要核心思想就是将原问题分解为若干个子问题，然后在子问题上求解，将子问题的解组合起来，从而得到原问题的解。动态规划的核心思想是<strong>最优子结构</strong>，即问题的最优解可以通过子问题的最优解来求解。</p>
<p>以旅行商问题(TSP)为例:<br>首先 问题描述如下：给定 n 个城市，旅行商需要从某个起点城市出发，访问每个城市一次，最后返回起点，且总路径长度最短。</p>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-12 日报 Day4</title>
<url>/undefined/2024-11-12/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>流水不争先，争的是滔滔不绝。</p>
<p>姜子牙年轻时也做过屠夫卖过酒，直到暮年遇到周文王才得以大展宏图。</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《图解HTTP》 P1-140
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><ul>
<li><p>1、TCP/IP协议族分为以下4层: 应用层、传输层、网络层、数据链路层。</p>
<p><img
lazyload
src="/images/loading.svg"
data-src="https://raw.githubusercontent.com/YuZeZhang/myImgslib/main/202411121823887.png"
alt="network"
></p>
</li>
<li><p>2、请求报文是由请求方法、请求URI、协议版本、可选的请求首部字段和内容实体构成。</p>
</li>
<li><p>3、响应报文是由协议版本、状态码、用以解释状态码的原因短语、可选的响应首部字段以及实体主体构成。</p>
</li>
<li><p>4、HTTP是一种无状态(stateless)协议，HTTP/1.1引入了Cookie技术。Cookie通过在请求和响应报文中写入Cookie信息来控制客户端的状态。</p>
</li>
<li><p>5、Cookie会根据服务端发送的响应报文内的一个叫做Set-Cookie的首部字段信息，通知客户端保存Cookie。当下次客户端再往服务端发送请求时，客户端会自动在请求报文中加入Cookie值后发送出去。</p>
</li>
<li><p>6、内容协商机制(Content Negotiation)是指客户端和服务端就响应的资源内容进行交涉，然后提供给客户端最为适合的资源。内容协商机制有3种类型：</p>
<p> 服务器驱动协商: 以请求的首部字段为参考，在服务器端自动处理。</p>
<p> 客户端驱动协商: 比如按OS类型或浏览器类型自行切换成PC版页面或手机版页面。</p>
<p> 透明协商</p>
</li>
<li><p>7、状态码类型：</p>
<table>
<thead>
<tr>
<th></th>
<th>类别</th>
<th>原因短语</th>
</tr>
</thead>
<tbody><tr>
<td>1XX</td>
<td>Informational(信息性状态码)</td>
<td>接收的请求正在处理</td>
</tr>
<tr>
<td>2XX</td>
<td>Success(成功状态码)</td>
<td>请求正常处理完毕</td>
</tr>
<tr>
<td>3XX</td>
<td>Redirection(重定向状态码)</td>
<td>需要进行附加操作以完成请求</td>
</tr>
<tr>
<td>4XX</td>
<td>Client Error(客户端错误状态码)</td>
<td>服务器无法处理请求</td>
</tr>
<tr>
<td>5XX</td>
<td>Server Error(服务端错误状态码)</td>
<td>服务器处理请求出错</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>具体状态码</th>
<th>状态名称</th>
<th>状态描述</th>
</tr>
</thead>
<tbody><tr>
<td>200</td>
<td>OK</td>
<td></td>
</tr>
<tr>
<td>204</td>
<td>No Content</td>
<td>请求成功但无资源返回</td>
</tr>
<tr>
<td>206</td>
<td>Partial Content</td>
<td></td>
</tr>
<tr>
<td>301</td>
<td>Moved Permanently</td>
<td></td>
</tr>
<tr>
<td>302</td>
<td>Found</td>
<td></td>
</tr>
<tr>
<td>303</td>
<td>See Other</td>
<td></td>
</tr>
<tr>
<td>304</td>
<td>Not Modified</td>
<td></td>
</tr>
<tr>
<td>307</td>
<td>Temporary Redirect</td>
<td></td>
</tr>
<tr>
<td>400</td>
<td>Bad Request</td>
<td></td>
</tr>
<tr>
<td>401</td>
<td>Unauthorized</td>
<td></td>
</tr>
<tr>
<td>403</td>
<td>Forbidden</td>
<td></td>
</tr>
<tr>
<td>404</td>
<td>Not Found</td>
<td></td>
</tr>
<tr>
<td>500</td>
<td>Internal Server Error</td>
<td></td>
</tr>
<tr>
<td>503</td>
<td>Service Unavailable</td>
<td></td>
</tr>
</tbody></table>
</li>
<li><p>8、通信数据转发程序: 代理、网关、隧道。</p>
</li>
<li><p>9、为Cookie服务的首部字段</p>
<table>
<thead>
<tr>
<th>首部字段名</th>
<th>说明</th>
<th>首部类型</th>
</tr>
</thead>
<tbody><tr>
<td>Set-Cookie</td>
<td>开始状态管理所使用的Cookie信息</td>
<td>响应首部字段</td>
</tr>
<tr>
<td>Cookie</td>
<td>服务器接收到的Cookie信息</td>
<td>请求首部字段</td>
</tr>
</tbody></table>
</li>
<li><p>10、Set-Cookie字段的属性</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>NAME=VALUE</td>
<td>赋予Cookie的名称和值</td>
</tr>
<tr>
<td>expires=DATE</td>
<td>Cookie的有效期</td>
</tr>
<tr>
<td>path=PATH</td>
<td></td>
</tr>
<tr>
<td>domain=域名</td>
<td>Cookie适用对象的域名</td>
</tr>
<tr>
<td>Secure</td>
<td>仅在HTTPS安全通信时才会发送Cookie</td>
</tr>
<tr>
<td>HttpOnly</td>
<td>加以限制，使Cookie不能被JavaScript脚本访问</td>
</tr>
</tbody></table>
</li>
</ul>
<h3 id="术语"><a href="#术语" class="headerlink" title="术语"></a>术语</h3><ul>
<li>HTTP(HyperText Transfer Protocol): 超文本传输协议</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-11-10 日报 Day2</title>
<url>/undefined/2024-11-10/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>于高山之巅，方见大河奔涌；于群峰之上，便觉长风浩荡。<br>As the top of the mountain, one can see the rushing river; Above the peaks, i feel the long and mighty wind.</p>
</div>
</div>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《网络是怎样连接的》 P13 - P74
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>1、GET、POST、PUT、DELETE</p>
<ul>
<li>GET: 从服务器获取资源<br> GET用于获取资源。请求参数附加在 URL 中，因此这些参数可以被缓存、记录到日志中，并且可能暴露在网络中，容易被拦截。</li>
<li>POST：用于提交数据或创建资源。<br>数据在请求体中，表面上看似比 GET 更安全，实际上 POST 也存在被拦截的风险，尤其是通过明文 HTTP 传输时。</li>
<li>PUT和DELETE：用于更新和删除资源。<br>在RESTful API中，PUT和DELETE用于更新和删除资源。HTTP中的PUT、DELETE等请求不被认为安全，主要是因为它们旨在修改服务器上的资源、这些方法未必包含足够的安全机制来验证请求者的权限、容易受到跨站请求伪造（CSRF）等安全攻击。<br>Reference: <a class="link" href="https://docs.pingcode.com/ask/244551.html" >https://docs.pingcode.com/ask/244551.html <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
</ul>
<p>2、CSRF（Cross-site request forgery）跨站请求伪造</p>
<ul>
<li>CSRF是一种网络攻击，它利用用户已登录的身份在用户不知情的情况下以用户的名义发送恶意请求。</li>
<li>CSRF Token:<ul>
<li>生成一个唯一的CSR Token并附加到每一个请求</li>
<li>服务器接收请求后，验证请求中的Token是否有效</li>
<li>每次生成的Token都是独立的、随机的，攻击者无法伪造</li>
</ul>
</li>
<li>同源检查:<ul>
<li>服务器检查请求来源的Referer或Origin头部，确保请求来自合法的源</li>
<li>如果Origin或Referer头部不匹配，服务器拒绝请求</li>
<li>例如发短信……</li>
</ul>
</li>
<li>使用双重Cookie验证<ul>
<li>用户登录时，将一个CSRF Token存储在Cookie中，同时在每个请求中都带上相同的CSRF Token</li>
<li>服务检验请求携带的Token和Cookie中的Token是否匹配</li>
</ul>
</li>
<li>设置Cookie的SameSite属性<ul>
<li>将Cookie的SameSite属性设置为Strict或Lax，可以防止CSRF攻击</li>
<li>SameSite=Strict：只有在同源请求时才会发送Cookie</li>
<li>SameSite=Lax：允许部分第三方请求（如 GET 请求）使用，但可以阻止大多数 CSRF 攻击。</li>
</ul>
</li>
</ul>
<p>Reference: <a class="link" href="https://portswigger.net/web-security/csrf" >https://portswigger.net/web-security/csrf <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></p>
<h3 id="术语"><a href="#术语" class="headerlink" title="术语"></a>术语</h3><ul>
<li>CSRF（Cross-site request forgery）: 跨站请求伪造</li>
<li>web security vulnerability: 网络安全漏洞</li>
</ul>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>2024-12-9 日报 Day11</title>
<url>/undefined/2024-12-9/</url>
<content><![CDATA[
<div class="note-large red">
<div class="notel-title rounded-t-lg p-3 font-bold text-lg flex flex-row gap-2 items-center">
<p>今日的鸡汤</p>
</div>
<div class="notel-content">
<p>每次归程，都是为了更好出发;<br>每次停歇，都是为了积攒力量。</p>
</div>
</div>
<h3 id="近况描述"><a href="#近况描述" class="headerlink" title="近况描述"></a>近况描述</h3><p>挺更了将近三个礼拜，最近发生了很多事情，也是人生的一个低谷和迷茫期，但是我相信，这一切都会过去，我也要从中吸取教训、走出来变得更加强大。Just keep going on.</p>
<h3 id="今日学习内容"><a href="#今日学习内容" class="headerlink" title="今日学习内容"></a>今日学习内容</h3><pre><code>1、《JavaScript数据结构与算法》 P89-92
</code></pre>
<h3 id="今日笔记"><a href="#今日笔记" class="headerlink" title="今日笔记"></a>今日笔记</h3><p>链表存储有序的元素集合，其存放的是当前元素和下一个元素的引用。链表的好处是在添加和移除元素的时候不需要移动其他元素。其缺点是访问元素时需要从头开始迭代链表直到找到所需的元素。</p>
<ul>
<li>简单链表实现<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">LinkedList</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> <span class="title class_">Node</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">element</span> = element;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">next</span> = <span class="literal">null</span>;</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> length = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">let</span> head = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">append</span> = <span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> <span class="keyword">let</span> node = <span class="keyword">new</span> <span class="title class_">Node</span>(element),</span><br><span class="line"> current;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(head === <span class="literal">null</span>){</span><br><span class="line"> head = node;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> current = head;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span>(current.<span class="property">next</span>){</span><br><span class="line"> current = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> current.<span class="property">next</span> = node;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> length++;</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">insert</span> = <span class="keyword">function</span>(<span class="params">position, element</span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">removeAt</span> = <span class="keyword">function</span>(<span class="params">position</span>){</span><br><span class="line"> <span class="keyword">if</span>(position > -<span class="number">1</span> && position < length){</span><br><span class="line"> <span class="keyword">let</span> current = head,</span><br><span class="line"> previous,</span><br><span class="line"> index = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(position === <span class="number">0</span>){</span><br><span class="line"> head = current.<span class="property">next</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">while</span>(index++ < position){</span><br><span class="line"> previous = current;</span><br><span class="line"> current = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> previous.<span class="property">next</span> = current.<span class="property">next</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> length--;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> current.<span class="property">element</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">remove</span> = <span class="keyword">function</span>(<span class="params">element</span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">indexOf</span> = <span class="keyword">function</span>(<span class="params">element</span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">isEmpty</span> = <span class="keyword">function</span>(<span class="params"></span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">size</span> = <span class="keyword">function</span>(<span class="params"></span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">getHead</span> = <span class="keyword">function</span>(<span class="params"></span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">toString</span> = <span class="keyword">function</span>(<span class="params"></span>){};</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">print</span> = <span class="keyword">function</span>(<span class="params"></span>){};</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div></li>
</ul>
<h3 id="VPN-Virtual-Private-Network"><a href="#VPN-Virtual-Private-Network" class="headerlink" title="VPN(Virtual Private Network)"></a>VPN(Virtual Private Network)</h3><p>VPN是一种通过公共网络建立私人网络的技术，通过加密通道将用户的数据传输到VPN服务器，再由VPN服务器转发到目标网站，从而实现用户的上网隐私和安全。</p>
<ul>
<li>为什么需要VPN?<ul>
<li>GFW(防火长城)：国内的网络审查系统，会屏蔽一些国外的网站，使用VPN可以突破GFW，访问国外网站。</li>
</ul>
</li>
</ul>
<p>正常没有GFW的情况下，网络包的传输过程是这样的：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line">1. 用户设备 (发起DNS请求) -> 2. 路由器 (转发请求) -> 3. ISP DNS服务器 (缓存或递归解析)</span><br><span class="line"> ↓</span><br><span class="line">4. 用户设备 (接收IP地址) -> 5. 路由器 (发送数据包) -> 6. ISP网络 -> 7. 国际/区域骨干网</span><br><span class="line"> ↓</span><br><span class="line">8. 目标服务器网络 -> 9. 目标服务器 (处理请求并返回数据)</span><br></pre></td></tr></table></figure></div>
<p>有了GFW之后，网络包的传输过程变成了这样：</p>
<div class="highlight-container" data-rel="Plaintext"><figure class="iseeu highlight plaintext"><table><tr><td class="code"><pre><span class="line">1. 用户设备 (发起DNS请求) -> 2. 路由器 (转发请求) -> 3. ISP DNS服务器 (缓存或递归解析，可能受到GFW干预)</span><br><span class="line"> ↓</span><br><span class="line"> - GFW可能拦截DNS请求，返回伪造的IP地址（DNS污染）。</span><br><span class="line"> ↓</span><br><span class="line">4. 用户设备 (接收IP地址，可能是错误的伪造地址) -> 5. 路由器 (发送数据包) -> 6. ISP网络</span><br><span class="line"> ↓</span><br><span class="line"> - GFW监控传输的数据包，发现敏感关键词时进行干预。（过滤关键字）。</span><br><span class="line"> - GFW对端口进行封锁，导致用户无法访问一些网站。（端口阻断）。</span><br><span class="line"> - GFW对IP地址进行封锁，导致用户无法访问一些网站。（IP地址封锁）。</span><br><span class="line"> ↓</span><br><span class="line">7. 国际/区域骨干网 (若未被阻断，数据包继续传输)</span><br><span class="line"> ↓</span><br><span class="line"> - GFW可能通过深度包检测（DPI）分析数据包内容，发现敏感流量特征时进行干预（丢包、限速、阻断IP等）。</span><br><span class="line"> ↓</span><br><span class="line">8. 目标服务器网络 (若数据包未被拦截，正常到达目标网络) -> 9. 目标服务器 (处理请求并返回数据，回程时可能再次被GFW干预)</span><br></pre></td></tr></table></figure></div>
<p>VPN SSH HTTP代理的原理<br>1、用户设备会先和VPN服务器建立加密通道，使用SSH（Secure Shell）协议创建加密隧道。<br>2、在VPN服务器上使用HTTP代理，将用户的数据包转发到目标服务器。</p>
<p>Shadowsocks SSR v2ray等方式运作原理<br>1、在本地网络上进行加密，发送加密数据经过DNS解析后，到达VPN服务器。<br>2、VPN服务器解密数据，将数据包转发到目标服务器。<br>3、目标服务器返回数据，VPN服务器再次加密数据，发送到用户设备。</p>
]]></content>
<categories>
<category>journal</category>
</categories>
<tags>
<tag>journal</tag>
</tags>
</entry>
<entry>
<title>CSS 盒模型</title>
<url>/Yuyang/CSS_BOX_MODEL/</url>
<content><![CDATA[<h2 id="CSS-盒模型介绍"><a href="#CSS-盒模型介绍" class="headerlink" title="CSS 盒模型介绍"></a>CSS 盒模型介绍</h2><p>CSS中的盒模型用来描述一个元素在页面汇总的布局方式，每个HTML元素都被视为是一个矩形的盒子，这个盒子由实际内容（content）、外边距（margin）、边框（border）和内边距（padding）组成。<br>CSS盒模型主要包含两种：W3C标准盒子模型和IE怪异盒子模型。</p>
<p>CSS的box-sizing属性定义了引擎如何计算一个元素的总宽度和总高度</p>
<p>box-sizing: content-box ｜ border-box ｜inherit</p>
<ul>
<li>content-box 默认值，元素的 width/height 不包含 padding，border 与标准盒子模型表现一致</li>
<li>border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致</li>
<li>inherit 指定 box-sizing 属性的值，应该从父元素继承</li>
</ul>
<h3 id="标准盒子模型："><a href="#标准盒子模型：" class="headerlink" title="标准盒子模型："></a>标准盒子模型：</h3><ul>
<li>盒子总宽度 = width + padding + border + margin</li>
<li>盒子总高度 = height + padding + border + margin</li>
</ul>
<div class="highlight-container" data-rel="Css"><figure class="iseeu highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p><img
lazyload
src="/images/loading.svg"
data-src="https://raw.githubusercontent.com/YuZeZhang/myImgslib/main/202410200006845.png"
alt="image-20241020000606496"
></p>
<h3 id="IE怪异盒子模型："><a href="#IE怪异盒子模型：" class="headerlink" title="IE怪异盒子模型："></a>IE怪异盒子模型：</h3><ul>
<li>盒子总宽度 = width + margin</li>
<li>盒子总高度 = height + margin</li>
</ul>
<div class="highlight-container" data-rel="Css"><figure class="iseeu highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div>
<p><img
lazyload
src="/images/loading.svg"
data-src="https://raw.githubusercontent.com/YuZeZhang/myImgslib/main/202410200018782.png"
alt="image-20241020001810933"
></p>
<h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>CSS 盒模型示例<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"styles.css"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>W3C 标准盒子模型<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>IE 怪异盒子模型<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div>
<div class="highlight-container" data-rel="Css"><figure class="iseeu highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">font-family</span>: Arial, sans-serif;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100vh</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid <span class="number">#3498db</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#f5f5f5</span>;</span><br><span class="line"> <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.box2</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid <span class="number">#3498db</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#f5f5f5</span>;</span><br><span class="line"> <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure></div>
]]></content>
</entry>
<entry>
<title>BFC</title>
<url>/Yuyang/BFC/</url>
<content><![CDATA[<h2 id="BFC"><a href="#BFC" class="headerlink" title="BFC"></a>BFC</h2><p>BFC(Block Formatting Context) 是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level box 如何布局，并且与这个区域外部毫不相干。</p>
<h2 id="BFC-的布局规则"><a href="#BFC-的布局规则" class="headerlink" title="BFC 的布局规则"></a>BFC 的布局规则</h2><ul>
<li>内部的 Box 会在垂直方向，一个接一个地放置。</li>
<li>Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。</li>
<li>每个元素的 margin box 的左边， 与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。</li>
<li>BFC 的区域不会与 float box 重叠。</li>
<li>BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。</li>
<li>计算 BFC 的高度时，浮动元素也参与计算。</li>
</ul>
<h2 id="BFC的触发条件"><a href="#BFC的触发条件" class="headerlink" title="BFC的触发条件"></a>BFC的触发条件</h2><ul>
<li>根元素，即 HTML 元素</li>
<li>float 的值不为 none</li>
<li>overflow 的值不为 visible</li>
<li>display 的值为 inline-block、table-cell、table-caption</li>
<li>position 的值为 absolute 或 fixed</li>
<li>flex 元素的子元素，且父元素的 display 值为 flex 或 inline-flex</li>
</ul>
<h2 id="BFC-的应用"><a href="#BFC-的应用" class="headerlink" title="BFC 的应用"></a>BFC 的应用</h2><ul>
<li>阻止 margin 重叠<br>属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠,以最大的为准。<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>BFC 示例<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box2</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: blue;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-top</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div></li>
</ul>
<p>避免重叠可以在box外面包裹一层容器，并触发这个容器生成一个BFC，此时不会出现margin重叠</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>BFC 示例<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.wrap</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.box2</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: blue;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin-top</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div>
<p>这时候box1和box2的margin不会重叠</p>
<ul>
<li>清除浮动<br>有浮动样式</li>
</ul>
<p><img