-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
1229 lines (590 loc) · 970 KB
/
search.xml
File metadata and controls
1229 lines (590 loc) · 970 KB
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>Umijs学习记录</title>
<link href="/post/20250914200000.html"/>
<url>/post/20250914200000.html</url>
<content type="html"><![CDATA[<h1 id="1-路由"><a href="#1-路由" class="headerlink" title="1.路由"></a>1.路由</h1><p>约定式路由内容参考：<a href="https://v2.umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1">约定式路由</a></p><h2 id="1-1配置式路由"><a href="#1-1配置式路由" class="headerlink" title="1.1配置式路由"></a>1.1配置式路由</h2><p>在<code>.umirc.(ts|js)</code>或<code>config/config.(ts|js)</code>配置文件中指定<code>routes</code>属性。 </p><p>routes配置项存在时，约定式路由不会生效</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//配置式路由</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">routes</span>: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/'</span>, <span class="attr">component</span>: <span class="string">'./a'</span> },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/list'</span>, <span class="attr">component</span>: <span class="string">'./b'</span>, <span class="title class_">Routes</span>: [<span class="string">'./routes/PrivateRoute.js'</span>] },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/users'</span>, <span class="attr">component</span>: <span class="string">'./users/_layout'</span>,</span><br><span class="line"> <span class="attr">routes</span>: [</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/users/detail'</span>, <span class="attr">component</span>: <span class="string">'./users/detail'</span> },</span><br><span class="line"> { <span class="attr">path</span>: <span class="string">'/users/:id'</span>, <span class="attr">component</span>: <span class="string">'./users/id'</span> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h3 id="1-1-1权限路由"><a href="#1-1-1权限路由" class="headerlink" title="1.1.1权限路由"></a>1.1.1权限路由</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line">{ <span class="attr">path</span>: <span class="string">'/'</span>, <span class="attr">component</span>: <span class="string">'./pages/index.js'</span> },</span><br><span class="line">{ <span class="attr">path</span>: <span class="string">'/list'</span>, <span class="attr">component</span>: <span class="string">'./pages/list.js'</span>,</span><br><span class="line"> <span class="title class_">Routes</span>[<span class="string">'./routes/PrivateRoute.js'</span>]</span><br><span class="line">},</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// PrivateRoute.js 示例</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">Redirect</span> } <span class="keyword">from</span> <span class="string">'umi'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">PrivateRoute</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="comment">// 假设从某个地方获取了 isLogin 状态</span></span><br><span class="line"> <span class="keyword">const</span> isLogin = <span class="title function_">checkUserLoginStatus</span>();</span><br><span class="line"> <span class="keyword">if</span> (isLogin) {</span><br><span class="line"> <span class="comment">// 若已登录，渲染子组件（即真正的页面组件或其他包装器）</span></span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{ props.children }<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 若未登录，重定向到登录页</span></span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">Redirect</span> <span class="attr">to</span>=<span class="string">"/login"</span> /></span></span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>PrivateRoute</code>组件相当于list组件的父组件/包装器。</p><h2 id="1-2路由跳转"><a href="#1-2路由跳转" class="headerlink" title="1.2路由跳转"></a>1.2路由跳转</h2><h3 id="1-2-1声明式"><a href="#1-2-1声明式" class="headerlink" title="1.2.1声明式"></a>1.2.1声明式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Link</span> <span class="keyword">from</span> <span class="string">'umi/link'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="title function_">default</span> () => (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Link</span> <span class="attr">to</span>=<span class="string">"/list"</span>></span>Go to list page<span class="tag"></<span class="name">Link</span>></span></span></span><br><span class="line">);</span><br></pre></td></tr></table></figure><h3 id="1-2-2命令式"><a href="#1-2-2命令式" class="headerlink" title="1.2.2命令式"></a>1.2.2命令式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'umi/router'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">goToListPage</span>(<span class="params"></span>) {</span><br><span class="line"> router.<span class="title function_">push</span>(<span class="string">'/list'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h1><p>umi 允许在 <code>.umirc.js</code> 或 <code>config/config.js</code> （二选一，<code>.umirc.js</code> 优先）</p><p><strong>区分环境与配置环境变量</strong> </p><ol><li>安装<code>npm install cross-env --save-dev</code></li><li>修改<code>package.json</code></li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"scripts"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"start"</span><span class="punctuation">:</span> <span class="string">"cross-env UMI_ENV=dev umi dev"</span><span class="punctuation">,</span> <span class="comment">// 开发环境</span></span><br><span class="line"> <span class="attr">"build:test"</span><span class="punctuation">:</span> <span class="string">"cross-env UMI_ENV=test umi build"</span><span class="punctuation">,</span> <span class="comment">// 测试环境</span></span><br><span class="line"> <span class="attr">"build:prod"</span><span class="punctuation">:</span> <span class="string">"cross-env UMI_ENV=prod umi build"</span><span class="punctuation">,</span> <span class="comment">// 生产环境</span></span><br><span class="line"> <span class="attr">"build:uat"</span><span class="punctuation">:</span> <span class="string">"cross-env UMI_ENV=uat umi build"</span> <span class="comment">// UAT环境</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><ol start="3"><li>创建环境配置文件</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 示例：config/config.dev.js 或 .umirc.dev.js - 开发环境</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">define</span>: {</span><br><span class="line"> <span class="string">'process.env.UMI_ENV'</span>: <span class="string">'dev'</span>, <span class="comment">// 注入环境标识</span></span><br><span class="line"> <span class="string">'process.env.API_URL'</span>: <span class="string">'http://localhost:3000/api'</span>, <span class="comment">// 注入API地址</span></span><br><span class="line"> },</span><br><span class="line">};</span><br><span class="line"><span class="comment">// 示例：config/config.prod.js 或 .umirc.prod.js - 生产环境</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">define</span>: {</span><br><span class="line"> <span class="string">'process.env.UMI_ENV'</span>: <span class="string">'prod'</span>,</span><br><span class="line"> <span class="string">'process.env.API_URL'</span>: <span class="string">'https://api.yourdomain.com/api'</span>,</span><br><span class="line"> },</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>配置文件的其他配置参考：<a href="https://v2.umijs.org/zh/config/#mock-exclude">配置</a></p><h1 id="3-Mock数据"><a href="#3-Mock数据" class="headerlink" title="3.Mock数据"></a>3.Mock数据</h1><p>在umijs中使用如下方式模拟请求地址</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> mockjs <span class="keyword">from</span> <span class="string">'mockjs'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//冒号后面是时请求的返回内容</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"><span class="comment">// 支持值为 Object 和 Array</span></span><br><span class="line"><span class="string">'GET /api/users'</span>: { <span class="attr">users</span>: [<span class="number">1</span>, <span class="number">2</span>] },</span><br><span class="line"><span class="string">'GET /api/tags'</span>: mockjs.<span class="title function_">mock</span>({</span><br><span class="line"> <span class="string">'list|100'</span>: [{ <span class="attr">name</span>: <span class="string">'@city'</span>, <span class="string">'value|1-100'</span>: <span class="number">50</span>, <span class="string">'type|0-2'</span>: <span class="number">1</span> }],</span><br><span class="line">}),</span><br><span class="line"><span class="comment">// 支持自定义函数</span></span><br><span class="line"><span class="string">'POST /api/users/create'</span>: <span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line">res.<span class="title function_">setHeader</span>(<span class="string">'Access-Control-Allow-Origin'</span>, <span class="string">'*'</span>);<span class="comment">//添加跨域请求头</span></span><br><span class="line">res.<span class="title function_">end</span>(<span class="string">'OK'</span>); </span><br><span class="line">},</span><br><span class="line"><span class="comment">//模拟延迟 也可以使用roadhog-api-doc</span></span><br><span class="line"><span class="string">'POST /api/forms'</span>: <span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line">res.<span class="title function_">send</span>(<span class="string">'Ok'</span>);</span><br><span class="line">}, <span class="number">1000</span>);</span><br><span class="line">},</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h1 id="4-Dva（状态管理）"><a href="#4-Dva（状态管理）" class="headerlink" title="4.Dva（状态管理）"></a>4.Dva（状态管理）</h1><h2 id="4-1在配置文件中启用Dva"><a href="#4-1在配置文件中启用Dva" class="headerlink" title="4.1在配置文件中启用Dva"></a>4.1在配置文件中启用Dva</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">dva</span>: {</span><br><span class="line"> <span class="attr">immer</span>: <span class="literal">true</span>, <span class="comment">// 启用 immer 以方便 reducer 中直接修改 state</span></span><br><span class="line"> <span class="attr">hmr</span>: <span class="literal">false</span>, <span class="comment">// 是否启用热更新</span></span><br><span class="line">},</span><br></pre></td></tr></table></figure><h2 id="4-2-创建model"><a href="#4-2-创建model" class="headerlink" title="4.2 创建model"></a>4.2 创建model</h2><ul><li>全局model放到src/models目录下</li><li>页面model放到src/pages/models目录下或src/pages/model.ts文件中</li></ul><table><thead><tr><th>部分</th><th>说明</th></tr></thead><tbody><tr><td>namespace</td><td>模型的命名空间，必须是唯一的字符串，用于在全局 state 中标识该模型，也是连接组件时指定模型的关键。</td></tr><tr><td>state</td><td>模型的初始状态数据。</td></tr><tr><td>effects</td><td>用于处理异步操作（如异步请求）和业务逻辑。使用 Generator 函数编写，通过 <code>yield</code>控制异步流程。</td></tr><tr><td>reducers</td><td>用于处理同步操作，是唯一可以直接修改 <code>state</code>的地方。每个 reducer 都是一个纯函数，接收当前 state 和 action，返回新的 state。</td></tr><tr><td>示例：</td><td></td></tr></tbody></table><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/models/example.js 示例</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">namespace</span>: <span class="string">'example'</span>, <span class="comment">// 命名空间，必须唯一</span></span><br><span class="line"> <span class="attr">state</span>: {</span><br><span class="line"> <span class="attr">count</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">data</span>: [],</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">effects</span>: {</span><br><span class="line"> <span class="comment">// 异步操作，使用 Generator 函数</span></span><br><span class="line"> *<span class="title function_">fetchData</span>(<span class="params">{ payload }, { call, put }</span>) {</span><br><span class="line"> <span class="keyword">const</span> response = <span class="keyword">yield</span> <span class="title function_">call</span>(api.<span class="property">fetchData</span>, payload); <span class="comment">// 调用异步函数</span></span><br><span class="line"> <span class="keyword">yield</span> <span class="title function_">put</span>({ <span class="attr">type</span>: <span class="string">'saveData'</span>, <span class="attr">payload</span>: response }); <span class="comment">// 触发 reducer 更新 state</span></span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">reducers</span>: {</span><br><span class="line"> <span class="comment">// 同步更新 state</span></span><br><span class="line"> <span class="title function_">saveData</span>(<span class="params">state, { payload }</span>) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> ...state,</span><br><span class="line"> <span class="attr">data</span>: payload, <span class="comment">// 更新 state 中的 data</span></span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">increment</span>(<span class="params">state</span>) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> ...state,</span><br><span class="line"> <span class="attr">count</span>: state.<span class="property">count</span> + <span class="number">1</span>, <span class="comment">// 直接更新 count</span></span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>在组件中使用</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 页面组件示例</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> { connect } <span class="keyword">from</span> <span class="string">'umi'</span>; <span class="comment">// 从 umi 中引入 connect</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">ExamplePage</span> = (<span class="params">{ dispatch, example }</span>) => {</span><br><span class="line"> <span class="comment">// 从 props 中获取 dispatch 方法和 example state（对应 namespace 为 example 的 model）</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">handleFetch</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="comment">// 使用 dispatch 触发 effects 中的异步操作</span></span><br><span class="line"> <span class="title function_">dispatch</span>({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'example/fetchData'</span>, <span class="comment">// format: namespace/effectName</span></span><br><span class="line"> <span class="attr">payload</span>: { <span class="attr">query</span>: <span class="string">'test'</span> }, <span class="comment">// 传递参数</span></span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">handleIncrement</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="comment">// 使用 dispatch 触发 reducers 中的同步操作</span></span><br><span class="line"> <span class="title function_">dispatch</span>({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'example/increment'</span>, <span class="comment">// format: namespace/reducerName</span></span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">p</span>></span>Count: {example.count}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{handleIncrement}</span>></span>Add<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{handleFetch}</span>></span>Fetch Data<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span>{example.data && example.data.result}<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将 namespace 为 'example' 的 state 连接到组件的 props</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">connect</span>(<span class="function">(<span class="params">{ example }</span>) =></span> ({ example }))(<span class="title class_">ExamplePage</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//或者使用Hook：useSelector和 useDispatch</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> { useSelector, useDispatch } <span class="keyword">from</span> <span class="string">'umi'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">ExamplePage</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="comment">// 从全局 state 中选择 'example' namespace 的状态</span></span><br><span class="line"> <span class="keyword">const</span> exampleState = <span class="title function_">useSelector</span>(<span class="function"><span class="params">state</span> =></span> state.<span class="property">example</span>);</span><br><span class="line"> <span class="comment">// 获取 dispatch 方法</span></span><br><span class="line"> <span class="keyword">const</span> dispatch = <span class="title function_">useDispatch</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">handleFetch</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="title function_">dispatch</span>({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'example/fetchData'</span>,</span><br><span class="line"> <span class="attr">payload</span>: { <span class="attr">query</span>: <span class="string">'test'</span> },</span><br><span class="line"> }).<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="comment">// 如果需要，可以在异步操作完成后执行回调</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Fetch completed!'</span>);</span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">p</span>></span>Count: {exampleState.count}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{handleFetch}</span>></span>Fetch Data<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">ExamplePage</span>;</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> UmiJS </tag>
</tags>
</entry>
<entry>
<title>React学习记录02</title>
<link href="/post/20250904200000.html"/>
<url>/post/20250904200000.html</url>
<content type="html"><![CDATA[<blockquote><p>参考React19文档</p></blockquote><p><strong>React组件构建思路</strong> </p><ol><li>将 UI 拆解为组件层级结构</li><li>使用 React 构建一个静态版本</li><li>找出 UI 精简且完整的 state 表示</li><li>验证 state 应该被放置在哪里</li><li>添加反向数据流</li></ol><h1 id="1-组件"><a href="#1-组件" class="headerlink" title="1.组件"></a>1.组件</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//标准组件格式</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">Profile</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">img</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">src</span>=<span class="string">"https://i.imgur.com/QIrZWGIs.jpg"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">alt</span>=<span class="string">"Alan L. Hart"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> /></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">Gallery</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">section</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>了不起的科学家们<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Profile</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Profile</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">section</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="comment">//导入组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Gallery</span> <span class="keyword">from</span> <span class="string">'./Gallery.js'</span>;</span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">Profile</span> } <span class="keyword">from</span> <span class="string">'./Gallery.js'</span>;</span><br></pre></td></tr></table></figure><h2 id="1-1组件props传值"><a href="#1-1组件props传值" class="headerlink" title="1.1组件props传值"></a>1.1组件props传值</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//标准解构props传值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Avatar</span>(<span class="params">{ size }</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">width</span>=<span class="string">{size}</span> <span class="attr">height</span>=<span class="string">{size}/</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">Profile</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Avatar</span> <span class="attr">size</span>=<span class="string">{100}/</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>可以用<code>...props</code>展开语法传递所有props</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Profile</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"card"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Avatar</span> {<span class="attr">...props</span>} /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="1-2组件children传递"><a href="#1-2组件children传递" class="headerlink" title="1.2组件children传递"></a>1.2组件children传递</h2><p>与插槽类似，写在组件标签内的内容，会通过<code>props.children</code>传递</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Card</span>(<span class="params">{ children }</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"card"</span>></span></span></span><br><span class="line"><span class="language-xml"> {children}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">Profile</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Card</span>></span></span></span><br><span class="line"><span class="language-xml"> <Avatarsize={100}/></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">Card</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>条件渲染与列表渲染与前文旧版react变化不大，此处省略</strong></p><h2 id="1-3-内置组件"><a href="#1-3-内置组件" class="headerlink" title="1.3 内置组件"></a>1.3 内置组件</h2><h3 id="1-3-1-React-memo"><a href="#1-3-1-React-memo" class="headerlink" title="1.3.1 React.memo"></a>1.3.1 React.memo</h3><p>高阶组件，通过浅比较props是否变化，来决定是否跳过组件重新渲染，适用于重渲染父组件而跳过子组件的情况</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { memo } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ExpensiveChild</span> = <span class="title function_">memo</span>(<span class="function">(<span class="params">{ data }</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'ExpensiveChild 渲染了'</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>{data}<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Parent</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">0</span>);</span><br><span class="line"> <span class="keyword">const</span> stableData = <span class="string">"这是一个稳定的值"</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{()</span> =></span> setCount(c => c + 1)}>点击我 {count}<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> {/* 即使父组件因 count 变化而重新渲染，ExpensiveChild 不会重新渲染 */}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">ExpensiveChild</span> <span class="attr">data</span>=<span class="string">{stableData}</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="2-处理事件"><a href="#2-处理事件" class="headerlink" title="2.处理事件"></a>2.处理事件</h1><p>事件可以通过props传递</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Button</span>(<span class="params">{ onSmash, children }</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{onSmash}</span>></span></span></span><br><span class="line"><span class="language-xml"> {children}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Button</span> <span class="attr">onSmash</span>=<span class="string">{()</span> =></span> alert('正在播放！')}></span></span><br><span class="line"><span class="language-xml"> 播放电影</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">Button</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>必要时需要使用 </p><ul><li><code>e.stopPropagation()</code>阻止事件冒泡传播；</li><li><code>e.preventDefault()</code>阻止事件默认行为；</li></ul><h1 id="3-状态"><a href="#3-状态" class="headerlink" title="3.状态"></a>3.状态</h1><p>使用<code>useState</code>Hook函数声明状态,state是隔离且私有的 </p><p><code>index</code>和<code>setIndex</code>这种起名方式是约定俗成的</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { useState } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">Gallery</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> [index, setIndex] = <span class="title function_">useState</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">handleClick</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">setIndex</span>(index + <span class="number">1</span>);</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{handleClick}</span>></span></span></span><br><span class="line"><span class="language-xml"> Next</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> {index}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><p>首次加载和调用<code>setIndex</code>函数会触发一轮React渲染; </p><p>一轮React渲染为： </p><ol><li>触发渲染</li><li>React渲染组件</li><li>React更新DOM</li></ol><p>state在一轮渲染内只会保存一种状态，相当于一轮渲染为一个快照，所以在一次事件中多次调用<code>setIndex</code>函数，只会有一个相同的输入。</p><p>想要多次修改state的值，可以给setState函数传入一个<strong>更新函数</strong>，每次调用setState会将更新函数加入队列。在下一次渲染时，会遍历执行队列中的函数，并更新最终的state。 </p><p>例如</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> [number, setNumber] = <span class="title function_">useState</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//下边两次调用，number只会加1，因为传给setNumber函数的是两次 0 + 1</span></span><br><span class="line"><span class="comment">//实际上setNumber(42)这种类型也会加入任务队列，只不过该项任务的逻辑是将number置成42</span></span><br><span class="line"><span class="title function_">setNumber</span>(number + <span class="number">1</span>);</span><br><span class="line"><span class="title function_">setNumber</span>(number + <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//下边两次调用，number会加2，因为队列中有两个更新函数，依次处理后n变成了2</span></span><br><span class="line"><span class="title function_">setNumber</span>(<span class="function"><span class="params">n</span> =></span> n + <span class="number">1</span>);</span><br><span class="line"><span class="title function_">setNumber</span>(<span class="function"><span class="params">n</span> =></span> n + <span class="number">1</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="3-1修改state中对象-数组"><a href="#3-1修改state中对象-数组" class="headerlink" title="3.1修改state中对象/数组"></a>3.1修改state中对象/数组</h2><p>始终使用setState函数来更新对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> [person, setPerson] = <span class="title function_">useState</span>({</span><br><span class="line"> <span class="attr">firstName</span>: <span class="string">'Barbara'</span>,</span><br><span class="line"> <span class="attr">lastName</span>: <span class="string">'Hepworth'</span>,</span><br><span class="line"> <span class="attr">email</span>: <span class="string">'bhepworth@sculpture.com'</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="title function_">setPerson</span>({</span><br><span class="line"> ...person,</span><br><span class="line"> <span class="attr">firstName</span>: e.<span class="property">target</span>.<span class="property">value</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>修改数组时使用展开语法<code>[...arr]</code>，<code>filter</code>，<code>map</code>等不修改数组本身方法新建一个数组，然后再调用<code>setState</code>函数来更新。</p><h1 id="4-状态管理"><a href="#4-状态管理" class="headerlink" title="4.状态管理"></a>4.状态管理</h1><h2 id="4-1常用内置Hook"><a href="#4-1常用内置Hook" class="headerlink" title="4.1常用内置Hook"></a>4.1常用内置Hook</h2><p>先介绍一个常用的内置Hook函数</p><h3 id="4-1-1-useReducer"><a href="#4-1-1-useReducer" class="headerlink" title="4.1.1 useReducer"></a>4.1.1 useReducer</h3><p>作用：管理复杂的组件状态。例如状态的修改要区分不同的情况。 </p><p>基本语法：<code>const [state, dispatch] = useReducer(reducer, initialState, initFunction);</code> </p><ul><li><strong>reducer</strong>: 一个纯函数，接收当前状态 <code>state</code>和描述操作的 <code>action</code>对象，根据 <code>action.type</code>决定如何计算并返回<strong>新状态</strong></li><li><strong>initialState</strong>: 状态的初始值</li><li><strong>initFunction</strong> (可选): 用于<strong>延迟计算初始状态</strong>的函数。如果提供，初始状态将是 <code>initFunction(initialState)</code>的结果</li><li><strong>state</strong>: 当前的状态</li><li><strong>dispatch</strong>: 用于派发 action、触发状态更新的函数</li></ul><p>使用： </p><ol><li>定义<code>reducer</code>函数：纯函数，接收当前状态和 action，根据 action 的类型返回新的状态</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">reducer</span>(<span class="params">state, action</span>) {</span><br><span class="line"> <span class="keyword">switch</span> (action.<span class="property">type</span>) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'increment'</span>:</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">count</span>: state.<span class="property">count</span> + <span class="number">1</span> };</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'decrement'</span>:</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">count</span>: state.<span class="property">count</span> - <span class="number">1</span> };</span><br><span class="line"> <span class="attr">default</span>:</span><br><span class="line"> <span class="keyword">return</span> state; <span class="comment">// 务必处理未知 action 类型</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ol start="2"><li>初始化状态：确定组件的初始状态。</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> initialState = { <span class="attr">count</span>: <span class="number">0</span> };</span><br></pre></td></tr></table></figure><ol start="3"><li>在组件中调用<code>useReducer</code>：传入定义好的 reducer 和初始状态</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> [state, dispatch] = <span class="title function_">useReducer</span>(reducer, initialState);</span><br></pre></td></tr></table></figure><ol start="4"><li>派发<code>action</code>更新状态：通过调用 <code>dispatch</code>函数并传入一个描述“发生了什么”的 action 对象来请求状态更新。action 通常有一个 <code>type</code>字段（表示操作类型）和可选的 <code>payload</code>字段（携带数据）</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">handleIncrement</span> = (<span class="params"></span>) => { <span class="title function_">dispatch</span>({ <span class="attr">type</span>: <span class="string">'increment'</span> }); };</span><br></pre></td></tr></table></figure><h3 id="4-1-2-useEffect"><a href="#4-1-2-useEffect" class="headerlink" title="4.1.2 useEffect"></a>4.1.2 useEffect</h3><p>作用：用来处理 那些<strong>不直接参与UI渲染</strong>，但又必须进行的<strong>额外操作</strong></p><p>基本语法： </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//副作用函数：包含需要执行的副作用逻辑。此函数可以返回一个清理函数，用于在组件卸载或下一次副作用执行前进行清理（如取消订阅、清除定时器）</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">依赖数组（可选）：指定副作用函数依赖的状态或属性值。根据依赖项决定是否重新执行副作用函数</span></span><br><span class="line"><span class="comment">依赖数组不传：每次组件渲染后都执行</span></span><br><span class="line"><span class="comment">依赖数组传空数组：仅在组件首次挂载时执行一次</span></span><br><span class="line"><span class="comment">依赖数组正常传值：组件首次挂载时执行，且依赖项变化时重新执行</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">import</span> { useEffect } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="title function_">useEffect</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="comment">// 副作用逻辑</span></span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> {</span><br><span class="line"> <span class="comment">// 清理逻辑（可选）在组件卸载或dep变化引起的下一次副作用执行前触发</span></span><br><span class="line"> };</span><br><span class="line">}, [dep]); <span class="comment">// 依赖数组</span></span><br></pre></td></tr></table></figure><p>使用场景：</p><ol><li>数据获取</li><li>事件监听</li><li>定时器</li><li>手动操作 DOM</li></ol><h3 id="4-1-3-useContext"><a href="#4-1-3-useContext" class="headerlink" title="4.1.3 useContext"></a>4.1.3 useContext</h3><p>作用：解决组件树中跨层级传递数据 </p><p>使用： </p><ol><li>创建上下文</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用 `React.createContext`创建一个上下文对象.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// MyContext.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个上下文对象，并提供一个默认值（当组件不在 Provider 包裹下时使用）</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">MyContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>({ <span class="attr">name</span>: <span class="string">'Guest'</span>, <span class="attr">age</span>: <span class="number">0</span> }); </span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">MyContext</span>;</span><br></pre></td></tr></table></figure><ol start="2"><li>提供数据</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在组件树中合适的位置（通常是顶层或父组件），使用 `<MyContext.Provider>`组件包裹需要接收数据的子组件，并通过其 `value`属性传递数据</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// App.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, { useState } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">MyContext</span> <span class="keyword">from</span> <span class="string">'./MyContext'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ChildComponent</span> <span class="keyword">from</span> <span class="string">'./ChildComponent'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> [user, setUser] = <span class="title function_">useState</span>({ <span class="attr">name</span>: <span class="string">'John'</span>, <span class="attr">age</span>: <span class="number">30</span> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="comment">// 使用 Provider 提供数据。value 可以是任何类型：值、对象、函数等。</span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">MyContext.Provider</span> <span class="attr">value</span>=<span class="string">{{</span> <span class="attr">user</span>, <span class="attr">setUser</span> }}></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">ChildComponent</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">MyContext.Provider</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ol start="3"><li>获取数据</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在需要访问上下文数据的子组件（无论层级多深）中，使用 useContext 来获取上下文的值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ChildComponent.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, { useContext } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">MyContext</span> <span class="keyword">from</span> <span class="string">'./MyContext'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">ChildComponent</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">// 使用 useContext 获取上下文的值</span></span><br><span class="line"> <span class="keyword">const</span> { user, setUser } = <span class="title function_">useContext</span>(<span class="title class_">MyContext</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">p</span>></span>Name: {user.name}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">p</span>></span>Age: {user.age}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{()</span> =></span> setUser({ ...user, age: user.age + 1 })}></span></span><br><span class="line"><span class="language-xml"> Increase Age</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="4-1-4-useCallback（函数记忆）"><a href="#4-1-4-useCallback（函数记忆）" class="headerlink" title="4.1.4 useCallback（函数记忆）"></a>4.1.4 useCallback（函数记忆）</h3><ul><li>用于缓存函数本身的引用</li><li>接收一个内联回调函数和依赖项数组，只有依赖项变化时，才会返回一个新的函数实例，</li><li>适用于将回调函数传递被React.memo优化过的子组件时（或作为其他Hook如useEffect的依赖项时），避免因函数引用变化导致的不必要重渲染</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { useState, useCallback, memo } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ChildButton</span> = <span class="title function_">memo</span>(<span class="function">(<span class="params">{ onClick }</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'ChildButton 渲染了'</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{onClick}</span>></span>点击我<span class="tag"></<span class="name">button</span>></span></span>;</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Parent</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 使用 useCallback 缓存函数，空依赖数组表示该函数永不改变</span></span><br><span class="line"> <span class="keyword">const</span> handleClick = <span class="title function_">useCallback</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'按钮被点击'</span>);</span><br><span class="line"> }, []);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">p</span>></span>计数: {count}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{()</span> =></span> setCount(c => c + 1)}>增加计数<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="language-xml"> {/* 父组件重新渲染时，handleClick 的引用不变，ChildButton 不会重新渲染 */}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">ChildButton</span> <span class="attr">onClick</span>=<span class="string">{handleClick}</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="4-1-5-useMemo-值记忆"><a href="#4-1-5-useMemo-值记忆" class="headerlink" title="4.1.5 useMemo(值记忆)"></a>4.1.5 useMemo(值记忆)</h3><ul><li>用于缓存计算成本较高的函数结果</li><li>接收函数和依赖项数组，只有当依赖项发生变化时，才会重新调用函数来计算结果。</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { useMemo, useState } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">MyComponent</span>(<span class="params">{ list }</span>) {</span><br><span class="line"> <span class="keyword">const</span> [filter, setFilter] = <span class="title function_">useState</span>(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 仅当 `list` 或 `filter` 变化时，才会重新执行昂贵的过滤计算</span></span><br><span class="line"> <span class="keyword">const</span> filteredList = <span class="title function_">useMemo</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'正在进行昂贵的计算...'</span>);</span><br><span class="line"> <span class="keyword">return</span> list.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =></span> item.<span class="property">name</span>.<span class="title function_">includes</span>(filter));</span><br><span class="line"> }, [list, filter]); <span class="comment">// 依赖项</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">input</span> <span class="attr">value</span>=<span class="string">{filter}</span> <span class="attr">onChange</span>=<span class="string">{(e)</span> =></span> setFilter(e.target.value)} /></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">ul</span>></span></span></span><br><span class="line"><span class="language-xml"> {filteredList.map(item => <span class="tag"><<span class="name">li</span> <span class="attr">key</span>=<span class="string">{item.id}</span>></span>{item.name}<span class="tag"></<span class="name">li</span>></span>)}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="4-2状态提升-在组件间共享内容"><a href="#4-2状态提升-在组件间共享内容" class="headerlink" title="4.2状态提升/在组件间共享内容"></a>4.2状态提升/在组件间共享内容</h2><p>这部分与前文<strong>8.1 状态提升</strong>相似，不在赘述</p><h1 id="5-ref"><a href="#5-ref" class="headerlink" title="5.ref"></a>5.ref</h1><p><code>useRef</code> Hook 返回一个对象，该对象有一个名为 <code>current</code> 的属性。最初，<code>myRef.current</code> 是 <code>null</code>。当 React 为这个 <code><div></code> 创建一个 DOM 节点时，React 会把对该节点的引用放入 <code>myRef.current</code>。 </p><p>使用方式： </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { useRef } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> myRef = <span class="title function_">useRef</span>(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">input</span> <span class="attr">ref</span>=<span class="string">{inputRef}</span> /></span></span></span><br><span class="line"></span><br><span class="line">inputRef.<span class="property">current</span>.<span class="title function_">focus</span>();</span><br></pre></td></tr></table></figure><p>ref也可以通过props传递</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { useRef } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">MyInput</span>(<span class="params">{ ref }</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">input</span> <span class="attr">ref</span>=<span class="string">{ref}</span> /></span></span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">MyForm</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> inputRef = <span class="title function_">useRef</span>(<span class="literal">null</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">MyInput</span> <span class="attr">ref</span>=<span class="string">{inputRef}</span> /></span></span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>动态列表绑定ref：使用ref回调</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> itemsRef = <span class="title function_">useRef</span>(<span class="literal">null</span>);</span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">ul</span>></span></span></span><br><span class="line"><span class="language-xml"> {catList.map((cat) => (</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">li</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">key</span>=<span class="string">{cat}</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">ref</span>=<span class="string">{(node)</span> =></span> {</span></span><br><span class="line"><span class="language-xml"> const map = getMap();</span></span><br><span class="line"><span class="language-xml"> map.set(cat, node);</span></span><br><span class="line"><span class="language-xml"> </span></span><br><span class="line"><span class="language-xml"> //此处返回清理函数是React19新特性，React18需要在useEffect中清理</span></span><br><span class="line"><span class="language-xml"> return () => {</span></span><br><span class="line"><span class="language-xml"> map.delete(cat);</span></span><br><span class="line"><span class="language-xml"> };</span></span><br><span class="line"><span class="language-xml"> }}</span></span><br><span class="line"><span class="language-xml"> ></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">{cat}</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="language-xml"> ))}</span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getMap</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (!itemsRef.<span class="property">current</span>) {</span><br><span class="line"> <span class="comment">// 首次运行时初始化 Map。</span></span><br><span class="line"> itemsRef.<span class="property">current</span> = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> itemsRef.<span class="property">current</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="5-1React强制更新DOM"><a href="#5-1React强制更新DOM" class="headerlink" title="5.1React强制更新DOM"></a>5.1React强制更新DOM</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { flushSync } <span class="keyword">from</span> <span class="string">'react-dom'</span>;</span><br><span class="line"></span><br><span class="line"><span class="title function_">flushSync</span>(<span class="function">() =></span> { </span><br><span class="line"><span class="title function_">setTodos</span>([ ...todos, newTodo]); </span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">listRef.<span class="property">current</span>.<span class="property">lastChild</span>.<span class="title function_">scrollIntoView</span>();</span><br></pre></td></tr></table></figure><h1 id="6-自定义Hook"><a href="#6-自定义Hook" class="headerlink" title="6.自定义Hook"></a>6.自定义Hook</h1><ul><li>Hook名字以<strong>use</strong>开头</li><li>自定义Hook共享的是状态逻辑（数据处理过程），而不是状态（数据）本身。</li><li>只能在函数组件或其他自定义Hook的顶层调用Hook，不能在普通函数或逻辑语句中调用。</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { useState, useEffect } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">useFetch</span>(<span class="params">url</span>) {</span><br><span class="line"> <span class="comment">// 定义状态来存储数据、加载状态和错误信息</span></span><br><span class="line"> <span class="keyword">const</span> [data, setData] = <span class="title function_">useState</span>(<span class="literal">null</span>);</span><br><span class="line"> <span class="keyword">const</span> [loading, setLoading] = <span class="title function_">useState</span>(<span class="literal">true</span>);</span><br><span class="line"> <span class="keyword">const</span> [error, setError] = <span class="title function_">useState</span>(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line"> <span class="title function_">useEffect</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="comment">// 定义一个异步函数来获取数据</span></span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">fetchData</span> = <span class="keyword">async</span> (<span class="params"></span>) => {</span><br><span class="line"> <span class="title function_">setLoading</span>(<span class="literal">true</span>); <span class="comment">// 开始请求时设置 loading 为 true</span></span><br><span class="line"> <span class="title function_">setError</span>(<span class="literal">null</span>); <span class="comment">// 重置错误状态</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">const</span> response = <span class="keyword">await</span> <span class="title function_">fetch</span>(url);</span><br><span class="line"> <span class="keyword">if</span> (!response.<span class="property">ok</span>) { <span class="comment">// 如果 HTTP 状态码不在 200-299 范围内，抛出错误</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">`HTTP error! status: <span class="subst">${response.status}</span>`</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> result = <span class="keyword">await</span> response.<span class="title function_">json</span>();</span><br><span class="line"> <span class="title function_">setData</span>(result); <span class="comment">// 请求成功，设置数据</span></span><br><span class="line"> } <span class="keyword">catch</span> (err) {</span><br><span class="line"> <span class="title function_">setError</span>(err.<span class="property">message</span>); <span class="comment">// 请求失败，设置错误信息</span></span><br><span class="line"> } <span class="keyword">finally</span> {</span><br><span class="line"> <span class="title function_">setLoading</span>(<span class="literal">false</span>); <span class="comment">// 无论成功与否，请求结束，设置 loading 为 false</span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="title function_">fetchData</span>(); <span class="comment">// 执行异步函数</span></span><br><span class="line"> }, [url]); <span class="comment">// 依赖数组：当 url 变化时，effect 会重新执行</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 返回状态和函数，供组件使用</span></span><br><span class="line"> <span class="keyword">return</span> { data, loading, error };</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>在接口中使用</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> useFetch <span class="keyword">from</span> <span class="string">'./useFetch'</span>; <span class="comment">// 导入自定义 Hook</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">UserList</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">// 使用 useFetch Hook，传入 API URL</span></span><br><span class="line"> <span class="keyword">const</span> { <span class="attr">data</span>: users, loading, error } = <span class="title function_">useFetch</span>(<span class="string">'https://jsonplaceholder.typicode.com/users'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 根据状态渲染不同的 UI</span></span><br><span class="line"> <span class="keyword">if</span> (loading) <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>Loading users...<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line"> <span class="keyword">if</span> (error) <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>Error: {error}<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line"> <span class="keyword">if</span> (!users || users.<span class="property">length</span> === <span class="number">0</span>) <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>No users found.<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">ul</span>></span></span></span><br><span class="line"><span class="language-xml"> {users.map(user => (</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">li</span> <span class="attr">key</span>=<span class="string">{user.id}</span>></span>{user.name} ({user.email})<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="language-xml"> ))}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">UserList</span>;</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> React </tag>
</tags>
</entry>
<entry>
<title>React学习记录01</title>
<link href="/post/20250826190000.html"/>
<url>/post/20250826190000.html</url>
<content type="html"><![CDATA[<blockquote><p>从React15的文档开始，照着文档走一遍</p></blockquote><h1 id="1-创建应用"><a href="#1-创建应用" class="headerlink" title="1.创建应用"></a>1.创建应用</h1><p>安装create-react-app</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">npm install -g create-react-app</span><br><span class="line"></span><br><span class="line">create-react-app react-demo</span><br><span class="line"></span><br><span class="line">cd react-demo</span><br><span class="line"></span><br><span class="line">npm start</span><br></pre></td></tr></table></figure><p>降级react</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span> <span class="string">"react-demo"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"version"</span><span class="punctuation">:</span> <span class="string">"0.1.0"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"private"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"dependencies"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"@testing-library/dom"</span><span class="punctuation">:</span> <span class="string">"^6.1.5"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"@testing-library/jest-dom"</span><span class="punctuation">:</span> <span class="string">"^4.2.4"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"@testing-library/react"</span><span class="punctuation">:</span> <span class="string">"^9.5.0"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"@testing-library/user-event"</span><span class="punctuation">:</span> <span class="string">"^10.4.1"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"react"</span><span class="punctuation">:</span> <span class="string">"^15.6.2"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"react-dom"</span><span class="punctuation">:</span> <span class="string">"^15.6.2"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"react-scripts"</span><span class="punctuation">:</span> <span class="string">"3.4.4"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"web-vitals"</span><span class="punctuation">:</span> <span class="string">"^2.1.4"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line">......</span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><h1 id="2-JSX"><a href="#2-JSX" class="headerlink" title="2.JSX"></a>2.JSX</h1><p>js拓展语法，将dom作为js的变量，使用<code>{}</code>在dom嵌入js变量。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> element = <span class="language-xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">{user.avatarUrl}</span>></span><span class="tag"></<span class="name">img</span>></span></span>;</span><br><span class="line"><span class="keyword">const</span> element = (</span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">h1</span>></span>你好。<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">div</span>></span></span> </span><br><span class="line">);</span><br></pre></td></tr></table></figure><h2 id="2-1将元素渲染到DOM中-更新元素"><a href="#2-1将元素渲染到DOM中-更新元素" class="headerlink" title="2.1将元素渲染到DOM中/更新元素"></a>2.1将元素渲染到DOM中/更新元素</h2><p>通过创建一个新元素来更新元素</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">tick</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">const</span> element = (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>Hello, world!<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h2</span>></span>It is {new Date().toLocaleTimeString()}.<span class="tag"></<span class="name">h2</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span><br><span class="line"> element,</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'root'</span>)</span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="built_in">setInterval</span>(tick, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure><h2 id="2-2组件"><a href="#2-2组件" class="headerlink" title="2.2组件"></a>2.2组件</h2><h3 id="2-2-1函数式组件"><a href="#2-2-1函数式组件" class="headerlink" title="2.2.1函数式组件"></a>2.2.1函数式组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Welcome</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">h1</span>></span>Hello, {props.name}<span class="tag"></<span class="name">h1</span>></span></span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="2-2-1类组件"><a href="#2-2-1类组件" class="headerlink" title="2.2.1类组件"></a>2.2.1类组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Welcome</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">h1</span>></span>Hello, {this.props.name}<span class="tag"></<span class="name">h1</span>></span></span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="2-2-3渲染自定义组件"><a href="#2-2-3渲染自定义组件" class="headerlink" title="2.2.3渲染自定义组件"></a>2.2.3渲染自定义组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//上文的Welcome是一个自定义组件；组件名始终以大写字母开头</span></span><br><span class="line"><span class="keyword">const</span> element = <span class="language-xml"><span class="tag"><<span class="name">Welcome</span> <span class="attr">name</span>=<span class="string">"Sara"</span> /></span></span>;</span><br><span class="line"><span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span><br><span class="line"> element,</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'root'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure><ul><li>自定义组件可以并列和嵌套</li><li><strong>组件的props不可以修改</strong></li></ul><h1 id="3-状态和生命周期"><a href="#3-状态和生命周期" class="headerlink" title="3.状态和生命周期"></a>3.状态和生命周期</h1><p>State 与 props 类似，但它是私有的并且完全由组件控制。 </p><h2 id="3-1-函数式组件转换成类组件的步骤"><a href="#3-1-函数式组件转换成类组件的步骤" class="headerlink" title="3.1 函数式组件转换成类组件的步骤"></a>3.1 函数式组件转换成类组件的步骤</h2><ol><li>创建一个具有相同名称的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes">ES6 类</a>来扩展 <code>React.Component</code></li><li>向其中添加一个名为 <code>render()</code> 的空方法</li><li>将函数主体移至 <code>render()</code> 方法中</li><li>在 <code>render()</code> 主体中用 <code>this.props</code> 替换 <code>props</code></li><li>删除剩余的空函数声明</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Clock</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>泥嚎!<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h2</span>></span>{this.props.date.toLocaleTimeString()}<span class="tag"></<span class="name">h2</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="3-2-向类组件添加state"><a href="#3-2-向类组件添加state" class="headerlink" title="3.2 向类组件添加state"></a>3.2 向类组件添加state</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Clock</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="variable language_">super</span>(props); <span class="comment">//props 传递给基础构造函数</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">state</span> = {<span class="attr">date</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()};</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>Hello, world!<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h2</span>></span>It is {this.state.date.toLocaleTimeString()}.<span class="tag"></<span class="name">h2</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Clock</span> /></span></span>,</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'root'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure><h2 id="3-3-向类组件添加生命周期方法"><a href="#3-3-向类组件添加生命周期方法" class="headerlink" title="3.3 向类组件添加生命周期方法"></a>3.3 向类组件添加生命周期方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Clock</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="variable language_">super</span>(props); <span class="comment">//props 传递给基础构造函数</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">state</span> = {<span class="attr">date</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()};</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">componentDidMount</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">//在组件输出渲染到 DOM 之后运行</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">timerID</span> = <span class="built_in">setInterval</span>( <span class="function">() =></span> <span class="variable language_">this</span>.<span class="title function_">tick</span>(), <span class="number">1000</span> );</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">componentWillUnmount</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">timerID</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">tick</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="attr">date</span>: <span class="keyword">new</span> <span class="title class_">Date</span>() });</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>Hello, world!<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h2</span>></span>It is {this.state.date.toLocaleTimeString()}.<span class="tag"></<span class="name">h2</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>注意： </p><ul><li><strong>不要直接修改<code>state</code></strong>，更新<code>state</code>使用<code>setState()</code></li><li><strong><code>state</code>更新可能为异步</strong></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 由于this.props和this.state可能会异步更新,因此需要使用如下方法更新计算值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//该函数将接收以前的状态作为第一个参数，并将应用更新时的 props 作为第二个参数</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="title function_">setState</span>(<span class="function">(<span class="params">prevState, props</span>) =></span> ({</span><br><span class="line"> <span class="attr">counter</span>: prevState.<span class="property">counter</span> + props.<span class="property">increment</span></span><br><span class="line">}));</span><br><span class="line"></span><br></pre></td></tr></table></figure><h1 id="4-处理事件"><a href="#4-处理事件" class="headerlink" title="4.处理事件"></a>4.处理事件</h1><ol><li>React 事件使用驼峰命名法，而不是小写</li><li>使用 JSX来传递事件</li><li>必须显式调用preventDefault()来阻止默认事件</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数式组件</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">ActionLink</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">handleClick</span>(<span class="params">e</span>) {</span><br><span class="line"> e.<span class="title function_">preventDefault</span>();</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'The link was clicked.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">onClick</span>=<span class="string">{handleClick}</span>></span></span></span><br><span class="line"><span class="language-xml"> Click me</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">a</span>></span></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="comment">//常用做法</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">LoggingButton</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> handleClick = <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'this is:'</span>, <span class="variable language_">this</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{this.handleClick}</span>></span>Click me<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//较少使用</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Toggle</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="variable language_">super</span>(props);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">handleClick</span> = <span class="variable language_">this</span>.<span class="property">handleClick</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);<span class="comment">// 绑定this，必要</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">handleClick</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'this is:'</span>, <span class="variable language_">this</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{this.handleClick}</span>></span>Click me<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="5-条件渲染"><a href="#5-条件渲染" class="headerlink" title="5.条件渲染"></a>5.条件渲染</h1><p>React使用js中的if语句来判断控制显示哪些组件，例如</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Greeting</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">const</span> isLoggedIn = props.<span class="property">isLoggedIn</span>;</span><br><span class="line"> <span class="keyword">if</span> (isLoggedIn) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">UserGreeting</span> /></span></span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">GuestGreeting</span> /></span></span>;</span><br><span class="line">} </span><br><span class="line"><span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Greeting</span> <span class="attr">isLoggedIn</span>=<span class="string">{false}</span> /></span></span>,</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'root'</span>)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">//内联JSX语句方式</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Mailbox</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">const</span> unreadMessages = props.<span class="property">unreadMessages</span>;</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>Hello!<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> {unreadMessages.length > 0 &&</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h2</span>></span>You have {unreadMessages.length} unread messages.<span class="tag"></<span class="name">h2</span>></span></span></span><br><span class="line"><span class="language-xml"> }</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="5-1阻止组件渲染"><a href="#5-1阻止组件渲染" class="headerlink" title="5.1阻止组件渲染"></a>5.1阻止组件渲染</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用return null来隐藏组件</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">WarningBanner</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">if</span> (!props.<span class="property">warn</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 class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"warning"</span>></span>Warning!<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="6-列表渲染"><a href="#6-列表渲染" class="headerlink" title="6.列表渲染"></a>6.列表渲染</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">NumberList</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">const</span> numbers = props.<span class="property">numbers</span>;</span><br><span class="line"> <span class="keyword">const</span> listItems = numbers.<span class="title function_">map</span>(<span class="function">(<span class="params">number</span>) =></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">li</span> <span class="attr">key</span>=<span class="string">{number.toString()}</span>></span>{number}<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">ul</span>></span>{listItems}<span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">NumberList</span> <span class="attr">numbers</span>=<span class="string">{numbers}</span> /></span></span>,</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'root'</span>)</span><br><span class="line">);</span><br><span class="line"><span class="comment">//内联表达式</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">NumberList</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">const</span> numbers = props.<span class="property">numbers</span>;</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">ul</span>></span></span></span><br><span class="line"><span class="language-xml"> {numbers.map((number) =></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">ListItem</span> <span class="attr">key</span>=<span class="string">{number.toString()}</span> <span class="attr">value</span>=<span class="string">{number}</span> /></span></span></span><br><span class="line"><span class="language-xml"> )}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="7-表单"><a href="#7-表单" class="headerlink" title="7.表单"></a>7.表单</h1><h2 id="7-1受控组件"><a href="#7-1受控组件" class="headerlink" title="7.1受控组件"></a>7.1受控组件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">NameForm</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="variable language_">super</span>(props);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">state</span> = {</span><br><span class="line"> <span class="attr">input1</span>: <span class="string">''</span>,</span><br><span class="line"><span class="attr">input2</span>:<span class="string">''</span>,</span><br><span class="line"><span class="attr">textarea1</span>:<span class="string">''</span>,</span><br><span class="line"><span class="attr">select1</span>:<span class="string">''</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">handleChange</span> = <span class="variable language_">this</span>.<span class="property">handleChange</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">handleSubmit</span> = <span class="variable language_">this</span>.<span class="property">handleSubmit</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">handleChange</span>(<span class="params">event</span>) {</span><br><span class="line"><span class="keyword">const</span> target = event.<span class="property">target</span>;</span><br><span class="line"><span class="keyword">const</span> name = target.<span class="property">name</span>;</span><br><span class="line"><span class="variable language_">this</span>.<span class="title function_">setState</span>({ [name]: value });</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">handleSubmit</span>(<span class="params">event</span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'A name was submitted: '</span> + <span class="variable language_">this</span>.<span class="property">state</span>.<span class="property">value</span>);</span><br><span class="line"> event.<span class="title function_">preventDefault</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">form</span> <span class="attr">onSubmit</span>=<span class="string">{this.handleSubmit}</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">label</span>></span>Name:</span></span><br><span class="line"><span class="language-xml"> //输入框</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"input1"</span> <span class="attr">type</span>=<span class="string">"text"</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">value</span>=<span class="string">{this.state.input1}</span> <span class="attr">onChange</span>=<span class="string">{this.handleChange}</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">label</span>></span></span></span><br><span class="line"><span class="language-xml"> //多选框</span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"input2"</span> <span class="attr">type</span>=<span class="string">"checkbox"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"><span class="attr">checked</span>=<span class="string">{this.state.input2}</span> <span class="attr">onChange</span>=<span class="string">{this.handleInputChange}</span> /></span></span></span><br><span class="line"><span class="language-xml"> //textarea</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">textarea</span> <span class="attr">name</span>=<span class="string">"textarea1"</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">value</span>=<span class="string">{this.state.textarea1}</span> <span class="attr">onChange</span>=<span class="string">{this.handleChange}</span> /></span></span></span><br><span class="line"><span class="language-xml"> //下拉框</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">select</span> <span class="attr">name</span>=<span class="string">"select1"</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">value</span>=<span class="string">{this.state.select1}</span> <span class="attr">onChange</span>=<span class="string">{this.handleChange}</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"grapefruit"</span>></span>Grapefruit<span class="tag"></<span class="name">option</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">select</span>></span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">//提交按钮</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"Submit"</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">form</span>></span></span></span><br><span class="line"> );</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="8-状态提升-组合继承"><a href="#8-状态提升-组合继承" class="headerlink" title="8.状态提升/组合继承"></a>8.状态提升/组合继承</h1><h2 id="8-1-状态提升"><a href="#8-1-状态提升" class="headerlink" title="8.1 状态提升"></a>8.1 状态提升</h2><ul><li>当两个兄弟组件需要根据<strong>同一个变量</strong>来改变显示时，将共同变量定义到最近父组件的state中。</li><li>由于<strong>props是只读的，单向传递</strong>。所以父组件需要定义一个修改此共同变量的方法，并将此方法传递给两个兄弟组件。兄弟组件调用此方法来修改共同变量</li></ul><h2 id="8-2-组合继承"><a href="#8-2-组合继承" class="headerlink" title="8.2 组合继承"></a>8.2 组合继承</h2><h3 id="8-2-1-插槽"><a href="#8-2-1-插槽" class="headerlink" title="8.2.1 插槽"></a>8.2.1 插槽</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//默认插槽是 children</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">FancyBorder</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> {props.children}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">WelcomeDialog</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">FancyBorder</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span>></span>Welcome<span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">FancyBorder</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="comment">//具名插槽</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">SplitPane</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"flexBox"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> {props.left}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> {props.right}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">SplitPane</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">left</span>=<span class="string">{</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <<span class="attr">div</span>></span>left<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> }</span></span><br><span class="line"><span class="language-xml"> right={</span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span>></span>right<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> } </span></span><br><span class="line"><span class="language-xml"> /></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="8-2-2-实例化组件"><a href="#8-2-2-实例化组件" class="headerlink" title="8.2.2 实例化组件"></a>8.2.2 实例化组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Dialog</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"Dialog-Wrap"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">h1</span> <span class="attr">className</span>=<span class="string">"Dialog-title"</span>></span></span></span><br><span class="line"><span class="language-xml"> {props.title}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">h1</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">p</span> <span class="attr">className</span>=<span class="string">"Dialog-message"</span>></span></span></span><br><span class="line"><span class="language-xml"> {props.message}</span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">WelcomeDialog</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Dialog</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">title</span>=<span class="string">"Welcome"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">message</span>=<span class="string">"Thank you for visiting our spacecraft!"</span> /></span></span></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="9-深入JSX"><a href="#9-深入JSX" class="headerlink" title="9.深入JSX"></a>9.深入JSX</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以使用下列方式引用组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">PhotoStory</span>, <span class="title class_">VideoStory</span> } <span class="keyword">from</span> <span class="string">'./stories'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">MyComponents</span> = {</span><br><span class="line"> <span class="title class_">DatePicker</span>: <span class="keyword">function</span> <span class="title function_">DatePicker</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span>Imagine a {props.color} datepicker here.<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">BlueDatePicker</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">MyComponents.DatePicker</span> <span class="attr">color</span>=<span class="string">"blue"</span> /></span></span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="keyword">const</span> components = {</span><br><span class="line"> <span class="attr">photo</span>: <span class="title class_">PhotoStory</span>,</span><br><span class="line"> <span class="attr">video</span>: <span class="title class_">VideoStory</span></span><br><span class="line">};</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Story</span>(<span class="params">props</span>) {</span><br><span class="line"> <span class="keyword">const</span> <span class="title class_">SpecificStory</span> = components[props.<span class="property">storyType</span>];</span><br><span class="line"> <span class="keyword">return</span> <span class="language-xml"><span class="tag"><<span class="name">SpecificStory</span> <span class="attr">story</span>=<span class="string">{props.story}</span> /></span></span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="10-ref"><a href="#10-ref" class="headerlink" title="10.ref"></a>10.ref</h1><p>可以使用ref来引用子组件或DOM元素的实例。 </p><p>下面的代码<code>this.textInput</code>就是<code>CustomTextInput</code>组件的实例，在DOM挂载后的生命周期中调用了<code>CustomTextInput</code>组件的<code>focusTextInput</code>方法 </p><p><strong>注意：只有类组件，ref才会生效</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">AutoFocusTextInput</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line"> <span class="title function_">componentDidMount</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">textInput</span>.<span class="title function_">focusTextInput</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">CustomTextInput</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">ref</span>=<span class="string">{</span> <span class="attr">input</span> =></span> this.textInput = input; } /></span></span><br><span class="line"> );</span><br><span class="line"></span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p> 将上述代码<code>input => this.textInput = input;</code>暂时起名叫做<strong>引用DOM函数</strong>。 </p><p> 使用props由父组件将<strong>引用DOM函数</strong>传递给子组件的方式，可以使父组件获取到子组件的DOM实例。 </p><p><strong>这种方法类组件和函数式组件都可以使用，且可以多级组件传递。</strong></p><pre><code class="language-javascript">function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> );}function Parent(props) { return ( <div> My input: <CustomTextInput inputRef={props.inputRef} /> </div> );}class Grandparent extends React.Component { render() { return ( <Parent inputRef={el => this.inputElement = el} /> ); }}</code></pre>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> React </tag>
</tags>
</entry>
<entry>
<title>转载 - 伊理户结女：日本动画字幕组&压制组异闻录</title>
<link href="/post/20250826180000.html"/>
<url>/post/20250826180000.html</url>
<content type="html"><![CDATA[<p><code>2024年7月修订，迫害群友</code> </p><p>本帖主要写一些字幕组和压制组圈子的轶事，来源于本人亲身经历和各处见闻，以及各论坛、Q群、大佬闲聊家常和网络传说，不保证百分百准确，但求百分百娱乐。</p><p>第一，本贴不对中文压制组做定性评价，尤其不做负面评价，嘴下积德是中华民族传统美德。做人留一线，春秋笔法自行体会。另一方面，我也没闲得蛋疼去把每个组的片子和原盘弄来比较，太麻烦了，也没意义。我没提及的组织和个人，可能是因为我没看过，也可能是纯粹忘了。</p><p>第二，现在的 BD 原盘画质大多不错，所以对于不熟悉各种视频瑕疵的人来说，各组作品区别没有那么明显。更不用说那么多人还用着暴风影音 QQ 影音迅雷看看之类的垃圾播放器（包括 Potplayer 的默认方案），在这种情况下谈质量根本没有意义。至于视频瑕疵是什么，可以看看这些<a href="https://vcb-s.com/archives/category/kb">视频相关科普</a>。播放器只推荐以下几种：mpc-hc，mpc-be，调教过的potplayer，iina 和 mpv。</p><p>第三，<strong>视频画面处理脚本</strong>是影响出品质量的绝对因素，而编码/压制只是一个画面还原过程而已，正因为视频处理脚本会修复原盘存在的瑕疵，所以才有了 BDRip 画质优于 BD 原盘的可能，而纯裸压永远只会使画质劣化。比较压制编码参数意义不大，只要不是参数低的过分，对成品的影响远不如视频处理脚本。有些压制者为了避免别人对着参数碎碎念，干脆压制成品里不保留编码参数。</p><p>第四，再优秀的组都有翻车的时候，比如我收过作品的组里，没有一个能保证自己的出品完全不翻车的，包括我自己。因为写脚本时不可能预览到所有场景，总有意料不到地方的瑕疵超出预期，基本无伤大雅。</p><p>第五，除了 BDRip，我也顺便谈谈新番的 TVRip 和 WebRip 的情况，毕竟绝大部分时候大家看的都是新番，这一块还是很有意义的。要存一份收藏级 BDRip 的话，要等放流、要等压制、还要有字幕组发适配时间轴的外挂字幕才行，时效性实在太差了。在集齐七颗龙珠召唤 BDRip 和对应字幕之前，一份精心制作的WebRip是相当理想的替代品。</p><p>第六，本帖发布已超过超过 6 年，分别于 2020 年 5 月和于 2024 年 7 月进行翻新，目前主要翻新的内容是9楼的连载新番的字幕组相关内容。国内外压制组和个人的部分，除了多了几个隐退的，没什么大变化，因此只微调部分文本，可以直接跳过。翻新的原因是在 S1 看到这么一篇帖子<a href="https://bbs.saraba1st.com/2b/thread-2193315-0-1.html">【完全主观】锐评中文字幕组</a> ，故而觉得有必要修订一下了。本帖若有与 S1 帖子冲突的部分，以本文为准。本文未提及部分，自行参考 S1 帖子，但是由于我基本退休且没空面面俱到关注各组翻译质量，所以对S1帖子内容不做任何评价，请看官自行辨别。</p><h2 id="BD-压制组部分"><a href="#BD-压制组部分" class="headerlink" title="BD 压制组部分"></a>BD 压制组部分</h2><h3 id="中文压制御三家"><a href="#中文压制御三家" class="headerlink" title="中文压制御三家"></a>中文压制御三家</h3><p>mawen1250，雯姐，退休，天才压片少女，出道即顶级，造过的压片轮子可以绕 key 社 20 圈，公开了很多脚本，并且在 nmm 论坛著有大量压制教学贴。对于大多数中文压制者而言，mawen 都是直接或者间接的带路人，是圈内大前辈和类似信仰的存在。出品量大，质量上乘，内容齐全。一般来说，只要见到 mawen1250 的 tag 直接掏出硬盘就对了。尤其是与 Key 社相关的作品，不要问，闷头下载。我个人是从 mawen 的作品入 1080p 坑的。<br>江湖传说之一：雯姐学习压片技术时用的电脑配置是双核笔记本。<br>江湖传说之二：雯姐曾用 avs 做过 MAD。</p><p>ANK-Raws，主刀为小夜，saya the lolicon，十几年压片经验，有祖传修线秘术，作品不含真人特典。风格上 ANK-Raws 比另两家的线条处理力度更大一些，有着标志性的线条加深处理，噪点基本不保留，喜不喜欢看你个人。由于产量大，小夜并不是每一部片子都慢工出细活的，即使有的片子翻车也不奇怪。早年因为破坏性降噪和压制参数问题，受到过国内外一些压制者的猛烈吐槽，2013 年后的作品都有所改善。其大刀阔斧的修线技术主要体现在一些考验功力的片子上，比如臭名昭著的 Air。<br>江湖传说之一：”最早的小夜是低参裸压的渣渣，后来的小夜就是滥用降噪滤镜的渣渣，现在的小夜是在玩舰娘的高手，但是无论什么时候，小夜都是萝莉控。” by LittlePox @VCB-Studio<br>江湖传说之二：小夜曾经在QQ群文字直播，在大学课堂上用WindowsPhone手机上写 avs 脚本，现场做片。<br>江湖传说之三：”如果有人说 Air 的原盘画质是最烂的，那他一定是没见过天才麻将少女第一季的原盘。” by Saya, the lolicon @ANK-Raws<br>江湖传说之四：”如果希拉里不当选，我就是萝莉控。” by Saya, the lolicon @ANK-Raws</p><p>VCB-Studio，业界唯一组织化、流水线化产出的压制组，<del>大型跨国盗版组织</del>。人员齐整，内容齐全，产量可观，品质上乘，风格跟 mawen 大体一致，不少技术也继承自 mawen，也有很多独创技术。唯一公开招人并手把手带新人的组，大力推动 HEVC 实用化，并与姐太合作公开了几套分别适合不同情况使用的 HEVC 参数（<a href="https://github.com/msg7086/x265-Yuuki-Asuna">x265 - Yuuki 变异版</a>）和许多视频处理脚本，网站主页有很多科普和教程，入组有考核。VCB-Studio 的作品以 2015 年为界，此时间点之后的作品质量比起之前有跨越式提高。值得一提的是，VCB-Studio 设有近百人的分流组，各种大水管和盒子怪扎堆，因此其作品的下载速度和保种情况在日本动画这一块稳居首位。<br>VCB-Studio 历任队长是 LittlePox、Tautcony、Airium，现队长是七条天空。现役主刀人员：LittlePox、北上、ss（欠雷）、Amefs、W.Z.、Steinbarsch、Legend、Mu、中津静流；另有退休主刀人员少量；2019年新出炉主刀人员：七条天空，hakase、鲤伴、咸鱼希、断路器、MysteryG、飞翔、姬坂乃爱、Inflation。VCB-Studio 于2019年举行了大规模的压制课程教学，意在培养更多能够独立主刀番剧制作的技术人员，并提供了20多个参加压制课程的名额给有意学习压制的字幕组成员，为想提升画质的字幕组提供协助。2021年又通过培训课程又再次出炉一批主刀人员，成为目前的制作主力，不再一一列举。<br>LittlePox 的 U2 账号和动漫花园发布账号是公车号，发布大多是专门的发布员负责。目前所有作品的发布帖均附带制作人员名单，旧作品可以从发布帖的画质评价和碎碎念可以分辨实际主刀者。<br>江湖传说之一：”VCB-S 黑点千千万，LP 口嗨占一半。” by LittlePox, the Misakafan <del>who changed rip community, who changed financial investment circle</del>, who is addicted to Yurisa《LittlePox传》<br>江湖传说之二：发布帖有个纪律，在 U2 发的每个片的 mediainfo 文件路径里都要念叨一句 “saya is a lolicon”。<br>江湖传说之三：Airium 一个人就是一个军团，名下的盒子能打一半分流组。<br>江湖传说之四：VCB-Studio 的死亡诅咒，凡是与 VCB-Studio 合作过的字幕组，不久之后要么解散了，要么就沉寂了。（当然我们知道，事实上只是 VCB-Studio 活得太久，毕竟熬死别组就是胜利）</p><p>御三家有四个不是常识吗？</p><p>LittleBakas! ，组名来源于 Key 社作品 LittleBusters!，实际上是 mawen1250 和一些中文圈压制者组建的团体，具体名单未公布。LB 一直在研究神奇的 naobu 炼丹炉，凡是用 naobu 压的片都带有实验性质，画面线条非常清晰锐利且副作用小，从技术上来讲这是十分优秀的成果，从应用角度来看这种处理否值得推崇应该要辩证地看待，是否喜好这种风格取决于个人。LB 出品的绝大多数片子都是 YUV444P10 格式的，这是因为其使用的 naobu 模型是 RGB 色彩空间下处理的，所以成品保留 YUV444 规格可以避免 chroma 平面缩小造成的损失。 LB 的 naobu 出品局限性在于——炼丹算法毕竟不像人一样智能。根据雯姐本人的说法，有些画面还是没法很好的识别和针对性处理，要避免翻车只能接人工后处理。然而，雯姐本人基本退坑，像4K君名那样精雕细琢的作品是不可多见的。<br>P.S. 你的名字的母带就是 1080p RGB44 规格的，而 LB 的拉伸算法和后续处理显然比官方拉出来的 4K 原盘好得多，毋庸置疑，这就是全网画质最好的你的名字。</p><p>以上三组作品产量大，质量好，体积控制合理，又比较常见，所以最近兴起了御三家的叫法。由于御三家的头头都是星际争霸2的天梯大师组，称之为 星际三狗 或者 御三瞎 好像也没问题，毕竟电竞选手不需要视力。我这种手残玩家连青铜都上不去，得以保存视力（最近苦练一周终于升上白金）。<br><a href="https://sommio.moe/img/c3da/1.webp"><img src="https://sommio.moe/img/c3da/1.webp" alt="1"></a><br><a href="https://sommio.moe/img/c3da/2.webp"><img src="https://sommio.moe/img/c3da/2.webp" alt="2"></a></p><h3 id="常见退休状态中文压制组和个人"><a href="#常见退休状态中文压制组和个人" class="headerlink" title="常见退休状态中文压制组和个人"></a>常见退休状态中文压制组和个人</h3><p>ssnake @雪飘，有时也会挂着华盟的 tag 干活，退休，退组单飞，偶尔以 .Subbers Project 或者个人名义诈尸发片。其本人为骨灰级京蜜，从翻译到字幕再到压制一条龙，哦不，是一条蛇才对。其出品的有些片子规格过于豪华（包括字幕），内容非常齐全，以至于其他压制者懒得制作同一部作品了。举个栗子， EP蛇的紫罗兰 1080p、4k、AVC、HEVC 、CD和扫图全部规格齐全，连特典都带字幕。这种三峡级别大工程直接打消我开坑做京紫的念头，毕竟躺着等人喂饭难道不香吗？</p><p>ssnake 本人对此大大地谦虚了一番，大一总结： “从2012年起我就是一条没有激情咸鱼了，2016年就退出所有组，删代码跑路。虽然我翻译还是很好，但已经不是现在最好的压制者之一。如今的字幕组和压制组比以前有更好的翻译质量、字幕样式设计和特效、压制质量。旧时期的的轮子（技术和工具）就让他老死吧，新的更好。”<a href="http://bbs.acgrip.com/forum.php?mod=redirect&goto=findpost&ptid=3957&pid=41150">原帖为见此处</a></p><p>Holy @动漫国，退休，但还活跃于压制滤镜开发领域，造过的压片轮子可以绕地球两圈。Holy 所写的 HAvsFunc.py 移植并汇总了绝大部分 AVS 常用滤镜，与 mawen 的 mvsfunc.py 并列为 Vapoursynth 压片绕不开的两大基础工具。</p><p>Kagura，退休，似乎是mawen的前辈和校友，发片数十分可观，据说品质也很不错。不过由于 nyaa 亡了几次，不知道那些作品能不能找回来，也许TSDM和U2有些存档。</p><p>AI-Raws，创建者是木神油，隐退，出品会抹掉编码参数。其代表作品有 京阿尼黑历史 仰望天空的少女瞳中的世界Munto，此片 AI-Raws 用了特殊片源（HDTV或母带），所以画质比公开发售的BD会好不少。木神油也是漫游字幕组的成员，做过一些萝卜片，也以 LittleBakas 名义发过一些 naobu 炼丹炉作品，比如龙的牙医，还因为一些调侃被传出去成为谣言，所以在部分群体之间名声不好。目前主要以 AI-Raws 名义发布naobu炼丹炉的作品的人是 KN。</p><p>philosophy-raws, 也叫哲学组。主刀为 fch1993，退休。哲学组的一些压制脚本来自御三家，品质不错，推荐。其出品特点就是内容大而全，特色是附带的八国联军音轨。与其说哲学租是压制组吧，还不如说他是整理组或放流组。还有一点造成了很多人的疑惑：fch 放流时候用的发布名是 ANK-RAWS，但是这跟小夜的 ANK-Raws 并无联系。哲学组也搞了很多增补版，用 mawen 或 VCBS 或者 ANE 的作品补充了很多特典、CD、扫图和真人视频。但部分增补内容跟作品关联极小，导致体积膨胀、内容臃肿，也因此被部分观众诟病。<br>（举个栗子，哲学组的 ef悠久之翼 实际上是把 ANE 的 ef悠久之翼和 minori movie colletions 合并，然后添加一些真人特典、扫图和 CD。）</p><p>06_taro，退休，真·回老家结婚，也是大前辈级别的人物，造了很多压片轮子，著有十分有名的进阶压制技术劝退天书<a href="https://www.nmm-hd.org/newbbs/viewtopic.php?f=7&t=770">【教程】Masktool入门教程</a>。此天书被很多人视为压制水平的分界线，过了这一关就可以羽化而登仙了。所谓天书，其实并非难懂，而是内容太丰富，一口气难以吃透，理解消化还是有个长年累月的实践过程，故而劝退效果极佳，可谓用来过滤三分钟热度的人的神器。</p><p>dgwxx，也叫虾大，退休，大前辈级别的人物，nmm 论坛站长，造了很多压片轮子。年代久远，不甚了解。目前网上能找到的钢炼2009的BDRip，只有虾大出品的看着眼熟，故收之。</p><p>304， 退休，大前辈级别的人物，造了很多压片轮子。年代久远，不甚了解。</p><h3 id="部分中文圈-BD-压制组-个人"><a href="#部分中文圈-BD-压制组-个人" class="headerlink" title="部分中文圈 BD 压制组&个人"></a>部分中文圈 BD 压制组&个人</h3><p>Orca @Eggpain-raws， 被称作小夜正统传人，当做 ANK-Raws 来看就行了。最近好像压 AV 去了，也许馒头用户会见到这个组名。我个人没下载过蛋疼组的作品（AV和里番的画风那么差劲你们也看的下去？）。</p><p>yan04000985，个人压制者，早期曾经跟 LittlePox 学过 avs 脚本，根据其使用的 line-darken 手段，推测可能跟小夜学过一些技术。出品不多，但尝试过对一些不可救药的 BD 做一些修复，比如 Air 和 幸运星，敢对这倆 BD 操刀的人都是勇士。幸运星有三家可选，按照时间顺序是 Henshin， mawen1250，yan04000985，三家各有特色，想收藏的建议按照个人喜好将三家杂交相互补充。Air 的锯齿和交错问题简直感人，但也有常见三家可选，ANK-Raws，mawen1250，yan04000985，其中 yan 的版本他本人表示是逐帧分析交错模式并手动进行 ivtc 修复，实乃勇士中的劳模，依然是建议收藏者根据个人喜好进行杂交补充。</p><p>Seed-Raws，肉番爱好者，自称退休，不过偶尔也会诈尸。绝大部分情况只做 AVC-8bit 720p 规格内容，现在偶尔也出点 1080p 或者 HEVC 的作品，小体积收藏首选之一。由于 seed 不怎么公开露面，我至今不知其本体是谁……</p><p>异域11小队/SFEO-Raws/LowPower-Raws， 都是同一个（拨？）人的不同马甲。出品大多是 720p AVC-10bit 规格，体积小，而且经常会附带各字幕组的字幕；也有做少量 1080p AVC-8bit 作品，我没仔细比过，但看得出来常规的瑕疵修复处理都有做。不少人入坑就是从小队的 720p 开始的，比如我早期用笔记本的时候就存了很多小队作品，后来有台式机就洗成 1080p 了。</p><p>jsum，发布速度贼快，作品只在 U2 发布。裸压，原盘是什么样 Rip 就是什么样，体积较大，真人特典、CD、扫图等内容都很齐全。其发布文件列表常被 VCB-Studio 整理组拿来当做自家出品的查错对照组。</p><p>EMTP-Raws，组长是 sadouxi，压的子供向片子比较多。我没收过，不甚了解，不做点评。（2024年新瓜，代购骗人钱，疑似进局子了）</p><p>Mimi-Raws，主刀者是米娜法儿，退休，貌似现在是 LB 的一员，我收过其出品的迷糊餐厅和变态王子与不笑猫。</p><p>U3-Project， 主业不是压片，内容也一般只有正片。其从TOP级别的俄罗斯压制者 Kuramori 处获取过一些压制脚本进行套用，压制参数也非常俄式，出品质量相当于减配版本的俄罗斯组。U3 当年组织过一些募资合购 BD 项目，但因组长 Steven 闹了个超额募资并擅自挪用公款的大新闻，已入土。</p><p>Vmoe， 主要制作演唱会视频，其实主业是字幕特效，在字幕特效方面建树颇丰，对主流字幕软件 aegissub 开发有卓越贡献，Vmoe 的演唱会作品建议收藏。</p><h3 id="国内各字幕组及其下属的-Raw-组"><a href="#国内各字幕组及其下属的-Raw-组" class="headerlink" title="国内各字幕组及其下属的 Raw 组"></a>国内各字幕组及其下属的 Raw 组</h3><p>字幕组的主页是字幕，故而单独出品的 BDRip 大多以功能性为导向，不太追求画质修复，故不做评价。<br>因此有不少字幕组选择和压制组合作发布 BDRip，或者由自家的优秀个人压制者坐镇，比如 Holy 和 ssnake ，参见BD压制组部分。</p><h3 id="国外压制组-个人"><a href="#国外压制组-个人" class="headerlink" title="国外压制组&个人"></a>国外压制组&个人</h3><p>国外的压制组和个人信息不如国内的好获取，我就只列一下每组的代表人物，行文也会相对凌乱。其中俄罗斯压制组里有些优秀的压制人员在几个组之间反复横跳，不过大体上翻来覆去还是那帮人，因此在评价俄罗斯组时，往往不能简单的以组来认定好坏，而是得看具体的脚本主刀人，这一点可参见他们的发布帖内详。</p><p>Fussoir / Firesledge， 法国人，技术极佳，根据一些前辈的评价，是顶尖压制者之一。开源爱好者，会在成品里内封视频处理脚本。Fussoir 出品很少，几乎都是吉卜力作品，倒是很好的填补了这块空白。由于 nyaa 亡了一次，估计种子都丢失了，TSDM 倒是有些备份，不知道 U2 有没有他的作品备份。</p><p>Henshin，即日语中的变身，俄罗斯组，主刀为 Kuramori，一度退休但又诈尸了。被 tp7 吹为顶级压制，推荐。</p><p>ANE，全名为 Afternoon Nap Empire，即午睡王国，俄罗斯组，代表人员 tp7，退休，被 Kuramori 吹为顶级压制，造的压片轮子可以绕俄罗斯10圈，推荐。因为 tp7 设置了很高的加入门槛，所以挂着 ANE 名号的作品都不错。我收过 ANE 出品的黑岩射手、 ef 悠久之翼 、蜂蜜与四叶草、狼的孩子雨和雪等片。最近重看 ANE 压制的 ef 悠久之翼，在那个 8bit 向 10bit 过渡的时期出品的作品，即使用现在的眼光来看也相当优秀，瑕疵修复精准可靠，不得不感叹 tp7 真是无愧于当年的最强压制之名。<br>（ANE 的组名有点东西，一个慵懒的午睡王国却坐拥顶级压制的头衔，装逼于无形之中。）</p><p>THORA，代表人员为 adenozin，退休。从某个时间点之后的作品质量优秀，推荐。</p><p>NanoAlchemist，出品不多，优秀，推荐。凉宫春日推荐此版本与 VCB-Studio 的半成品版进行杂交（由于有人催番，凉宫这个已经快做完的项目被 LittlePox 列入永久黑名单了）。 为了哀悼2019年7月京阿尼大火事件，凉宫春日系列被移出 VCB-Studio 黑名单，全系列制作完成。</p><p>sergey_krs，典型的俄罗斯式优秀压制者，产量和品质俱佳，推荐。我收了他的 Wake up Girls 全集。</p><p>Beatrice-Raws，俄罗斯组，代表人员为 DJATOM 等几人，部分推荐。由于不熟悉该组其他成员的作品如何，我直接请 DJATOM 本人介绍 Beatrice 的成员。<a href="http://bbs.acgrip.com/forum.php?mod=viewthread&tid=3957&page=3#pid41160">参见此贴（帖子题文无关）</a></p><p>Yousei-Raws，俄罗斯组，部分推荐。大部分成员已退休，其中一位优秀的压制者 tonik 加入了 Beatrice，而创建者 Yousei 直接退坑抱孩子去了。</p><p>Reinforce，裸压，原盘啥样他啥样，也是不带真人视频或CD扫图之类的特典。虽然日常被各组拿来当做对照组吊起来婊，实际也没那么不堪，没得选的时候就下他呗。</p><p>Salender-Raws，据说是加强版的 Reinforce，也有人说他跟 Yousei-Raws 有一腿。我最早收过他们的爆漫王，后来洗成了 VCB-Studio 的版本。其他的片作品没下过，不了解。</p><p>UCCUSS，U2 的原盘放流者之一，应该也是俄罗斯人，有时候也压片，没仔细看过故不做评价。</p><p>QTS，出品不多，貌似早已退休，听说还行。有说是美国人，又有人说 QTS 是国人。我没下载过他的作品，不甚了解。</p><p>Neko-Raws，大概是俄罗斯组吧？没看过，不了解。</p><p><strong>Kuramori 点名推荐的个人压制者（2016年）：</strong><br><strong>Fussoir , Yurasyk(Chyrka) , Urotsuki , sergey_krs , mawen1250，Kagura , tonik@Yousei-raws , Desann@Yousei-raws , Iznjie Biznjie, niizk(nice rips for its time).</strong></p><p>P.S. 据万能的 MIR 所言，补充几点：DJATOM 应该是乌克兰人。tonik 挂过 ANE 名号。Urotsuki 也是 Beatrice 组员。</p><p>以上提到的大部分都是俄罗斯组或个人，但是推荐名单里如今还活跃发片的，大概只剩下 Beatrice 一组了。<br>俄罗斯组合中文压制圈的理念大体上是一致的，即<strong>在尊重原盘画风的基础上做数码瑕疵修复</strong>。不过俄罗斯组出品的体积普遍偏大，视频轨体积经常接近中文压制组的两倍（这并不一定代表质量更好）。此外，俄罗斯组也基本都不做真人特典，不带扫图或者CD之类的东西，齐全度往往比中文御三家差一些。</p><p><strong>tp7 早期曾写过一篇帖子狂艹业界</strong>：（这篇点评写的非常有趣，其对 ANK-Raws 的评价是 ANK-Raws 被 ANE 0分点艹 的起源） </p><p>原贴已死，谁如果有完整备份的话，请留个言。目前我只在网上找回这帖子的一部分内容：</p><blockquote><p>世上本无完美组<br>第二部分，制作组<br>发表于 2011 年 4 月 9 日 by tp7<br>省略大段赘述，此为个人意见，仅供参考</p><p>DECAY<br>生肉组，极其糟糕。惯用伎俩是对每一个片源都是相当强的锐化+lol 低码率。Banding（条状带）？锯齿？这些家伙根本不知道这些是个嘛。他想都不想就把所有东西都锐化至死。他所做的工作几乎都可以通过 ffdshow 后处理来完成<br>DECAY 的空境 1080P 的截图<br>（一张是片源，一张是 DECAY 的，一张是我压的，猜猜那张是 DECAY）<br>评分：0. 渣渣，弱爆了</p><p>ReinForce<br>另一个生肉组。这货不做任何反交错就 resize 交错的片子，然后还发到 TT 上，自此我们就不知道该用什么表情面对他了（皇上，你还记得当年大明湖畔的 blending 么）<br>评分：0.蠢哥纯爷们儿</p><p>ANK-raws<br>搞降噪的。首先，它使用相当强的降噪滤镜，然后编码成和其他组大小相近的尺寸。珍爱生命，远离 ANK（注：远离 2013 年之前 ANK-Raws 的作品）<br>评分：0. 此人已死</p><p>@Home(athomeencoding)<br>你们有多少人记得这组？一日，我打入他们内部潜伏至今。工作流程很傻×，几乎所有压制人员（14 个！！！亲娘嘞，有 14 个压片的！）根本不知道他们在干什么。所以我抱着怀疑的态度下了他们的 EVA 序，不过其实也不算太差。Banding 倒是不多，尽管用了 crf=20 来压<br>鉴于我怀疑他们今后只会放出爆炸头武士 v.9001，你还是不要关注他们了。不过我倒是挺喜欢和他们搅搅的<br>评分：2。可以看，不瞎眼</p><p>Yousei-raws<br>我认识他们很久了，只是不喜欢他们现在的状态。大概一年前这还是一个一人组，所有的压制都是不加滤镜，lol 高码率。现在有很多新成员（Kuroi-raws，REC，以及一些新手），自此有点小变化了。他们的目标是，发布一切，让别人没的发布<br>通常是全宇宙最好的生肉选择，但是，6GB 的 DVDrip……<br>如果没有 THORA 或是 Henshin 的，就下他们的好了。至少他们知道自己还有灭“artifact”那货的任务。所以，但凡他们的片子，几乎看到不到可见的 artifact（尽管有时候他们留下了 artifact，碟咋样压出来就咋样）<br>评分：3。巨魔（一般的码率？）</p><p>Salender-raws<br>他（们）没有主见，所以你可以粗略认为他是 Yousei-raws 的一员。总是压一些其他组不想做的乱七八糟的片子，然后说他用了 LOL 强滤镜，所以他很慢。没人见过他的压制，所以事实上我并不知道他丫到底在干些什么<br>甚至别试图想去对他说教，这不可能。他知道如何使用基本滤镜，处理一些基本 bug，但是……<br>评分:2.5。圣痕炼金士做成了渣渣</p><p>Zero-raws<br>[07:31:59] 这意味着 zero-raws 的出片速度> share/pd raws?<br>[07:32:29] 妥儿妥儿的<br>[07:32:46] 只要我们想出高质量片源就会出<br>[07:33:03] 但是太多渣渣对质量过于担忧了<br>评分：0.5。瞎搞一通，完全渣渣</p><p>Leopard-raws<br>评分：1.0。和 Zero-raws 一样，但是通常好一点，他们至少眼没瞎</p><p>Derp<br>你最好不知道他们给 LOLH BD 压制的人员昵称。小体积，尤其当噪点少的跟 LOLH 的 BD 一样时。所以他们有所有高降噪视频的优点<br>评分：2.0。不管怎样是现在最好的 LOLH 视频</p><p>Leopard<br>Yousei-raws 会重编码。重编码总是很傻很天真，但是至少他们知道码率很重要<br>评分:1.0。有时候是 720P 最佳的选择</p><p>Doki<br>好吧，我们来谈谈炼金士这片子和它的 artifact 吧。这些人真是超级无敌慢，所以我期待能有好东西<br>但是奇迹并未发生。亲，消停会儿吧，学点儿基础视频知识吧。走过路过，看一看比一比<br>顺带，几乎没有 banding。这在 fansub 中算是少见的，所以 +1 分<br>评分:2.5。依旧很差，但是比其他的稍微好点。看在字幕的份上 +0.5</p><p>THORAnime<br>好的么。比起其他组，他们真的很赞。我有点怀疑 adenozin 可能亲手弄了点新东西，但是他对滤镜的使用有时候令人叹为观止。当然啦，也可以做的更好。不过他压的每一部片子都太好了，以至于不敢要求他做的更好<br>尽管他们的旧作不算太好（事实上有一部分真的很糟糕），所以致 THORA 的追随者们：想要收集齐 THORA 的全部作品的娃儿还是洗洗睡吧<br>较新的一些几乎没有任何问题<br>评分:4.0。字幕 +0.5，章节信息 -0.5</p><p>Commie<br>我不知道他们是否只是为了快速出片，但是至少和 Doki 的炼金士一样渣渣。别一味求快，好学点儿，至少玛利亚狂热第一季用得上<br>评分:¬(???)-</p><p>Kira-Fansub<br>“嗨，这里是 Kira-fansub，我们为您提供有 shi 以来最快最渣的动画片源”。我不知道那些下了他们片子的人作何感想。真的，每个和我谈到 Kira 的人都说 Kira 渣渣。片子亦是。曾记否，文章开头那些炼金士的截图？好吧，我口胡了。它们不是源里截的——那 Kira-Fansub 的神级之作。还有，还有不作处理的 Shuffle!1080P！额的神啊，为神马！？<br>顺带一提，我和他们的新压制人员 Quazza 进行了亲切会谈，貌似还不错。我并不喜欢那些自称“压制大师”的人，但是这家伙从氛围上来说是知道他对视频做了什么的。我那时候有点菊花疼，所以他可能觉得我是个超级麻烦气人的货，但是好吧，可能每个人都这么想<br>然后我还是给出 1.5 分。为啥？1）字幕。2）Quazza。3）鉴于他们的源真的好所以也不至于太糟糕<br>评分:1.5。Nuff 如是说</p><p>Mudabone<br>重编码的。还是那句话，重编码渣渣。为什么要用有损渣制造更损渣？<br>好吧，其实没人管这货。所以就由着他为了那些 2011 年了电脑还没法放 1080P 或是高码率 720P 的人做好了<br>由于 Arakawa subs，我知道做 SHAFT 的东西码时间轴有多麻烦<br>评分:1.5</p><p>gg<br>除了我和 Yousei，TheFluff 是唯一个试图对空境 BD 做些什么的人。他的滤镜不是最佳选择，但他至少尝试了。但是[哔——]，学点 masking，那些过度锐化的线条还有难看的污点有时候让我咆哮。<br>他们的 BB 压制倒是不差<br>评分:3.0。人人都爱 gg，我也爱</p><p>UTW<br>我曾经在 CoalGirls 的站点和__ar 讨论过俺妹的 ED 处理。这货似乎是个新手，但我还是希望他能学点东西，最终成为一名出色的压制。至少他不傻。此后我其实有点喜欢他<br>不管怎样，UTW 的 BD 压制真的很差劲。现在是 2011 年，谁会在乎多个 100~200MB。有很多很多 banding<br>评分:2.0. __ar，加了个油！</p><p>Chihiro<br>不差。事实上，对于某些 BD（记得我们至今没谈过 DVD 吧，因为我通常不关心 DVD）他们做的还是很合理的。不多说了，因为他们不太活跃，只是“一般般”<br>评分:2.0。章节信息还是不行</p><p>RGGenshiken<br>额的神啊。你们为什么要移除编码信息为什么！我当然知道这样做没有任何不妥，但是为什么！？<br>为什么要加那么多滤镜！？我知道一点 Genshiken 压制人员的事情——他们都清楚自己在干什么，都很棒，但是为什么！？<br>不管肿样，如果你不拿着他们的片子去和片源或是其他好的版本比较，还是值得一看的。尤其是变态（Dez-u 是最差的压制，但是 lol 变态的 DVD 啊）<br>顺带一提，他们和 Henshin、artyfox 的合作制品真心不错<br>哦对了，Reddog is one of the biggest retards of runet. 这句我真不知道怎么翻……看着办<br>评分:2.5。好大好大的制作组，不管你喜不喜欢</p><p>Henshin<br>史上最强压制者。他甚至比 THORA 更好，但是没有字幕——仍旧是 4.0 分。而且他做的片子真的是真的是真的是很少。出于某些原因，我觉得他是个使用者，而非脚本写手，所以我比较怀疑他是否能解决那些没有在 doom9 上讨论过的问题。哦哦哦，他是那种对每个场景都会用不同处理的人<br>评分:4.0. Kuramori（黑森林？）</p><p>PL<br>天啊。我和这位交谈过，他真是太特么厉害了。他的压制可能不是最好的（就如他正在做的那些片子），但是天啊，他的想法有时候让我震精。真的，他太异想天开。但还是那点，出品数量极其少。有时候他的片子半点 banding 都没有，即便是渐变场景也没有（这个太难了）<br>评分:4.0. sasha990（继续问这是啥？）</p><p>Tormaid<br>目前为止我还是很明显的喜欢他的。他不算太好（好的压制不用 megui），但是他至少知道圣诞之吻（アマがミ）需要抗锯齿，banding 是个啥，还有其他 artifact 相关的脚本<br>几乎和__ar 情况相同。我真心希望有朝一日他会变好。现在他只是个新手罢了<br>还有啊，他做 AB! 的滤镜让我相当菊紧。线条黑化并不能让片源看上去更好<br>评分:2.5。孩纸，我看好你哟</p><p>Coalgirls<br><3<br>搞笑组。或多或少是靠谱的片子起家，然后变得彻底乱来，现在几乎渣渣。首先，我想谈谈他们的四大天王<br>压制人员 </p><ol><li>Coalgirl – 曾经是个“OK”的压制着，但是现在压成可笑的小码率还声称“啊这个还是很好的”。他的（她？）clannad v2 和 v1 比起来是彻底的失败。而且，你不要比亮场景，而应该对比暗场景。很难把亮场处理地很糟糕 </li><li>ChrisK – 他唯一的作品就是空境。而且是没加滤镜的 1080P。50GB 的没加滤镜的渣渣。你丫的氪金狗眼被 789 闪瞎了么！？顺带，对比被他们放在了自己的页面上 </li><li>Cyras – 新压制人员，又来，没有任何视频知识。发布了渣渣 Phantom（照旧，细节丢失，banding）还说“啊哈，片源很渣的，乃们不要来黑窝”，巴拉巴拉。卧槽，你丫理应修复之。码率依旧很低。MH 同样很难看，检查一下 bakabt 进程 </li><li>Tenshi – 丫不懂怎么压片。完全不懂。但是他还是 CGi 最好的部分，因为他压的片子码率看得过去（他只处理看上去不错的片源，甚至不加滤镜）。反话有木有<br>然后关于这个小组本身的话<br>孩纸们（女孩纸、基佬，肿样都好），你们确定你知道 CRF 是个啥？它连个蛋都不是！你可以用 crf=13,14,15,16,17,18 对源处理，然后得到相同的尺寸，总体相同的质量。你知道 mbtree/aq-mode/aq-strength 是肿摸影响码率的么？别再 YY 这种 CRF 式的做法了！<br>最后——我不知道为什么 CGi 有用最多的激进而且纱布垃圾的支持者<br>例子：<br>我[哔——]，我从不做任何 fansub<br>评分:2.0. Tenshi</li></ol><p>Elysium<br>卧草泥马勒戈壁 </p><blockquote><p>看这里看这里看这里，在 Elysium 字幕组，我们非常自豪地提供各个方面的最佳产品<br>当然通常情况下，小体积意味着低质量。但是，在我们这里，一切皆有可能<br>放你丫的 P<br>你懂的，我不会再说“都 2011 念了谁还在乎文件大小啊”。但是真的，如果你在乎做甚鸟 1080P？做同样大小的 720P 吧，它怎么都比你那坨 1080P 看着舒服<br>例如——刀语最后几话（4/5），我啥 deband 滤镜都没用。啥都没。为什么你们的 1080P 看上去更糟糕<br>为什么要选择 DECAY 的片源？他是动画发布届最渣的压制没有之一，为什么！？<br>评分:0.5。停止[哔——]的 warp 锐化</p></blockquote></blockquote><p>国外组我知道的就这么多，基本都是我经常收的或者眼熟的，还有部分道听途说的。个人日常收片，中文压制组和俄罗斯组基本能满足我的需求，完全没有动力再去找别的组。实际上中文压制组和俄罗斯组应该就是日本动画这块全球最大的两拨压制势力了，其他国家的规模都比这二者小得多，优秀者也少得多。</p><h3 id="韩国组"><a href="#韩国组" class="headerlink" title="韩国组"></a>韩国组</h3><p>韩国组那些叫压制？那叫 PS 还差不多。涂鸦式调色 + 核弹级暴力降噪 + 不抑制副作用的破坏性锐化描线，饱和度和对比度一拉，动画公司看了都想打人。<br>因为过于夸张的 PS 方式，因此收藏级 BDRip 不推荐任何韩国组，包括不限于 Moozzi2 和 Naoki 等等。<br>此负面评价主要是技术方面，在其他方面 Moozzi2 应该算是个不错的生产者。</p><h3 id="日职"><a href="#日职" class="headerlink" title="日职"></a>日职</h3><p>日职即日本职人，凡是组名里带有日文的发布者都是日职，包括不限于 Lv.1，雷击xxxxxx（认不全假名）、エミ、Link 等等。<br>日职的作品我从没下过，但蛮多前辈评价都不高，没得选的时候可以拿来凑合吧。</p><h2 id="新番片源相关"><a href="#新番片源相关" class="headerlink" title="新番片源相关"></a>新番片源相关</h2><p>这一块基本上没人谈论，所以我单独开一层楼谈谈总被忽视的几个问题。非字幕组生产者可直接跳过。</p><h3 id="TV-片源组（过气）"><a href="#TV-片源组（过气）" class="headerlink" title="TV 片源组（过气）"></a>TV 片源组（过气）</h3><p><strong>重要警示：TV 源多为 mp4 封装，由于 mp4 格式本身的问题，直接用 mp4 打轴会导致1帧的偏差，此问题在检查画面字时候可以发现。</strong><br><strong>解决方法：先用 mkvtoolnix 将 mp4 片源 remux 为 mkv，再用 mkv 源打轴进行后续步骤。</strong></p><p>Ohy-Raws：一般简称 O 组，特点就两个字，快，全。日本的电视台放送后半小时以内就会发布到 nyaa 上，长时间来一直是是各字幕组的主要片源，现在地位虽然有所动摇，但还是被用的挺多的。</p><p>Leopard-Raws：一般简称L组，比 O 组慢一点，体积大一点。不过TV源那个质量，体积大一点也只是五十步笑百步，并没有多少实质性的区别。</p><p>TV 片源有着许多无法补救的问题：赞助商广告，画面文字广告，电视台水印（片源组一般都会去掉），码率严重不足导致画面瑕疵，去交错后的帧序跟 BD 并不完全一致，还有各种花屏烂帧等等。因为这些问题，<strong>现在 TV 源基本被淘汰了。</strong></p><h3 id="Web-片源组"><a href="#Web-片源组" class="headerlink" title="Web 片源组"></a>Web 片源组</h3><p>HorribleSubs，会从各种在线网站扒画面干净的WEB源，内封英文软字幕。由于画质比 tv 源好的多，一度被很多字幕组拿来替代 O 组，作为制作熟肉的片源。曾经，强调一下是曾经，<del>H 组从 CR 扒的源全部都是二压过的，其标志为视频帧率都是 23.81fps</del>。从 2018 年开始，这个问题得到解决，二压问题也不存在了。H 组还另有一个问题，来自 CR 的片源的音轨有几十毫秒的 delay 值，而这个delay值是不会被字幕组广泛使用的 aegisub 3.2.2 版本识别的。这会导致字幕组用这个片源打轴时台词有大约1帧的偏差，但画面字时间是准确的。虽然影响不明显，但客观存在。解决方法也很简单，用 eac3to 把音轨抽出来，再和视频轨重新用 mkvtoolnix 封装，即可修复 delay。或者用 megui 自带的工具 HDStreamExtractor 抽音轨重封装，二者原理都是一样的。</p><p>Erai-Raws，片源跟 Horrible 基本一致，内封多国语言软字幕，但是覆盖面比H组小，速度也慢一些。在 H 组的二压事件被发现后，一些字幕组抛弃 H 组改用 E 组的生肉作为片源。不过现在<strong>大部分</strong>片子，两组片源来源一致，连视频规体积和压制参数一致，抽出来算 CRC32 也是一样的。只有小部分片来源不同，<strong>使用前最好两组对比一下看哪个更好点</strong>。E 组的音轨问题与 H 组一致，因此推测音轨延迟问题出在 CR 身上；此外，E 组花屏概率比 H 组高一点，热度也低很多，这导致 E 组的片子时间过久一点就很难下载。</p><p>现在，<strong>E 组和 H 组的片源只要互补使用，大体上就能取代 O 组和 L 组，成为字幕组做片的新片源</strong>。web 源画质远远比 tvrip 源要好，也比未压制过的 ts 录制源好。除了欠码导致的一些瑕疵外，web 源没有tv源的任何缺点。欠码导致的瑕疵在一定程度上是可以修复的，除非欠码到画面全糊了，这个实在没法救。<strong>web 源跟 BD 的帧序也一致，做 BD 字幕时调轴特别方便。</strong></p><h4 id="后-H-组时代"><a href="#后-H-组时代" class="headerlink" title="后 H 组时代"></a>后 H 组时代</h4><p><strong>从 2020 年 10 月开始，HorribleSub 甩手不干，但也没什么好担心的。总体来说呢，WEB源大多来自Crunchyroll，Funimation，亚马逊，Netflix，AmebaTV，甚至包括DLsite，只要这些源还能扒，谁发出来都一样，只是效率和齐全度的区别罢了。除了 Erai-Raws 光速上位以外，还有不少组顶了上来，比如老牌英语字幕组 PuyaSubs! 和新冒出来的 Subplease 很快接过大旗，还有经常发剧场版源的 DragsterPS，这些都是常用的片源渠道</strong></p><h3 id="连载新番的字幕组和压制组"><a href="#连载新番的字幕组和压制组" class="headerlink" title="连载新番的字幕组和压制组"></a>连载新番的字幕组和压制组</h3><p><code>2024 年 7 月翻新</code></p><p>本部分初稿撰写于 2018 年，由于时间跨度长达 6 年，不少当年尚有余温的老牌字幕组如今坟头草丈高，而当年的一些新兴组织目前也已成长为中流砥柱。但凡文中提到的组，在动漫花园或者萌番组搜索老番的时候或多或少都能见到。本文并不会用大篇幅具体评价字幕组的翻译质量，而是更侧重于介绍各组的历史、产量、规格、作品留存情况，还会提及部分成员的事迹。</p><p>LoliHouse，中文名是萝莉工坊或者萝莉屋，创建者&吉祥物&看板娘为诗音，成员主要是一些压制者和字幕组后期人员。现如今少数依然还活跃的压制组，主要做新番连载的 WebRip，也会制作部分动画剧场版和 BDRip，在推动新番 1080p 化和规范化方面影响深远。其技术风格与 VCB-Studio 类似，画面瑕疵修复优秀，但体积只比 BD 720p 稍大，十分有性价比，可以作为 BDRip 的暂时性替代品。<br>LoliHouse 自己不生产字幕，但与几乎所有尚存的活跃字幕组都保持着良好的合作关系，其发布的作品字幕都来自于看板娘跟字幕组的 py 交易<del>（援交）</del> 和部分版权字幕。在产出作品的同时，LoliHouse 也为字幕组提供视频压制的技术支援，在一周年纪念时公开了全套压制工具链、压制参数和一些视频画面处理脚本；2019 年初，协力 VCB-Studio 举办面向字幕组成员的压制技术课程。2020年，LoliHouse 发布了三周年纪念公告和成员表，根据成员表，约其近半组员身处海外。目前，LoliHouse 推广的 1080p 内封字幕和子集化字体的作品规格基本成为主流。<br><a href="https://share.dmhy.org/topics/view/599634_LoliHouse_LoliHouse_5th_Anniversary_Announcement.html">LoliHouse 5周年公告及所有相关信息</a></p><p>澄空学园字幕组，老牌大组，作品繁多，质量优秀，发布过大量的 BDRip 和外挂字幕。组名来源《秋之回忆》的澄空学园，萌娘百科上可以查到其看板娘为久远寺澄空。众多人的信仰，在相当长的一段时间里被看做字幕组的领头羊。曾经澄空是推动新番规格从 rmvb 走向 720p mp4 的先驱，也是最早把新番规格升级为 1080p 的组之一，但后来又缩回内嵌 720p 了，产量也大幅下滑。曾问其原因，答曰，人手问题和懒癌发作<del>（业界日常药丸）</del>。但现在都 2024 年了，还经常使用录制 TV 片源做 720p 内嵌的新番，似乎也不怎么放出外挂字幕，令人遗憾。目前基本沉寂，零星有少数作品发布。</p><p>华盟字幕社，最古老的几个日本动画字幕组之一，作品繁多，质量优秀。华盟与澄空有相当程度的人员重合，故有 自古澄空叉华盟，偶尔澄空叉雪飘 之说。目前基本沉寂，零星有少数作品发布，作品规格与澄空基本一致。其一位在日的主力成员因为京都府警捉人事件上了新闻，并从此隐退。华盟目前基本沉寂，偶尔诈尸。</p><p>雪飘工作室，老牌大组，产量可观，质量可靠，经常跟澄空或华盟合作，作品多大有外挂字幕或者BDRIP。飞龙骑脸字幕组是雪飘部分成员的马甲。目前基本沉寂，零星有少数作品发布。</p><p>诸神字幕组，老牌大组，中日双语特色，组内工作流程规范而冗长。早期作品质量不稳，根据制作人员有明显上下限差距，但在 2013 年规范化后字幕质量优秀且稳定，也是最早规格全面升级至 1080p 的组之一，发了不少 BDRip。不过最近两年比较阳痿，出品数量较少。除此之外，诸神还是少有的正儿八经地在发布站提供商业合作的字幕组。诸神有一段时间因为花园的评论区骚扰而停止在花园发布，几乎从大众视野消失。目前依然有作品产出，只是产量很少，速度也比较慢。</p><p>届恋字幕组 / TD-Raws，组长是太刀，人称刀姐，一条龙，做起片来一人就是一个组，主要做些 LIVE 之类的作品，参加过 vcb-s 压制课程，作品基本绑定 LoliHouse 合作。太刀主要作为后期活跃于千夏字幕组，参与了诸多的 -1day 剧场版作品的制作，长年劳模。<br>P.S. 由于群友日常乐于舔舔刀姐，故 TD-Raws 又名 舔刀-Raws。<br>P.S.2. “还是拼刺刀适合老子。” by 太刀, the kotachi who changed Airota《太刀传》</p><p>动漫国字幕组，大妈国，毒蘑菇，菊花台。老牌大组，产量可观，质量优秀。动漫国发过很多 BD和外挂字幕，作品已全面提升为 1080p 规格，主力后期之一的小圣是业界著名跨组劳模，长年与 LoliHouse 合作发片，出品的BDRip 和外挂字幕比较齐全。目前动漫国产量依然可观，是少数尚且活着且保质保量的组之一。</p><p>千夏字幕组，Airota，老牌大组，产量可观，质量可靠。在萌娘百科显示，千夏字幕组的原创人设看板娘叫风晴千夏，组名则来自动画 Air 和 otaku 论坛的杂交，组名源于 key 社作品 Air 中的 一千个夏天。千夏的周年纪念日是动画 CLANNAD 开播的那天，真·硬核 key 系字幕组。一段时间里经常 -1day 爆肝剧场版，作品早已全面升级为 1080p 规格。千夏的两位主力后期太刀和错党长年与 LoliHouse 合作，发布过许多 BDRip 和外挂字幕。千夏有一位比较有名的翻译者 flankoi，在翻译领域耕耘十余载且质量出众，百科和知乎都可以搜到其信息，其作品中观众比较熟悉的有《莉兹与青鸟》、《终将成为你》和《摇曳露营》等。目前千夏字幕组产量依然可观，是少数尚且活着且保质保量的组之一。<br>P.S.：百冬练习组是错党solo片子用的发布名。</p><p>喵萌奶茶屋，成立于2017年的新兴字幕组，组长 Poi 曾在群里豪掷 2400元 红包忽悠组员做片。喵萌奶茶屋的产能可观，质量可靠，自诞生起就与 Lolihouse 长期合作，全部作品都有 1080p 规格，还有大量的BDRip和外挂字幕，并且所有作品在 github 页面提供下载。在萌娘百科的字幕组条目里，喵萌奶茶屋是万红丛中一点绿，各种介绍细致入微，而其他组织的条目大多无人编辑。除了普通新番，喵萌也曾做过一些只能发在 nyaa 里区的你懂的作品。目前喵萌奶茶屋大概是产量最大的日本动画字幕组，也是唯二在视频网站版权动画大潮后建立且壮大的字幕组，当年的新秀如今可称为老牌大组，比较知名的成员有主力后期 MIR 和 主力校对Ronny。<br>P.S. “奶茶屋是近两年新兴的字幕组，产量和质量都还可以，这些鸡碎的事情(注：U3事件江湖撕逼)，不要影响我们，原盘才几个钱？” by Poi, the iyuudachi who changed Fansub community《Poi传》</p><p>SweetSub，为了制作 Flipflapper 而成立于 2016 年的新兴字幕组，每季度出品不多但是质量优秀，小而精的典范，没有中文名，习惯称作甜甜组。组长是 tastysugar ，人称糖姐姐，有着奇怪的选片口味，稳定每季度做一到两部片子。甜甜组成立之时就接受 LoliHouse 的支援，天生所有作品都是1080p规格，全部作品都会发布 BDRip，并且字幕都在 github 上公开分享。目前甜甜组经过多年的成长，是唯二在视频网站版权动画大潮后建立且壮大的字幕组，维持着稳定优质的产出。<br>甜组逸闻：当年国家队的译名众口难调，甜组通过考据不仅为剧中名词敲定了信达雅的译名，还猜中了的原标题的意图，钦定了《比翼之吻》的译名，番剧完结后此译名成为主流。<br>江湖传说：甜甜组做来自深渊的字幕时使用亚马逊片源，但是有一周亚马逊拖更，导致字幕组无源可用，于是糖姐姐驱车前往亚马逊总部，怒斥连载拖更的问题。从下周开始片子就准时上线了。赞美糖姐姐！</p><p>茉语星梦字幕组，产量可观，质量稳定。组长&主力翻译是傻瓜三世，已耕耘于字幕领域近十年的业界劳模，自己翻译自己打轴，以翻译动画为学日语手段，以加班为生活乐趣，以异文化传播者为目标的略带中二正义感的有产阶级分享斗士，最近沉迷于在爱撕衣跟潭友撕逼以致于荒废朝政。茉语星梦早期日常与DHR和小圣合作，新番基本与 LoliHouse 合作，有少量合作 BDRip。目前傻瓜三世主要在动漫国做片，也偶尔会在澄空学园干活，反而很少用茉语星梦发片了。</p><p>豌豆字幕组，老牌字幕组，又一个小而精典范，产量、速度、质量兼优。组长&主力校对是海底，也是在日本动画领域深耕十年的劳模，自己翻译自己打轴，并且也在诸神字幕组打工。近几年豌豆字幕组的压制基本委托给小圣 和 LoliHouse，因此全部作品都早早规格升级为 1080p，有许多合作出品的 BDRip 和外挂字幕。</p><p>风之圣殿，主要后期为 tnti 和小圣。小圣作为劳模后期活跃于动漫国、豌豆、茉语星梦等多个字幕组，也经常跟 LoliHouse 进行 py 交易。tnti 也是 TSDM 字幕组的压制，经常实验各种神奇的规格，比如把从 480p 到 1080p 甚至 2160p 的分辨率跟 VP9 和 HEVC 的编码方式进行排列组合，一下子发布近10个版本的种子，不考虑实用性，仅从视觉上拉看还是蔚为壮观的。<br>P.S. “好了，这季度我要失业了。” by 小圣, the Saint who changed Fansub Community《小圣传》 （注：指当季做片没达到10部）</p><p>悠哈璃羽字幕社，老牌字幕组，日本动画字幕圈唯二的大学社团字幕组，来自华南农业大学。另一个是西农YUI字幕组，来自西北农林科技大学。后来西农YUI字幕组已与悠哈璃羽字幕社合并。虽然因大学社团背景而有一些人员更替，但不少中坚成员都老当益壮。悠哈璃羽的产量可观，因为与 LoliHouse 长期合作，早早抛弃 720p 内嵌转向 1080p 规格，近年来几乎所有作品都有外挂字幕的 BDRip。</p><p>DHR动研，老牌大组，在一段时间内产量可观，质量可靠，也有部分 1080p 新番，但只发布过少量 BDRip 和外挂字幕。目前基本沉寂，我印象中很久没见过DHR发布新作品了。</p><p>幻之字幕组 & Mabor-Raws ，有一段时间产量尚可，质量不稳定，经常与 MGRT 合作抢发剧场版。幻之大部分作品只有 720p 内嵌规格，只有 Mabor-Raws 发布的有 1080p 规格。目前已沉寂多年。</p><p>MGRT，全名是 Music Garden Rip Team，通称芒果乳糖，熟人称之为妈个乳头 。MGRT 的主要活跃人员是翼格小宝贝和叶叔。叶叔主要业务是征战雀坛，副业也买碟做片，以前也跟幻之等组一起肝剧场版，速度很快，不过只压正片。翼格小宝贝日常研究视频规格、摄影设备和色域之类的数字图像相关知识。</p><p>恶魔岛字幕组，老牌字幕组，隐退于 2016~2017 年间，据说已被招安。整组目测就三个人，两个翻译（TL旧民 和 暗翼 ）外加一个后期（ Aoi ），做片配置为每个片一翻译一后期的极简组合。由于恶魔岛人少而产量和质量都很可观，一度有不少人怀疑 Aoi 是一个组织，真实诠释什么叫做 “我一个人就是一个组”。恶魔岛比较有名的字幕作品中，少女与战车有十分详细的考据和注释，据说是因为其翻译 TL旧民 参过军，所以了解比较多。恶魔岛只有 720p 作品，但也有很多质量不错的外挂字幕流传。</p><p>异域字幕组，老牌字幕组有一段时间产量挺高，后来因几位组员受到京都府警捉人事件影响，改名为八重樱字幕组，出品也逐渐减少。异域字幕组跟异域11番小队有紧密联系，故其字幕作品大多以 BD 外挂字幕的形式留存于世。异域的《自新世界》是其比较有名的作品之一。目前已沉寂。</p><p>KNA字幕组，名字是ANK倒过来写，所以不少人员跟 ANK-Raws 有关联。从规模和质量来看，KNA本应成为大组，但仅仅一年多的活跃时间只能形容为昙花一现。在京都府警捉人事件中受到严重打击，接近十位组员被捉去写保证书，其中一人曾表示“拘留期间猪排饭是没有的，不过有便利店炸鸡饭套餐”，之后KNA直接宣布解散。KNA 活跃时期多肝首发，解散之后也有一些成员散布于其他字幕组继续活动。可谓生得绚烂，死得壮烈。</p><p>轻之国度字幕组，老牌大组，也不知道跟轻之国度轻小说论坛有没有依附关系，但是在轻国论坛有轻国字幕组的专栏。细心的观众可能会发现，有些片子轻国字幕组几乎是紧跟B站更新的时间发布，且字幕文本相似度极高，这是因为轻国字幕组最近几年是有大量人员被B站招安，且可以提前看到片源。轻国字幕组的作品是万年 720p 内嵌规格，也没啥外挂字幕流传。目前基本沉寂，偶尔有少量作品发布。</p><p>漫游字幕组，即 POPGO，与其相关的组织还有漫游 freewind，挂着漫游名号的组织之间关系复杂，且恩怨众多，难以理清。根据网络传说，有个别漫游成员因为满嘴跑火车得罪不少人，名声极差。不过有三件事情是已知的：第一，漫游主要做萝卜片，高达和攻壳机动队等等；第二，漫游字幕组人均身价过亿，毕竟组员里曾有个大土豪王思聪，<del>虽然现在已经破产，而且当初做的片子还坑了，然后退组跑路</del>；第三，漫游不仅是最早的一批日本动画字幕组，甚至是最早的互联网中文字幕组之一，其组员平均年龄相较于其他现存字幕组较大，早年成员大都退坑多年，据说漫游的 QQ 群早已经转型育儿交流群。目前坟头草已几丈高。</p><p>极影字幕组，也算是比较老的字幕组，曾经也是能一季度开10部片子的大组，作品质量波动与具体制作人员有关。曾经有一个规模巨大的极影BT站，是很多人接触日本动画BT种子的起点，但是在2013年还是2014年入土为安。因为早期名气大所以极影字幕组人多而杂，不少成员出走到同期的其他字幕组，甚至有一段时间 极影KTXP 改名叫 JY，一度传出过要分裂的传闻。一个比较有名的事件：极影出品的《比宇宙更远的地方》，后期人员九阳飞羽对片子进行了删减，此种以个人立场改动作品的行为乃是字幕组大忌，事件引起极大争议。目前极影也随着大环境逐渐式微，虽然存活，但有作品产量大不如前。</p><p>星空字幕组，分特摄组和动画组两部分，动画组部分质量上下限差距比较大，有几位能将在C的片子还不错，其余的难说。前两年一部分人出走成立了拨雪寻春，这两年产量萎缩。逸闻一则：星空字幕组的微博大量发减肥壮阳斐济杯广告，饱受诟病，在不怎么恰饭的日本动画字幕圈子里算是鹤立鸡群。</p><p>北宇治字幕组，成立于 2022 年底，因嫌弃巴哈的孤独摇滚繁中字幕样式太难看，手抄第一集字幕后从小团体拉了几个人成立的字幕组。早期做字幕不太熟练甚至魔改字体，现慢慢走上正轨，也有自己的 Github，偶有 BDRip 。</p><p>以下字幕组因为我不清楚其历史和人员情况，且基本都已经作古，故而一笔带过：</p><p>A.I.R.nesSub，又名爱乳，老牌字幕组，质量不错，经常跟天香字幕组一起出现，人员组成不了解。我收过爱乳和 mawen 合作的恋爱随意链。作古多年。</p><p>HKG，老牌字幕组，著名的 “正面上我啊！” 梗缔造者，千古留名，尚有一些外挂字幕留存于世。<del>做片百部不如一句名言被人记得牢</del>，作古多年。</p><p>幻樱字幕组，根据其微博信息可知，成员主要分两派，一边是做腐片，另一边是做肉片。因为质量有波动，所以当初有幻听字幕组的外号。一则久远的吐槽：在 720p 新番的年代，不少观众觉得体积大就是画质好，下载片子按照种子体积从大到小选字幕组选中幻樱，一看发现怎么画面比其他的组都糊啊。</p><p>自由-Raws（自由字幕组），压制为虾抖。最早规格全面升级至 1080p 的组之一，曾在拿神经网络折腾 4K 的 webrip 新番。作品不多，早已沉寂。</p><p>WOLF字幕组，据说女组员很多，出品也有很多女性向作品。作古多年。</p><p>樱都字幕组，表番领域不了解，看起来质量不稳定，反倒是其里番出品可能知名度高点。因出过一个皮套人做直播恰饭，被同行 diss 良久。目前看起来还活着。</p><p>APTX4869(药组)主要做柯南，枫雪字幕组主要做海贼王、旋风字幕组主要做火影、LAC字幕组主要做银魂、枫叶字幕组主要做宝可梦，这些专精组没什么可特别评价的，平时看起来像躺平，系列出新作就可能诈尸。</p><p>白月、白恋、RH、天香、爱恋&漫猫、紫音、星冈学园放送部等等，这些都是在短时间内有一定的作品产出切有一定名气的隐退组，出品数量不算多也不算少，姑且列举一下。</p><p>特别注意：Ani、Lilith-Raws、NC-RAWS、まひろ、神樂坂まひろ、推しの子、GJ.Y、Up to 21°C 、猎户发布组等，都是版权源搬运组，并不生产任何原创内容。</p><p><strong>总体来说，字幕组其实已经没几个活人了，有得看就不错了。上文中提到了劳模大多是后期，因为我个人比较熟悉的是后期领域，翻译领域的劳模我只知道寥寥数人。很多组其实是靠着并不多的一些劳模在支撑，每一个劳模的退休都会导致一个甚至几个组的产出骤降，甚至直接停摆。</strong></p><p><strong>曾经 B 站是许多人追番的起点，字幕组是B站最早的衣食父母，为 B 站吸引了早期用户基本盘。后来大版权潮到来，同步引进新番导致字幕组作品被大量下架，字幕组的观众流失也很严重，这对字幕组成员的迭代更替产生了严重影响。而且字幕组成员被视频网站招安的现象非常普遍。普遍到什么程度呢？虽然整组被招安的情况很少见，但是以上提到的字幕组中，大概有八成的组里都有或多或少的成员以个人名义在做或者做过商业字幕委托。甚至，有的组的招新群里，近半的新入群人员的目的是入组接商业稿捞外快。这种普遍的招安现象，也算是在线视频挤压字幕组生存空间的一个表现形式。毕竟字幕组是夕阳西下的圈子了，卸磨杀驴也是资本的日常。</strong></p><p><strong>逸闻一则：诸神字幕组某位水产巨子吐槽，现在诸神的招新群加群的新人 80% 都是来问有没有付费作品可以做的。</strong></p><p><strong>现在新番也进入先审核后播的模式，B 站几乎全部番剧都要大会员，也是一副半死不活的样子。根据一些在 B 站上班的字幕组成员透露，放弃新番业务的可能性也是有的。如果那一天到来，到底是夕阳西下的字幕组重新换发第二春，还是另有资本入场接盘，都不好说。且看且珍惜吧。</strong></p><p><strong>从长远来看，大多数字幕组可以预见的发展路线是：字幕组工作群&色图交流群&游戏养老群 -> 工作介绍群 or 考研和留学咨询群 -> 婚恋中介群 or 绿帽侠互舔伤口群 -> 育儿交流群 -> 天知道什么群</strong></p><h2 id="一些零散的碎碎念"><a href="#一些零散的碎碎念" class="headerlink" title="一些零散的碎碎念"></a>一些零散的碎碎念</h2><p>0、技术是不断发展的，整个圈子的水平也在提升。因此一些早期(2010~2013前后)的优秀BDRip，用现在的眼光来看其实已经泯然众人了，这要感谢上文提到的压片轮子开发者们，比如 taro 和雯姐将 nr-deband 和线条与平面分开处理之类的技术白菜化，有效提升了压制圈的整体水平。但即使如此，那个时期也有一些顶级压制者出品的非常优秀的BDRip，以现在的标准来看依然不虚优秀之名，典型例子就是 ANE 的悠久之翼和雯姐的 key 系列作品。</p><p>1、关于质量点评，有一些新的压制组或个人尙处于上升期，只要不像某个上来就摆出“老子天下第一”架势嘲讽全场的嘴强王者那样，我们都应该多给与支持和鼓励。本来压制技术入门就有难度，如果没有人带，进阶提升非常困难。因此，培养一个优秀的压制者（准确说是写视频处理脚本的人）需要大量时间和精力，成功率还很低。这样子老人一个接一个退休，新人接不上，迟早药丸。</p><p>2、压片的都是姐姐，打麻将的都是太太，秀吉的性别是秀吉，小仓朝日的性别是朝日，小夜的性别是萝莉控。于是问题来了，请问 雯姐 和 LittlePox 的性别？</p><p>3、进阶压制技术的重点在于写 vapoursynth 和 avisynth 脚本来修复图像瑕疵，可以视为一门根据工业标准和数字图像理论来进行视频修复的学科。很多人的认知中，压制一定要动不动上 e5 或者 i9，这认知是被某 e5 神教工作室非带偏的结果……其实压制技术跟电脑配置没什么关系，真正耗在电脑挂机压制上的时间，与人工做画面分析和写视频处理脚本相比较而言，几乎不算事。无论曾经还是现在，主战力 e3 和 4790k 级别主流配置的压制者大有人在，mawen1250 和 LittlePox 当年都是拿破笔记本学习压制技术的，人家照样能发上百部优秀的压制作品 。</p><p>4、天河二号压片和 naobu 都是圈内梗，读出来就明白了。所谓三米抗锯齿，五米全高清，心中无码，自然高清，即神奇的 naobu 本体。但是，LB 确实弄了个用于图像处理的机器学习模型，然后用 naobu 为其命名。</p><p>5、夹点私货，以上提到的中文压制者中，你会发现相当高的比例的 Key 厨，光我知道的就有雯姐、小夜、ssnake、fch，我本人也是为了做罚抄才入坑的。所以么，自古压制多 Key 厨，摊手</p><p>最后，这个圈子有的人进来了，有的人走了，有的人造谣惹事，有的人埋头苦干，有的人钓名沽誉，有的人淡泊名利，有的人跳梁小丑，有的人呕心沥血。不论如何，经过多年的大浪淘沙，能留在人们记忆中的也就只剩下持之以恒、用爱发电、传播文化、分享作品的人，虽然这是一个很小的圈子，但他们终将成为互联网时代无名史书中值得瞩目的一页。 </p>]]></content>
<categories>
<category> 杂记 </category>
</categories>
<tags>
<tag> acg </tag>
</tags>
</entry>
<entry>
<title>vue3左右布局 拖拽宽度变化</title>
<link href="/post/20250401133421.html"/>
<url>/post/20250401133421.html</url>
<content type="html"><![CDATA[<p><strong>基础结构</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="comment"><!-- 左侧区域 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span> <span class="attr">:style</span>=<span class="string">"{ width: leftWidth + 'px' }"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span>></span>左侧内容（宽度：{{ leftWidth }}px）<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><br><span class="line"> <span class="comment"><!-- 拖拽条 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"drag-bar"</span> @<span class="attr">mousedown</span>=<span class="string">"startDrag"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"><!-- 右侧区域 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</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">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br></pre></td></tr></table></figure><p><strong>逻辑部分</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><script setup></span><br><span class="line"><span class="keyword">import</span> { ref, onMounted, onUnmounted } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> leftWidth = <span class="title function_">ref</span>(<span class="number">300</span>) <span class="comment">// 初始左侧宽度</span></span><br><span class="line"><span class="keyword">let</span> isDragging = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 开始拖拽</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">startDrag</span> = (<span class="params">e</span>) => {</span><br><span class="line"> isDragging = <span class="literal">true</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'mousemove'</span>, onDrag)</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'mouseup'</span>, stopDrag)</span><br><span class="line"> e.<span class="title function_">preventDefault</span>()</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 拖拽中</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">onDrag</span> = (<span class="params">e</span>) => {</span><br><span class="line"> <span class="keyword">if</span> (!isDragging) <span class="keyword">return</span></span><br><span class="line"> <span class="keyword">const</span> container = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">'.container'</span>)</span><br><span class="line"> <span class="keyword">const</span> rect = container.<span class="title function_">getBoundingClientRect</span>()</span><br><span class="line"> <span class="keyword">const</span> newWidth = e.<span class="property">clientX</span> - rect.<span class="property">left</span></span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 设置最小宽度限制（可选）</span></span><br><span class="line"> <span class="keyword">if</span> (newWidth > <span class="number">100</span> && newWidth < rect.<span class="property">width</span> - <span class="number">100</span>) {</span><br><span class="line"> leftWidth.<span class="property">value</span> = newWidth</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 停止拖拽</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">stopDrag</span> = (<span class="params"></span>) => {</span><br><span class="line"> isDragging = <span class="literal">false</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">'mousemove'</span>, onDrag)</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">'mouseup'</span>, stopDrag)</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_">onUnmounted</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">'mousemove'</span>, onDrag)</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">'mouseup'</span>, stopDrag)</span><br><span class="line">})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p><strong>样式部分</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><style scoped></span><br><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100vh</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.left</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: auto;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.drag-bar</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#ddd</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: ew-resize;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.drag-bar</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#ccc</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.right</span> {</span><br><span class="line"> <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: auto;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.content</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">40px</span>);</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>nas docker qbittorrent配置</title>
<link href="/post/20250325164600.html"/>
<url>/post/20250325164600.html</url>
<content type="html"><![CDATA[<h1 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h1><p>前置工作（以qnap Container Station为例）：</p><ul><li>Container共享文件夹下新建qbittorrent文件夹</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">services:</span></span><br><span class="line"> <span class="attr">qbittorrent:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">linuxserver/qbittorrent</span></span><br><span class="line"> <span class="attr">container_name:</span> <span class="string">qbittorrent</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">/share/Container/qbittorrent/config:/config</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">/share/video:/video</span> <span class="comment">#自定义</span></span><br><span class="line"> <span class="attr">ports:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="number">33128</span><span class="string">:8080</span></span><br><span class="line"> <span class="attr">restart:</span> <span class="string">unless-stopped</span></span><br></pre></td></tr></table></figure><h1 id="2-Track-List"><a href="#2-Track-List" class="headerlink" title="2.Track List"></a>2.Track List</h1><p>设置-BitTorrent-自动附加这些tracker到新下载</p><p><a href="https://github.com/ngosang/trackerslist">ngosang / trackerslist</a></p><p><a href="https://github.com/XIU2/TrackersListCollection">XIU2 / TrackersListCollection</a></p><p><a href="https://github.com/DeSireFire/animeTrackerList">DeSireFire / animeTrackerList</a></p>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> nas </tag>
<tag> docker </tag>
<tag> qbittorrent </tag>
</tags>
</entry>
<entry>
<title>git进阶记录</title>
<link href="/post/20250324151600.html"/>
<url>/post/20250324151600.html</url>
<content type="html"><![CDATA[<h1 id="main分支要选择性的合并dev分支的提交"><a href="#main分支要选择性的合并dev分支的提交" class="headerlink" title="main分支要选择性的合并dev分支的提交"></a>main分支要选择性的合并dev分支的提交</h1><p><code>git checkout main</code></p><p><code>git cherry-pick h7i8j9k a1b2c3d </code> # 按提交顺序操作</p><p>若存在冲突，解决冲突后</p><p><code>git cherry-pick --continue</code></p><h1 id="将本地三次提交合并为一次提交"><a href="#将本地三次提交合并为一次提交" class="headerlink" title="将本地三次提交合并为一次提交"></a>将本地三次提交合并为一次提交</h1><p>本地有三次提交，第一次提交的父节点hash为9s8df4s6f</p><blockquote><p>第三次提交 e6ec961 2025/2/26 15:15:00<br>第二次提交 1a2b3c4 2025/2/26 13:15:00<br>第一次提交 5d6e7f8 2025/2/26 10:15:00</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git rebase -i 9s8df4s6f <span class="comment"># 合并从指定 commit 后的提交</span></span><br><span class="line"><span class="comment"># 或</span></span><br><span class="line">git rebase -i HEAD~3 <span class="comment"># 合并最近3次提交</span></span><br></pre></td></tr></table></figure><p>在打开的交互式编辑器中，将需要合并的 commit 前的 <code>pick</code> 改为 <code>squash</code>（或简写 s），保留一个 pick 作为合并后的主提交</p><h1 id="修改历史某次提交信息"><a href="#修改历史某次提交信息" class="headerlink" title="修改历史某次提交信息"></a>修改历史某次提交信息</h1><p><strong>修改最近一次的提交信息：</strong> </p><p><code>git commit --amend -m "新的提交信息"</code> </p><p>然后推送到远程 </p><p><code>git push origin <branch_name> --force</code></p><p><strong>修改历史的某次提交信息：</strong> </p><p><code><commit-id></code> 为目标提交的前一个提交哈希值 </p><p><code>git rebase -i <commit-id></code></p><p>在打开的交互式编辑器中，将需要修改的 commit 前的 <code>pick</code> 改为 <code>reword</code>（或简写 r），保存后Git会停在标记为 edit的提交上<br><code>git commit --amend -m "新的提交信息"</code></p><p>完成变基并强制推送</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git rebase --<span class="built_in">continue</span> <span class="comment"># 若中途无冲突会自动完成</span></span><br><span class="line">git push --force <span class="comment"># 覆盖远程历史，需谨慎操作</span></span><br></pre></td></tr></table></figure><blockquote><p><strong>强制推送风险</strong>：修改已推送的提交会改变其哈希值<br><strong>备份分支</strong>：操作前建议创建备份分支<code>git branch backup</code>，防止变基失败后无法恢复</p></blockquote><h1 id="撤销过去的某一次提交"><a href="#撤销过去的某一次提交" class="headerlink" title="撤销过去的某一次提交"></a>撤销过去的某一次提交</h1><p>找到提交的哈希值<code><commit_hash></code></p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git revert <commit_hash></span><br></pre></td></tr></table></figure><p>解决可能出现的冲突</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add . # 标记冲突已解决</span><br><span class="line">git revert --continue # 继续完成撤销操作</span><br></pre></td></tr></table></figure><p>推送到远程</p><p><strong>补充</strong>：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">git revert <commit_hash_1> <commit_hash_2> # 一次撤销多个提交</span><br><span class="line">git revert <oldest_hash>..<newest_hash> # 撤销从 oldest_hash 到 newest_hash 之间的提交</span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">如果目标提交是合并操作生成的，需用 -m 指定主父分支（通常是 1）：</span></span><br><span class="line">git revert -m 1 <merge_commit_hash></span><br></pre></td></tr></table></figure><h1 id="回退远程提交并保留本地修改"><a href="#回退远程提交并保留本地修改" class="headerlink" title="回退远程提交并保留本地修改"></a>回退远程提交并保留本地修改</h1><p>如果想回退上一次提交<br><code>git reset --mixed HEAD~1</code><br>如果想回退指定提交之后<br><code>git reset --mixed <commit_hash></code></p><p>然后推送到远程<br><code>git push origin <branch_name> --force</code></p><h1 id="将本地的修改放到指定的分支上"><a href="#将本地的修改放到指定的分支上" class="headerlink" title="将本地的修改放到指定的分支上"></a>将本地的修改放到指定的分支上</h1><p>将本地修改暂存<br><code>git stash</code></p><p>切换到目标分支<br><code>git checkout <target_branch></code></p><p>应用暂存的修改<br><code>git stash pop</code></p><h1 id="错误地在-dev-分支上创建了-hotfix-分支并提交到远程，需要将-hotfix-分支的修改迁移到master分支"><a href="#错误地在-dev-分支上创建了-hotfix-分支并提交到远程，需要将-hotfix-分支的修改迁移到master分支" class="headerlink" title="错误地在 dev 分支上创建了 hotfix 分支并提交到远程，需要将 hotfix 分支的修改迁移到master分支"></a>错误地在 dev 分支上创建了 hotfix 分支并提交到远程，需要将 hotfix 分支的修改迁移到master分支</h1><p>切换到hotfix分支<br><code>git checkout hotfix</code></p><p>迁移提交 </p><p>git rebase –onto <新的基准分支> <原基准分支> <当前分支><br><code>git rebase --onto master dev hotfix</code></p><p>解决可能出现的冲突</p><p>推送到远程<br><code>git push origin hotfix --force</code></p>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> git </tag>
</tags>
</entry>
<entry>
<title>windows命令记录</title>
<link href="/post/20250324131700.html"/>
<url>/post/20250324131700.html</url>
<content type="html"><![CDATA[<h1 id="网络"><a href="#网络" class="headerlink" title="网络"></a>网络</h1><h2 id="添加webdav磁盘映射"><a href="#添加webdav磁盘映射" class="headerlink" title="添加webdav磁盘映射"></a>添加webdav磁盘映射</h2><p><code>net use Z: \\[WebDAV服务器地址]\[共享文件夹] /user:[用户名] [密码] /persistent:yes</code></p><blockquote><p><code>Z:</code> 是您要分配给 WebDAV 共享的驱动器字母（可以更改为任何未使用的字母）。<br><code>/persistent:yes</code>持久连接<br><code>[WebDAV服务器地址]</code> 是 WebDAV 服务器的 URL 地址（如 <code>http://example.com/webdav</code>）。<br><code>[共享文件夹]</code> 是 WebDAV 共享的文件夹路径。<br><code>[用户名]</code> 和 <code>[密码]</code> 是登录 WebDAV 服务器的凭据（如果需要）。</p></blockquote><p><code>net use Z: /del</code>删除已创建的网络地址映射</p><h2 id="输出文件夹内指定拓展名的所有文件名"><a href="#输出文件夹内指定拓展名的所有文件名" class="headerlink" title="输出文件夹内指定拓展名的所有文件名"></a>输出文件夹内指定拓展名的所有文件名</h2><p><code>dir /b /s *.扩展名 > 输出文件名.txt</code></p><blockquote><p>/b：仅显示文件名（不包含文件大小、日期等信息）<br>/s：递归搜索子目录中的文件（若不需要子目录则省略此参数）<br>*.扩展名：通配符过滤指定后缀<br><code>></code>：将结果输出到指定文本文件</p></blockquote>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> windows </tag>
</tags>
</entry>
<entry>
<title>nas docker clash配置</title>
<link href="/post/20250217113700.html"/>
<url>/post/20250217113700.html</url>
<content type="html"><![CDATA[<blockquote><p>主要用于nas和docker容器科学上网</p></blockquote><h1 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h1><p><strong>docker compose</strong></p><p>前置工作（以qnapContainer Station为例）：</p><ul><li>Container共享文件夹下新建clash文件夹</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">services:</span></span><br><span class="line"> <span class="attr">alist:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'dreamacro/clash'</span></span><br><span class="line"> <span class="attr">container_name:</span> <span class="string">clash</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'/share/Container/clash:/root/.config/clash'</span></span><br><span class="line"> <span class="attr">ports:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'7890:7890'</span></span><br><span class="line"> <span class="attr">restart:</span> <span class="string">unless-stopped</span></span><br></pre></td></tr></table></figure><h1 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h1><h2 id="2-1-获取配置文件"><a href="#2-1-获取配置文件" class="headerlink" title="2.1 获取配置文件"></a>2.1 获取配置文件</h2><blockquote><p>dns、proxies、proxy-groups、rules根据自己的订阅或节点修改</p></blockquote><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">ipv6:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">mixed-port:</span> <span class="number">7890</span></span><br><span class="line"><span class="attr">udp:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">allow-lan:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">bind-address:</span> <span class="string">'*'</span></span><br><span class="line"><span class="attr">mode:</span> <span class="string">rule</span></span><br><span class="line"><span class="attr">log-level:</span> <span class="string">info</span></span><br><span class="line"><span class="attr">external-controller:</span> <span class="string">'127.0.0.1:9090'</span></span><br><span class="line"><span class="attr">unified-delay:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">secret:</span> <span class="string">''</span></span><br><span class="line"><span class="attr">experimental:</span></span><br><span class="line"> <span class="attr">ignore-resolve-fail:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">cfw-latency-timeout:</span> <span class="number">8000</span></span><br><span class="line"><span class="attr">cfw-latency-url:</span> <span class="string">'https://www.gstatic.com/generate_204'</span></span><br><span class="line"><span class="attr">cfw-conn-break-strategy:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">dns:</span></span><br><span class="line"><span class="attr">proxies:</span></span><br><span class="line"><span class="attr">proxy-groups:</span></span><br><span class="line"><span class="attr">rules:</span></span><br></pre></td></tr></table></figure><h2 id="2-2-替换配置文件"><a href="#2-2-替换配置文件" class="headerlink" title="2.2 替换配置文件"></a>2.2 替换配置文件</h2><p>将上述文件保存<code>config.yaml</code>，替换/share/Container/clash中的同名配置文件；若没有则新增</p>]]></content>
<categories>
<category> 杂记 </category>
</categories>
<tags>
<tag> nas </tag>
<tag> docker </tag>
<tag> clash </tag>
</tags>
</entry>
<entry>
<title>nas docker alist配置</title>
<link href="/post/20250217103700.html"/>
<url>/post/20250217103700.html</url>
<content type="html"><![CDATA[<blockquote><p>主要用于通过复制的方式从云盘向nas传文件</p></blockquote><h1 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h1><p><strong>docker compose</strong></p><p>前置工作（以qnapContainer Station为例）：</p><ul><li>Container共享文件夹下新建alist文件夹</li><li>创建需要alist映射到本地的共享文件夹，如（video，picture，files等）</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">services:</span></span><br><span class="line"> <span class="attr">alist:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">'xhofe/alist'</span></span><br><span class="line"> <span class="attr">container_name:</span> <span class="string">alist</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'/share/Container/alist:/opt/alist/data'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'/share/video:/video'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'/share/picture:/picture'</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'/share/files:/files'</span></span><br><span class="line"> <span class="attr">ports:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">'33127:5244'</span></span><br><span class="line"> <span class="attr">environment:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">PUID=0</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">PGID=0</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">UMASK=022</span></span><br><span class="line"> <span class="attr">restart:</span> <span class="string">unless-stopped</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：<br>默认账号：admin<br>默认密码：从启动日志中获取<br>Successfully created the admin user and the initial password is: xxxxxx</p></blockquote><h1 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h1><h2 id="2-1-个人资料"><a href="#2-1-个人资料" class="headerlink" title="2.1 个人资料"></a>2.1 个人资料</h2><p>修改用户名密码</p><h2 id="2-2-用户"><a href="#2-2-用户" class="headerlink" title="2.2 用户"></a>2.2 用户</h2><p>配置用户信息</p><h2 id="2-3-存储"><a href="#2-3-存储" class="headerlink" title="2.3 存储"></a>2.3 存储</h2><p><strong>添加</strong>（以<a href="https://alist.nn.ci/zh/guide/drivers/aliyundrive_open.html">阿里云</a>为例）</p><p><strong>挂载路径</strong>：自定义</p><p><strong>缓存过期时间</strong>：0（实时）或自定义</p><p><strong>根文件夹ID</strong>：root</p><p><strong>刷新令牌</strong>：<a href="https://alist.nn.ci/tool/aliyundrive/request">获取链接</a></p><hr><p><strong>添加</strong>（以<a href="https://alist.nn.ci/zh/guide/drivers/local.html">本机存储</a>为例）</p><p><strong>挂载路径</strong>：自定义</p><p><strong>根文件夹路径</strong>：容器创建时docker compose挂载的路径</p>]]></content>
<categories>
<category> 杂记 </category>
</categories>
<tags>
<tag> nas </tag>
<tag> docker </tag>
<tag> alist </tag>
</tags>
</entry>
<entry>
<title>nas docker lucky配置</title>
<link href="/post/20250211131600.html"/>
<url>/post/20250211131600.html</url>
<content type="html"><![CDATA[<h1 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h1><p><strong>docker compose</strong></p><p>前置工作（以qnapContainer Station为例）：</p><ul><li>Container共享文件夹下新建lucky文件夹</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">services:</span></span><br><span class="line"><span class="attr">lucky:</span></span><br><span class="line"><span class="attr">image:</span> <span class="string">gdy666/lucky</span></span><br><span class="line"><span class="attr">container_name:</span> <span class="string">lucky</span></span><br><span class="line"><span class="attr">volumes:</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">/share/Container/lucky:/goodluck</span></span><br><span class="line"><span class="attr">network_mode:</span> <span class="string">host</span></span><br><span class="line"><span class="attr">restart:</span> <span class="string">always</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：<br>网络环境必须为host，详见<a href="https://lucky666.cn/docs/problemset">常见问题与反馈</a><br>默认登陆地址 : <a href="http://ip地址:16601/">http://IP地址:16601</a><br>默认账号：666<br>默认密码：666</p></blockquote><h1 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h1><h2 id="2-1-设置"><a href="#2-1-设置" class="headerlink" title="2.1 设置"></a>2.1 设置</h2><p>修改外网访问，监听端口，管理账号密码</p><h2 id="2-2-动态域名"><a href="#2-2-动态域名" class="headerlink" title="2.2 动态域名"></a>2.2 动态域名</h2><p> <strong>从cloudflare获取具有编辑dns权限的token</strong> </p><p>创建完成后保存token<br><img src="https://lsky.kissshot.site/img/2025/02/14/67aea56f750b3.png" alt="|501x303"></p><p><strong>添加任务</strong><br><img src="https://lsky.kissshot.site/img/2025/02/14/67aeb6f01fb32.png" alt="|309x392"></p><p><strong>添加同步记录</strong>（此为三级通配符域名，主域名添加类似）<br><img src="https://lsky.kissshot.site/img/2025/02/14/67aeb61abdf40.png" alt="|314x331"></p><h2 id="2-3-SSl-TLS证书"><a href="#2-3-SSl-TLS证书" class="headerlink" title="2.3 SSl/TLS证书"></a>2.3 SSl/TLS证书</h2><p><strong>添加证书</strong><br><img src="https://lsky.kissshot.site/img/2025/02/14/67aeb82d6e587.png" alt="|309x316"></p><h2 id="2-4-web服务"><a href="#2-4-web服务" class="headerlink" title="2.4 web服务"></a>2.4 web服务</h2><p><strong>添加Web服务规则</strong><br><img src="https://lsky.kissshot.site/img/2025/02/14/67aeba00115d3.png" alt="|337x350"></p><p><strong>添加子规则</strong><br><img src="https://lsky.kissshot.site/img/2025/02/14/67aebb8c426c5.png" alt="|328x422"></p><p><strong>（可选）添加重定向</strong></p><p>作用：可免去输入<code>https://</code>，直接输入域名即可跳转</p><p>添加Web服务规则，除TLS必须关闭，其余与2.4第一步保持一致</p><p>默认规则中：服务类型选重定向；默认目标地址输入<code>https://{hostAndPort}</code>；其余随意</p><h2 id="2-5-STUN内网穿透"><a href="#2-5-STUN内网穿透" class="headerlink" title="2.5 STUN内网穿透"></a>2.5 STUN内网穿透</h2><blockquote><p>网络类型必须为NAT1（全锥形网络）<br>参考教程：<br><a href="https://www.bilibili.com/opus/953960881273700352">「LUCKY STUN穿透」使用Cloudflare的页面规则固定和隐藏网页端口</a><br><a href="https://www.bilibili.com/opus/971100369193009187">「扩展篇」使用Cloudflare的重定向规则传递资源路径和查询字符串</a></p></blockquote><p><strong>添加穿透规则</strong>（需要在主路由中配置端口转发）<br><img src="https://lsky.kissshot.site/img/2025/02/14/67aec444e8755.png" alt="|406x325"></p><p><strong>添加IPV4配置</strong></p><p>参考2.2，2.4的内容添加一套IPV4的配置</p><blockquote><p>注意区别：<br><strong>2.2添加任务</strong>开启IPV4，关闭IPV6<br><strong>2.2添加同步记录</strong>记录类型选择A类型，记录内容填写<code>{ipv4Addr}</code><br>IPV4添加两条记录<code>*.example.com</code>和<code>*.stun.example.com</code>，前者为重定向前，后者为重定向后<br><strong>2.4添加Web服务规则</strong>勾选tcp4，取消勾选tcp6<br><strong>2.4添加子规则</strong>前端地址填写重定向后的域名，如<code>alist.stun.example.com</code>。后端地址同IPV6<br><strong>2.4添加重定向</strong>不必为IPV4配置，使用下文中cloudflare的重定向</p></blockquote><h2 id="2-6-固定穿透IP"><a href="#2-6-固定穿透IP" class="headerlink" title="2.6 固定穿透IP"></a>2.6 固定穿透IP</h2><p> <strong>从cloudflare获取重定向权限的token</strong> </p><p>创建完成后保存token<br><img src="https://lsky.kissshot.site/img/2025/02/14/67aecfbbf3de7.png" alt="|526x280"></p><p><strong>创建重定向规则</strong></p><p>规则-概述-重定向规则-创建规则</p><p>规则名称：随意；</p><p>自定义筛选表达式：主机名-通配符-二级通配符域名，如<code>*.example.com</code></p><p>url重定向：动态-表达式<code>wildcard_replace(http.request.full_uri, "*://*.example.com/*", "https://${2}.stun.example.com:6666/${3}")</code>-状态码302</p><blockquote><p>example.com替换成自己的主域名</p></blockquote><p><img src="https://lsky.kissshot.site/img/2025/02/14/67aed1552a4bb.png" alt="|568x420"></p><p><strong>点击保存前打开F12，找到如下图类似的请求，复制请求网址</strong><br><img src="https://lsky.kissshot.site/img/2025/02/14/67aed3e984731.png" alt="|573x161"></p><p><strong>STUN内网穿透启用Webhook</strong></p><p>请求地址：<code>https://api.cloudflare.com/client/v4/zones/区域ID/rulesets/规则集ID/rules/规则ID</code></p><p>请求方法：PATCH</p><p>请求头： </p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Authorization<span class="punctuation">:</span> Bearer kgaThYAjGd0_FhOkc8H3ljwJlQ97iW2y6LGbOMNK</span><br><span class="line">Content-Type<span class="punctuation">:</span> application/json</span><br></pre></td></tr></table></figure><p>请求体：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//将其中example.com替换成自己的域名</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"description"</span><span class="punctuation">:</span> <span class="string">"stun-redirect"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"expression"</span><span class="punctuation">:</span> <span class="string">"(http.host wildcard \"*.example.com\")"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"action"</span><span class="punctuation">:</span> <span class="string">"redirect"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"action_parameters"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"from_value"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"status_code"</span><span class="punctuation">:</span> <span class="number">302</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"target_url"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"expression"</span><span class="punctuation">:</span> <span class="string">"wildcard_replace(http.request.full_uri, \"*://*.example.com/*\", \"https://${2}.stun.example.com:#{port}/${3}\")"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"preserve_query_string"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p>关闭<strong>禁用接口调用成功字符串检测</strong></p><p><strong>接口调用成功包含的字符串</strong>输入<code>"success": true</code></p>]]></content>
<categories>
<category> 杂记 </category>
</categories>
<tags>
<tag> nas </tag>
<tag> docker </tag>
<tag> lucky </tag>
</tags>
</entry>
<entry>
<title>electron学习记录</title>
<link href="/post/20241223110057.html"/>
<url>/post/20241223110057.html</url>
<content type="html"><![CDATA[<p><a href="https://github.com/hearthitagi/electron-demo">demo仓库</a></p><h1 id="1-安装"><a href="#1-安装" class="headerlink" title="1. 安装"></a>1. 安装</h1><p><code>npm init</code><br>修改package.json为以下内容</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span> <span class="string">"electron-demo"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"version"</span><span class="punctuation">:</span> <span class="string">"1.0.0"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"description"</span><span class="punctuation">:</span> <span class="string">"demo"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"main"</span><span class="punctuation">:</span> <span class="string">"main.js"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"scripts"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"start"</span><span class="punctuation">:</span> <span class="string">"electron ."</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="string">"electron-builder"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"build:icon"</span><span class="punctuation">:</span> <span class="string">"electron-icon-builder --input=./public/icon.png --output=release --flatten"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"author"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span> <span class="string">"cai"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"email"</span><span class="punctuation">:</span> <span class="string">"your-email.com"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"license"</span><span class="punctuation">:</span> <span class="string">"ISC"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p>安装<code>electron</code>、打包工具<code>electron-builder</code>和图标打包工具<code>electron-icon-builder</code></p><p><code>npm install -D electron electron-builder electron-icon-builder</code></p><p>配置打包内容</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"appId"</span><span class="punctuation">:</span> <span class="string">"com.kissshot.electrondemo"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"productName"</span><span class="punctuation">:</span> <span class="string">"ElectronDemo"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"directories"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"output"</span><span class="punctuation">:</span> <span class="string">"dist"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"linux"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"icon"</span><span class="punctuation">:</span> <span class="string">"./release/icons"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"target"</span><span class="punctuation">:</span> <span class="string">"deb"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"category"</span><span class="punctuation">:</span> <span class="string">"Utility"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"deb"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"afterInstall"</span><span class="punctuation">:</span> <span class="string">"./entries/install.sh"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"extraFiles"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"from"</span><span class="punctuation">:</span> <span class="string">"entries"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"to"</span><span class="punctuation">:</span> <span class="string">"entries"</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"win"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"icon"</span><span class="punctuation">:</span> <span class="string">"./release/icons"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"target"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"nsis"</span><span class="punctuation">,</span><span class="string">"zip"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"nsis"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"oneClick"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"perMachine"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"allowElevation"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"allowToChangeInstallationDirectory"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"createDesktopShortcut"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"createStartMenuShortcut"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"deleteAppDataOnUninstall"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><h1 id="2-基本配置"><a href="#2-基本配置" class="headerlink" title="2. 基本配置"></a>2. 基本配置</h1><h2 id="2-1-打包准备"><a href="#2-1-打包准备" class="headerlink" title="2.1 打包准备"></a>2.1 打包准备</h2><ul><li>图标<br>根据<code>package.json</code>中script的配置，新建文件夹public放入图片icon.png</li><li>linux<br>新建文件夹entries编写脚本文件install.sh。在linux中，electron在沙箱中运行，安装时给沙箱更改所有者并设置权限 <figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">! /bin/sh</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">设置 chrome-sandbox 的所有者为 root 并设置正确的权限</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">确保使用正确的路径到您的 chrome-sandbox 文件</span></span><br><span class="line">chromeSandboxPath="/opt/ElectronDemo/chrome-sandbox"</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">检查 chrome-sandbox 文件是否存在</span></span><br><span class="line">if [ -f "$chromeSandboxPath" ]; then</span><br><span class="line"><span class="meta prompt_"> # </span><span class="language-bash">更改所有者为 root</span></span><br><span class="line"> chown root:root "$chromeSandboxPath"</span><br><span class="line"><span class="meta prompt_"> # </span><span class="language-bash">设置权限为 4755</span></span><br><span class="line"> chmod 4755 "$chromeSandboxPath"</span><br><span class="line"> echo "chrome-sandbox 权限和所有者已设置。"</span><br><span class="line">else</span><br><span class="line"> echo "警告：未找到 chrome-sandbox 文件：$chromeSandboxPath"</span><br><span class="line">fi</span><br></pre></td></tr></table></figure></li></ul><h2 id="2-2-新建main-js-分平台编写代码"><a href="#2-2-新建main-js-分平台编写代码" class="headerlink" title="2.2 新建main.js,分平台编写代码"></a>2.2 新建main.js,分平台编写代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> { app, <span class="title class_">BrowserWindow</span>, <span class="title class_">Menu</span> } = <span class="built_in">require</span>(<span class="string">'electron'</span>)</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'node:path'</span>)</span><br><span class="line">app.<span class="property">commandLine</span>.<span class="title function_">appendSwitch</span>(<span class="string">'ignore-certificate-errors'</span>) <span class="comment">// 忽略证书错误</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">createWindow</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="title class_">Menu</span>.<span class="title function_">setApplicationMenu</span>(<span class="literal">null</span>)</span><br><span class="line"> <span class="comment">// 根据不同的操作系统选择不同的 preload 文件</span></span><br><span class="line"> <span class="keyword">let</span> preloadPath = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">switch</span> (process.<span class="property">platform</span>) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'win32'</span>: <span class="comment">// Windows</span></span><br><span class="line"> preloadPath = path.<span class="title function_">join</span>(__dirname, <span class="string">'platform/win32/win32Preload.js'</span>);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'linux'</span>: <span class="comment">// Linux</span></span><br><span class="line"> preloadPath = path.<span class="title function_">join</span>(__dirname, <span class="string">'platform/linux/linuxPreload.js'</span>);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> mainWindow = <span class="keyword">new</span> <span class="title class_">BrowserWindow</span>({</span><br><span class="line"> <span class="attr">width</span>: <span class="number">800</span>,</span><br><span class="line"> <span class="attr">height</span>: <span class="number">600</span>,</span><br><span class="line"> <span class="attr">webPreferences</span>: {</span><br><span class="line"> <span class="attr">preload</span>: preloadPath, <span class="comment">// 动态选择 preload 文件</span></span><br><span class="line"> <span class="attr">contextIsolation</span>: <span class="literal">true</span>, <span class="comment">// 必须启用上下文隔离</span></span><br><span class="line"> <span class="attr">nodeIntegration</span>: <span class="literal">false</span>, <span class="comment">// 禁用 Node.js 集成</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 加载 index.html</span></span><br><span class="line"> <span class="keyword">if</span> (process.<span class="property">platform</span> === <span class="string">'win32'</span>) {</span><br><span class="line"> mainWindow.<span class="title function_">loadFile</span>(<span class="string">'./paltform/win32/win32.html'</span>)</span><br><span class="line"> <span class="comment">// 打开开发工具</span></span><br><span class="line"> mainWindow.<span class="property">webContents</span>.<span class="title function_">openDevTools</span>()</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (process.<span class="property">platform</span> === <span class="string">'linux'</span>) {</span><br><span class="line"> mainWindow.<span class="title function_">loadFile</span>(<span class="string">'./paltform/linux/linux.html'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">app.<span class="title function_">whenReady</span>().<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">createWindow</span>()</span><br><span class="line"> <span class="comment">// macOS</span></span><br><span class="line"> app.<span class="title function_">on</span>(<span class="string">'activate'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="title class_">BrowserWindow</span>.<span class="title function_">getAllWindows</span>().<span class="property">length</span> === <span class="number">0</span>) <span class="title function_">createWindow</span>()</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"><span class="comment">// win linux</span></span><br><span class="line">app.<span class="title function_">on</span>(<span class="string">'window-all-closed'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (process.<span class="property">platform</span> !== <span class="string">'darwin'</span>) app.<span class="title function_">quit</span>()</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在当前文件中你可以引入所有的主进程代码 也可以拆分成几个文件，然后用 require 导入。</span></span><br><span class="line"><span class="keyword">let</span> platformCode</span><br><span class="line"><span class="keyword">if</span> (process.<span class="property">platform</span> === <span class="string">'win32'</span>) {</span><br><span class="line"> platformCode = <span class="built_in">require</span>(<span class="string">'./paltform/win32/win32Main.js'</span>)</span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (process.<span class="property">platform</span> === <span class="string">'linux'</span>) {</span><br><span class="line"> platformCode = <span class="built_in">require</span>(<span class="string">'./paltform/linux/linuxMain.js'</span>)</span><br><span class="line">}</span><br><span class="line"><span class="title function_">platformCode</span>()</span><br></pre></td></tr></table></figure><p>目录结构</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">project-name/</span><br><span class="line">│</span><br><span class="line">├── platform/</span><br><span class="line">│ ├── linux/</span><br><span class="line">│ │ └── linux.html</span><br><span class="line">│ │ └── linuxMain.js</span><br><span class="line">│ │ └── linuxPreload.js</span><br><span class="line">│ │ └── linuxRenderer.js</span><br><span class="line">│ ├── win32/</span><br><span class="line">│ │ └── win32.html</span><br><span class="line">│ │ └── win32Main.js</span><br><span class="line">│ │ └── win32Preload.js</span><br><span class="line">│ │ └── win32Renderer.js</span><br><span class="line">│</span><br><span class="line">...</span><br></pre></td></tr></table></figure><h1 id="3-进程间通信"><a href="#3-进程间通信" class="headerlink" title="3. 进程间通信"></a>3. 进程间通信</h1><p>main为主进程代码，renderer为子进程（渲染进程代码），preload为进程通信控制代码</p><ul><li>invoke/handle<br>适用于渲染进程向主进程提交异步请求并期待返回的情况，例如接口请求，命令执行</li><li>send/on<br>适用于单线发送消息的情况，类似udp</li></ul>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> electron </tag>
</tags>
</entry>
<entry>
<title>js文件格式相互转换</title>
<link href="/post/20241203124227.html"/>
<url>/post/20241203124227.html</url>
<content type="html"><![CDATA[<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// base64转blob</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">b64ToBlob</span> = <span class="keyword">async</span>(<span class="params">base64, type = <span class="string">'application/octet-stream'</span></span>) =>{</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">await</span> (<span class="keyword">await</span> <span class="title function_">fetch</span>(<span class="string">`data:<span class="subst">${type}</span>;base64,<span class="subst">${base64}</span>`</span>)).<span class="title function_">blob</span>()</span><br><span class="line">}</span><br><span class="line"><span class="comment">// blob转base64</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">blobToB64</span> = (<span class="params">blob</span>) => <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> reader = <span class="keyword">new</span> <span class="title class_">FileReader</span>(); </span><br><span class="line"> reader.<span class="property">onerror</span> = <span class="title function_">reject</span>();</span><br><span class="line"> reader.<span class="property">onload</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">resolve</span>(reader.<span class="property">result</span>);</span><br><span class="line"> };</span><br><span class="line"> reader.<span class="title function_">readAsDataURL</span>(blob);</span><br><span class="line">});</span><br><span class="line"><span class="comment">// file转blob</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">fileToBlob</span> = <span class="keyword">async</span>(<span class="params">file</span>) => {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">await</span> (<span class="keyword">await</span> <span class="title function_">fetch</span>(<span class="variable constant_">URL</span>.<span class="title function_">createObjectURL</span>(file))).<span class="title function_">blob</span>();</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 或者</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">fileToBlob</span> = <span class="keyword">async</span>(<span class="params">file</span>) =>{</span><br><span class="line"> <span class="keyword">const</span> reader = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span><br><span class="line"> <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> reader.<span class="property">onload</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">resolve</span>(reader.<span class="property">result</span>);</span><br><span class="line"> };</span><br><span class="line"> reader.<span class="property">onerror</span> = <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">reject</span>(reader.<span class="property">error</span>);</span><br><span class="line"> };</span><br><span class="line"> reader.<span class="title function_">readAsArrayBuffer</span>(file);</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Blob</span>([result], { <span class="attr">type</span>: file.<span class="property">type</span> });</span><br><span class="line">}</span><br><span class="line"><span class="comment">// blob转file</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">blobToFile</span>(<span class="params">blob, fileName</span>) {</span><br><span class="line"> <span class="keyword">const</span> file = <span class="keyword">new</span> <span class="title class_">File</span>([blob], fileName, { <span class="attr">type</span>: blob.<span class="property">type</span> });</span><br><span class="line"> <span class="keyword">return</span> file;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//文件下载 blob或file</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">download</span>(<span class="params">blob, fileName</span>) {</span><br><span class="line"> <span class="keyword">const</span> url = <span class="variable constant_">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line"> <span class="keyword">const</span> a = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'a'</span>);</span><br><span class="line"> a.<span class="property">href</span> = url;</span><br><span class="line"> a.<span class="property">download</span> = fileName;</span><br><span class="line"> a.<span class="title function_">click</span>();</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">removeChild</span>(a);</span><br><span class="line"> <span class="variable constant_">URL</span>.<span class="title function_">revokeObjectURL</span>(url);</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 获取文件夹下所有图片</span></span><br><span class="line"><span class="comment">参数 1.路径 2.是否遍历子目录 3.正则</span></span><br><span class="line"><span class="comment">本例中遍历获取的是assets/avatar目录下所有的.webp格式的图片</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> files = <span class="built_in">require</span>.<span class="title function_">context</span>(<span class="string">"@/assets/avatar"</span>, <span class="literal">true</span>, <span class="regexp">/\.webp$/</span>).<span class="title function_">keys</span>();</span><br><span class="line">files.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =></span> {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">avatarList</span>.<span class="title function_">push</span>({ <span class="attr">code</span>: <span class="string">`<span class="subst">${index}</span>`</span>, <span class="attr">url</span>: <span class="built_in">require</span>(<span class="string">"../../../assets/avatar"</span> + item.<span class="title function_">slice</span>(<span class="number">1</span>)) })</span><br><span class="line">});</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> javaScript </tag>
</tags>
</entry>
<entry>
<title>js节流与防抖</title>
<link href="/post/20240125095919.html"/>
<url>/post/20240125095919.html</url>
<content type="html"><![CDATA[<h2 id="节流与防抖"><a href="#节流与防抖" class="headerlink" title="节流与防抖"></a>节流与防抖</h2><ul><li>节流：限制触发方法的频率。</li><li>防抖：限制方法的触发频率。</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 节流：触发func方法后的一段时间(1s)内，不能再次触发</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">throttle</span>(<span class="params">func: (...args: any[]) => <span class="keyword">void</span>, delay: number = <span class="number">100</span></span>) {</span><br><span class="line"> <span class="keyword">let</span> lastTime = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="function">(<span class="params">...args: any[]</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (args[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Event</span>) {</span><br><span class="line"> args[<span class="number">0</span>].<span class="title function_">preventDefault</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> now = <span class="title class_">Date</span>.<span class="title function_">now</span>();</span><br><span class="line"> <span class="keyword">if</span> (now - lastTime >= delay) {</span><br><span class="line"> func.<span class="title function_">apply</span>(<span class="variable language_">this</span>, args)</span><br><span class="line"> lastTime = now</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 防抖：触发事件后，1秒后执行func方法，1秒内再次出发时间，重置为1秒后执行</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">debounce</span>(<span class="params">func, delay = <span class="number">1000</span></span>) {</span><br><span class="line"> <span class="keyword">let</span> timer = <span class="literal">null</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span> (timer) { <span class="built_in">clearTimeout</span>(timer) }</span><br><span class="line"> timer = <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> func.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>)</span><br><span class="line"> timer = <span class="literal">null</span></span><br><span class="line"> }, delay)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> javaScript </tag>
</tags>
</entry>
<entry>
<title>js异步操作顺序执行与并序执行</title>
<link href="/post/20230420173821.html"/>
<url>/post/20230420173821.html</url>
<content type="html"><![CDATA[<h2 id="1、异步操作顺序执行"><a href="#1、异步操作顺序执行" class="headerlink" title="1、异步操作顺序执行"></a>1、异步操作顺序执行</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">uploadArray</span> = (<span class="params"></span>) => {</span><br><span class="line"> fileList.<span class="property">value</span>.<span class="title function_">reduce</span>(<span class="function">(<span class="params">previousValue, currentValue</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">upload</span>(currentValue)</span><br><span class="line"> }, <span class="title class_">Promise</span>.<span class="title function_">resolve</span>())</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">upload</span> = <span class="keyword">async</span>(<span class="params">fileItem</span>) => {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">uploadFile</span>(fileItem)</span><br><span class="line"> res.<span class="property">state</span> === <span class="number">200</span> ? </span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>() : </span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>()</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(error);</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>()</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>reduce()</code>方法对数组中的每个元素按序执行一个回调函数，每一次运行回调函数会将先前元素的计算结果作为参数传入<br>详细参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">Array.prototype.reduce()</a> </p><h2 id="2、并行执行完所有异步操作后，再继续其他内容"><a href="#2、并行执行完所有异步操作后，再继续其他内容" class="headerlink" title="2、并行执行完所有异步操作后，再继续其他内容"></a>2、并行执行完所有异步操作后，再继续其他内容</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">delPic</span> = <span class="keyword">async</span>(<span class="params">file</span>) => {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">s3DelImg</span>({ <span class="attr">fileName</span>: file.<span class="property">fileName</span>, <span class="attr">fileId</span>: file.<span class="property">fileId</span>})</span><br><span class="line"> res.<span class="property">state</span> !== <span class="number">200</span> ?</span><br><span class="line"> message.<span class="title function_">error</span>(res.<span class="property">message</span>) : <span class="string">''</span></span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>()</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>()</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">delList</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="keyword">let</span> delList = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"> <span class="keyword">let</span> proResList = delList.<span class="title function_">map</span>(<span class="function">(<span class="params">item: any</span>) =></span> { <span class="keyword">return</span> <span class="title function_">delPic</span>(item) })</span><br><span class="line"> <span class="title class_">Promise</span>.<span class="title function_">all</span>(proResList).<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">getImgList</span>() <span class="comment">//接口请求</span></span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>Promise.all()</code>,对传入的promise组成的数组进行检测，数组中promise全部成功resolve()后,<code>.then()</code>执行后续操作</p>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> javaScript </tag>
</tags>
</entry>
<entry>
<title>backblaze图床管理工具</title>
<link href="/post/20230419144141.html"/>
<url>/post/20230419144141.html</url>
<content type="html"><![CDATA[<p>基于vue3前端，express作中间件，vercel部署的backblaze图床管理工具开发记录。</p><p>项目地址：<a href="https://github.com/hearthitagi/bz-view">bz-view</a></p><h2 id="1、存储桶配置，参考这个文档"><a href="#1、存储桶配置，参考这个文档" class="headerlink" title="1、存储桶配置，参考这个文档"></a>1、存储桶配置，参考<a href="https://blazeb2.js.org/guide/prepare.html">这个文档</a></h2><h3 id="1-1、注册并登录Backblaze存储桶"><a href="#1-1、注册并登录Backblaze存储桶" class="headerlink" title="1.1、注册并登录Backblaze存储桶"></a>1.1、<a href="https://www.backblaze.com/b2/sign-up.html">注册</a>并<a href="https://secure.backblaze.com/user_signin.htm">登录</a>Backblaze存储桶</h3><h3 id="1-2、创建一个桶，并修改桶设定，生成Key"><a href="#1-2、创建一个桶，并修改桶设定，生成Key" class="headerlink" title="1.2、创建一个桶，并修改桶设定，生成Key"></a>1.2、创建一个桶，并修改桶设定，生成Key</h3><h3 id="1-3、查看存储桶友好url"><a href="#1-3、查看存储桶友好url" class="headerlink" title="1.3、查看存储桶友好url"></a>1.3、查看存储桶友好url</h3><h3 id="1-4、cloudflare配置，参考这篇文章"><a href="#1-4、cloudflare配置，参考这篇文章" class="headerlink" title="1.4、cloudflare配置，参考这篇文章"></a>1.4、cloudflare配置，参考<a href="https://ivu4e.cn/blog/cld-services/2022-06-18/1249.html">这篇文章</a></h3><h2 id="2、图床管理工具开发"><a href="#2、图床管理工具开发" class="headerlink" title="2、图床管理工具开发"></a>2、图床管理工具开发</h2><h3 id="2-1、前端vue3，参考github代码"><a href="#2-1、前端vue3，参考github代码" class="headerlink" title="2.1、前端vue3，参考github代码"></a>2.1、前端vue3，参考<a href="https://github.com/hearthitagi/bz-view">github代码</a></h3><h3 id="2-2、中间件express代理请求"><a href="#2-2、中间件express代理请求" class="headerlink" title="2.2、中间件express代理请求"></a>2.2、中间件express代理请求</h3><p>因backblaze存储桶api有动态变化，采用个人比较熟悉的express来进行接口代理请求。</p><h3 id="2-3、vercel部署express，并用cloudflare加速"><a href="#2-3、vercel部署express，并用cloudflare加速" class="headerlink" title="2.3、vercel部署express，并用cloudflare加速"></a>2.3、vercel部署express，并用cloudflare加速</h3><p>写好的<a href="https://github.com/hearthitagi/bz-view/tree/serve">express代码</a>部署到vercel：</p><ol><li>新建<code>vercel.json</code></li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"version"</span><span class="punctuation">:</span> <span class="number">2</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"builds"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"src"</span><span class="punctuation">:</span> <span class="string">"./index.js"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"use"</span><span class="punctuation">:</span> <span class="string">"@vercel/node"</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"routes"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"src"</span><span class="punctuation">:</span> <span class="string">"/(.*)"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"dest"</span><span class="punctuation">:</span> <span class="string">"/"</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><ol start="2"><li><p>选择部署仓库，<a href="https://vercel.com/new/clone?s=https://github.com/hearthitagi/bz-view/tree/serve">链接</a></p></li><li><p>最为关键的，在前端打包好，放到expres静态文件中时，<code>.js</code>后缀改为<code>.mjs</code>。html中的引用路径也修改。</p></li></ol>]]></content>
<categories>
<category> 杂记 </category>
</categories>
<tags>
<tag> express </tag>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>css伪类选择器</title>
<link href="/post/20221218184116.html"/>
<url>/post/20221218184116.html</url>
<content type="html"><![CDATA[<h2 id="has选择器"><a href="#has选择器" class="headerlink" title=":has选择器"></a><code>:has</code>选择器</h2><p>选择某元素下，符合条件的元素。例如</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.box</span>) {</span><br><span class="line"> <span class="attribute">color</span>: blue;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>选择包含类名为<code>.box</code>的div元素</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">P</span> <span class="attr">class</span>=<span class="string">'box'</span>></span>我是蓝色的<span class="tag"></<span class="name">P</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">P</span>></span>我也是<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></pre></td></tr></table></figure><h2 id="is选择器"><a href="#is选择器" class="headerlink" title=":is选择器"></a><code>:is</code>选择器</h2><p><img src="https://lsky.kissshot.site/img/2025/02/07/67a55c3f31485.gif" alt="alt"> </p><p>包装共性选择器。例如</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:is</span>(<span class="selector-tag">div</span>, <span class="selector-tag">p</span>) <span class="selector-pseudo">:is</span>(<span class="selector-tag">span</span>, <span class="selector-tag">i</span>) {</span><br><span class="line"> <span class="attribute">color</span>: blue;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>选择div和p标签下的span和i标签</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">i</span>></span>我们都被选中了<span class="tag"></<span class="name">i</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">i</span>></span>我们都被选中了<span class="tag"></<span class="name">i</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">span</span>></span>我们都被选中了<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>我们都被选中了<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><p><strong>注意:不支持选中伪元素，优先级为选择器本身的优先级</strong></p><h2 id="where选择器"><a href="#where选择器" class="headerlink" title=":where选择器"></a><code>:where</code>选择器</h2><p>与<code>is</code>选择器相同，区别在于<code>:where</code>选择器的优先级总是0。</p><h2 id="not选择器"><a href="#not选择器" class="headerlink" title=":not选择器"></a><code>:not</code>选择器</h2><p>匹配不符合指定选择器的元素。例如</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.box</span>) {</span><br><span class="line"> <span class="attribute">color</span>: blue;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>选择class不是.box的div元素</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span>我没被选中<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</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">"yi"</span>></span>我们被选中了<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>注意:未指定<code>:not</code>前边的宿主选择器，<code>:not</code>会选中body；<code>:not</code>不能嵌套</strong></p><p>参考文章：<a href="https://www.cnblogs.com/coco1s/p/16283836.html">浅谈逻辑选择器</a></p>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> css </tag>
</tags>
</entry>
<entry>
<title>vue封装插件</title>
<link href="/post/20221209145924.html"/>
<url>/post/20221209145924.html</url>
<content type="html"><![CDATA[<p>参考内容：<a href="https://blog.csdn.net/qq_46038620/article/details/119205367">vue的组件插件化封装</a></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//toast/index.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Toast</span> <span class="keyword">from</span> <span class="string">'./toast.vue'</span></span><br><span class="line"><span class="keyword">const</span> toast = {}</span><br><span class="line">toast.<span class="property">install</span> = <span class="keyword">function</span>(<span class="params">Vue</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'use了toast插件'</span>)</span><br><span class="line"> <span class="comment">// 1. 创建组件构造器</span></span><br><span class="line"><span class="keyword">const</span> toastConstructor = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(<span class="title class_">Toast</span>)</span><br><span class="line"><span class="comment">// 2. 使用组件构造器创建一个组件</span></span><br><span class="line"> <span class="keyword">const</span> toast = <span class="keyword">new</span> <span class="title function_">toastConstructor</span>()</span><br><span class="line"><span class="comment">// 3. 将组件手动挂载到一个元素上</span></span><br><span class="line">toast.$mount(<span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>))</span><br><span class="line"><span class="comment">// 4. 将节点插入到页面中，$el就是改组件的节点</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(toast.<span class="property">$el</span>)</span><br><span class="line"><span class="comment">// 5. 将组件加入到vue实例上</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$toast</span> = toast</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> toast</span><br></pre></td></tr></table></figure><p>toast/toast.vue </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"toast"</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span>></span>{{massage}}<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">"Toast"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">massage</span>: <span class="string">''</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">isShow</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">show</span>(<span class="params">msg=<span class="string">'默认文字'</span>,durations=<span class="number">2000</span></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'----'</span>)</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">massage</span> = msg</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">isShow</span> = <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript"> <span class="built_in">setTimeout</span>(<span class="function">()=></span>{</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">isShow</span> = <span class="literal">false</span></span></span><br><span class="line"><span class="language-javascript"> },durations)</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.toast</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: fixed;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">7px</span> <span class="number">10px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">8</span>);</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">z-index</span>: <span class="number">9999</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></pre></td></tr></table></figure><p>入口文件，一般为<code>main.js</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">....</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> toast <span class="keyword">from</span> <span class="string">'@/plugins/toast/index.js'</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(toast)</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>vue多页面构建</title>
<link href="/post/20221209144455.html"/>
<url>/post/20221209144455.html</url>
<content type="html"><![CDATA[<p>具体实现后续补充<br>参考内容：<a href="https://www.kancloud.cn/sllyli/vueproject/1244252">Vue 项目构建与开发入门</a><br>代码仓库：<a href="https://github.com/hearthitagi/vue-mpa-demo">vue-mpa-demo</a> </p><h2 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h2><blockquote><p>├── node_modules # 项目依赖包目录<br>├── build # 项目 webpack 功能目录<br>├── config # 项目配置项文件夹<br>├── src # 前端资源目录<br>│ ├── images # 图片目录<br>│ ├── components # 公共组件目录<br>│ ├── pages # 页面目录<br>│ │ ├── page1 # page1 目录<br>│ │ │ ├── components # page1 组件目录<br>│ │ │ ├── router # page1 路由目录<br>│ │ │ ├── views # page1 页面目录<br>│ │ │ ├── page1.html # page1 html 模板<br>│ │ │ ├── page1.vue # page1 vue 配置文件<br>│ │ │ └── page1.js # page1 入口文件<br>│ │ ├── page2 # page2 目录<br>│ │ └── index # index 目录<br>│ ├── common # 公共方法目录<br>│ └── store # 状态管理 store 目录<br>├── .gitignore # git 忽略文件<br>├── .env # 全局环境配置文件<br>├── .env.dev # 开发环境配置文件<br>├── .postcssrc.js # postcss 配置文件<br>├── babel.config.js # babel 配置文件<br>├── package.json # 包管理文件<br>├── vue.config.js # CLI 配置文件<br>└── yarn.lock # yarn 依赖信息文件 </p></blockquote><h2 id="改造内容"><a href="#改造内容" class="headerlink" title="改造内容"></a>改造内容</h2><p>。。。</p>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>博客的GithubAction自动部署</title>
<link href="/post/20221025234155.html"/>
<url>/post/20221025234155.html</url>
<content type="html"><![CDATA[<p><a href="https://akilar.top/posts/f752c86d/">参考文章</a></p>]]></content>
<categories>
<category> 杂记 </category>
</categories>
<tags>
<tag> blog </tag>
</tags>
</entry>
<entry>
<title>javaScript嵌套函数return</title>
<link href="/post/20220331152320.html"/>
<url>/post/20220331152320.html</url>
<content type="html"><![CDATA[<p>在遇到树形结构数据，js进行遍历时，return不会跳出整个函数。需要用到throw</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">check</span>(<span class="params">list</span>){</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> item <span class="keyword">of</span> list) {</span><br><span class="line"> <span class="keyword">if</span> (item.<span class="property">name</span>==<span class="string">'张三孙'</span>) {<span class="comment">//这里可以校验其他情况</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(item.<span class="property">name</span>);</span><br><span class="line"> <span class="comment">//...一些操作</span></span><br><span class="line"> <span class="comment">// 这里return并不会跳除整个check()函数，可以使用throw</span></span><br><span class="line"> <span class="keyword">throw</span> <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (item.<span class="property">child</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">check</span>(item.<span class="property">child</span>);</span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line">}</span><br><span class="line"><span class="comment">//另一个组件，或者需要检测check()函数返回的其他地方</span></span><br><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'张三'</span>,</span><br><span class="line"> <span class="attr">child</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'张三子'</span>,</span><br><span class="line"> <span class="attr">child</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'张三孙'</span>,</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">]</span><br><span class="line"><span class="keyword">try</span> {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">check</span>(arr);</span><br><span class="line">} <span class="keyword">catch</span> (stat) {</span><br><span class="line"> <span class="keyword">if</span> (stat) { <span class="keyword">return</span>; }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> javaScript </tag>
</tags>
</entry>
<entry>
<title>three.js实现3d地球</title>
<link href="/post/20220328130333.html"/>
<url>/post/20220328130333.html</url>
<content type="html"><![CDATA[<p>angular中引入three.js并实现简易3d地球<br><a href="https://github.com/hearthitagi/3d-earth-three.js">项目地址</a><br>html中</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">canvas</span> #<span class="attr">canvas</span>></span><span class="tag"></<span class="name">canvas</span>></span></span><br></pre></td></tr></table></figure><p>ts文件中</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="variable constant_">THREE</span> <span class="keyword">from</span> <span class="string">'three'</span>;</span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">OrbitControls</span> } <span class="keyword">from</span> <span class="string">'three-orbitcontrols-ts'</span>;</span><br><span class="line"></span><br><span class="line">private <span class="attr">renderer</span>: <span class="variable constant_">THREE</span>.<span class="property">WebGLRenderer</span>;</span><br><span class="line">private <span class="attr">camera</span>: <span class="variable constant_">THREE</span>.<span class="property">OrthographicCamera</span>;</span><br><span class="line">public <span class="attr">scene</span>: <span class="variable constant_">THREE</span>.<span class="property">Scene</span>;</span><br><span class="line">public s = <span class="number">200</span>;<span class="comment">//三维显示范围控制系数，系数越大，显示范围越大</span></span><br><span class="line">public <span class="attr">controls</span>: <span class="title class_">OrbitControls</span>;</span><br><span class="line">public <span class="attr">satellite</span>: <span class="variable constant_">THREE</span>.<span class="property">Points</span>;</span><br><span class="line"></span><br><span class="line">@<span class="title class_">ViewChild</span>(<span class="string">'canvas'</span>)</span><br><span class="line">private <span class="attr">canvasRef</span>: <span class="title class_">ElementRef</span>;</span><br><span class="line"></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">render</span> = <span class="variable language_">this</span>.<span class="property">render</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">//获取canvas元素</span></span><br><span class="line">private <span class="keyword">get</span> <span class="title function_">canvas</span>(): <span class="title class_">HTMLCanvasElement</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">canvasRef</span>.<span class="property">nativeElement</span>;</span><br><span class="line">} </span><br><span class="line"><span class="comment">// 计算v1,v2 的中点</span></span><br><span class="line">private <span class="title function_">getVCenter</span>(<span class="params">v1, v2</span>) {</span><br><span class="line"> <span class="keyword">let</span> v = v1.<span class="title function_">add</span>(v2);</span><br><span class="line"> <span class="keyword">return</span> v.<span class="title function_">divideScalar</span>(<span class="number">2</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 计算V1，V2向量固定长度的点</span></span><br><span class="line">private <span class="title function_">getLenVcetor</span>(<span class="params">v1, v2, len</span>) {</span><br><span class="line"> <span class="keyword">let</span> v1v2Len = v1.<span class="title function_">distanceTo</span>(v2);</span><br><span class="line"> <span class="keyword">return</span> v1.<span class="title function_">lerp</span>(v2, len / v1v2Len);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 根据经纬度获得三位坐标点</span></span><br><span class="line"><span class="title function_">lglt2xyz</span>(<span class="params">lng, lat, radius</span>) {</span><br><span class="line"> <span class="keyword">const</span> theta = (<span class="number">90</span> + lng) * (<span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">180</span>)</span><br><span class="line"> <span class="keyword">const</span> phi = (<span class="number">90</span> - lat) * (<span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">180</span>)</span><br><span class="line"> <span class="keyword">return</span> (<span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Vector3</span>()).<span class="title function_">setFromSpherical</span>(<span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Spherical</span>(radius, phi, theta))</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 添加飞线</span></span><br><span class="line">private <span class="title function_">addLines</span>(<span class="params">v0, v3</span>) { </span><br><span class="line"> <span class="comment">// 夹角</span></span><br><span class="line"> <span class="keyword">var</span> angle = (v0.<span class="title function_">angleTo</span>(v3) * <span class="number">1.8</span>) / <span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">0.1</span>; <span class="comment">// 0 ~ Math.PI</span></span><br><span class="line"> <span class="keyword">var</span> aLen = angle * <span class="number">12</span>,</span><br><span class="line"> hLen = angle * angle * <span class="number">12</span>;</span><br><span class="line"> <span class="keyword">var</span> p0 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Vector3</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"> <span class="keyword">var</span> vtop = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Vector3</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"> <span class="comment">// 法线向量</span></span><br><span class="line"> <span class="keyword">var</span> rayLine = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Ray</span>(p0, <span class="variable language_">this</span>.<span class="title function_">getVCenter</span>(v0.<span class="title function_">clone</span>(), v3.<span class="title function_">clone</span>()));</span><br><span class="line"> <span class="comment">// 顶点坐标</span></span><br><span class="line"> rayLine.<span class="title function_">at</span>(hLen / rayLine.<span class="title function_">at</span>(<span class="number">1</span>, rayLine.<span class="property">origin</span>).<span class="title function_">length</span>(), vtop);</span><br><span class="line"> <span class="comment">// 控制点坐标</span></span><br><span class="line"> <span class="keyword">var</span> v1 = <span class="variable language_">this</span>.<span class="title function_">getLenVcetor</span>(v0.<span class="title function_">clone</span>(), vtop, aLen);</span><br><span class="line"> <span class="keyword">var</span> v2 = <span class="variable language_">this</span>.<span class="title function_">getLenVcetor</span>(v3.<span class="title function_">clone</span>(), vtop, aLen);</span><br><span class="line"> <span class="comment">// 绘制贝塞尔曲线</span></span><br><span class="line"> <span class="keyword">var</span> curve = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">CubicBezierCurve3</span>(v0, v1, v2, v3);</span><br><span class="line"> <span class="keyword">var</span> gLine = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">BufferGeometry</span>();</span><br><span class="line"> <span class="keyword">var</span> gPoints = curve.<span class="title function_">getPoints</span>(<span class="number">60</span>); </span><br><span class="line"> gLine.<span class="title function_">setFromPoints</span>(gPoints)</span><br><span class="line"> <span class="keyword">var</span> mLine = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">LineBasicMaterial</span>({</span><br><span class="line"> <span class="attr">color</span>: <span class="string">'violet'</span>,</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">curve</span>: curve,</span><br><span class="line"> <span class="attr">lineMesh</span>: <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Line</span>(gLine, mLine)</span><br><span class="line"> };</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建场景</span></span><br><span class="line">private <span class="title function_">createScene</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">scene</span> = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Scene</span>();</span><br><span class="line"> <span class="keyword">var</span> geometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">SphereGeometry</span>(<span class="number">130</span>,<span class="number">40</span>,<span class="number">40</span>);<span class="comment">//地球</span></span><br><span class="line"> <span class="comment">//卫星</span></span><br><span class="line"> <span class="keyword">var</span> p1 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Vector3</span>(<span class="number">200</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"> <span class="keyword">const</span> points = [p1];</span><br><span class="line"> <span class="keyword">var</span> satelliteGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">BufferGeometry</span>();</span><br><span class="line"> satelliteGeometry.<span class="title function_">setFromPoints</span>(points);</span><br><span class="line"> <span class="comment">// 贴图</span></span><br><span class="line"> <span class="keyword">var</span> loader = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">TextureLoader</span>();</span><br><span class="line"> <span class="comment">// 地球贴图</span></span><br><span class="line"> loader.<span class="title function_">load</span>(<span class="string">'../../assets/images/earth3.jpg'</span>, <span class="function">(<span class="params">texture</span>)=></span>{</span><br><span class="line"> <span class="keyword">var</span> material = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshLambertMaterial</span>({</span><br><span class="line"> <span class="attr">map</span>:texture,<span class="comment">//设置贴图属性值</span></span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">var</span> mesh = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(geometry,material)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">scene</span>.<span class="title function_">add</span>(mesh)</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">// 卫星贴图</span></span><br><span class="line"> loader.<span class="title function_">load</span>(<span class="string">'../../assets/images/moon.png'</span>,<span class="function">(<span class="params">texture</span>)=></span>{</span><br><span class="line"> <span class="keyword">var</span> satelliteMaterial = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PointsMaterial</span>({</span><br><span class="line"> <span class="attr">map</span>:texture,</span><br><span class="line"> <span class="attr">transparent</span>:<span class="literal">true</span>,</span><br><span class="line"> <span class="attr">size</span>:<span class="number">20</span>,</span><br><span class="line"> <span class="attr">depthWrite</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">satellite</span> = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Points</span>(satelliteGeometry,satelliteMaterial)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">scene</span>.<span class="title function_">add</span>(<span class="variable language_">this</span>.<span class="property">satellite</span>)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">render</span>();</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 飞线</span></span><br><span class="line"> <span class="keyword">var</span> lGroup = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Group</span>();</span><br><span class="line"> lGroup.<span class="title function_">add</span>(<span class="variable language_">this</span>.<span class="title function_">addLines</span>(<span class="variable language_">this</span>.<span class="title function_">lglt2xyz</span>(<span class="number">116.20</span>,<span class="number">39.56</span>,<span class="number">130</span>),<span class="variable language_">this</span>.<span class="title function_">lglt2xyz</span>(-<span class="number">74.70</span>,<span class="number">40.43</span>,<span class="number">130</span>)).<span class="property">lineMesh</span>)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">scene</span>.<span class="title function_">add</span>(lGroup)</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 创建光源</span></span><br><span class="line">private <span class="title function_">createLight</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> light = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">AmbientLight</span>(<span class="number">0xffffff</span>)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">scene</span>.<span class="title function_">add</span>(light);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 创建相机</span></span><br><span class="line">private <span class="title function_">createCamera</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> k = <span class="variable language_">window</span>.<span class="property">innerWidth</span>/<span class="variable language_">window</span>.<span class="property">innerHeight</span>;<span class="comment">//窗口宽高比</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">camera</span> = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">OrthographicCamera</span>(-<span class="variable language_">this</span>.<span class="property">s</span>*k,<span class="variable language_">this</span>.<span class="property">s</span>*k,<span class="variable language_">this</span>.<span class="property">s</span>,-<span class="variable language_">this</span>.<span class="property">s</span>,<span class="number">1</span>,<span class="number">10000</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">camera</span>.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">5</span>,-<span class="number">20</span>,<span class="number">200</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">camera</span>.<span class="title function_">lookAt</span>(<span class="variable language_">this</span>.<span class="property">scene</span>.<span class="property">position</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 渲染器设置</span></span><br><span class="line">private <span class="title function_">renderSetting</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">renderer</span> = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">WebGLRenderer</span>({</span><br><span class="line"> <span class="attr">canvas</span>: <span class="variable language_">this</span>.<span class="property">canvas</span>,</span><br><span class="line"> <span class="attr">antialias</span>: <span class="literal">true</span></span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">renderer</span>.<span class="title function_">setSize</span>(<span class="variable language_">window</span>.<span class="property">innerWidth</span>, <span class="variable language_">window</span>.<span class="property">innerHeight</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">renderer</span>.<span class="title function_">setClearColor</span>(<span class="number">0xb9d3ff</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">public <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">renderer</span>.<span class="title function_">render</span>(<span class="variable language_">this</span>.<span class="property">scene</span>, <span class="variable language_">this</span>.<span class="property">camera</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">satellite</span>.<span class="title function_">rotateY</span>(<span class="number">0.01</span>);</span><br><span class="line"> <span class="title function_">requestAnimationFrame</span>(<span class="variable language_">this</span>.<span class="property">render</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 鼠标控制</span></span><br><span class="line">public <span class="title function_">addControls</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">controls</span> = <span class="keyword">new</span> <span class="title class_">OrbitControls</span>(<span class="variable language_">this</span>.<span class="property">camera</span>,<span class="variable language_">this</span>.<span class="property">renderer</span>.<span class="property">domElement</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 class_">HostListener</span>(<span class="string">'window:resize'</span>, [<span class="string">'$event'</span>])</span><br><span class="line">public <span class="title function_">onResize</span>(<span class="params">event: Event</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">canvas</span>.<span class="property">style</span>.<span class="property">width</span> = <span class="string">"100%"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">canvas</span>.<span class="property">style</span>.<span class="property">height</span> = <span class="string">"100%"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">renderer</span>.<span class="title function_">setSize</span>(<span class="variable language_">this</span>.<span class="property">canvas</span>.<span class="property">offsetWidth</span>, <span class="variable language_">this</span>.<span class="property">canvas</span>.<span class="property">offsetHeight</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">camera</span>.<span class="title function_">updateProjectionMatrix</span>();</span><br><span class="line">}</span><br><span class="line"><span class="title function_">ngOnInit</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">createScene</span>();</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">createLight</span>();</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">createCamera</span>();</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">renderSetting</span>();</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">addControls</span>();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> three.js </tag>
<tag> angular </tag>
</tags>
</entry>
<entry>
<title>毕业设计技术总结 02</title>
<link href="/post/20220318180752.html"/>
<url>/post/20220318180752.html</url>
<content type="html"><![CDATA[<blockquote><p>此篇开始简略描述实现过程<br>此篇只负责流程，错误解决待之后整理</p></blockquote><h2 id="1、服务器篇"><a href="#1、服务器篇" class="headerlink" title="1、服务器篇"></a>1、服务器篇</h2><p>部署环境为阿里云服务器，操作系统：Centos 8</p><h3 id="1-1-安装mongoDB"><a href="#1-1-安装mongoDB" class="headerlink" title="1.1 安装mongoDB"></a>1.1 安装mongoDB</h3><p>在此之前，由于在2021年12月31日，CentOS 8操作系统版本结束了生命周期，CentOS 8的源地址<code>http://mirror.centos.org/centos/8/</code>内容已移除。所以继续使用阿里云默认源会报错，所以需要换源配置。 </p><p>详见这篇文章 <a href="https://help.aliyun.com/document_detail/405635.html">CentOS 8 EOL如何切换源</a> </p><p><code>sudo vim /etc/yum.repos.d/mongodb-org.repo</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">[mongodb-org-5.0]</span><br><span class="line">name=MongoDB Repository</span><br><span class="line">baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/5.0/x86_64/</span><br><span class="line">gpgcheck=1</span><br><span class="line">enabled=1</span><br><span class="line">gpgkey=https://www.mongodb.org/static/pgp/server-5.0.asc</span><br></pre></td></tr></table></figure><p><code>sudo dnf install mongodb-org</code> </p><p><code>sudo systemctl enable mongod --now</code> </p><p><strong>验证安装 <code>mongo</code></strong></p><p>MongoDB配置文件名为mongod.conf，位于/etc目录中。<br>对于生产环境，建议取消对安全性部分的注释并启用授权</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">security:</span><br><span class="line"> authorization: enabled</span><br></pre></td></tr></table></figure><p>重启mongod服务<code>sudo systemctl restart mongod</code></p><h3 id="1-2-创建mongoDB管理员"><a href="#1-2-创建mongoDB管理员" class="headerlink" title="1.2 创建mongoDB管理员"></a>1.2 创建mongoDB管理员</h3><p><code>mongo</code><br><code>use admin</code><br><code>switched to db admin</code><br><strong>使用userAdminAnyDatabase角色创建新用户</strong></p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">db.createUser(</span><br><span class="line"> {</span><br><span class="line"> user: "username", </span><br><span class="line"> pwd: "password", </span><br><span class="line"> roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]</span><br><span class="line"> }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p><code>quit()</code> </p><p><code>mongo -u username -p --authenticationDatabase admin</code></p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">MongoDB shell version v5.0.5</span><br><span class="line">Enter password: </span><br></pre></td></tr></table></figure><p><code>use admin</code> </p><p><code>show users</code></p><h3 id="1-3-安装express"><a href="#1-3-安装express" class="headerlink" title="1.3 安装express"></a>1.3 安装express</h3><p><code>npm i express-generator -g</code><br><strong>选择express项目的位置，创建express(serve为项目名)</strong> </p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd /opt</span><br><span class="line">express serve</span><br></pre></td></tr></table></figure><p><strong>安装框架依赖模块</strong> </p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd serve</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure><p>启动/访问测试 <code>npm start</code> </p><p>访问服务器地址的3000端口<code>http://59.110.xxx.xx:3000</code></p><h3 id="1-4-连接数据库-模块化"><a href="#1-4-连接数据库-模块化" class="headerlink" title="1.4 连接数据库/模块化"></a>1.4 连接数据库/模块化</h3><p>serve根目录下创建<code>common/config.json</code></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//mode为mongodb集合名称</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"db_config"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"host"</span><span class="punctuation">:</span> <span class="string">"localhost"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"port"</span><span class="punctuation">:</span> <span class="number">27017</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"dbname"</span><span class="punctuation">:</span> <span class="string">"mode"</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p><code>npm i mongoose</code> </p><p><strong>创建文件</strong><code>common/db.js</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入mongoose</span></span><br><span class="line"><span class="keyword">const</span> mongoose = <span class="built_in">require</span>(<span class="string">'mongoose'</span>);</span><br><span class="line"><span class="comment">// 导入配置文件</span></span><br><span class="line"><span class="keyword">const</span> configObj = <span class="built_in">require</span>(process.<span class="title function_">cwd</span>() + <span class="string">"/common/config.json"</span>).<span class="property">db_config</span></span><br><span class="line"><span class="comment">// 连接数据库</span></span><br><span class="line"><span class="keyword">const</span> db = mongoose.<span class="title function_">createConnection</span>(</span><br><span class="line"> <span class="string">`mongodb://<span class="subst">${configObj.host}</span>:<span class="subst">${configObj.port}</span>/<span class="subst">${configObj.dbname}</span>`</span>,</span><br><span class="line"> { <span class="attr">useNewUrlParser</span>: <span class="literal">true</span>, <span class="attr">useUnifiedTopology</span>: <span class="literal">true</span> },</span><br><span class="line"> <span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (err) { <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'数据库连接失败：'</span>, configObj); <span class="keyword">return</span>;}</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'数据库连接成功'</span>);</span><br><span class="line"> })</span><br><span class="line"><span class="comment">// 声明全局变量 全局都可以用</span></span><br><span class="line"><span class="variable language_">global</span>.<span class="property">db</span> = db</span><br></pre></td></tr></table></figure><p><strong>创建文件</strong><code>common/utils.js</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 接口响应</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">Object</span>} res 响应对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">Number</span>} code 状态码</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} message 提示信息</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">mixed</span>} data 响应数据</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="variable language_">global</span>.<span class="property">sendJson</span> = <span class="function">(<span class="params">res, state, message, data = <span class="literal">null</span></span>) =></span> {</span><br><span class="line"> res.<span class="title function_">send</span>({ state,message,data });</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>app.js中引入数据库配置</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在入口文件app.js头部引入</span></span><br><span class="line"><span class="built_in">require</span>(process.<span class="title function_">cwd</span>() + <span class="string">'/common/db.js'</span>)</span><br><span class="line"><span class="built_in">require</span>(process.<span class="title function_">cwd</span>() + <span class="string">'/common/utils.js'</span>)</span><br></pre></td></tr></table></figure><h3 id="1-5-express路由"><a href="#1-5-express路由" class="headerlink" title="1.5 express路由"></a>1.5 express路由</h3><p><strong>创建文件</strong> <code>routes/posts.js</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</span><br><span class="line"><span class="keyword">var</span> router = express.<span class="title class_">Router</span>();</span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">'/'</span>, <span class="keyword">function</span>(<span class="params">req,res,next</span>) {</span><br><span class="line"> res.<span class="title function_">send</span>(<span class="string">"response data"</span>)</span><br><span class="line">})</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><p><code>app.js</code>中导入、激活路由</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> postsRouter = <span class="built_in">require</span>(<span class="string">'./routes/posts'</span>);<span class="comment">//导入</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="string">'/postList'</span>, postsRouter);<span class="comment">//激活</span></span><br></pre></td></tr></table></figure><h3 id="1-6-后端利用MVC-代码分离"><a href="#1-6-后端利用MVC-代码分离" class="headerlink" title="1.6 后端利用MVC,代码分离"></a>1.6 后端利用MVC,代码分离</h3><p><strong>创建<code>model/posts.js</code>,获取数据</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> postsModel = db.<span class="title function_">model</span>(<span class="string">'posts'</span>, {</span><br><span class="line"> <span class="attr">avatar</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">categoryId</span>: { <span class="attr">type</span>: <span class="title class_">Number</span> },</span><br><span class="line"> <span class="attr">createTime</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">title</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">updateTime</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">userId</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">userName</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">content</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">coverImgUrl</span>: { <span class="attr">type</span>: <span class="title class_">String</span> },</span><br><span class="line"> <span class="attr">readNum</span>: { <span class="attr">type</span>: <span class="title class_">Number</span> },</span><br><span class="line"> <span class="attr">zan</span>: { <span class="attr">type</span>: <span class="title class_">Number</span> },</span><br><span class="line">}, <span class="string">'posts'</span>)</span><br><span class="line"><span class="comment">// 贴子列表的查询</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">postList</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="keyword">return</span> postsModel.<span class="title function_">find</span>()</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> { <span class="keyword">return</span> res })</span><br><span class="line"> .<span class="title function_">catch</span>(<span class="function"><span class="params">err</span> =></span> { <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'查询错误：'</span> + err); <span class="keyword">return</span> <span class="literal">null</span> })</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> postList,postsModel</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>修改<code>controller/posts.js</code>，获取model数据并处理</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> { postList } = <span class="built_in">require</span>(process.<span class="title function_">cwd</span>() + <span class="string">"/model/posts"</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">getPostList</span> = <span class="keyword">async</span> (<span class="params">req, res</span>) => {</span><br><span class="line"> <span class="keyword">let</span> postData = <span class="keyword">await</span> <span class="title function_">postList</span>();</span><br><span class="line"> <span class="keyword">if</span>(req.<span class="property">body</span>.<span class="property">postsId</span>){ <span class="comment">//根据贴子id查询</span></span><br><span class="line"> postData = postData.<span class="title function_">filter</span>(<span class="function">(<span class="params">value</span>)=></span>{ </span><br><span class="line"> <span class="keyword">return</span> value.<span class="property">postsId</span> == req.<span class="property">body</span>.<span class="property">postsId</span> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (req.<span class="property">body</span>.<span class="property">title</span>) { <span class="comment">//根据贴子标题查询</span></span><br><span class="line"> postData = postData.<span class="title function_">filter</span>(<span class="function">(<span class="params">value</span>)=></span>{ </span><br><span class="line"> <span class="keyword">return</span> value.<span class="property">title</span>.<span class="title function_">includes</span>(req.<span class="property">body</span>.<span class="property">title</span>) })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (req.<span class="property">body</span>.<span class="property">categoryId</span>) { <span class="comment">//根据贴子分类查询</span></span><br><span class="line"> postData = postData.<span class="title function_">filter</span>(<span class="function">(<span class="params">value</span>)=></span>{ </span><br><span class="line"> <span class="keyword">return</span> value.<span class="property">categoryId</span> == req.<span class="property">body</span>.<span class="property">categoryId</span> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (req.<span class="property">body</span>.<span class="property">pageNum</span> && req.<span class="property">body</span>.<span class="property">pageSize</span>) { <span class="comment">//根据页码查询</span></span><br><span class="line"> postData = postData.<span class="title function_">splice</span>( (req.<span class="property">body</span>.<span class="property">pageNum</span>-<span class="number">1</span>)*req.<span class="property">body</span>.<span class="property">pageSize</span>,req.<span class="property">body</span>.<span class="property">pageSize</span> )</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">sendJson</span>(res, <span class="number">200</span>, <span class="string">"操作成功"</span>, {<span class="attr">total</span>:postData.<span class="property">length</span>,<span class="attr">rows</span>:postData})</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> getPostList</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>修改<code>routes/posts.js</code></strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</span><br><span class="line"><span class="keyword">var</span> router = express.<span class="title class_">Router</span>();</span><br><span class="line"><span class="comment">// 引入controller/posts.js中的方法</span></span><br><span class="line"><span class="keyword">const</span> { getPostList } = <span class="built_in">require</span>(process.<span class="title function_">cwd</span>() + <span class="string">'/controller/posts'</span>)</span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">'/'</span>, getPostList)</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><h3 id="1-7-post接口传参与文件上传"><a href="#1-7-post接口传参与文件上传" class="headerlink" title="1.7 post接口传参与文件上传"></a>1.7 post接口传参与文件上传</h3><h4 id="1-7-1-post传参"><a href="#1-7-1-post传参" class="headerlink" title="1.7.1 post传参"></a>1.7.1 post传参</h4><blockquote><p>上文中的<code>req.body.postsId</code>,<code>req.body.title</code>等<br>拿到的是前端post请求传递的参数，需要引入express中间件</p><p>创建express项目时，也自动下载了body-parser这个包，可直接使用</p></blockquote><p><code>npm install body-parser</code> </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//app.js文件头部</span></span><br><span class="line"><span class="keyword">const</span> bodyParser = <span class="built_in">require</span>(<span class="string">'body-parser'</span>)</span><br></pre></td></tr></table></figure><h4 id="1-7-2-文件上传"><a href="#1-7-2-文件上传" class="headerlink" title="1.7.2 文件上传"></a>1.7.2 文件上传</h4><blockquote><p>需要文件上传操作时，需要使用multer这个包来获取上传的信息</p></blockquote><p><code>npm install multer</code> </p><p>详细使用参考<a href="https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md">github文档</a> </p><p><code>controller/saveImage.js</code>中</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> multer = <span class="built_in">require</span>(<span class="string">'multer'</span>);<span class="comment">//multer插件</span></span><br><span class="line"><span class="comment">// 磁盘存储</span></span><br><span class="line"><span class="keyword">let</span> storage = multer.<span class="title function_">diskStorage</span>({</span><br><span class="line"> <span class="attr">destination</span>:<span class="function">(<span class="params">req, file, cb</span>)=></span>{</span><br><span class="line"> <span class="comment">//存入目标文件夹</span></span><br><span class="line"> <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="string">'./public/images'</span>)</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">filename</span>:<span class="function">(<span class="params">req, file, cb</span>)=></span> {</span><br><span class="line"> <span class="comment">//重命名</span></span><br><span class="line"> <span class="title function_">cb</span>(<span class="literal">null</span>, <span class="string">`<span class="subst">${<span class="built_in">Date</span>.now()}</span>-<span class="subst">${file.originalname}</span>`</span>)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="keyword">const</span> upload = <span class="title function_">multer</span>({ <span class="attr">storage</span>:storage })</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">getSaveImage</span> = (<span class="params">req, res</span>) => {</span><br><span class="line"> <span class="keyword">let</span> url = <span class="string">`http://59.110.124.95:3000/images/<span class="subst">${req.file.filename}</span>`</span></span><br><span class="line"> <span class="title function_">sendJson</span>(res, <span class="number">200</span>, <span class="string">"上传成功"</span>, <span class="title class_">Object</span>.<span class="title function_">assign</span>(req.<span class="property">file</span>,{ url }))</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> getSaveImage,upload</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>routes/posts.js</code>中</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</span><br><span class="line"><span class="keyword">var</span> router = express.<span class="title class_">Router</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> { getSaveImage,upload } = <span class="built_in">require</span>(process.<span class="title function_">cwd</span>() + <span class="string">'/controller/saveImage'</span>);</span><br><span class="line"><span class="comment">// 传单个文件</span></span><br><span class="line">router.<span class="title function_">post</span>(<span class="string">'/'</span>,upload.<span class="title function_">single</span>(<span class="string">'file'</span>), getSaveImage);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure><p>post请求传参与express中间件参考：<a href="https://www.jianshu.com/p/828fdf02de06">Express中间件,bodyparser,multer,formidable区别浅谈</a> </p><h2 id="2、前端设计"><a href="#2、前端设计" class="headerlink" title="2、前端设计"></a>2、前端设计</h2>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> mongoDB </tag>
<tag> express </tag>
</tags>
</entry>
<entry>
<title>毕业设计技术总结 01</title>
<link href="/post/20220222171407.html"/>
<url>/post/20220222171407.html</url>
<content type="html"><![CDATA[<h2 id="1、mongoDB"><a href="#1、mongoDB" class="headerlink" title="1、mongoDB"></a>1、mongoDB</h2><p><a href="https://docs.mongoing.com/">中文文档</a><br>MongoDB是一种面向文档的数据库管理系统，是专为可扩展性，高性能和高可用性而设计的数据库。</p><h3 id="1-1概念"><a href="#1-1概念" class="headerlink" title="1.1概念"></a>1.1概念</h3><ul><li>文档：mongodb将数据以BSON文档的形式存储，每一行数据即为一个文档，文档的值可以是任意BSON类型，或者是嵌套的其他文档，数组和文档数组；相当于关系数据库的行。 </li><li>集合：MongoDB将文档存储在集合中。集合类似于关系数据库中的表。</li></ul><h3 id="1-2-基本CURD命令"><a href="#1-2-基本CURD命令" class="headerlink" title="1.2 基本CURD命令"></a>1.2 基本CURD命令</h3><h4 id="插入文档"><a href="#插入文档" class="headerlink" title="插入文档"></a>插入文档</h4><p><code>db.collection.insertOne()</code>将单个文档插入集合中。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">db.<span class="property">inventory</span>.<span class="title function_">insertOne</span>({ <span class="comment">//mode为集合名</span></span><br><span class="line"> <span class="attr">item</span>: <span class="string">"canvas"</span>, <span class="attr">qty</span>: <span class="number">100</span>, <span class="attr">tags</span>: [<span class="string">"cotton"</span>], </span><br><span class="line"> <span class="attr">size</span>: { <span class="attr">h</span>: <span class="number">28</span>, <span class="attr">w</span>: <span class="number">35.5</span>, <span class="attr">uom</span>: <span class="string">"cm"</span> } </span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><code>db.collection.insertMany()</code>可以将多个文档插入一个集合中, 将文档数组传递给该方法</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">db.<span class="property">inventory</span>.<span class="title function_">insertMany</span>([</span><br><span class="line"> { <span class="attr">item</span>: <span class="string">"journal"</span>, <span class="attr">qty</span>: <span class="number">25</span> }, </span><br><span class="line"> { <span class="attr">item</span>: <span class="string">"mat"</span>, <span class="attr">qty</span>: <span class="number">85</span> },</span><br><span class="line"> { <span class="attr">item</span>: <span class="string">"mousepad"</span>, <span class="attr">qty</span>: <span class="number">25</span> }</span><br><span class="line">])</span><br></pre></td></tr></table></figure><h4 id="查询文档"><a href="#查询文档" class="headerlink" title="查询文档"></a>查询文档</h4><p><code>db.inventory.find({})</code>查询集合中的所有文档<br><code>db.inventory.find({ status: "D" })</code>查询集合中status等于’D’的文档<br>使用查询操作符：查询集合中status等于’A’或’D’的文档<br><code>db.inventory.find({ status: {$in: ["A","D"]} })</code><br><a href="https://docs.mongodb.com/manual/reference/operator/query/">查询操作符</a></p><table><thead><tr><th align="center">Name</th><th align="center">描述</th></tr></thead><tbody><tr><td align="center">$eq</td><td align="center">=</td></tr><tr><td align="center">$gt</td><td align="center">></td></tr><tr><td align="center">$gte</td><td align="center">>=</td></tr><tr><td align="center">$in</td><td align="center">查询包含数组中任一值的文档</td></tr><tr><td align="center">$nin</td><td align="center">查询不包含数组中任一值的文档</td></tr><tr><td align="center">$lt</td><td align="center"><</td></tr><tr><td align="center">$lte</td><td align="center"><=</td></tr><tr><td align="center">$ne</td><td align="center">!=</td></tr><tr><td align="center">$and</td><td align="center">and</td></tr><tr><td align="center">$or</td><td align="center">or</td></tr><tr><td align="center">$not</td><td align="center">匹配不符合查询表达式的文档</td></tr><tr><td align="center">$nor</td><td align="center">匹配两个查询子句都不符合的文档</td></tr><tr><td align="center">$exists</td><td align="center">匹配具有指定字段的文档</td></tr><tr><td align="center">$type</td><td align="center">如果字段属于指定类型，则选择文档</td></tr></tbody></table><h4 id="更新文档"><a href="#更新文档" class="headerlink" title="更新文档"></a>更新文档</h4><p><code>db.collection.updateOne()</code>更新单个文档</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//更新集合中item等于paper的第一个文档,将这个文档的status设置为'p'</span></span><br><span class="line"><span class="comment">//如果status不存在，则会创建该字段</span></span><br><span class="line">db.<span class="property">inventory</span>.<span class="title function_">updateOne</span>( </span><br><span class="line"> { <span class="attr">item</span>: <span class="string">"paper"</span> },</span><br><span class="line"> { <span class="attr">$set</span>: { <span class="attr">status</span>: <span class="string">"P"</span> } }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p><code>db.collection.updateMany()</code>更新多个文档</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//更新集合中score<60的所有文档,将这个文档的status设置为'p'</span></span><br><span class="line">db.<span class="property">inventory</span>.<span class="title function_">updateMany</span>( </span><br><span class="line"> { <span class="attr">score</span>: { <span class="attr">$lt</span>: <span class="number">60</span> } },</span><br><span class="line"> { <span class="attr">$set</span>: { <span class="attr">status</span>: <span class="string">"P"</span> } }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p><a href="https://docs.mongodb.com/manual/reference/operator/update/">更新操作符</a> </p><table><thead><tr><th align="center">Name</th><th align="center">描述</th></tr></thead><tbody><tr><td align="center">$currentDate</td><td align="center">将字段的值设置为当前日期，可以是日期或时间戳</td></tr><tr><td align="center">$inc</td><td align="center">将字段的值增加指定的数量</td></tr><tr><td align="center">$min</td><td align="center">仅当指定值小于现有字段值时才更新字段</td></tr><tr><td align="center">$max</td><td align="center">仅当指定值大于现有字段值时才更新字段</td></tr><tr><td align="center">$mul</td><td align="center">将字段的值乘以指定的数量</td></tr><tr><td align="center">$rename</td><td align="center">重命名字段</td></tr><tr><td align="center">$set</td><td align="center">设置文档中字段的值</td></tr><tr><td align="center">$unset</td><td align="center">从文档中删除指定的字段</td></tr><tr><td align="center"><code>db.collection.replaceOne()</code>替换<code>_id</code>字段以外的文档的全部内容</td><td align="center"></td></tr></tbody></table><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//更新集合中item等于paper的第一个文档,将这个文档除_id字段以外的所有字段替换成第二个参数</span></span><br><span class="line">db.<span class="property">inventory</span>.<span class="title function_">replaceOne</span>(</span><br><span class="line"> { <span class="attr">item</span>: <span class="string">"paper"</span> },</span><br><span class="line"> { <span class="attr">item</span>: <span class="string">"paper"</span>, <span class="attr">instock</span>: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>] }</span><br><span class="line">)</span><br></pre></td></tr></table></figure><h4 id="删除文档"><a href="#删除文档" class="headerlink" title="删除文档"></a>删除文档</h4><p><code>db.collection.deleteMany({}) </code>删除所有文档<br><code>db.collection.deleteMany({ status : "A" })</code>删除所有status等于”A”的文档<br><code>db.collection.deleteOne( { status: "D" } )</code>删除status等于”D”的第一个文档</p><h2 id="2、mongoose"><a href="#2、mongoose" class="headerlink" title="2、mongoose"></a>2、mongoose</h2><p><a href="https://mongoosejs.com/docs/index.html">mongoose</a>是node.js中操作mongodb的第三方库，它比原始的mongodb更方便，易用</p><h3 id="2-1-连接"><a href="#2-1-连接" class="headerlink" title="2.1 连接"></a>2.1 连接</h3><p><code>mongoose.createConnection</code>第一个参数为mongodb地址,第二个是字符串解析器配置，第三个为回调函数。<code>mongoose.createConnection</code>有很多参数，只有地址为必选，其余都为可选</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// host:域名(本地为localhost)</span></span><br><span class="line"><span class="comment">// port:端口号(mongodb默认为27017)</span></span><br><span class="line"><span class="comment">// dbname:数据库名称 </span></span><br><span class="line"><span class="keyword">const</span> db = mongoose.<span class="title function_">createConnection</span>(</span><br><span class="line"> <span class="string">`mongodb://<span class="subst">${configObj.host}</span>:<span class="subst">${configObj.port}</span>/<span class="subst">${configObj.dbname}</span>`</span>,</span><br><span class="line"> { <span class="attr">useNewUrlParser</span>: <span class="literal">true</span>, <span class="attr">useUnifiedTopology</span>: <span class="literal">true</span> },</span><br><span class="line"> <span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (err) { <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'数据库连接失败'</span>,configObj); <span class="keyword">return</span>;}</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'数据库连接成功'</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="3、express"><a href="#3、express" class="headerlink" title="3、express"></a>3、express</h2><h2 id="4、在vue项目中的应用"><a href="#4、在vue项目中的应用" class="headerlink" title="4、在vue项目中的应用"></a>4、在vue项目中的应用</h2>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> mongoDB </tag>
</tags>
</entry>
<entry>
<title>git</title>
<link href="/post/20220222170849.html"/>
<url>/post/20220222170849.html</url>
<content type="html"><![CDATA[<p><strong>Git 常用命令</strong></p><h2 id="1-仓库配置"><a href="#1-仓库配置" class="headerlink" title="1. 仓库配置"></a>1. 仓库配置</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git config --global user.name "Your Name"</code></td><td>设置全局用户名</td></tr><tr><td><code>git config --global user.email "email@example.com"</code></td><td>设置全局邮箱</td></tr><tr><td><code>git config --list</code></td><td>查看当前配置信息</td></tr></tbody></table><h2 id="2-创建与克隆仓库"><a href="#2-创建与克隆仓库" class="headerlink" title="2. 创建与克隆仓库"></a>2. 创建与克隆仓库</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git init</code></td><td>初始化新仓库</td></tr><tr><td><code>git clone <repo_url></code></td><td>克隆远程仓库到本地</td></tr></tbody></table><h2 id="3-更改与提交"><a href="#3-更改与提交" class="headerlink" title="3. 更改与提交"></a>3. 更改与提交</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git status</code></td><td>查看工作区状态（修改/未跟踪文件）</td></tr><tr><td><code>git add <file></code></td><td>添加文件到暂存区（<code>git add .</code> 添加所有文件）</td></tr><tr><td><code>git commit -m "提交说明"</code></td><td>提交暂存区的更改到本地仓库</td></tr><tr><td><code>git commit --amend</code></td><td>修改最后一次提交</td></tr></tbody></table><h2 id="4-分支管理"><a href="#4-分支管理" class="headerlink" title="4. 分支管理"></a>4. 分支管理</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git branch</code></td><td>查看本地分支（<code>-a</code> 查看所有分支，包括远程）</td></tr><tr><td><code>git branch <branch_name></code></td><td>创建新分支</td></tr><tr><td><code>git checkout <branch_name></code></td><td>切换到指定分支</td></tr><tr><td><code>git checkout -b <new_branch></code></td><td>创建并切换到新分支</td></tr><tr><td><code>git switch <branch_name></code></td><td>切换分支（推荐替代 <code>git checkout</code>）</td></tr><tr><td><code>git merge <branch_name></code></td><td>合并指定分支到当前分支</td></tr><tr><td><code>git branch -d <branch_name></code></td><td>删除本地分支（<code>-D</code> 强制删除）</td></tr></tbody></table><h2 id="5-远程仓库交互"><a href="#5-远程仓库交互" class="headerlink" title="5. 远程仓库交互"></a>5. 远程仓库交互</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git remote -v</code></td><td>查看远程仓库地址</td></tr><tr><td><code>git remote add <name> <url></code></td><td>添加远程仓库（如 <code>origin</code>）</td></tr><tr><td><code>git push <remote> <branch></code></td><td>推送本地分支到远程（如 <code>git push origin main</code>）</td></tr><tr><td><code>git push -u <remote> <branch></code></td><td>推送并设置上游分支（后续可简写 <code>git push</code>）</td></tr><tr><td><code>git pull <remote> <branch></code></td><td>拉取远程分支并合并</td></tr><tr><td><code>git fetch <remote></code></td><td>从远程仓库拉取最新代码（不自动合并）</td></tr></tbody></table><h2 id="6-撤销与恢复"><a href="#6-撤销与恢复" class="headerlink" title="6. 撤销与恢复"></a>6. 撤销与恢复</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git restore <file></code></td><td>丢弃工作区的修改（Git 2.23+）</td></tr><tr><td><code>git restore --staged <file></code></td><td>将文件移出暂存区（保留工作区修改）</td></tr><tr><td><code>git reset --soft HEAD^</code></td><td>撤销最后一次提交（保留修改到暂存区）</td></tr><tr><td><code>git reset --hard HEAD^</code></td><td>彻底撤销最后一次提交（慎用！）</td></tr><tr><td><code>git revert <commit_id></code></td><td>创建一个新提交来撤销指定提交</td></tr></tbody></table><h2 id="7-标签管理"><a href="#7-标签管理" class="headerlink" title="7. 标签管理"></a>7. 标签管理</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git tag</code></td><td>查看所有标签</td></tr><tr><td><code>git tag <tag_name></code></td><td>创建轻量标签（指向当前提交）</td></tr><tr><td><code>git tag -a <tag_name> -m "标签说明"</code></td><td>创建含注释的标签</td></tr><tr><td><code>git push <remote> --tags</code></td><td>推送所有标签到远程仓库</td></tr></tbody></table><h2 id="8-查看日志与差异"><a href="#8-查看日志与差异" class="headerlink" title="8. 查看日志与差异"></a>8. 查看日志与差异</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git log</code></td><td>查看提交历史（<code>--oneline</code> 简化显示）</td></tr><tr><td><code>git log -p <file></code></td><td>查看文件的修改历史</td></tr><tr><td><code>git diff</code></td><td>查看工作区与暂存区的差异</td></tr><tr><td><code>git diff --staged</code></td><td>查看暂存区与仓库的差异</td></tr></tbody></table><h2 id="9-储藏临时修改"><a href="#9-储藏临时修改" class="headerlink" title="9. 储藏临时修改"></a>9. 储藏临时修改</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git stash</code></td><td>储藏当前工作区和暂存区的修改</td></tr><tr><td><code>git stash list</code></td><td>查看储藏列表</td></tr><tr><td><code>git stash pop</code></td><td>恢复最新的储藏并删除储藏记录</td></tr><tr><td><code>git stash apply</code></td><td>恢复储藏但不删除记录</td></tr></tbody></table><h2 id="10-高级操作"><a href="#10-高级操作" class="headerlink" title="10. 高级操作"></a>10. 高级操作</h2><table><thead><tr><th>命令</th><th>说明</th></tr></thead><tbody><tr><td><code>git rebase <branch></code></td><td>变基操作（合并提交历史，保持线性）</td></tr><tr><td><code>git cherry-pick <commit_id></code></td><td>将指定提交应用到当前分支</td></tr><tr><td><code>git bisect</code></td><td>二分查找引入问题的提交</td></tr></tbody></table><blockquote><p><strong>提示</strong> </p><ul><li>使用 <code>git <command> --help</code> 查看命令详细帮助 </li><li>谨慎使用 <code>git reset --hard</code> 和 <code>git push -f</code>（强制推送）！</li></ul></blockquote>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> git </tag>
</tags>
</entry>
<entry>
<title>vue基础 05</title>
<link href="/post/20220222170822.html"/>
<url>/post/20220222170822.html</url>
<content type="html"><![CDATA[<h2 id="1-vue父子组件传值"><a href="#1-vue父子组件传值" class="headerlink" title="1. vue父子组件传值"></a>1. vue父子组件传值</h2><h3 id="1-1-父传子"><a href="#1-1-父传子" class="headerlink" title="1.1 父传子"></a>1.1 父传子</h3><p>步骤简述：</p><ol><li>子组件中引入props，用来接受父组件数据</li><li>父组件里的子组件标签中绑定父组件的数据</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">'msg'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">son</span> <span class="attr">:message</span>=<span class="string">'msg'</span>></span><span class="tag"></<span class="name">son</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">template</span> <span class="attr">id</span>=<span class="string">"son"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> 这是父组件传进来的：{{message}}</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">devtools</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">msg</span>: <span class="string">'父组件的数据'</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">son</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#son'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">props</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">message</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>: <span class="title class_">String</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>props内的写法：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">props: {</span><br><span class="line"> // 规定了父组件只能传字符串类型</span><br><span class="line"> prop1: String,</span><br><span class="line"> // 可以设置多个类型，可以传Number也可以传String</span><br><span class="line"> prop2: [Number, String],</span><br><span class="line"> prop3: {</span><br><span class="line"> // 设置类型</span><br><span class="line"> type: Array,</span><br><span class="line">// 设为必填字段</span><br><span class="line">required: true,</span><br><span class="line"> // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的</span><br><span class="line"> default: function () {</span><br><span class="line"> return [{</span><br><span class="line"> name: '这个一个默认的名字'</span><br><span class="line"> }]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="1-2-子传父"><a href="#1-2-子传父" class="headerlink" title="1.2 子传父"></a>1.2 子传父</h3><p>步骤简述：</p><ol><li>子组件中通过某种方法触发<code>$emit</code>传值接口方法，<code>$emit</code>参数为<code>自定义传值方法名</code>，后面的是要传的子组件中的数据</li><li>在父组件里的子组件标签中通过``@自定义传值方法名<code>绑定父组件中的</code>接收方法<code>，</code>接收方法`中的参数即为所传的子组件的值</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>这里是父组件<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>{{receivechild1}}<span class="tag"></<span class="name">span</span>></span> <span class="tag"><<span class="name">span</span>></span>{{receivechild2}}<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">son</span> @<span class="attr">toparents</span>=<span class="string">'getchildmsg'</span>></span><span class="tag"></<span class="name">son</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">template</span> <span class="attr">id</span>=<span class="string">"son"</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">hr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'childClick'</span>></span>点击将子组件的值传给父组件<span class="tag"></<span class="name">button</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">devtools</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">receivechild1</span>: <span class="string">''</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">receivechild2</span>: <span class="string">''</span>,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">//参数数量根据子组件$emit方法传的数据个数决定</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">getchildmsg</span>(<span class="params">data1, data2</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">receivechild1</span> = data1;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">receivechild2</span> = data2;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">son</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#son'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">childmsg1</span>: <span class="string">'子组件数据1'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">childmsg2</span>: <span class="string">'子组件数据2'</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">childClick</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.$emit(<span class="string">'toparents'</span>, <span class="variable language_">this</span>.<span class="property">childmsg1</span>, <span class="variable language_">this</span>.<span class="property">childmsg2</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="2-ref的使用"><a href="#2-ref的使用" class="headerlink" title="2. ref的使用"></a>2. ref的使用</h2><p>给DOM节点和组件加上ref属性，用于获取DOM节点和组件</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'signin'</span> <span class="attr">ref</span>=<span class="string">"signinBtn"</span>></span>登录<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">signin</span> <span class="attr">ref</span>=<span class="string">"signinquote"</span>></span><span class="tag"></<span class="name">signin</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">template</span> <span class="attr">id</span>=<span class="string">"signin"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">signInstruction</span>: <span class="string">'signin'</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">signin</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">signInstruction</span> = <span class="string">"signin"</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">signinquote</span>.<span class="property">signMsg</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">signinBtn</span>);</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">signin</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#signin'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">signMsg</span>: <span class="string">'开始登录'</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="3-vue路由"><a href="#3-vue路由" class="headerlink" title="3. vue路由"></a>3. vue路由</h2><p>路由的使用步骤</p><ol><li><p>引入js文件，这个js需要放在vue的js后面</p></li><li><p>创建路由new VueRouter(),接受的参数是一个对象</p></li><li><p>在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性</p></li><li><p>path属性是url的地址,component属性就是显示的组件（传组件的对象）</p></li><li><p>创建的路由需要和vue实例关联一下</p></li><li><p>路由到的组件显示的位置<code><router-view></router-view></code></p></li></ol><h3 id="3-1-路由跳转"><a href="#3-1-路由跳转" class="headerlink" title="3.1 路由跳转"></a>3.1 路由跳转</h3><ol><li><p>引入router-link标签，并设置to属性</p></li><li><p>默认编译成a标签，可以通过tag设置包裹标签</p></li></ol><h4 id="3-1-2-编程时跳转"><a href="#3-1-2-编程时跳转" class="headerlink" title="3.1.2 编程时跳转"></a>3.1.2 编程时跳转</h4><ul><li>this.$router可以进行函数式跳转 </li><li>this.$router.push() 跳转到指定页面 </li><li>this.$router.replace() 这个会替换掉当前界面，当前界面就会从页面栈里被移除 </li><li>this.$router.back() 返回上一级 </li><li>this.$router.go() 跳转到指定的界面</li></ul><h3 id="3-2-路由重定向"><a href="#3-2-路由重定向" class="headerlink" title="3.2 路由重定向"></a>3.2 路由重定向</h3><p>在<code>new VueRouter()</code>对象的<code>routes</code>属性中，使用<code>redirect</code>进行重定向</p><h3 id="3-3-路由高亮"><a href="#3-3-路由高亮" class="headerlink" title="3.3 路由高亮"></a>3.3 路由高亮</h3><p>通过默认<code>router-link-active</code>类名设置点击后的路由链接样式</p><h3 id="3-4-参数定义"><a href="#3-4-参数定义" class="headerlink" title="3.4 参数定义"></a>3.4 参数定义</h3><p>两种路由传参的办法，query传参和params传参</p><ol><li><p>通过在<code><router-link></router-link></code>的to属性中直接 ? 拼接的方法。通过在绑定to属性传对象，例如<code>:to="{path:'/mine',query:{id:7}}"</code>。通过<code>$route.query.参数名</code>来取到</p></li><li><p>通过在routes列表中给路由添加name属性并在path后拼接<code>/:变量名</code>，在<code><router-link></router-link></code>中给<code>to</code>绑定<code>{name:'register',params:{id:6}}</code>。通过<code>$route.params.参数名</code>来取到</p></li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span>></span>去登陆<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"{name:'register',params:{id:6}}"</span>></span>去注册<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">"{path:'/mine',query:{id:7}}"</span>></span> 去个人中心<span class="tag"></<span class="name">router-link</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">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">template</span> <span class="attr">id</span>=<span class="string">"login"</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">h3</span>></span>已有帐号?来登录吧<span class="tag"></<span class="name">h3</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">id</span>=<span class="string">'register'</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">h3</span>></span>呀嘞呀嘞，还没帐号？来注册吧<span class="tag"></<span class="name">h3</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">id</span>=<span class="string">'mine'</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">h3</span>></span>yokoso，这里是个人中心<span class="tag"></<span class="name">h3</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> login = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#login'</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> register = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#register'</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> mine = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#mine'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">created</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>);</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">routes</span>: [</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 重定向</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">path</span>: <span class="string">'/'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">redirect</span>: <span class="string">'/index'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">path</span>: <span class="string">'/index'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">component</span>: app,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">path</span>: <span class="string">'/login'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">component</span>: login,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">path</span>: <span class="string">'/register/:id'</span>, </span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'register'</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">component</span>: register,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">path</span>: <span class="string">'/mine'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">component</span>: mine,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> ]</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {},</span></span><br><span class="line"><span class="language-javascript"> router,</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="3-5-路由嵌套"><a href="#3-5-路由嵌套" class="headerlink" title="3.5 路由嵌套"></a>3.5 路由嵌套</h3><p>使用路由嵌套后必须在父组件中写入<code><router-view></router-view></code>来给子组件预留位置</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line"> {</span><br><span class="line"> path: '/travel', component: TravelPage,</span><br><span class="line"> children: [</span><br><span class="line"> { path: '/travel/america', component: TravelAmericaPage },</span><br><span class="line"> { path: '/travel/china', component: TravelChinaPage}</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> path: '/about', component: AboutPage</span><br><span class="line"> }</span><br><span class="line">];</span><br></pre></td></tr></table></figure><h3 id="3-6-命名视图"><a href="#3-6-命名视图" class="headerlink" title="3.6 命名视图"></a>3.6 命名视图</h3><p>命名视图可以做到一个地址对应多个组件</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">router-view</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'my-container'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">'sidebar'</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">'main'</span>></span><span class="tag"></<span class="name">router-view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2 id="4-watch和computed"><a href="#4-watch和computed" class="headerlink" title="4. watch和computed"></a>4. watch和computed</h2><p><code>watch</code>侦听属性：当data中的某个数据需要随其他数据的变化而变化时，更通用的方法是使用watch侦听器</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">watch: {</span><br><span class="line"> firstName: function (val) {</span><br><span class="line"> this.fullName = val + ' ' + this.lastName</span><br><span class="line"> },</span><br><span class="line"> lastName: function (val) {</span><br><span class="line"> this.fullName = this.firstName + ' ' + val</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p><code>computed</code>计算属性：当需要对data的数据进行复杂逻辑操作的时候，应当使用computed属性</p><p>在computed里计算的属性不能生命在data中</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">computed: {</span><br><span class="line"> Name: function () {</span><br><span class="line">//默认使用computed只有getter方法</span><br><span class="line"> return this.firstName + ' ' + this.lastName</span><br><span class="line"> }</span><br><span class="line"> fullName: {</span><br><span class="line"> // getter</span><br><span class="line"> get: function () {</span><br><span class="line"> return this.firstName + ' ' + this.lastName</span><br><span class="line"> },</span><br><span class="line"> // setter</span><br><span class="line"> set: function (newValue) {</span><br><span class="line"> var names = newValue.split(' ')</span><br><span class="line"> this.firstName = names[0]</span><br><span class="line"> this.lastName = names[names.length - 1]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="method、computed和watch的区别"><a href="#method、computed和watch的区别" class="headerlink" title="method、computed和watch的区别"></a>method、computed和watch的区别</h4><ol><li><p><code>computed</code>属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；</p></li><li><p><code>methods</code>方法表示一个具体的操作，主要书写业务逻辑；</p></li><li><p><code>watch</code>一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体</p></li></ol>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>vue基础 04</title>
<link href="/post/20220222170811.html"/>
<url>/post/20220222170811.html</url>
<content type="html"><![CDATA[<h2 id="1-vue组件"><a href="#1-vue组件" class="headerlink" title="1. vue组件"></a>1. vue组件</h2><h3 id="1-1-组件定义的四种方式"><a href="#1-1-组件定义的四种方式" class="headerlink" title="1.1 组件定义的四种方式"></a>1.1 组件定义的四种方式</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">foot</span>></span><span class="tag"></<span class="name">foot</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">signin</span>></span><span class="tag"></<span class="name">signin</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">account</span>></span><span class="tag"></<span class="name">account</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">demo</span>></span><span class="tag"></<span class="name">demo</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="comment"><!-- script标签种 --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">id</span>=<span class="string">"tmpl"</span> <span class="attr">type</span>=<span class="string">"x-template"</span>></span><span class="language-handlebars"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>登录<span class="tag"></<span class="name">a</span>></span> | <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>注册<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">div</span>></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"></span></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="comment"><!-- 模板标签 --></span></span><br><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">id</span>=<span class="string">'tmp2'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color: yellowgreen;"</span>></span>模板呀哈罗<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 第一种</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> foot = <span class="title class_">Vue</span>.<span class="title function_">extend</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'<footer style="color: blue;">友情链接</footer>'</span></span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">'foot'</span>, foot);</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 第二种</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">'signin'</span>, {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'<div style="color: violet;">登录</div>'</span></span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 第三种（script标签种）</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">'account'</span>, {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#tmpl'</span></span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 第四种（模板标签）</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">'demo'</span>, {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#tmp2'</span>,</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {}</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="1-3-局部子组件和组件数据及方法"><a href="#1-3-局部子组件和组件数据及方法" class="headerlink" title="1.3 局部子组件和组件数据及方法"></a>1.3 局部子组件和组件数据及方法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">id</span>=<span class="string">'tmp1'</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">span</span>></span>东海帝皇<span class="tag"></<span class="name">span</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 局部子组件</span></span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#tmp1'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">msg</span>: <span class="string">'这是子组件数据,要写在return里'</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {},</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="1-4-组件切换"><a href="#1-4-组件切换" class="headerlink" title="1.4 组件切换"></a>1.4 组件切换</h3><p>使用component标签和is来实现组件的切换</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'signInstruction="signin"'</span>></span>登录<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'signInstruction="signup"'</span>></span>注册<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"signInstruction"</span>></span><span class="tag"></<span class="name">component</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">template</span> <span class="attr">id</span>=<span class="string">"signin"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>登录<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">id</span>=<span class="string">"signup"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>注册<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">devtools</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">signInstruction</span>: <span class="string">'signin'</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">signin</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#signin'</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">signup</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#signup'</span>,</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h4 id="1-4-1-动画效果"><a href="#1-4-1-动画效果" class="headerlink" title="1.4.1 动画效果"></a>1.4.1 动画效果</h4><p>和之前动画的使用方式一样，把要切换的组件用transition包裹起来就行了。</p><p>需要指定动画的切换顺序，希望先离开，在进入可以设置transition的mode</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">transition</span> <span class="attr">mode</span>=<span class="string">"out-in"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"isLogin?'user-info':'login'"</span>></span><span class="tag"></<span class="name">component</span>></span> </span><br><span class="line"><span class="tag"></<span class="name">transition</span>></span></span><br></pre></td></tr></table></figure><h2 id="2-slot插槽"><a href="#2-slot插槽" class="headerlink" title="2. slot插槽"></a>2. slot插槽</h2><p>想要在父组件的子组件标签内插入内容，需要在子组件模板中引入slot插槽；</p><p>插槽分为具名插槽和无名插槽；具名插槽内容需要写在template标签内，属性为#slot名</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">son</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">v-slot:name</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>具名的插槽<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>无名的插槽<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">son</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">template</span> <span class="attr">id</span>=<span class="string">"son"</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">slot</span> <span class="attr">name</span>=<span class="string">'slotname'</span>></span><span class="tag"></<span class="name">slot</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span>></span><span class="tag"></<span class="name">slot</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {},</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">components</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">son</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">template</span>: <span class="string">'#son'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>vue基础 03</title>
<link href="/post/20220222170757.html"/>
<url>/post/20220222170757.html</url>
<content type="html"><![CDATA[<h2 id="1-生命周期"><a href="#1-生命周期" class="headerlink" title="1. 生命周期"></a>1. 生命周期</h2><p>生命周期就是vue实例在创建、运行、销毁的整体过程</p><h3 id="1-1-生命周期钩子函数"><a href="#1-1-生命周期钩子函数" class="headerlink" title="1.1 生命周期钩子函数"></a>1.1 生命周期钩子函数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><div id='app'></span><br><span class="line"> <input type="text" v-model:value='msg' @change='console.log(msg)'></span><br><span class="line"> <div v-for='(item,index) in list'>{{item}}</div></span><br><span class="line"></div></span><br><span class="line"><script></span><br><span class="line"> let vm = new Vue({</span><br><span class="line"> el: '#app',</span><br><span class="line"> data: {</span><br><span class="line"> msg: '你想成为怎样的人',</span><br><span class="line"> list: ['异世界迷宫黑心企业', 'sonnyBoy', '小林家的龙女仆S'],</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> },</span><br><span class="line"> beforeCreate() {</span><br><span class="line"> console.log('此时vue初始化，但是实例化对象没有内容；主要用于页面重定向');</span><br><span class="line"> console.log(this.msg);</span><br><span class="line"> },</span><br><span class="line"> created() {</span><br><span class="line"> console.log('vue初始化完成，已经加载了内容、方法等;主要用于接口与初始化');</span><br><span class="line"> console.log(this.msg);</span><br><span class="line"> },</span><br><span class="line"> beforeMount() {</span><br><span class="line"> console.log('虚拟DOM在内存中创建完毕，但未渲染到页面上');</span><br><span class="line"> // debugger;</span><br><span class="line"> },</span><br><span class="line"> mounted() {</span><br><span class="line"> console.log('虚拟DOM已渲染到浏览器页面；在此之后可以操作页面上的DOM');</span><br><span class="line"> console.log(this.list);</span><br><span class="line"> },</span><br><span class="line"> beforeUpdate() {</span><br><span class="line"> console.log('vue内容更新之前的执行的钩子函数；只有更新动作能够执行多次');</span><br><span class="line"> console.log(this.msg);</span><br><span class="line"> },</span><br><span class="line"> updated() {</span><br><span class="line"> console.log('vue内容更新之后执行的钩子函数');</span><br><span class="line"> console.log(this.msg);</span><br><span class="line"> },</span><br><span class="line"> beforeDestroy() {</span><br><span class="line"> console.log('vue销毁之前执行的钩子函数；定时器等监听动作的清除');</span><br><span class="line"> },</span><br><span class="line"> destroyed() {</span><br><span class="line"> console.log('vue销毁之后执行的钩子函数');</span><br><span class="line"> },</span><br><span class="line"> })</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h2 id="2-vue-resource"><a href="#2-vue-resource" class="headerlink" title="2. vue-resource"></a>2. vue-resource</h2><p>vue-resource是依赖于vue的接口请求方法，是在vue1.0版本支持的方法</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"> <span class="title function_">created</span>(<span class="params"></span>) {</span><br><span class="line"><span class="comment">//get请求</span></span><br><span class="line"><span class="comment">//一个参数：地址；传参需要在地址后用？拼接</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">get</span>(<span class="string">'http://wk.myhope365.com/weChat/applet/course/banner/list?number=3'</span>).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"> });</span><br><span class="line"><span class="comment">//post请求</span></span><br><span class="line"><span class="comment">//此时服务器要求的请求体格式为form-Data</span></span><br><span class="line"><span class="comment">//三个参数1.url 2.对象，内容为请求体 3.{ emulateJSON: true }</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">post</span>(<span class="string">'http://wk.myhope365.com/weChat/applet/course/list/type'</span>,</span><br><span class="line"> { <span class="attr">type</span>: <span class="string">'free'</span>, <span class="attr">pageNum</span>: <span class="number">1</span>, <span class="attr">pageSize</span>: <span class="number">10</span> },</span><br><span class="line"> { <span class="attr">emulateJSON</span>: <span class="literal">true</span> }).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="comment">// console.log(res);</span></span><br><span class="line"> });</span><br><span class="line"><span class="comment">//post请求</span></span><br><span class="line"><span class="comment">//此时服务器要求的请求体格式为JSON</span></span><br><span class="line"><span class="comment">//两个参数1.url 2.JSON对象</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">post</span>(<span class="string">'http://wk.myhope365.com/weChat/applet/subject/list'</span>,</span><br><span class="line"> { <span class="string">'enable'</span>: <span class="number">1</span> }).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"> })</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h2 id="3-axios"><a href="#3-axios" class="headerlink" title="3. axios"></a>3. axios</h2><p>axios与vue无关，它是基于 Promise 的 HTTP 库</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">created</span>(<span class="params"></span>) {</span><br><span class="line"><span class="comment">//get请求</span></span><br><span class="line"><span class="comment">//一个参数：url；参时在url后？拼接</span></span><br><span class="line"> axios.<span class="title function_">get</span>(<span class="string">'http://wk.myhope365.com/weChat/applet/course/banner/list?number=4'</span>).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">rollImgList</span> = res.<span class="property">data</span>.<span class="property">data</span>;</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">createFormat</span>(<span class="params">type, pNum, pSize</span>) {</span><br><span class="line"> <span class="keyword">let</span> format = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"> format.<span class="title function_">append</span>(<span class="string">"type"</span>, type);</span><br><span class="line"> format.<span class="title function_">append</span>(<span class="string">"pageNum"</span>, pNum);</span><br><span class="line"> format.<span class="title function_">append</span>(<span class="string">"pageSize"</span>, pSize);</span><br><span class="line"> <span class="keyword">return</span> format;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//post请求</span></span><br><span class="line"> <span class="comment">//两个参数：1.url 2.请求体需要为form—Data时，返回new FormData()对象传入</span></span><br><span class="line"> axios.<span class="title function_">post</span>(<span class="string">'http://wk.myhope365.com/weChat/applet/course/list/type'</span>,</span><br><span class="line"> <span class="title function_">createFormat</span>(<span class="string">"free"</span>, <span class="number">1</span>, <span class="number">10</span>)).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">freeCourseList</span> = res.<span class="property">data</span>.<span class="property">rows</span>;</span><br><span class="line"> });</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h2 id="4-动画"><a href="#4-动画" class="headerlink" title="4.动画"></a>4.动画</h2><h3 id="4-1-transition实现动画"><a href="#4-1-transition实现动画" class="headerlink" title="4.1 transition实现动画"></a>4.1 transition实现动画</h3><p>首先创建新标签transition；没有name属性是默认使用以下类名控制动画效果，有name属性时，用name名替换<code>v</code></p><p><a id="vue-transition">各状态讲解</a></p><ol><li><code>v-enter</code>：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。</li><li><code>v-enter-active</code>：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。</li><li><code>v-enter-to</code>：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 <code>v-enter</code> 被移除)，在过渡/动画完成之后移除。</li><li><code>v-leave</code>：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。</li><li><code>v-leave-active</code>：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。</li><li><code>v-leave-to</code>：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 <code>v-leave</code> 被删除)，在过渡/动画完成之后移除。</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><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">.fade-enter</span>,</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.fade-leave-to</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">opacity</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">100px</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">.fade-enter-active</span>,</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.fade-leave-active</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">position</span>: absolute;</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">div</span> <span class="attr">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'isshow = !isshow'</span>></span>动起来<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition</span> <span class="attr">name</span>=<span class="string">'fade'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">'isshow'</span>></span>呀嘞呀嘞<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">transition</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">isshow</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="4-2-使用第三方animate库实现动画"><a href="#4-2-使用第三方animate库实现动画" class="headerlink" title="4.2 使用第三方animate库实现动画"></a>4.2 使用第三方animate库实现动画</h3><p><a href="https://animate.style/">Animate.css官方网站</a></p><blockquote><p>引入线上地址</p><p>3.0版本</p><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /><p>4.0版本</p><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css" /></blockquote><h4 id="1-使用方法"><a href="#1-使用方法" class="headerlink" title="1. 使用方法"></a>1. 使用方法</h4><p>仅需要引入类名即可4.0版本要求要有<code>animate__</code>前缀</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">'app'</span>></span></span><br><span class="line"> <span class="comment"><!-- 3.0版本 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'isshow4=!isshow4'</span>></span>animate版本4，开！<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">'isshow4'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"animate__animated animate__bounce"</span>></span>An animated element<span class="tag"></<span class="name">h1</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><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- 3.0版本 --></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">'isshow3=!isshow3'</span>></span>animate版本3，开！<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">'isshow3'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"animated fadeOutRight"</span>></span>An animated element<span class="tag"></<span class="name">h1</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></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">isshow4</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">isshow3</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {}</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h4 id="2-动画钩子函数"><a href="#2-动画钩子函数" class="headerlink" title="2. 动画钩子函数"></a>2. 动画钩子函数</h4><p>个人觉得用处不大，简单说就是在动画各个执行阶段执行的函数。<a href="#vue-transition">对照这个理解</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 进入时 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app2"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition</span> @<span class="attr">before-enter</span>=<span class="string">"beforeEnter"</span> @<span class="attr">enter</span>=<span class="string">"enter"</span> @<span class="attr">after-</span><span class="attr">enter</span>=<span class="string">"afterEnter"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"isshow"</span> <span class="attr">class</span>=<span class="string">"show"</span>></span>进入<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">transition</span>></span></span><br><span class="line"><span class="tag"><<span class="name">transition</span> @<span class="attr">before-leave</span>=<span class="string">"beforeLeave"</span> @<span class="attr">leave</span>=<span class="string">"leave"</span> @<span class="attr">after-leave</span>=<span class="string">"afterLeave"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"isshow"</span> <span class="attr">class</span>=<span class="string">"show"</span>></span>离开<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">transition</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm2 = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app2'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">isshow</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">beforeEnter</span>(<span class="params">el</span>) { <span class="comment">// 动画进入之前的回调</span></span></span><br><span class="line"><span class="language-javascript"> el.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">'translateX(500px)'</span>;</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">enter</span>(<span class="params">el</span>) { <span class="comment">// 动画进入时的回调</span></span></span><br><span class="line"><span class="language-javascript"> el.<span class="property">offsetWidth</span>;</span></span><br><span class="line"><span class="language-javascript"> el.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">'translateX(0px)'</span>;</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="4-3-v-for列表的过度"><a href="#4-3-v-for列表的过度" class="headerlink" title="4.3 v-for列表的过度"></a>4.3 v-for列表的过度</h3><p>使用transition-group标签；tag属性会将transition-group渲染成tag指定的html标签</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><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">.list-enter</span>,</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.list-leave-to</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">opacity</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">10px</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">.list-enter-active</span>,</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.list-leave-active</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease;</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">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"txt"</span> @<span class="attr">keyup.enter</span>=<span class="string">"add"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition-group</span> <span class="attr">tag</span>=<span class="string">"ul"</span> <span class="attr">name</span>=<span class="string">"list"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item, i) in list"</span> <span class="attr">:key</span>=<span class="string">"i"</span>></span>{{item}}<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">transition-group</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">txt</span>: <span class="string">''</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">list</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">add</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(<span class="variable language_">this</span>.<span class="property">txt</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">txt</span> = <span class="string">''</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>vue基础 02</title>
<link href="/post/20220222170746.html"/>
<url>/post/20220222170746.html</url>
<content type="html"><![CDATA[<h2 id="1-过滤器"><a href="#1-过滤器" class="headerlink" title="1. 过滤器"></a>1. 过滤器</h2><p>过滤器可被用在插值表达式中和v-bind:中</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 变量 | 过滤器名 --></span></span><br><span class="line">{{ message | capitalize }}</span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">"rawId | formatId"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>过滤器可分为全局过滤器和私有过滤器器</p><p>全局过滤器所有vue实例对象都能引用；私有过滤器只有在自己的实例化vue对象中能引用</p><p><strong>全局过滤器(格式化时间)</strong> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">{{item.<span class="property">time</span> | <span class="title function_">dataFormat</span>(<span class="string">'YYYY/MM/DD'</span>)}}</span><br><span class="line"><span class="comment">//带参数的过滤器</span></span><br><span class="line"><span class="comment">//data是引用过滤器的变量</span></span><br><span class="line"><span class="comment">//format的实参是过滤器dataFormat('YYYY/MM/DD')传的字符串</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">'dataFormat'</span>, <span class="keyword">function</span> (<span class="params">data, format</span>) {</span><br><span class="line"> <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="title class_">Date</span>(data);</span><br><span class="line"> <span class="keyword">var</span> y = dt.<span class="title function_">getFullYear</span>();</span><br><span class="line"> <span class="keyword">var</span> m = (dt.<span class="title function_">getMonth</span>() + <span class="number">1</span>).<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">'0'</span>);</span><br><span class="line"> <span class="keyword">var</span> d = dt.<span class="title function_">getDate</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">'0'</span>);</span><br><span class="line"> <span class="keyword">return</span> format.<span class="title function_">replace</span>(<span class="string">'YYYY'</span>, y).<span class="title function_">replace</span>(<span class="string">'MM'</span>, m).<span class="title function_">replace</span>(<span class="string">'DD'</span>, d);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p><strong>私有过滤器</strong> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="attr">filters</span>: {</span><br><span class="line"> <span class="title function_">dateFormat</span>(<span class="params">data, format</span>) {...}</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="2-键盘修饰符"><a href="#2-键盘修饰符" class="headerlink" title="2. 键盘修饰符"></a>2. 键盘修饰符</h2><p>Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符</p><p><strong>使用键盘码</strong><code><button v-on:keyup.65="change"></button></code> </p><table><thead><tr><th><strong>字母和数字键的键码值(keyCode)</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr><td>按键</td><td>键码</td><td>按键</td><td>键码</td><td>按键</td><td>键码</td><td>按键</td><td>键码</td></tr><tr><td>A</td><td>65</td><td>J</td><td>74</td><td>S</td><td>83</td><td>1</td><td>49</td></tr><tr><td>B</td><td>66</td><td>K</td><td>75</td><td>T</td><td>84</td><td>2</td><td>50</td></tr><tr><td>C</td><td>67</td><td>L</td><td>76</td><td>U</td><td>85</td><td>3</td><td>51</td></tr><tr><td>D</td><td>68</td><td>M</td><td>77</td><td>V</td><td>86</td><td>4</td><td>52</td></tr><tr><td>E</td><td>69</td><td>N</td><td>78</td><td>W</td><td>87</td><td>5</td><td>53</td></tr><tr><td>F</td><td>70</td><td>O</td><td>79</td><td>X</td><td>88</td><td>6</td><td>54</td></tr><tr><td>G</td><td>71</td><td>P</td><td>80</td><td>Y</td><td>89</td><td>7</td><td>55</td></tr><tr><td>H</td><td>72</td><td>Q</td><td>81</td><td>Z</td><td>90</td><td>8</td><td>56</td></tr><tr><td>I</td><td>73</td><td>R</td><td>82</td><td>0</td><td>48</td><td>9</td><td>57</td></tr></tbody></table><hr><table><thead><tr><th><strong>数字键盘上的键的键码值(keyCode)</strong></th><th><strong>功能键键码值(keyCode)</strong></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr><td>按键</td><td>键码</td><td>按键</td><td>键码</td><td>按键</td><td>键码</td><td>按键</td><td>键码</td></tr><tr><td>0</td><td>96</td><td>8</td><td>104</td><td>F1</td><td>112</td><td>F7</td><td>118</td></tr><tr><td>1</td><td>97</td><td>9</td><td>105</td><td>F2</td><td>113</td><td>F8</td><td>119</td></tr><tr><td>2</td><td>98</td><td>*</td><td>106</td><td>F3</td><td>114</td><td>F9</td><td>120</td></tr><tr><td>3</td><td>99</td><td>+</td><td>107</td><td>F4</td><td>115</td><td>F10</td><td>121</td></tr><tr><td>4</td><td>100</td><td>Enter</td><td>108</td><td>F5</td><td>116</td><td>F11</td><td>122</td></tr><tr><td>5</td><td>101</td><td>-</td><td>109</td><td>F6</td><td>117</td><td>F12</td><td>123</td></tr><tr><td>6</td><td>102</td><td>.</td><td>110</td><td></td><td></td><td></td><td></td></tr><tr><td>7</td><td>103</td><td>/</td><td>111</td><td></td><td></td><td></td><td></td></tr></tbody></table><hr><table><thead><tr><th><strong>控制键键码值(keyCode)</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr><td>按键</td><td>键码</td><td>按键</td><td>键码</td><td>按键</td><td>键码</td><td>按键</td><td>键码</td></tr><tr><td>BackSpace</td><td>8</td><td>Esc</td><td>27</td><td>Right Arrow</td><td>39</td><td>-_</td><td>189</td></tr><tr><td>Tab</td><td>9</td><td>Spacebar</td><td>32</td><td>Dw Arrow</td><td>40</td><td>.></td><td>190</td></tr><tr><td>Clear</td><td>12</td><td>Page Up</td><td>33</td><td>Insert</td><td>45</td><td>/?</td><td>191</td></tr><tr><td>Enter</td><td>13</td><td>Page Down</td><td>34</td><td>Delete</td><td>46</td><td>`~</td><td>192</td></tr><tr><td>Shift</td><td>16</td><td>End</td><td>35</td><td>Num Lock</td><td>144</td><td>[{</td><td>219</td></tr><tr><td>Control</td><td>17</td><td>Home</td><td>36</td><td>;:</td><td>186</td><td>/|</td><td>220</td></tr><tr><td>Alt</td><td>18</td><td>Left Arrow</td><td>37</td><td>=+</td><td>187</td><td>]}</td><td>221</td></tr><tr><td>Cape Lock</td><td>20</td><td>Up Arrow</td><td>38</td><td>,<</td><td>188</td><td>‘“</td><td>222</td></tr></tbody></table><p><strong>使用别名</strong> </p><p><code>v-on:keyup.enter</code></p><p><code>.enter</code>、<code>.tab</code>、<code>.delete</code> (“删除”和“退格”键)、<code>.esc</code>、<code>.space</code></p><p><code>.up</code>、<code>.down</code>、<code>.left</code>、<code>.right</code></p><p><strong>自定义按键别名</strong> </p><p><code>Vue.config.keyCodes.f1 = 112</code></p><p>新版可以直接监听键盘按键</p><p>监听键盘a按下：<code>v-on:keyup.a</code></p><h2 id="3-自定义指令"><a href="#3-自定义指令" class="headerlink" title="3. 自定义指令"></a>3. 自定义指令</h2><p>directive</p><p><strong>自定义指令的三个钩子方法</strong></p><ul><li><p>bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置</p></li><li><p>inserted 这个元素已经渲染到界面上之后执行</p></li><li><p>update 当元素有更新的时候执行</p></li></ul><p><strong>钩子函数的一些参数</strong></p><p>el：指令所绑定的元素，可以用来直接操作 DOM 。</p><p>binding：一个对象，包含以下属性：</p><p>name：指令名，不包括 v- 前缀。</p><p>value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。</p><p>oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用</p><p>自定义指令也分为全局自定义指令和私有自定义指令</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">// 注册一个全局自定义指令 `v-focus`</span><br><span class="line">Vue.directive('focus', {</span><br><span class="line"> bind(el,binding){}</span><br><span class="line"> // 当被绑定的元素插入到 DOM 中时……</span><br><span class="line"> inserted(el) {</span><br><span class="line"> // 聚焦元素</span><br><span class="line"> el.focus()</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">new Vue({</span><br><span class="line"> el: '#app',</span><br><span class="line"> directives: {</span><br><span class="line"> focus: {</span><br><span class="line"> inserted(el) {</span><br><span class="line"> el.focus();</span><br><span class="line"> },</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>vue基础 01</title>
<link href="/post/20220222170730.html"/>
<url>/post/20220222170730.html</url>
<content type="html"><![CDATA[<h2 id="1-引用"><a href="#1-引用" class="headerlink" title="1. 引用"></a>1. 引用</h2><p>Vue是一套用于构建用户界面的<strong>渐进式框架</strong>。</p><p>线上引用<code>https://npm.elemecdn.com/vue@2.6.14/dist/vue.min.js</code></p><p>vue基础模板</p><h2 id="2-插值表达式、v-cloak、v-text和v-html"><a href="#2-插值表达式、v-cloak、v-text和v-html" class="headerlink" title="2. 插值表达式、v-cloak、v-text和v-html"></a>2. 插值表达式、v-cloak、v-text和v-html</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><body></span><br><span class="line"> <!-- view层 --></span><br><span class="line"> <div id='app'></span><br><span class="line"> </div></span><br><span class="line"></body></span><br><span class="line"><script></span><br><span class="line"> //view model层</span><br><span class="line"> let vm = new Vue({</span><br><span class="line"> //vue控制区域</span><br><span class="line"> el: '#app',</span><br><span class="line"> //需要渲染的数据</span><br><span class="line"> data: {},</span><br><span class="line"> //引用的方法;model层</span><br><span class="line"> methods: {}</span><br><span class="line"> })</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p><code>{{}}</code>是插值表达式，用来渲染页面元素</p><p>v-cloak：隐藏页面预加载内容，防止页面闪烁</p><p>v-text：指定元素标签的文本内容</p><p>v-html：会将元素标签的内容解析为html</p><h2 id="3-v-bind和v-on"><a href="#3-v-bind和v-on" class="headerlink" title="3. v-bind和v-on"></a>3. v-bind和v-on</h2><p><code>v-bind</code>绑定元素属性，将这个元素节点的 <code>title</code> （属性名与属性值）和 Vue 实例中的 <code>message</code> （属性名，属性值） 保持一致</p><p><code>v-bind</code>简写为：</p><p><code>v-on</code>添加事件监听器，通过它调用在 Vue 实例中定义的方法</p><p><code>v-on</code>简写为@</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">span</span> <span class="attr">v-bind:title</span>=<span class="string">"message"</span>></span>我是title<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">span</span> <span class="attr">:title</span>=<span class="string">"message"</span>></span>我是title<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"sayName"</span>></span>名字<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"sayName"</span>></span>名字<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">el</span>: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">message</span>: <span class="string">'页面加载于 '</span> + <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toLocaleString</span>();</span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">methods</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">sayName</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'name is saber'</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="3-1-事件修饰符"><a href="#3-1-事件修饰符" class="headerlink" title="3.1 事件修饰符"></a>3.1 事件修饰符</h3><ul><li><code>.stop</code> 阻止事件冒泡</li><li><code>.prevent</code> 阻止默认事件</li><li><code>.capture</code> 事件触发机制变为捕获模式</li><li><code>.self</code>只当事件在该元素本身触发时触发回调，捕获和冒泡不会触发带<code>.self</code>事件修饰符的元素</li><li><code>.once</code>事件只触发一次</li><li><code>.passive</code>滚动行为将会立即触发，而不会等待 <code>onScroll</code> 完成</li></ul><h3 id="3-2-v-model"><a href="#3-2-v-model" class="headerlink" title="3.2 v-model"></a>3.2 v-model</h3><p>v-model用于数据的双向绑定；主要用于表单元素</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><div id='app'></span><br><span class="line"> <input v-model='msg' type="text" ></span><br><span class="line"> {{msg}}</span><br><span class="line"></div></span><br><span class="line"><script></span><br><span class="line">new Vue({</span><br><span class="line">...data: {msg:''},</span><br><span class="line">})</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h2 id="4-v-if和v-show"><a href="#4-v-if和v-show" class="headerlink" title="4. v-if和v-show"></a>4. v-if和v-show</h2><p><code>v-if</code>：通过传入给<code>v-if</code>的布尔类型值来判断是否删除此dom元素</p><p><code>v-show</code>：通过传入给<code>v-if</code>的布尔类型值来判断是否隐藏此dom元素（通过<code>display:none</code>的方式）</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 不展示，无此dom元素 --></span></span><br><span class="line"><span class="tag"><<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">false</span>></span>我是title<span class="tag"></<span class="name">span</span>></span> </span><br><span class="line"><span class="comment"><!-- 不展示，元素被设置为`display:none` --></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">v-show</span>=<span class="string">false</span>></span>名字<span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><p><code>v-if</code>后可以接<code>v-else-if</code>和<code>v-else</code>,但必须相连，不能有其他元素</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span v-if='num>18'>1</span> </span><br><span class="line"><span v-else-if='num>30'>2</span> </span><br><span class="line"><span v-else>3</span> </span><br></pre></td></tr></table></figure><h2 id="5-v-for和key"><a href="#5-v-for和key" class="headerlink" title="5. v-for和key"></a>5. v-for和key</h2><p><code>v-for</code> 指令可以绑定数组的数据来渲染一个项目列表</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 遍历数组;item index是数组项和索引 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">'(item,index) in list'</span>></span>{{item}} {{index}}<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- 遍历对象;value,key,index是属性值，属性，索引 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">'(value,key,index) in obj'</span>></span>{{value}} {{key}} {{index}}<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- 遍历数字 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">'num in 4'</span>></span>{{num}}<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> list = [<span class="string">'kalin'</span>,<span class="string">'siki'</span>,<span class="string">'hitaki'</span>];</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> obj = {<span class="attr">name</span>:<span class="string">'laki'</span>,<span class="attr">age</span>:<span class="number">18</span>}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>使用<code>v-for</code>时应尽量加入key的这个特殊属性。</p><p>在使用key时，如果有数据更改引发元素节点的添加或删除，会基于 key 的变化重新排列元素顺序，而不是所有元素重新渲染。以此来提高加载速度，提升渲染性能。</p><p>key的值应是唯一的，例如唯一的数字或字符串</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">'(item,index) in list'</span> <span class="attr">:key</span>=<span class="string">'index'</span>></span></span><br><span class="line"> {{item}} {{index}}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2 id="6-class与style的绑定"><a href="#6-class与style的绑定" class="headerlink" title="6. class与style的绑定"></a>6. class与style的绑定</h2><h3 id="6-1-class"><a href="#6-1-class" class="headerlink" title="6.1 class"></a>6.1 class</h3><p>在定义class时可以绑定一个对象，以动态切换class。</p><ul><li>vue绑定的class可以和普通的class共存</li><li>下例中vue绑定的class1、class2的有无取决于boolean1、boolean2的值</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"static"</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">:class</span>=<span class="string">"{ class1: boolean1, class2: boolean2 }"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">data: {</span><br><span class="line">boolean1: true,</span><br><span class="line">boolean2: false</span><br><span class="line">}</span><br><span class="line"><span class="comment"><!-- 最终渲染为 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"static class1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- 另一种写法，不内联定义在模板里 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"classObj"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">data: {</span><br><span class="line">classObj: { class1: true, class2: false },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>在定义class时也可以绑定一个数组，以应用一个 class 列表。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"[class1, class2]"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">data: {</span><br><span class="line">class1: 'active',</span><br><span class="line">class2: 'text-danger'</span><br><span class="line">}</span><br><span class="line"><span class="comment"><!-- 最终渲染为 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active text-danger"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- 也可以在数组语法中使用对象语法 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"[{ class1: Boolean1 }, class2]"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="6-2-style"><a href="#6-2-style" class="headerlink" title="6.2 style"></a>6.2 style</h3><p><strong>对象语法</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"{ color: activeColor, fontSize: fontSize + 'px' }"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">data: {</span><br><span class="line"> activeColor: 'red',</span><br><span class="line"> fontSize: 30</span><br><span class="line">}</span><br><span class="line"><span class="comment"><!-- 建议这样写 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"styleObject"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">data: {</span><br><span class="line"> styleObject: {</span><br><span class="line"> color: 'red',</span><br><span class="line"> fontSize: '13px'</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>数组语法</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:style</span>=<span class="string">"[baseStyles, overridStyles]"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">data: {</span><br><span class="line"> baseStyles: {</span><br><span class="line"> color: 'red',</span><br><span class="line"> },</span><br><span class="line"> overridStyles: {</span><br><span class="line">fontSize: '13px',</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>node</title>
<link href="/post/20220222170617.html"/>
<url>/post/20220222170617.html</url>
<content type="html"><![CDATA[<h2 id="1-介绍"><a href="#1-介绍" class="headerlink" title="1. 介绍"></a>1. 介绍</h2><p>node是javaScript的运行环境，可以解析和执行javaScript代码</p><p>node没有BOM和DOM，只有EcmaScript</p><p>node特性：事件驱动；非阻塞的I/O模型；轻量高效</p><h2 id="2-npm"><a href="#2-npm" class="headerlink" title="2. npm"></a>2. npm</h2><p>npm是node的包管理工具；用来管理javaScript相关的包</p><p><strong>npm镜像源配置</strong> </p><p>因为npm默认镜像地址是国外地址，所以改成国内的淘宝镜像</p><p><code>npm config set registry http://registry.npmmirror.com</code></p><p><strong>安装包</strong> </p><p>npm install -g全局安装 –save/-S生产环境 -dev/-D开发环境</p><h2 id="3-核心模块"><a href="#3-核心模块" class="headerlink" title="3. 核心模块"></a>3. 核心模块</h2><h3 id="3-1-读写文件"><a href="#3-1-读写文件" class="headerlink" title="3.1 读写文件"></a>3.1 读写文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="comment">//读文件</span></span><br><span class="line">fs.<span class="title function_">readFile</span>(<span class="string">'./demo.html'</span>,<span class="keyword">function</span> (<span class="params">error,data</span>) {</span><br><span class="line"> <span class="comment">//成功输出data，失败输出error</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(error); <span class="variable language_">console</span>.<span class="title function_">log</span>(data.<span class="title function_">toString</span>());</span><br><span class="line">})</span><br><span class="line"><span class="comment">//写文件</span></span><br><span class="line">fs.<span class="title function_">writeFile</span>(<span class="string">'./demo.html'</span>,<span class="string">'写入的东西'</span>,<span class="keyword">function</span> (<span class="params">error</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(error); <span class="variable language_">console</span>.<span class="title function_">log</span>(data.<span class="title function_">toString</span>());</span><br><span class="line">})</span><br><span class="line"><span class="comment">//读文件夹</span></span><br><span class="line">fs.<span class="title function_">readdir</span>(<span class="string">'./node'</span>,<span class="keyword">function</span> (<span class="params">error,data</span>) {</span><br><span class="line"> <span class="comment">// 失败输出error,成功输出目录下文件/文件夹名数组</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(error); <span class="variable language_">console</span>.<span class="title function_">log</span>(data); </span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="3-2-http服务"><a href="#3-2-http服务" class="headerlink" title="3.2 http服务"></a>3.2 http服务</h3><p>四步走：</p><ol><li>加载http核心模块</li><li>创建一个Web服务器</li><li>注册request请求事件</li><li>绑定端口号，启动服务器</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>);</span><br><span class="line"><span class="keyword">var</span> sever = http.<span class="title function_">createServer</span>();</span><br><span class="line">sever.<span class="title function_">on</span>(<span class="string">'request'</span>,<span class="keyword">function</span> (<span class="params">request,response</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'注册请求事件'</span>); </span><br><span class="line">})</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'请求成功了访问:localhost:3000'</span>); </span><br><span class="line">})</span><br><span class="line"><span class="comment">//链式调用</span></span><br><span class="line">http.<span class="title function_">createServer</span>().<span class="title function_">on</span>(<span class="string">'request'</span>,<span class="keyword">function</span> (<span class="params">request,response</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'注册请求事件'</span>); </span><br><span class="line">}).<span class="title function_">listen</span>(<span class="number">3000</span>,<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'请求成功了访问:localhost:3000'</span>); </span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="3-3-模板引擎art-template"><a href="#3-3-模板引擎art-template" class="headerlink" title="3.3 模板引擎art-template"></a>3.3 模板引擎art-template</h3><p><strong>核心方法</strong> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 基于模板名渲染模板</span></span><br><span class="line"><span class="title function_">template</span>(filename, data);</span><br><span class="line"><span class="comment">// 将模板源代码编译成函数</span></span><br><span class="line">template.<span class="title function_">compile</span>(source, options);</span><br><span class="line"><span class="comment">// 将模板源代码编译成函数并立即执行</span></span><br><span class="line">template.<span class="title function_">render</span>(source, data, options);<span class="comment">//source 模板文件、data需要导入模板的数据</span></span><br></pre></td></tr></table></figure><p><strong>常用语句</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 单 if 判断 --></span></span><br><span class="line">{{if value}} </span><br><span class="line">... </span><br><span class="line">{{/if}}</span><br><span class="line"><span class="comment"><!-- if ... else ... 判断 --></span></span><br><span class="line">{{if v1}} </span><br><span class="line">... </span><br><span class="line">{{else if v2}}</span><br><span class="line"> ... </span><br><span class="line">{{/if}}</span><br><span class="line"><span class="comment"><!-- 循环 --></span></span><br><span class="line">{{each target}}</span><br><span class="line"> {{$index}} {{$value}}</span><br><span class="line">{{/each}}</span><br><span class="line"><span class="comment"><!-- 原生语法 --></span></span><br><span class="line"><% for (var i = 0; i < target.length; i++) { %></span><br><span class="line"><%= i %> <%= target[i] %></span><br><span class="line"><% } %></span><br></pre></td></tr></table></figure><blockquote><p><code>target</code>是一个数组，<code>each</code>用于对数组遍历，<code>$index</code> 是数组的下标， <code>$value</code>是数组的值</p></blockquote><p><strong>浏览器下使用（单html文件）</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://npm.elemecdn.com/art-template@4.13.2/lib/template-web.js"</span>></span><span class="tag"></<span class="name">script</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">id</span>=<span class="string">"container"</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="comment"><!-- 创建 script 标签创建模板,注意下面几点 --></span></span><br><span class="line"> <span class="comment"><!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" --></span></span><br><span class="line"> <span class="comment"><!-- 2. 给 script 标签添加 id ，此 id 即为模板 id --></span></span><br><span class="line"> <span class="comment"><!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/html"</span> <span class="attr">id</span>=<span class="string">"tpl"</span>></span><span class="language-handlebars"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> </span><span class="template-variable">{{<span class="name"><span class="built_in">if</span></span> user}}</span><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> <span class="tag"><<span class="name">h2</span>></span></span><span class="template-variable">{{<span class="name">user.name</span>}}</span><span class="language-xml"><span class="tag"></<span class="name">h2</span>></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"> </span><span class="template-tag">{{/<span class="name"><span class="built_in">if</span></span>}}</span><span class="language-xml"></span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"></span></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> user = {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'Template username'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> html = <span class="title function_">template</span>(<span class="string">'tpl'</span>, {<span class="attr">user</span>: user})</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> container = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">'#container'</span>);</span></span><br><span class="line"><span class="language-javascript"> container.<span class="property">innerHTML</span> = html;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p><strong>node下使用</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> {{each commentsList}}</span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span><span class="tag"><<span class="name">span</span>></span>{{$value.name}}<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> {{/each}}</span><br><span class="line"><span class="tag"></<span class="name">tbody</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> result = [{<span class="attr">name</span>:vivy},{<span class="attr">name</span>:violet},{<span class="attr">name</span>:hitaki}]</span><br><span class="line"><span class="keyword">let</span> html = template.<span class="title function_">render</span>(data.<span class="title function_">toString</span>(), { <span class="attr">commentsList</span>: results})</span><br><span class="line"><span class="comment">//第二个参数为对象</span></span><br></pre></td></tr></table></figure><h3 id="3-4-mysql"><a href="#3-4-mysql" class="headerlink" title="3.4 mysql"></a>3.4 mysql</h3><p><strong>引入流程</strong> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> connection = mysql.<span class="title function_">createConnection</span>({</span><br><span class="line"> <span class="attr">host</span>: <span class="string">'localhost'</span>,</span><br><span class="line"> <span class="attr">user</span>: <span class="string">'root'</span>,</span><br><span class="line"> <span class="attr">password</span>: <span class="string">'kkk'</span>,</span><br><span class="line"> <span class="attr">database</span>: <span class="string">'comment'</span></span><br><span class="line">});</span><br><span class="line">connection.<span class="title function_">connect</span>();</span><br><span class="line"><span class="keyword">let</span> sql = <span class="string">'SELECT * FROM comments'</span>;</span><br><span class="line">connection.<span class="title function_">query</span>(sql, <span class="keyword">function</span> (<span class="params">error, results</span>) {</span><br><span class="line"> <span class="keyword">if</span> (error) <span class="keyword">throw</span> error;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(results);</span><br><span class="line">});</span><br><span class="line">connection.<span class="title function_">end</span>();</span><br></pre></td></tr></table></figure><p><strong>sql增删改查语句</strong> </p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">selelt <span class="operator">*</span> <span class="keyword">from</span> <span class="keyword">table</span>;<span class="operator">/</span><span class="operator">/</span>查询所有</span><br><span class="line"><span class="keyword">insert into</span> <span class="keyword">table</span> (id,name) <span class="keyword">values</span> (<span class="number">1</span>,<span class="string">'vivy'</span>);<span class="operator">/</span><span class="operator">/</span>插入数据</span><br><span class="line"><span class="keyword">delete</span> <span class="keyword">from</span> <span class="keyword">table</span> <span class="keyword">where</span> id <span class="operator">=</span> <span class="number">1</span>;<span class="operator">/</span><span class="operator">/</span>删除数据</span><br><span class="line"><span class="keyword">update</span> <span class="keyword">table</span> <span class="keyword">set</span> id <span class="operator">=</span> <span class="number">2</span>, name <span class="operator">=</span> <span class="string">'vivy'</span> <span class="keyword">where</span> id <span class="operator">=</span><span class="number">1</span>;<span class="operator">/</span><span class="operator">/</span>修改数据</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> node </tag>
</tags>
</entry>
<entry>
<title>Bootstrap</title>
<link href="/post/20220222170554.html"/>
<url>/post/20220222170554.html</url>
<content type="html"><![CDATA[<h2 id="1-介绍"><a href="#1-介绍" class="headerlink" title="1. 介绍"></a>1. 介绍</h2><p>bootstrap是开源前端模板工具集，是由Twitter公司的两名前端工程师开发的</p><p>特点是：根据类名引用工具，移动端优先</p><p><a href="https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip">官方下载文档</a></p><p><a href="https://www.jsdelivr.com/package/npm/bootstrap?version=3.4.1&path=dist">jsdelivr下载</a></p><blockquote><p>线上CDN地址</p><p><a href="https://npm.elemecdn.com/bootstrap@3.4.1/dist/js/bootstrap.min.js">https://npm.elemecdn.com/bootstrap@3.4.1/dist/js/bootstrap.min.js</a></p><p><a href="https://npm.elemecdn.com/bootstrap@3.4.1/dist/css/bootstrap.min.css">https://npm.elemecdn.com/bootstrap@3.4.1/dist/css/bootstrap.min.css</a></p></blockquote><h2 id="2-使用"><a href="#2-使用" class="headerlink" title="2. 使用"></a>2. 使用</h2><p>bootstrap是基于jQuery开发的，所以在引入bootstrap的js文件前要先引入jQuery</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://npm.elemecdn.com/jquery@3.5.1/dist/jquery.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://npm.elemecdn.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"</span>></span><span class="tag"></<span class="name">script</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">"https://npm.elemecdn.com/bootstrap@3.4.1/dist/css/bootstrap.min.css"</span>></span></span><br></pre></td></tr></table></figure><p>具体类名引用参考<a href="https://v3.bootcss.com/css/">bootstrap3官方文档</a>或<a href="https://www.runoob.com/bootstrap/bootstrap-grid-system.html">菜鸟教程</a></p><p>这里列举几个常用的组件</p><h3 id="2-1-网格系统"><a href="#2-1-网格系统" class="headerlink" title="2.1 网格系统"></a>2.1 网格系统</h3><p>网格系统是将container容器内以网格的形式分成12列，可根据不同设备屏幕大小的差异来规划内同所占的列数</p><p>由于bootstrap是移动设备优先，所以屏幕大小不同时是向上兼容的</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-n"</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">"col-xs-n"</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">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-n"</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">"col-xs-n"</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">div</span>></span></span><br></pre></td></tr></table></figure><table><thead><tr><th align="left"></th><th align="left">超小屏幕 手机 (<768px)</th><th align="left">小屏幕 平板 (≥768px)</th><th align="left">中等屏幕 桌面显示器 (≥992px)</th><th align="left">大屏幕 大桌面显示器 (≥1200px)</th></tr></thead><tbody><tr><td align="left"><code>.container</code> 最大宽度</td><td align="left">None （自动）</td><td align="left">750px</td><td align="left">970px</td><td align="left">1170px</td></tr><tr><td align="left">类前缀</td><td align="left"><code>.col-xs-</code></td><td align="left"><code>.col-sm-</code></td><td align="left"><code>.col-md-</code></td><td align="left"><code>.col-lg-</code></td></tr></tbody></table><p><strong>响应式</strong> </p><p>可以配合clearfix类和响应式工具类来实现响应式显示/隐藏元素；显示时可以后接<code>-block</code>或<code>-inline-block</code>来设置显示模式</p><table><thead><tr><th>显示</th><th>隐藏</th></tr></thead><tbody><tr><td>visible-xs</td><td>hidden-xs</td></tr><tr><td>visible-sm</td><td>hidden-sm</td></tr><tr><td>visible-md</td><td>hidden-md</td></tr><tr><td>visible-lg</td><td>hidden-lg</td></tr></tbody></table><p><strong>列偏移</strong> </p><p>可以使用<code>col-md-offset-n</code>来设置当前元素在网格系统中便宜的列数</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- xs大小时每个div占六列，每行显示两个;sm大小及以上时每个div占3列,每行显示4个 --></span></span><br><span class="line"><span class="comment"><!-- xs大小时第一个div左侧偏移两列,本身占4列 --></span></span><br><span class="line"><span class="comment"><!-- xs大小时后面两个div隐藏 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-offset-2 col-xs-4 col-sm-3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>123<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">"col-xs-6 col-sm-3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>123<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">"clearfix hidden-xs col-xs-6 col-sm-3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>123<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">"clearfix hidden-xs col-xs-6 col-sm-3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>123<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></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="2-2-表格"><a href="#2-2-表格" class="headerlink" title="2.2 表格"></a>2.2 表格</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- table 基本表、table-bordered 表格带边框、table-hover鼠标悬停有浅灰色背景、table-condensed 表格更紧凑、table-responsive 响应式表格 --></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-bordered table-hover table-condensed table-responsive"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">caption</span>></span>表头<span class="tag"></<span class="name">caption</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>名称<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>城市<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Tanmay<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Bangalore<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Sachin<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Mumbai<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tbody</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure><h3 id="2-3-表单"><a href="#2-3-表单" class="headerlink" title="2.3 表单"></a>2.3 表单</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 水平排列的表单 --></span></span><br><span class="line"><span class="comment"><!-- <form class="form-inline"> --></span></span><br><span class="line"><span class="comment"><!-- 纵向排列的表单 --></span></span><br><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">class</span>=<span class="string">"form-horizontal"</span>></span></span><br><span class="line"> <span class="comment"><!-- 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"user"</span> <span class="attr">class</span>=<span class="string">"col-sm-2 control-label"</span>></span>用户名<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-10"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"user"</span> <span class="attr">placeholder</span>=<span class="string">"username"</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></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"password"</span> <span class="attr">class</span>=<span class="string">"col-sm-2 control-label"</span>></span>密码<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-10"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"password"</span> <span class="attr">placeholder</span>=<span class="string">"Password"</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></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-offset-2 col-sm-10"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">class</span>=<span class="string">"btn btn-default"</span>></span>Sign in<span class="tag"></<span class="name">button</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></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure><p>其余常用组件慢慢整理；目前先用这些</p><h2 id="3-插件"><a href="#3-插件" class="headerlink" title="3. 插件"></a>3. 插件</h2><h3 id="3-1-模态框"><a href="#3-1-模态框" class="headerlink" title="3.1 模态框"></a>3.1 模态框</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 触发模态框 --></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn btn-default"</span> <span class="attr">data-toggle</span>=<span class="string">"modal"</span> <span class="attr">data-target</span>=<span class="string">"#mod1"</span>></span></span><br><span class="line">模态框</span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="comment"><!-- 模态框（Modal） --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modal fade"</span> <span class="attr">id</span>=<span class="string">"mod1"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modal-content"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modal-header"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"close"</span> <span class="attr">data-dismiss</span>=<span class="string">"modal"</span>></span><span class="symbol">&times;</span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line">模态框标题</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">"modal-body"</span>></span></span><br><span class="line">模态框主体</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">"modal-footer"</span>></span></span><br><span class="line">模态框底部</span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-default"</span> <span class="attr">data-dismiss</span>=<span class="string">"modal"</span>></span>关闭<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-primary"</span>></span>确定<span class="tag"></<span class="name">button</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></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3 id="3-2-tab切换"><a href="#3-2-tab切换" class="headerlink" title="3.2 tab切换"></a>3.2 tab切换</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"nav nav-tabs"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">class</span>=<span class="string">"active"</span> <span class="attr">href</span>=<span class="string">"#tab1"</span> <span class="attr">data-toggle</span>=<span class="string">"tab"</span>></span>菜鸟教程<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#tab2"</span> <span class="attr">data-toggle</span>=<span class="string">"tab"</span>></span>iOS<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab-content"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab-pane fade in active"</span> <span class="attr">id</span>=<span class="string">"tab1"</span>></span></span><br><span class="line">tab1的内容</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">"tab-pane fade"</span> <span class="attr">id</span>=<span class="string">"tab2"</span>></span></span><br><span class="line">tab2的内容</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></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> bootstrap </tag>
</tags>
</entry>
<entry>
<title>ajax</title>
<link href="/post/20220222170440.html"/>
<url>/post/20220222170440.html</url>
<content type="html"><![CDATA[<h2 id="1-ajax简述"><a href="#1-ajax简述" class="headerlink" title="1. ajax简述"></a>1. ajax简述</h2><p>Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。</p><p>尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息</p><p>异步请求，局部刷新</p><h3 id="1-1-ajax原理"><a href="#1-1-ajax原理" class="headerlink" title="1.1 ajax原理"></a>1.1 ajax原理</h3><p><strong>AJAX（Asynchronous JavaScript and XML）原理简述：</strong><br>AJAX 是一种基于 Web 技术的异步通信模型，允许浏览器在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面内容。其核心是通过 JavaScript 异步发送 HTTP 请求，接收服务器返回的数据（如 JSON/XML），再利用 DOM 操作动态更新页面。</p><p><strong>AJAX 工作流程</strong> </p><ol><li>用户触发事件（如点击按钮、输入文本）。</li><li>JavaScript 创建请求对象（如 XMLHttpRequest 或现代 Fetch API）。</li><li>向服务器发送异步请求（指定 URL、HTTP 方法、参数等）。</li><li>服务器处理请求（查询数据库、调用接口等），返回响应数据。</li><li>浏览器接收响应，通过回调函数或 Promise 处理数据（如解析 JSON）。</li><li>更新页面局部内容（修改 DOM 元素，无需刷新整个页面）。</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">+------------+ AJAX 流程 +------------+</span><br><span class="line">| | 1.触发事件（点击等） | |</span><br><span class="line">| 浏览器 | -------------------> | JavaScript |</span><br><span class="line">| | | |</span><br><span class="line">+------------+ +------------+</span><br><span class="line"> | |</span><br><span class="line"> | 2.创建XHR/Fetch请求并发送 |</span><br><span class="line"> | -------------------------------> |</span><br><span class="line"> | |</span><br><span class="line"> | 3.服务器处理请求并返回数据 |</span><br><span class="line"> | <------------------------------- |</span><br><span class="line"> | |</span><br><span class="line">+------------+ 4.解析数据并更新DOM +------------+</span><br><span class="line">| 更新页面 | <------------------- | 处理响应 |</span><br><span class="line">+------------+ +------------+</span><br></pre></td></tr></table></figure><h2 id="2-ajax语法"><a href="#2-ajax语法" class="headerlink" title="2. ajax语法"></a>2. ajax语法</h2><p>onreadystatechange事件</p><ol><li><p>当请求被发送到服务器时，我们需要执行一些基于响应的任务。。</p></li><li><p>每当 readyState 改变时，就会触发 onreadystatechange 事件。</p></li><li><p>readyState 属性存有 XMLHttpRequest 的状态信息。</p></li></ol><h3 id="2-1-ajax状态码"><a href="#2-1-ajax状态码" class="headerlink" title="2.1 ajax状态码"></a>2.1 ajax状态码</h3><table><thead><tr><th>ajax状态码</th><th>含义</th></tr></thead><tbody><tr><td>0</td><td>(未初始化)还没有调用send()方法</td></tr><tr><td>1</td><td>(载入)已经调用send()方法，正在派发请求</td></tr><tr><td>2</td><td>(载入完成)send()已经执行完成，已经接收到全部的响应内容</td></tr><tr><td>3</td><td>(交互)正在解析响应内容</td></tr><tr><td>4</td><td>(完成)响应内容已经解析完成，用户可以调用</td></tr></tbody></table><h3 id="2-2-http状态码"><a href="#2-2-http状态码" class="headerlink" title="2.2 http状态码"></a>2.2 http状态码</h3><table><thead><tr><th>1xx(临时响应)</th><th>表示临时响应并需要请求者继续执行操作的状态代码</th></tr></thead><tbody><tr><td>100 (继续)</td><td>请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分</td></tr><tr><td>101 (切换协议)</td><td>请求者已要求服务器切换协议，服务器已确认并准备切换</td></tr></tbody></table><table><thead><tr><th>2xx (成功)</th><th>表示成功处理了请求的状态代码</th></tr></thead><tbody><tr><td>200 (成功)</td><td>服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页</td></tr><tr><td>201 (已创建)</td><td>请求成功并且服务器创建了新的资源</td></tr><tr><td>202 (已接受)</td><td>服务器已接受请求，但尚未处理</td></tr><tr><td>203 (非授权信息)</td><td>服务器已成功处理了请求，但返回的信息可能来自另一来源</td></tr><tr><td>204 (无内容)</td><td>服务器成功处理了请求，但没有返回任何内容</td></tr><tr><td>205 (重置内容)</td><td>服务器成功处理了请求，但没有返回任何内容</td></tr><tr><td>206 (部分内容)</td><td>服务器成功处理了部分 GET 请求</td></tr></tbody></table><table><thead><tr><th>3xx (重定向)</th><th>表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向</th></tr></thead><tbody><tr><td>300 (多种选择)</td><td>针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择</td></tr><tr><td>301 (永久移动)</td><td>请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置</td></tr><tr><td>302 (临时移动)</td><td>服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求</td></tr><tr><td>303 (查看其他位置)</td><td>请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码</td></tr><tr><td>304 (未修改)</td><td>自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容</td></tr><tr><td>305 (使用代理)</td><td>请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理</td></tr><tr><td>307 (临时重定向)</td><td>服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求</td></tr></tbody></table><table><thead><tr><th>4xx(请求错误)</th><th>这些状态代码表示请求可能出错，妨碍了服务器的处理</th></tr></thead><tbody><tr><td>400 (错误请求)</td><td>服务器不理解请求的语法</td></tr><tr><td>401 (未授权)</td><td>请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应</td></tr><tr><td>403 (禁止)</td><td>服务器拒绝请求</td></tr><tr><td>404 (未找到)</td><td>服务器找不到请求的网页</td></tr><tr><td>405 (方法禁用)</td><td>禁用请求中指定的方法</td></tr><tr><td>406 (不接受)</td><td>无法使用请求的内容特性响应请求的网页</td></tr><tr><td>407 (需要代理授权)</td><td>此状态代码与 401(未授权)类似，但指定请求者应当授权使用代理</td></tr><tr><td>408 (请求超时)</td><td>服务器等候请求时发生超时</td></tr><tr><td>409 (冲突)</td><td>服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息</td></tr><tr><td>410 (已删除)</td><td>如果请求的资源已永久删除，服务器就会返回此响应</td></tr><tr><td>411 (需要有效长度)</td><td>服务器不接受不含有效内容长度标头字段的请求</td></tr><tr><td>412 (未满足前提条件)</td><td>服务器未满足请求者在请求中设置的其中一个前提条件</td></tr><tr><td>413 (请求实体过大)</td><td>服务器无法处理请求，因为请求实体过大，超出服务器的处理能力</td></tr><tr><td>414 (请求的 URI 过长)</td><td>请求的 URI(通常为网址)过长，服务器无法处理</td></tr><tr><td>415 (不支持的媒体类型)</td><td>请求的格式不受请求页面的支持</td></tr><tr><td>416 (请求范围不符合要求)</td><td>如果页面无法提供请求的范围，则服务器会返回此状态代码</td></tr><tr><td>417 (未满足期望值)</td><td>服务器未满足”期望”请求标头字段的要求</td></tr></tbody></table><table><thead><tr><th>5xx(服务器错误)</th><th>这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错</th></tr></thead><tbody><tr><td>500 (服务器内部错误)</td><td>服务器遇到错误，无法完成请求</td></tr><tr><td>501 (尚未实施)</td><td>服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码</td></tr><tr><td>502 (错误网关)</td><td>服务器作为网关或代理，从上游服务器收到无效响应</td></tr><tr><td>503 (服务不可用)</td><td>服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态</td></tr><tr><td>504 (网关超时)</td><td>服务器作为网关或代理，但是没有及时从上游服务器收到请求</td></tr><tr><td>505 (HTTP 版本不受支持)</td><td>服务器不支持请求中所用的 HTTP 协议版本</td></tr></tbody></table><h3 id="2-3-实例"><a href="#2-3-实例" class="headerlink" title="2.3 实例"></a>2.3 实例</h3><p>以下通过实例的方式来演示ajax原生使用</p><ul><li><p>get请求</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'myDiv'</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 兼容性处理</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> xmlhttp;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">XMLHttpRequest</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// IE7+,和其他浏览器</span></span></span><br><span class="line"><span class="language-javascript"> xmlhttp = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span></span><br><span class="line"><span class="language-javascript">} <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// IE5,IE6</span></span></span><br><span class="line"><span class="language-javascript"> xmlhttp = <span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">'Microsoft.XMLHTTP'</span>);</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"><span class="comment">//ajax打开链接</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="title function_">open</span>(</span></span><br><span class="line"><span class="language-javascript"> <span class="string">"GET"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="string">"http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">);</span></span><br><span class="line"><span class="language-javascript"><span class="comment">//ajax发送请求</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="title function_">send</span>();</span></span><br><span class="line"><span class="language-javascript"><span class="comment">//检测请求状态</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="property">onreadystatechange</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (xmlhttp.<span class="property">readyState</span> == <span class="number">4</span> && xmlhttp.<span class="property">status</span> == <span class="number">200</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> imgList = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xmlhttp.<span class="property">responseText</span>).<span class="property">data</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(imgList);</span></span><br><span class="line"><span class="language-javascript"> imgList.<span class="title function_">forEach</span>(<span class="function">(<span class="params">value</span>) =></span> {</span></span><br><span class="line"><span class="language-javascript"> $(<span class="string">'#myDiv'</span>)[<span class="number">0</span>].<span class="property">innerHTML</span> += <span class="string">`<img src=<span class="subst">${value.imgUrl}</span>>`</span>;</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></li><li><p>post请求</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'myDiv'</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 兼容性处理</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">var</span> xmlhttp;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">XMLHttpRequest</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// IE7+,和其他浏览器</span></span></span><br><span class="line"><span class="language-javascript"> xmlhttp = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span></span><br><span class="line"><span class="language-javascript">} <span class="keyword">else</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// IE5,IE6</span></span></span><br><span class="line"><span class="language-javascript"> xmlhttp = <span class="keyword">new</span> <span class="title class_">ActiveXObject</span>(<span class="string">'Microsoft.XMLHTTP'</span>);</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"><span class="comment">//ajax打开链接</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="title function_">open</span>(</span></span><br><span class="line"><span class="language-javascript"> <span class="string">"POST"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="string">"http://wkt.myhope365.com//weChat/applet/course/list/type"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">);</span></span><br><span class="line"><span class="language-javascript"><span class="comment">// ajax设置请求头</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="title function_">setRequestHeader</span>(<span class="string">'Content-Type'</span>, <span class="string">'application/x-www-form-urlencoded'</span>)</span></span><br><span class="line"><span class="language-javascript"><span class="comment">//ajax发送请求</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="title function_">send</span>(<span class="string">"type=free&pageNum=1&pageSize=5"</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="comment">//检测请求状态</span></span></span><br><span class="line"><span class="language-javascript">xmlhttp.<span class="property">onreadystatechange</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (xmlhttp.<span class="property">readyState</span> == <span class="number">4</span> && xmlhttp.<span class="property">status</span> == <span class="number">200</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xmlhttp.<span class="property">responseText</span>).<span class="property">rows</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xmlhttp.<span class="property">responseText</span>).<span class="property">rows</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> $(<span class="string">'#myDiv'</span>)[<span class="number">0</span>].<span class="property">innerHTML</span> += <span class="string">`<dl class="course"><dt><img src="<span class="subst">${item.coverFileUrl}</span>"alt="" /></dt><dt><span class="subst">${item.courseTitle}</span></dt><dt>共<span class="subst">${item.learningNum}</span>节课|<span class="subst">${item.participationsCount}</span>人报名</dt><dt>免费</dt></dl>`</span></span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></li></ul><h2 id="3-引入jQuery的ajax实例"><a href="#3-引入jQuery的ajax实例" class="headerlink" title="3. 引入jQuery的ajax实例"></a>3. 引入jQuery的ajax实例</h2><h3 id="3-1-jquery-get"><a href="#3-1-jquery-get" class="headerlink" title="3.1 jquery-get"></a>3.1 jquery-get</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'box'</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> $.<span class="title function_">get</span>(</span></span><br><span class="line"><span class="language-javascript"> <span class="string">'http://wkt.myhope365.com/weChat/applet/course/banner/list?number=5'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> (<span class="params">data, status</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (status == <span class="string">'success'</span>) {</span></span><br><span class="line"><span class="language-javascript"> data.<span class="property">data</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> $(<span class="string">'#box'</span>).<span class="title function_">append</span>(<span class="string">`<img src="<span class="subst">${item.imgUrlPc}</span>" alt="">`</span>)</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> )</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="3-2-jquery-post"><a href="#3-2-jquery-post" class="headerlink" title="3.2 jquery-post"></a>3.2 jquery-post</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><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">id</span>=<span class="string">'box'</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">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// $.post()请求不能设置JOSN格式的请求头，所以请求头类型是JSON格式的话需要用$.ajax()</span></span></span><br><span class="line"><span class="language-javascript"> $.<span class="title function_">post</span>(</span></span><br><span class="line"><span class="language-javascript"> <span class="string">"http://wkt.myhope365.com/weChat/applet/course/list/type"</span>, <span class="string">"type=free&pageNum=1&pageSize=10"</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> (<span class="params">data, status</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (status == <span class="string">"success"</span>) {</span></span><br><span class="line"><span class="language-javascript"> data.<span class="property">rows</span>.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item</span>) =></span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(item.<span class="property">courseTitle</span>);</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> );</span></span><br><span class="line"><span class="language-javascript"> $.<span class="title function_">ajax</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">url</span>: <span class="string">'http://wkt.myhope365.com/weChat/applet/subject/list'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">type</span>: <span class="string">'POST'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">data</span>: <span class="title class_">JSON</span>.<span class="title function_">stringify</span>({ <span class="attr">enable</span>: <span class="number">1</span> }),</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">contentType</span>: <span class="string">'application/json'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">res, status</span>) {</span></span><br><span class="line"><span class="language-javascript"> res.<span class="property">rows</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> $(<span class="string">'#box'</span>)[<span class="number">0</span>].<span class="property">innerHTML</span> += <span class="string">`<p><span class="subst">${item.title}</span></p>`</span></span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>ajax方法对象参数属性列表</p><table><thead><tr><th>属性名</th><th>含义</th></tr></thead><tbody><tr><td>url</td><td>规定发送请求的 URL。默认是当前页面</td></tr><tr><td>type</td><td>规定请求的类型（GET 或 POST</td></tr><tr><td>timeout</td><td>设置本地的请求超时时间（以毫秒计）</td></tr><tr><td>async</td><td>布尔值，表示请求是否异步处理。默认是 true</td></tr><tr><td>cache</td><td>布尔值，表示浏览器是否缓存被请求页面。默认是 true</td></tr><tr><td>data</td><td>规定要发送到服务器的数据</td></tr><tr><td>dataType</td><td>预期的服务器响应的数据类型</td></tr><tr><td>contentType</td><td>发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”</td></tr></tbody></table><h2 id="4-json"><a href="#4-json" class="headerlink" title="4. json"></a>4. json</h2><p>JSON 是存储和交换文本信息的语法。类似 XML。</p><p>JSON 比 XML 更小、更快，更易解析。</p><p>JSON 是轻量级的文本数据交换格式</p><h3 id="4-1-JSON-parse和JSON-stringify"><a href="#4-1-JSON-parse和JSON-stringify" class="headerlink" title="4.1 JSON.parse和JSON.stringify"></a>4.1 JSON.parse和JSON.stringify</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="string">'{ "name":"vivy", "ability":"sing"}'</span>)<span class="comment">//将字符串传话为JSON对象</span></span><br><span class="line"><span class="title class_">JSON</span>.<span class="title function_">stringify</span>({ <span class="string">"name"</span>:<span class="string">"vivy"</span>, <span class="string">"ability"</span>:<span class="string">"sing"</span>});<span class="comment">//将JSON对象转化为字符串</span></span><br></pre></td></tr></table></figure><h3 id="4-2-JSONP"><a href="#4-2-JSONP" class="headerlink" title="4.2 JSONP"></a>4.2 JSONP</h3><p>JSON的一种使用模式，用来解决跨域问题；</p><p><strong>同源策略</strong> </p><p>同源即协议、域名、端口号都相同。<code>http://</code>(同为http协议)<code>hearthitagi.com</code>(相同域名):<code>7070</code>(相同端口号)</p><p>随着互联网的发展，”同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制。</p><blockquote><p>（1） Cookie、LocalStorage 和 IndexDB 无法读取。</p><p>（2） DOM 无法获得。</p><p>（3） AJAX 请求不能发送。</p></blockquote><p><strong>跨域</strong> </p><p>解决跨域问题的三种主要方式：</p><p>后台放开；jsonp；配置代理</p><p>后台放开:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">response.setHeader("Access-Control-Allow-Origin", "*")</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> ajax </tag>
</tags>
</entry>
<entry>
<title>es6基础 04</title>
<link href="/post/20220221111118.html"/>
<url>/post/20220221111118.html</url>
<content type="html"><![CDATA[<h2 id="1-Promise对象"><a href="#1-Promise对象" class="headerlink" title="1. Promise对象"></a>1. Promise对象</h2><p><strong>Promise</strong> 对象用于表示一个异步操作的最终完成 (或失败)及其结果值</p><p>异步操作会先挂起，优先执行同步操作后再执行异步操作</p><p>一个 <code>Promise</code> 对象代表一个在这个 promise 被创建出来时不一定有已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 <em>promise</em>，以便在未来某个时候把值交给使用者。</p><p>说人话就是promise用于判断接口请求是否正确，正确执行then方法里的内容，错误执行catch里的内容。最后返回promise里的执行结果。</p><p>一个 <code>Promise</code> 必然处于以下几种状态之一：</p><ul><li>初始化（pending）: 初始状态，既没有被接受，也没有被拒绝。</li><li>已接受（fulfilled）: 意味着操作成功完成。</li><li>已拒绝（rejected）: 意味着操作失败。</li></ul><h3 id="1-1-基本用法"><a href="#1-1-基本用法" class="headerlink" title="1.1 基本用法"></a>1.1 基本用法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> promise1 = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span> (<span class="params">resolve, reject</span>) { <span class="comment">//resolve、reject均为方法</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="number">3</span> == <span class="number">3</span>) {</span><br><span class="line"> <span class="title function_">resolve</span>(<span class="string">'成功了'</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="title function_">reject</span>(<span class="string">'失败了'</span>);</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(promise1);<span class="comment">//Promise {<fulfilled>: "成功了"}</span></span><br></pre></td></tr></table></figure><h3 id="1-2-then、catch方法"><a href="#1-2-then、catch方法" class="headerlink" title="1.2 then、catch方法"></a>1.2 then、catch方法</h3><p>then方法会接收promise的fulfilled状态并执行then方法里的内容</p><p><code>then()</code> 函数会返回一个和原来不同的<strong>新的 Promise</strong>，所以then可以链式调用</p><p>如果promise</p><ul><li>返回了一个值，那么 <code>then</code> 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值</li><li>没有返回任何值，那么 <code>then</code> 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 <code>undefined</code>。</li><li>抛出一个错误，那么 <code>then</code> 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">promise1</span><br><span class="line"> .<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> res += <span class="string">'第一步, '</span></span><br><span class="line"> }) <span class="comment">//then返回的promise对象状态为fulfilled，PromiseResult(同时也是下一个then的参数)值为"成功了, 第一步," </span></span><br><span class="line"> .<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> res += <span class="string">'第二步。'</span></span><br><span class="line"> })<span class="comment">//then返回的promise对象状态为fulfilled，PromiseResult(同时也是下一个then的参数)值为"成功了, 第一步,第二步。" </span></span><br></pre></td></tr></table></figure><p><code>catch()</code>函数同then一样，会接收promise的rejected状态并执行catch方法里的内容</p><p>不过有以下要注意的内容</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 抛出一个错误，大多数时候将调用catch方法</span></span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="string">'Uh-oh!'</span>;</span><br><span class="line">});</span><br><span class="line">p1.<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e); <span class="comment">// "Uh-oh!"</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// 在异步函数中抛出的错误不会被catch捕获到</span></span><br><span class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="string">'Uncaught Exception!'</span>;</span><br><span class="line"> }, <span class="number">1000</span>);</span><br><span class="line">});</span><br><span class="line">p2.<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e); <span class="comment">// 不会执行</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">// 在resolve()后面抛出的错误会被忽略</span></span><br><span class="line"><span class="keyword">var</span> p3 = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>) {</span><br><span class="line"> <span class="title function_">resolve</span>();</span><br><span class="line"> <span class="keyword">throw</span> <span class="string">'Silenced Exception!'</span>;</span><br><span class="line">});</span><br><span class="line">p3.<span class="title function_">catch</span>(<span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e); <span class="comment">// 不会执行</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="1-3-all方法"><a href="#1-3-all方法" class="headerlink" title="1.3 all方法"></a>1.3 all方法</h3><p><code>all()</code>方法接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all( )才会有返回。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Promise</span>.<span class="title function_">all</span>([pro1,pro2]).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">result</span>){ <span class="comment">//pro1和pro2是promise实例对象</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>一般的应用场景：一般这样的场景：我们执行某个操作，这个操作需要得到需要多个接口请求回来的数据来支持，但是这些接口请求之前互不依赖，不需要层层嵌套。这种情况下就适合使用Promise.all( )方法，因为它会得到所有接口都请求成功了，才会进行操作</p><h3 id="1-4-race方法"><a href="#1-4-race方法" class="headerlink" title="1.4 race方法"></a>1.4 race方法</h3><p><code>race()</code>参数要求跟<code>Promise.all( )</code>方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，而且谁优先返回就接受谁。其他实例中再发生变化，也不会再执行了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Promise</span>.<span class="title function_">all</span>([pro1,pro2]).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">result</span>){ <span class="comment">//pro1和pro2是promise实例对象</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="2-ES7中Async和await"><a href="#2-ES7中Async和await" class="headerlink" title="2. ES7中Async和await"></a>2. ES7中Async和await</h2><p><code>async</code>和<code>await</code>关键字让我们可以用一种更简洁的方式写出基于promise异步行为，而无需刻意地链式调用<code>promise</code>。</p><p><code>async</code>的返回值是一个promise对象，这个promise要么会通过一个由async函数返回的值被解决，要么会通过一个从async函数中抛出的（或其中没有被捕获到的）异常被拒绝。</p><p>async函数可能包含0个或者多个<code>await</code>表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">work</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function"><span class="params">resolve</span> =></span> {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">resolve</span>(<span class="string">'worked'</span>);</span><br><span class="line"> }, <span class="number">2000</span>);</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">asyncCall</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> result = <span class="keyword">await</span> <span class="title function_">work</span>();</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(result); </span><br><span class="line"> <span class="keyword">return</span> <span class="string">"async函数的返回值，[PromiseResult]中的值"</span></span><br><span class="line">}</span><br><span class="line"><span class="title function_">asyncCall</span>();<span class="comment">//"worked"</span></span><br></pre></td></tr></table></figure><h2 id="3-类基本用法"><a href="#3-类基本用法" class="headerlink" title="3. 类基本用法"></a>3. 类基本用法</h2><p>类是用于创建对象的模板。他们用代码封装数据以处理该数据。类是“特殊的函数”，就像定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。</p><h3 id="3-1-类的声明"><a href="#3-1-类的声明" class="headerlink" title="3.1 类的声明"></a>3.1 类的声明</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">cube</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">height, width</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">height</span> = height;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">width</span> = width;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="3-2-类的表达式"><a href="#3-2-类的表达式" class="headerlink" title="3.2 类的表达式"></a>3.2 类的表达式</h3><p>类的表达式有未命名和命名两种</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 未命名/匿名类</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Rectangle</span> = <span class="keyword">class</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">height</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">height</span> = height;</span><br><span class="line"> }</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 class_">Rectangle</span>.<span class="property">name</span>);<span class="comment">//"Rectangle"</span></span><br><span class="line"><span class="comment">// 命名类</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Rectangle</span> = <span class="keyword">class</span> <span class="title class_">Rectangle2</span> {</span><br><span class="line"> <span class="title function_">constructor</span>(<span class="params">height</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">height</span> = height;</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">play</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'play'</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">static</span> <span class="title function_">create</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'create a cube'</span>)</span><br><span class="line"> }</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 class_">Rectangle</span>.<span class="property">name</span>);</span><br><span class="line"><span class="comment">// 输出: "Rectangle2"</span></span><br></pre></td></tr></table></figure><h3 id="3-3-类体和方法定义"><a href="#3-3-类体和方法定义" class="headerlink" title="3.3 类体和方法定义"></a>3.3 类体和方法定义</h3><p>constructor方法是必须且唯一的，用于创建和初始化一个由<code>class</code>创建的对象；其他方法可以自定义</p><p>‘static’ 关键字用来定义一个类的一个静态方法。不能继承，调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数</p><h3 id="3-4-类的继承"><a href="#3-4-类的继承" class="headerlink" title="3.4 类的继承"></a>3.4 类的继承</h3><p><code>extends</code> 关键字用于实现子类继承父类,子类使用super关键字来调用父类的属性或方法</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Animal</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="title function_">speak</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`<span class="subst">${<span class="variable language_">this</span>.name}</span> is my name.`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Dog</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Animal</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_">super</span>(name); <span class="comment">// 调用父类构造函数并传入name参数</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">speak</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">super</span>.<span class="title function_">speak</span>()</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`yes`</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="4-模块化"><a href="#4-模块化" class="headerlink" title="4. 模块化"></a>4. 模块化</h2><h3 id="4-1-模块的导入与导出"><a href="#4-1-模块的导入与导出" class="headerlink" title="4.1 模块的导入与导出"></a>4.1 模块的导入与导出</h3><p>例如：导出model.js的内容；导入到main.js中</p><p>as 可以在导出与导入的大括号内为导出导入项设置一个别名；主要用于解决命名冲突的问题</p><p>model.js</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> { name <span class="keyword">as</span> modelName, say <span class="keyword">as</span> modelSay };</span><br><span class="line"><span class="keyword">let</span> name = <span class="string">'vivy'</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">say</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`i am a singer`</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>main.js</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { name <span class="keyword">as</span> modelName, say <span class="keyword">as</span> modelSay } <span class="keyword">from</span> <span class="string">'model.js'</span></span><br><span class="line"><span class="comment">//可以使用*来整体导入</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">from</span> <span class="string">'model.js'</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> es6 </tag>
</tags>
</entry>
<entry>
<title>es6基础 03</title>
<link href="/post/20220221111112.html"/>
<url>/post/20220221111112.html</url>
<content type="html"><![CDATA[<h2 id="1-Iterator迭代器"><a href="#1-Iterator迭代器" class="headerlink" title="1. Iterator迭代器"></a>1. Iterator迭代器</h2><p>上文提到的for…of不能遍历对象的属性，原因是对象的属性是无序的，在设计对象的时候没有加入Iterator迭代器</p><p>可迭代的对象有：String、Array、TypedArray、Map 和 Set，这些对象（或者它原型链上的某个对象）必须有一个键为 iterator 的属性</p><p>迭代器是可迭代对象（或其原型链上的一个方法），可通过<code>[Symbol.iterator]()</code>来调用到它；该方法返回一个对象，返回对象的原型上有<code>next()</code>方法；通过<code>next()</code>方法来遍历最初的可迭代对象。</p><p><code>next</code>的返回值是包含<code>value</code>和<code>done</code>属性的一个对象；<code>value</code>是迭代的值，done是迭代的状态</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"><span class="keyword">let</span> step = arr[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(step);<span class="comment">//Array Iterator {}</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(step.<span class="title function_">next</span>());<span class="comment">//{value: "a", done: false}</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(step.<span class="title function_">next</span>());<span class="comment">//{value: "b", done: false}</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(step.<span class="title function_">next</span>());<span class="comment">//{value: "c", done: false}</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(step.<span class="title function_">next</span>());<span class="comment">//{value: undefined, done: true}</span></span><br></pre></td></tr></table></figure><h3 id="1-1-自定义迭代器"><a href="#1-1-自定义迭代器" class="headerlink" title="1.1 自定义迭代器"></a>1.1 自定义迭代器</h3><p>给对象添加自定义迭代器，使用for…of访问</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'zs'</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">14</span>;</span><br><span class="line"><span class="keyword">let</span> person1 = {</span><br><span class="line"> name, age,</span><br><span class="line"> [<span class="title class_">Symbol</span>.<span class="property">iterator</span>]: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> _this = <span class="title class_">Object</span>.<span class="title function_">keys</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="keyword">let</span> index = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">next</span>: <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">let</span> value = {</span><br><span class="line"> <span class="attr">key</span>: _this[index],</span><br><span class="line"> <span class="attr">value</span>: <span class="variable language_">this</span>[_this[index]]</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> done = (index >= _this.<span class="property">length</span>);</span><br><span class="line"> index++;</span><br><span class="line"> <span class="keyword">return</span> { value, done }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> v <span class="keyword">of</span> person1) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(v);</span><br><span class="line">}</span><br><span class="line"><span class="comment">//Object { key: "name", value: "zs" }</span></span><br><span class="line"><span class="comment">//Object { key: "age", value: 14 }</span></span><br></pre></td></tr></table></figure><h2 id="2-Generator生成器"><a href="#2-Generator生成器" class="headerlink" title="2. Generator生成器"></a>2. Generator生成器</h2><p>Generator生成器对象是由一个 generator function 返回的</p><p>这个函数的声明如下</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* <span class="title function_">gen</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">yield</span> <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">yield</span> <span class="number">2</span>;</span><br><span class="line"> <span class="keyword">yield</span> <span class="number">3</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> g = <span class="title function_">gen</span>();<span class="comment">//g 就是Generator生成器对象</span></span><br></pre></td></tr></table></figure><p>生成器对象和迭代器对象一样，有一个next方法，用于返回一个由<code>yield</code>表达式生成的值</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">g.<span class="title function_">next</span>(); <span class="comment">// "Object { value: 1, done: false }"</span></span><br><span class="line">g.<span class="title function_">next</span>(); <span class="comment">// "Object { value: 2, done: false }"</span></span><br><span class="line">g.<span class="title function_">next</span>(); <span class="comment">// "Object { value: 3, done: false }"</span></span><br><span class="line">g.<span class="title function_">next</span>(); <span class="comment">// "Object { value: undefined, done: true }"</span></span><br></pre></td></tr></table></figure><p>next( )方法还可以接受一个参数，它的参数会作为上一个yield的返回值</p><h3 id="2-1-yield"><a href="#2-1-yield" class="headerlink" title="2.1 yield*"></a>2.1 yield*</h3><p>如果想在一个Generator函数里调用另一个Generator函数，需要用到<code>yield*</code>关键字</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* <span class="title function_">gen2</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">yield</span> <span class="string">'start'</span></span><br><span class="line"> <span class="keyword">yield</span>* <span class="title function_">gen</span>();</span><br><span class="line"> <span class="keyword">yield</span> <span class="string">'end'</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> g2 = <span class="title function_">gen2</span>();</span><br></pre></td></tr></table></figure><h2 id="3-Set和WeakSet用法"><a href="#3-Set和WeakSet用法" class="headerlink" title="3. Set和WeakSet用法"></a>3. Set和WeakSet用法</h2><p><code>Set</code> 对象允许你存储任何类型的唯一值(除了不可迭代对象以外)，无论是原始值或者是对象引用</p><p><code>Set</code>对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的</p><h3 id="3-1-set去重"><a href="#3-1-set去重" class="headerlink" title="3.1 set去重"></a>3.1 set去重</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">4</span>]</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">removeRepeat</span>(<span class="params">arr</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr));</span><br><span class="line">}</span><br><span class="line"><span class="title function_">removeRepeat</span>(arr1);<span class="comment">//[1, 2, 4, 6]</span></span><br></pre></td></tr></table></figure><h3 id="3-2-size属性"><a href="#3-2-size属性" class="headerlink" title="3.2 size属性"></a>3.2 size属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> mySet = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s.<span class="property">size</span>);<span class="comment">//3</span></span><br></pre></td></tr></table></figure><h3 id="3-3-方法"><a href="#3-3-方法" class="headerlink" title="3.3 方法"></a>3.3 方法</h3><ul><li>add方法</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用来向一个 `Set` 对象的末尾添加一个指定的值；可以链式调用；</span></span><br><span class="line">mySet.<span class="title function_">add</span>(<span class="string">'abc'</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(mySet);<span class="comment">//Set(4) {1, 2, 3, "abc"}</span></span><br></pre></td></tr></table></figure><ul><li><p>clear方法<br> 用来清空一个 <code>Set</code> 对象中的所有元素；<code>mySet.clear();</code></p></li><li><p>delete方法<br>可以从一个 <code>Set</code> 对象中删除指定的元素；<code>mySet.delete(value);</code></p></li><li><p>has方法<br>返回一个布尔值来指示对应的值value是否存在Set对象中；<code>mySet.has(value);</code></p></li><li><p>entries、keys、values方法<br>entries：返回一个新的迭代器对象 ，这个对象的元素是类似 [value, value] 形式的数组 </p><p>由于set对象不像Map对象那样拥有 key，然而，为了与 Map 对象的 API 形式保持一致；所以set的key和value是相同的值 </p><p>keys/values：返回一个新的迭代器对象，该对象包含<code>Set</code>对象中的按插入顺序排列的所有元素的值</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> mySet = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);</span><br><span class="line">mySet.<span class="title function_">add</span>(<span class="string">'abc'</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(mySet.<span class="title function_">entries</span>());<span class="comment">//SetIterator {1 => 1, 2 => 2, 3 => 3, "abc" => "abc"}</span></span><br></pre></td></tr></table></figure></li></ul><h2 id="4-Map和WeakMap用法"><a href="#4-Map和WeakMap用法" class="headerlink" title="4. Map和WeakMap用法"></a>4. Map和WeakMap用法</h2><p>Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。</p><h3 id="4-1-size属性"><a href="#4-1-size属性" class="headerlink" title="4.1 size属性"></a>4.1 size属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map1 = <span class="keyword">new</span> <span class="title class_">Map</span>([[<span class="string">'name'</span>, <span class="string">'zs'</span>],[<span class="string">'age'</span>,<span class="number">19</span>]]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(map1.<span class="property">size</span>);</span><br></pre></td></tr></table></figure><h3 id="4-2-方法"><a href="#4-2-方法" class="headerlink" title="4.2 方法"></a>4.2 方法</h3><ol><li><p><code>map1.get(key)</code>返回键对应的值，如果不存在，则返回undefined</p></li><li><p><code>map1.set(key, value)</code>添加或更新一个指定键和值。返回该Map对象</p></li><li><p><code>map1.delete(key)</code>移除map对象中指定的元素；如果 <code>Map</code> 对象中存在该元素，则移除它并返回 <code>true</code>；否则如果该元素不存在则返回 <code>false</code></p></li><li><p><code>map1.clear()</code>移除Map对象的所有键值对；返回undifined</p></li><li><p><code>map1.has(key)</code>表示Map实例是否包含键对应的值，返回一个布尔值</p></li><li><p>entries、keys、values方法<br>entries：返回一个新的包含 <code>[key, value]</code> 对的 <code>Iterator</code> 对象，返回的迭代器的迭代顺序与 <code>Map</code> 对象的插入顺序相同 </p><p>keys：返回一个新的 <code>Iterator</code> 对象。它包含按照顺序插入 <code>Map</code> 对象中每个元素的key值 </p><p>values：返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map2 = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line">map1.<span class="title function_">set</span>(<span class="string">'0'</span>, <span class="string">'foo'</span>);</span><br><span class="line">map1.<span class="title function_">set</span>(<span class="number">1</span>, <span class="string">'bar'</span>);</span><br><span class="line"><span class="keyword">let</span> iterator1 = map1.<span class="title function_">entries</span>();</span><br><span class="line"><span class="keyword">let</span> iterator2 = map1.<span class="title function_">keys</span>();</span><br><span class="line"><span class="keyword">let</span> iterator3 = map1.<span class="title function_">values</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator1.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">// ["0", "foo"]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator1.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">// [1, "bar"]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator2.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">// "0"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator2.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">// 1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator3.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">// "foo"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator3.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">// "bar"</span></span><br></pre></td></tr></table></figure></li><li><p>map可以使用forEach遍历</p></li></ol>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> es6 </tag>
</tags>
</entry>
<entry>
<title>es6基础 02</title>
<link href="/post/20220221111106.html"/>
<url>/post/20220221111106.html</url>
<content type="html"><![CDATA[<h2 id="1-es6-Number"><a href="#1-es6-Number" class="headerlink" title="1. es6-Number"></a>1. es6-Number</h2><h3 id="1-1-Number函数"><a href="#1-1-Number函数" class="headerlink" title="1.1 Number函数"></a>1.1 Number函数</h3><ol><li><p>Number.isNaN函数<br><code>Number.isNaN('abc');</code>返回false；判断是否是NaN，除了NaN以外，都为false；没有隐式类型转换</p></li><li><p>Number.isFinite函数<br><code>Number.isFinite(Infinity);</code>返回flase；判断数值是否是有限，只有Infinity是无限的，其他数值因为17位精确度问题都有限</p></li><li><p>Number.parseInt函数<br><code>Number.parseInt("124.sd");</code>返回123； 解析字符串返回一个整数</p></li><li><p>Number.isInteger<br><code>Number.isInteger(3.00);</code>但会true；判断是否是整数</p></li></ol><h3 id="1-2-Math函数"><a href="#1-2-Math函数" class="headerlink" title="1.2 Math函数"></a>1.2 Math函数</h3><p><code>Math.trunc(3.4);</code>返回3；返回传入数值的整数，相当于向下取整</p><p><code>Math.sign(3);</code>返回1；判断数值正负；正数返回1、复数返回-1、0返回0</p><h2 id="2-es6-Object"><a href="#2-es6-Object" class="headerlink" title="2. es6-Object"></a>2. es6-Object</h2><h3 id="2-1-新写法"><a href="#2-1-新写法" class="headerlink" title="2.1 新写法"></a>2.1 新写法</h3><p>es6允许在对象字面量中直接写入变量和函数，作为对象的属性和方法。此时，属性名就是变量名，属性的值就是变量的值。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'zs'</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">12</span>;</span><br><span class="line"><span class="keyword">let</span> f = <span class="string">"foo"</span></span><br><span class="line"><span class="keyword">let</span> person = {</span><br><span class="line"> [f]:<span class="string">'yiKaLuoSi'</span>,name, age, <span class="title function_">say</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">"hi"</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">foo</span>);<span class="comment">//yiKaLuoSi</span></span><br></pre></td></tr></table></figure><h3 id="2-2-Object函数"><a href="#2-2-Object函数" class="headerlink" title="2.2 Object函数"></a>2.2 Object函数</h3><p><code>Object.is(num1, num2);</code>返回false；判断两个值是否严格相等</p><p><code>Object.assign(target,origin);</code>把源对象的属性复制到目标对象上；返回目标对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> target = { <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span> };</span><br><span class="line"><span class="keyword">let</span> source = { <span class="attr">b</span>: <span class="number">4</span>, <span class="attr">c</span>: <span class="number">5</span> };</span><br><span class="line"><span class="keyword">let</span> returnedTarget = <span class="title class_">Object</span>.<span class="title function_">assign</span>(target, source);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(target);<span class="comment">//Object { a: 1, b: 4, c: 5 }</span></span><br></pre></td></tr></table></figure><p><code>Object.getPrototypeOf(person);</code>用于获取指定对象的原型</p><p><code>Object.setPrototypeOf()</code>用于设置一个指定的对象的原型 </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> dict = <span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>({}, <span class="literal">null</span>);<span class="comment">//指定空对象的原型为空</span></span><br></pre></td></tr></table></figure><p><code>Object.entries();</code>遍历对象，返回可枚举属性（除Symbol外）的键值对数组</p><p><code>Object.keys()</code>遍历对象，返回一个给定对象的所有可枚举属性的字符串数组</p><p><code>Object.values()</code>遍历对象，返回一个包含对象自身的所有可枚举属性值的数组</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person2 = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'zs'</span>,</span><br><span class="line"> <span class="attr">age</span>: <span class="number">19</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 class_">Object</span>.<span class="title function_">entries</span>(person2));</span><br><span class="line"><span class="comment">//Array [Array ["name", "zs"], Array ["age", 19]]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(person2));</span><br><span class="line"><span class="comment">//["name", "age"]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">values</span>(person2));</span><br><span class="line"><span class="comment">//["zs", 19]</span></span><br></pre></td></tr></table></figure><h2 id="3-es6-function"><a href="#3-es6-function" class="headerlink" title="3. es6-function"></a>3. es6-function</h2><h3 id="3-1-rest参数（剩余参数）"><a href="#3-1-rest参数（剩余参数）" class="headerlink" title="3.1 rest参数（剩余参数）"></a>3.1 rest参数（剩余参数）</h3><p>如果函数的最后一个命名参数以<code>...</code>为前缀，则它将成为一个由剩余参数组成的真数组</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">a, b, ...theArgs</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(theArgs);</span><br><span class="line">}</span><br><span class="line"><span class="title function_">fun</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>);<span class="comment">//[3,4,5]</span></span><br></pre></td></tr></table></figure><h3 id="3-2-扩展运算符"><a href="#3-2-扩展运算符" class="headerlink" title="3.2 扩展运算符"></a>3.2 扩展运算符</h3><p>用于将一个数组转成一个对应的参数数列</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">x, y, z</span>) {</span><br><span class="line"> <span class="keyword">return</span> x + y + z;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum</span>(...numbers));</span><br></pre></td></tr></table></figure><h3 id="3-3-箭头函数"><a href="#3-3-箭头函数" class="headerlink" title="3.3 箭头函数"></a>3.3 箭头函数</h3><p>基础语法</p><p>(参数列表) => {返回值}</p><p>高级用法：支持剩余参数和默认参数、支持参数列表结构</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">fun</span> = (<span class="params">param1, param2</span>) => { <span class="keyword">return</span> expression; }</span><br></pre></td></tr></table></figure><h2 id="4-symbol"><a href="#4-symbol" class="headerlink" title="4. symbol"></a>4. symbol</h2><p>symbol 是一种基本数据类型 。<code>Symbol()</code>函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册</p><p>每个从<code>Symbol()</code>返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。</p><p>基础语法：<code>let sym1 = Symbol('foo');</code></p><p>symbol作为属性名不会被遍历到</p><h3 id="4-1-Symbol函数"><a href="#4-1-Symbol函数" class="headerlink" title="4.1 Symbol函数"></a>4.1 Symbol函数</h3><ol><li>Object.getOwnPropertySymbols函数</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用于获取对象的symbol属性</span></span><br><span class="line"><span class="keyword">let</span> name = <span class="title class_">Symbol</span>(<span class="string">'name'</span>);</span><br><span class="line"><span class="keyword">let</span> person = {</span><br><span class="line"> [name]: <span class="string">'zs'</span>,</span><br><span class="line"> <span class="attr">age</span>: <span class="number">12</span></span><br><span class="line">};</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(person);<span class="comment">//[Symbol(name)]</span></span><br></pre></td></tr></table></figure><ol start="2"><li>Reflect.ownKeys函数</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用于获取对象包含symbol属性的所有属性</span></span><br><span class="line"><span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(person);<span class="comment">// ["age", Symbol(name)]</span></span><br></pre></td></tr></table></figure><ol start="3"><li><p>Symbol.for(key)函数<br>使用给定的key搜索现有的symbol，如果找到则返回该symbol。否则将使用给定的key在全局symbol注册表中创建一个新的symbol </p><p>key：一个字符串，作为 symbol 注册表中与某 symbol 关联的键（同时也会作为该 symbol 的描述）</p></li><li><p>Symbol.keyFor(sym)<br>用来获取全局symbol 注册表中与某个 symbol 关联的键</p></li></ol><h2 id="5-Proxy"><a href="#5-Proxy" class="headerlink" title="5. Proxy"></a>5. Proxy</h2><p>Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）</p><p>实现</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(target, handler)</span><br></pre></td></tr></table></figure><p>target：要使用 <code>Proxy</code> 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。</p><p>handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 <code>p</code> 的行为。</p><h3 id="5-1-get、set、ownKeys、has方法"><a href="#5-1-get、set、ownKeys、has方法" class="headerlink" title="5.1 get、set、ownKeys、has方法"></a>5.1 get、set、ownKeys、has方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = { <span class="string">'name'</span>: <span class="string">'zs'</span>, <span class="string">'age'</span>: <span class="number">15</span> }</span><br><span class="line"><span class="keyword">let</span> proxy1 = <span class="keyword">new</span> <span class="title class_">Proxy</span>(person, {</span><br><span class="line"> <span class="comment">//get方法用于拦截对象的读取属性操作</span></span><br><span class="line"> <span class="comment">//target 目标对象、property 被获取的属性名、receiver Proxy或者继承Proxy的对象</span></span><br><span class="line"> <span class="attr">get</span>: <span class="keyword">function</span> (<span class="params">target, property</span>) {</span><br><span class="line"> <span class="keyword">return</span> { <span class="string">'name'</span>: <span class="string">'lks'</span>, <span class="string">'age'</span>: <span class="number">20</span> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//set方法是设置属性值操作的捕获器</span></span><br><span class="line"> <span class="comment">//target 目标对象、property 将被设置的属性名、value 新属性值</span></span><br><span class="line"> <span class="attr">set</span>: <span class="keyword">function</span> (<span class="params">target, property, value</span>) {</span><br><span class="line"> target[property] = value;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`已更名为<span class="subst">${value}</span>`</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//ownKeys用于拦截: </span></span><br><span class="line"> <span class="comment">// Object.getOwnPropertyNames()</span></span><br><span class="line"> <span class="comment">// Object.getOwnPropertySymbols()</span></span><br><span class="line"> <span class="comment">// Object.keys()</span></span><br><span class="line"> <span class="comment">// Reflect.ownKeys()</span></span><br><span class="line"> <span class="comment">//target 目标对象</span></span><br><span class="line"> <span class="attr">ownKeys</span>: <span class="keyword">function</span> (<span class="params">target</span>) {</span><br><span class="line"> <span class="keyword">return</span> [<span class="string">'name'</span>]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// has会拦截key in object的操作，结果会返回一个布尔值</span></span><br><span class="line"> <span class="comment">//target 目标对象、property 需要检查是否存在的属性</span></span><br><span class="line"> <span class="attr">has</span>: <span class="keyword">function</span> (<span class="params">target, property</span>) {</span><br><span class="line"> <span class="keyword">if</span> (target[property] === <span class="literal">undefined</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</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><br><span class="line">})</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(proxy1.<span class="property">name</span>);<span class="comment">//{name: "lks", age: 20}</span></span><br><span class="line">proxy1.<span class="property">name</span> = <span class="string">'ttk'</span>;<span class="comment">//已更名为ttk</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person.<span class="property">name</span>);<span class="comment">//ttk</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(proxy1));<span class="comment">//["name"]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(person));<span class="comment">// ["name", "age"]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'age'</span> <span class="keyword">in</span> proxy1);<span class="comment">//true</span></span><br></pre></td></tr></table></figure><h3 id="5-2-apply方法"><a href="#5-2-apply方法" class="headerlink" title="5.2 apply方法"></a>5.2 apply方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a, b</span>) {</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> proxy2 = <span class="keyword">new</span> <span class="title class_">Proxy</span>(sum, {</span><br><span class="line"> <span class="comment">// apply会拦截函数的调用</span></span><br><span class="line"> <span class="comment">// target 目标对象（函数）、thisArg 被调用时的上下文对象(必须有)、argumentsList 被调用时的参数数组 </span></span><br><span class="line"> <span class="attr">apply</span>: <span class="keyword">function</span> (<span class="params">target, thisArg, argumentsList</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">target</span>(argumentsList[<span class="number">0</span>], argumentsList[<span class="number">1</span>]) * <span class="number">10</span>;</span><br><span class="line"> }</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_">sum</span>(<span class="number">1</span>, <span class="number">2</span>));<span class="comment">// 3</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">proxy2</span>(<span class="number">1</span>, <span class="number">2</span>));<span class="comment">// 30</span></span><br></pre></td></tr></table></figure><h3 id="5-3-Proxy-revocable方法"><a href="#5-3-Proxy-revocable方法" class="headerlink" title="5.3 Proxy.revocable方法"></a>5.3 Proxy.revocable方法</h3><p><code>Proxy.revocable()</code> 方法用来创建一个可撤销的代理对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person3 = { <span class="string">'name'</span>: <span class="string">'zs'</span> }</span><br><span class="line"><span class="keyword">let</span> revocable = <span class="title class_">Proxy</span>.<span class="title function_">revocable</span>(person3, {</span><br><span class="line"> <span class="title function_">get</span>(<span class="params">target, property</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'lks'</span>;</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(revocable.<span class="property">proxy</span>.<span class="property">name</span>);<span class="comment">//lks</span></span><br><span class="line">revocable.<span class="title function_">revoke</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(revocable.<span class="property">proxy</span>.<span class="property">name</span>); <span class="comment">// 抛出 TypeError</span></span><br></pre></td></tr></table></figure><h2 id="6-for…of"><a href="#6-for…of" class="headerlink" title="6. for…of"></a>6. for…of</h2><p><code>for...of</code>语句在可迭代对象（包括Array，Map，Set，String，arguments 等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句；不能迭代Object对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> iterable = [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> value <span class="keyword">of</span> iterable) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="6-1-for总结"><a href="#6-1-for总结" class="headerlink" title="6.1 for总结"></a>6.1 for总结</h3><blockquote><p>forEach可以取得对象的内容，不能操作遍历的进程<br>for in常用于对象的遍历，对遍历数字数组取到的时字符串类型<br>for of写法简洁，除了对象都可以遍历，很先进</p></blockquote>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> es6 </tag>
</tags>
</entry>
<entry>
<title>es6基础 01</title>
<link href="/post/20220221111045.html"/>
<url>/post/20220221111045.html</url>
<content type="html"><![CDATA[<h2 id="1-新增关键字"><a href="#1-新增关键字" class="headerlink" title="1. 新增关键字"></a>1. 新增关键字</h2><h3 id="1-1-let"><a href="#1-1-let" class="headerlink" title="1.1 let"></a>1.1 let</h3><p><strong>let</strong> 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值</p><p><code>let</code>允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与<code>var</code>关键字不同的是，<code>var</code>声明的变量只能是全局或者整个函数块的</p><p>就像<code>const</code>一样，<code>let</code>不会在全局声明时（在最顶部的范围）创建<code>window</code>对象的属性</p><ol><li><p>作用域规则<br><code>let</code>声明的变量只在其声明的块或子块中可用，而<code>var</code>声明的变量的作用域是整个封闭函数。</p></li><li><p>重复声明<br>在同一个函数或块作用域中重复声明同一个变量会引起<code>SyntaxError</code>错误</p></li><li><p>暂存死区<br>通过 <code>let</code> 声明的变量直到它们的定义被执行时才初始化。在变量初始化前访问该变量会导致 <code>ReferenceError</code>，该变量处在一个自块顶部到初始化处理的“暂存死区”中。</p></li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">die</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(foo);</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'从die函数开始到下面let声明foo变量，foo变量都处在"暂存死区中"'</span>)</span><br><span class="line"> <span class="keyword">let</span> foo = <span class="number">2</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="1-2-const"><a href="#1-2-const" class="headerlink" title="1.2 const"></a>1.2 const</h3><p>常量是块级范围的，常量的值是无法（通过重新赋值）改变的，也不能被重新声明</p><p>此声明创建一个常量，其作用域可以是全局或本地声明的块。 与<code>var</code>变量不同，全局常量不会变为 window 对象的属性。所以必须在声明的同一语句中指定它的值。</p><p><code>const</code>声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。例如，在引用内容是对象的情况下，这意味着可以改变对象的内容（常量可以定义成对象和数组）。</p><p>关于<strong>暂存死区</strong>的所有说明都适用于<code>let</code>和<code>const</code>。</p><p>一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称。</p><h3 id="1-3-var、let、const的区别总结"><a href="#1-3-var、let、const的区别总结" class="headerlink" title="1.3 var、let、const的区别总结"></a>1.3 var、let、const的区别总结</h3><ol><li>let和const声明的都是块级作用域，var是全局或整个封闭函数的</li><li>let和const不可以重复声明，var可以</li><li>let和const存在暂存死区，未初始化前不能使用。var存在变量提升，可以先声明后赋值</li><li>const在声明时必须初始化</li></ol><h2 id="2-解构赋值"><a href="#2-解构赋值" class="headerlink" title="2. 解构赋值"></a>2. 解构赋值</h2><p><strong>解构赋值</strong>语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a, b, rest;</span><br><span class="line">[a, b] = [<span class="number">10</span>, <span class="number">20</span>];<span class="comment">//数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// 20</span></span><br><span class="line">({ a, b } = { <span class="attr">a</span>: <span class="number">10</span>, <span class="attr">b</span>: <span class="number">20</span> });<span class="comment">//对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// 20</span></span><br><span class="line">[a,b] = [<span class="string">"呀哈喽"</span>]<span class="comment">//字符串</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 呀</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// 哈</span></span><br></pre></td></tr></table></figure><h3 id="2-1-默认值"><a href="#2-1-默认值" class="headerlink" title="2.1 默认值"></a>2.1 默认值</h3><p>可以为任意对象预设默认值；函数的参数也可以设定默认值</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a, b;</span><br><span class="line">[a=<span class="number">5</span>, b=<span class="number">7</span>] = [<span class="number">1</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// 7</span></span><br></pre></td></tr></table></figure><h3 id="2-2-交换变量"><a href="#2-2-交换变量" class="headerlink" title="2.2 交换变量"></a>2.2 交换变量</h3><p>在一个解构表达式中可以交换两个变量的值。没有解构赋值的情况下，交换两个变量需要一个临时变量</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">3</span>;</span><br><span class="line">[a, b] = [b, a];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 3</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// 1</span></span><br></pre></td></tr></table></figure><h3 id="2-3-接收函数的返回值"><a href="#2-3-接收函数的返回值" class="headerlink" title="2.3 接收函数的返回值"></a>2.3 接收函数的返回值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> a, b;</span><br><span class="line">[a, b] = <span class="title function_">f</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// 1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure><h3 id="2-4-嵌套的解构赋值"><a href="#2-4-嵌套的解构赋值" class="headerlink" title="2.4 嵌套的解构赋值"></a>2.4 嵌套的解构赋值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a, b, c;</span><br><span class="line"> [a, [b, c]] = [<span class="number">1</span>, [<span class="number">2</span>, <span class="number">3</span>]]</span><br><span class="line"><span class="keyword">var</span> { <span class="attr">d</span>: { e } } = { <span class="string">"parent"</span>: { <span class="string">"child"</span>: <span class="number">1</span> } }</span><br></pre></td></tr></table></figure><h2 id="3-es6-String"><a href="#3-es6-String" class="headerlink" title="3. es6-String"></a>3. es6-String</h2><h3 id="3-1-模板字符串"><a href="#3-1-模板字符串" class="headerlink" title="3.1 模板字符串"></a>3.1 模板字符串</h3><p>模板字符串是允许嵌入表达式的字符串字面量</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`Two is <span class="subst">${a + b}</span> and not <span class="subst">${<span class="number">2</span> * a + b}</span>.`</span>);</span><br><span class="line"><span class="comment">//"Fifteen is 15 and not 20."</span></span><br></pre></td></tr></table></figure><h3 id="3-2-新的函数"><a href="#3-2-新的函数" class="headerlink" title="3.2 新的函数"></a>3.2 新的函数</h3><h4 id="1-repeat函数"><a href="#1-repeat函数" class="headerlink" title="1. repeat函数"></a>1. repeat函数</h4><p>返回包含指定字符串的指定数量副本的新字符串，不会改变原字符串</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> two = <span class="string">"abc"</span>.<span class="title function_">repeat</span>(<span class="number">2</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(two);<span class="comment">//abcabc</span></span><br></pre></td></tr></table></figure><h4 id="2-includes函数"><a href="#2-includes函数" class="headerlink" title="2. includes函数"></a>2. includes函数</h4><p>用来判断一个数组是否包含一个指定的值</p><p>如果在数组中找到了则返回 <code>true</code>，否则为<code>false</code>（如果传入了第二个参数 ，表示在第二个参数指定的索引后寻找） </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">two.<span class="title function_">includes</span>(<span class="string">'a'</span>, <span class="number">2</span>)<span class="comment">//true</span></span><br></pre></td></tr></table></figure><h4 id="3-startsWith函数"><a href="#3-startsWith函数" class="headerlink" title="3. startsWith函数"></a>3. startsWith函数</h4><p>用来判断当前字符串是否以另外一个给定的子字符串开头</p><p>如果在字符串的开头找到了给定的字符则返回<code>true</code>；否则返回<code>false</code>（如果传入了第二个参数 ，表示在第二个参数指定的索引后判断）</p><h4 id="4-endsWith函数"><a href="#4-endsWith函数" class="headerlink" title="4. endsWith函数"></a>4. endsWith函数</h4><p>用来判断当前字符串是否是以另外一个给定的子字符串结尾的</p><p>如果传入的子字符串在搜索字符串的末尾则返回<code>true</code>；否则将返回 <code>false</code>（如果传入了第二个参数 ，表示要判断的字符串的长度）</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">two.<span class="title function_">startsWith</span>(<span class="string">'b'</span>, <span class="number">1</span>);<span class="comment">//true</span></span><br><span class="line">two.<span class="title function_">endsWith</span>(<span class="string">'c'</span>, <span class="number">3</span>);<span class="comment">//true</span></span><br></pre></td></tr></table></figure><h4 id="5-String-raw函数"><a href="#5-String-raw函数" class="headerlink" title="5. String.raw函数"></a>5. String.raw函数</h4><p>用来获取模板字符串的原始字符串；会将字符串中特殊字符转义输出</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fok = <span class="string">"lks"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">String</span>.<span class="property">raw</span><span class="string">`name is <span class="subst">${fok}</span>`</span>);</span><br></pre></td></tr></table></figure><h4 id="6-padStart-和padEnd"><a href="#6-padStart-和padEnd" class="headerlink" title="6. padStart()和padEnd()"></a>6. padStart()和padEnd()</h4><p>字符串方法</p><p>两个参数 -（显示的位数，位数不足时在前面补充的内容）</p><p>start在前面补内容，end在后面补内容</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str= <span class="string">'12'</span>;</span><br><span class="line">str.<span class="title function_">padStart</span>(<span class="number">3</span>,<span class="number">0</span>);<span class="comment">//012</span></span><br></pre></td></tr></table></figure><h2 id="4-es6-Array"><a href="#4-es6-Array" class="headerlink" title="4. es6-Array"></a>4. es6-Array</h2><h3 id="4-1-新的函数"><a href="#4-1-新的函数" class="headerlink" title="4.1 新的函数"></a>4.1 新的函数</h3><h4 id="1-Array-of函数"><a href="#1-Array-of函数" class="headerlink" title="1. Array.of函数"></a>1. Array.of函数</h4><p>用于将一组值，转换成数组<code>Array.of(1, 2, 3, 5, 4);</code>返回数组[1,2,3,5,4]</p><h4 id="2-Array-from函数"><a href="#2-Array-from函数" class="headerlink" title="2. Array.from函数"></a>2. Array.from函数</h4><p>用于从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。</p><p>可用于：伪数组对象和可迭代对象；可以后接函数用来处理新数组</p><p><code>Array.from([1, 2, 3], x => x + x);</code>返回数组[2,4,6]</p><h4 id="3-find-findIndex函数"><a href="#3-find-findIndex函数" class="headerlink" title="3. find/findIndex函数"></a>3. find/findIndex函数</h4><p>用于找出数组中满足提供的测试函数的第一个元素的值/索引</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array1 = [<span class="number">5</span>, <span class="number">12</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>];</span><br><span class="line"><span class="keyword">let</span> foundv = array1.<span class="title function_">find</span>(<span class="function"><span class="params">element</span> =></span> element > <span class="number">10</span>);</span><br><span class="line"><span class="keyword">let</span> foundi = array1.<span class="title function_">findIndex</span>(<span class="function"><span class="params">element</span> =></span> element > <span class="number">10</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foundv);<span class="comment">//12</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(foundi);<span class="comment">//1</span></span><br></pre></td></tr></table></figure><h4 id="4-fill函数"><a href="#4-fill函数" class="headerlink" title="4. fill函数"></a>4. fill函数</h4><p>用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(array1.<span class="title function_">fill</span>(<span class="number">0</span>, <span class="number">2</span>, <span class="number">4</span>));<span class="comment">//[1,2,0,0]</span></span><br></pre></td></tr></table></figure><h4 id="5-entries-keys-values-函数"><a href="#5-entries-keys-values-函数" class="headerlink" title="5. entries / keys / values 函数"></a>5. entries / keys / values 函数</h4><p>entries：返回一个新的<code>Array</code>迭代器对象;它的原型（<code>__proto__</code>:Array Iterator）上有一个next方法，可用于遍历迭代器取得原数组的[key,value]</p><p>keys ：返回一个包含数组中每个索引键的<code>Array</code>迭代器对象</p><p>values ：返回一个包含数组中每个索引值的<code>Array</code>迭代器对象</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> array1 = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"><span class="keyword">let</span> iterator1 = array1.<span class="title function_">entries</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator1.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">//Array [0, "a"]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator1.<span class="title function_">next</span>().<span class="property">value</span>);<span class="comment">//Array [1, "b"]</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> es6 </tag>
</tags>
</entry>
<entry>
<title>css高级技巧</title>
<link href="/post/20220128114626.html"/>
<url>/post/20220128114626.html</url>
<content type="html"><![CDATA[<h1 id="css高级技巧01"><a href="#css高级技巧01" class="headerlink" title="css高级技巧01"></a>css高级技巧01</h1><h2 id="1-1-超出显示省略号"><a href="#1-1-超出显示省略号" class="headerlink" title="1.1 超出显示省略号"></a>1.1 超出显示省略号</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 强制文本同一行显示 */</span></span><br><span class="line"><span class="attribute">white-space</span>: nowrap;</span><br><span class="line"><span class="comment">/* 溢出内容隐藏 */</span></span><br><span class="line"><span class="attribute">overflow</span>: hidden;</span><br><span class="line"><span class="comment">/* 省略号 (缺一不可)*/</span></span><br><span class="line"><span class="attribute">text-overflow</span>: ellipsis;</span><br></pre></td></tr></table></figure><h2 id="1-2-三角形"><a href="#1-2-三角形" class="headerlink" title="1.2 三角形"></a>1.2 三角形</h2><p>三角形: 盒子的宽高设为0，边框填满盒子、transparent边框透明</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line"><span class="attribute">border</span>: <span class="number">100px</span> solid;</span><br><span class="line"><span class="attribute">border-color</span>: blue red green orange;</span><br><span class="line"><span class="comment">/* 将上、右、下边框设为透明，便得到一个三角形 */</span></span><br><span class="line"><span class="attribute">border-color</span>: transparent transparent transparent orange;</span><br></pre></td></tr></table></figure><h2 id="1-3-渐变边框"><a href="#1-3-渐变边框" class="headerlink" title="1.3 渐变边框"></a>1.3 渐变边框</h2><p>设置两层背景：一层显示范围控制在padding以内，一层显示范围控制在border以内</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.element</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid transparent;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">background-clip</span>: padding-box, border-box;</span><br><span class="line"> <span class="attribute">background-origin</span>: padding-box, border-box;</span><br><span class="line"> <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to right, <span class="number">#fff</span>, <span class="number">#fff</span>), <span class="built_in">linear-gradient</span>(<span class="number">90deg</span>, <span class="number">#9b5be4</span>, <span class="number">#6891e2</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="1-4-修改滚动条样式"><a href="#1-4-修改滚动条样式" class="headerlink" title="1.4 修改滚动条样式"></a>1.4 修改滚动条样式</h2><p>::-webkit-scrollbar 滚动条整体部分<br>::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）<br>::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）<br>::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。<br>::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）<br>::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处<br>::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 </p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 整个滚动条 */</span></span><br><span class="line">::-webkit-scrollbar {</span><br><span class="line"><span class="attribute">width</span>: <span class="number">3px</span>;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">3px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 滚动条有滑块的轨道部分 */</span></span><br><span class="line">::-webkit-scrollbar-track-piece {</span><br><span class="line"> <span class="attribute">background-color</span>: transparent;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 滚动条滑块(竖向:vertical 横向:horizontal) */</span></span><br><span class="line">::-webkit-scrollbar-thumb {</span><br><span class="line"> <span class="attribute">cursor</span>: pointer;</span><br><span class="line"> <span class="attribute">background-color</span>:<span class="number">#f2f2f2</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 滚动条滑块hover */</span></span><br><span class="line">::-webkit-scrollbar-thumb:hover {</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#999999</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 同时有垂直和水平滚动条时交汇的部分 */</span></span><br><span class="line">::-webkit-scrollbar-corner {</span><br><span class="line"> <span class="attribute">display</span>: block; <span class="comment">/* 修复交汇时出现的白块 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> css </tag>
</tags>
</entry>
<entry>
<title>jquery基础 02</title>
<link href="/post/20220126151057.html"/>
<url>/post/20220126151057.html</url>
<content type="html"><![CDATA[<h2 id="1-事件机制"><a href="#1-事件机制" class="headerlink" title="1. 事件机制"></a>1. 事件机制</h2><h3 id="1-1-事件注册"><a href="#1-1-事件注册" class="headerlink" title="1.1 事件注册"></a>1.1 事件注册</h3><p><code>bind()</code>方法用于向被选元素添加一个或多个事件处理程序</p><p><code>on()</code>方法只能添加一个事件（不好用）</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".box1"</span>).<span class="title function_">bind</span>({</span><br><span class="line"> <span class="title function_">mouseover</span>(<span class="params"></span>) {</span><br><span class="line"> $(<span class="variable language_">this</span>).<span class="title function_">css</span>(<span class="string">"background-color"</span>, <span class="string">"blue"</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">mouseout</span>(<span class="params"></span>) {</span><br><span class="line"> $(<span class="variable language_">this</span>).<span class="title function_">css</span>(<span class="string">"background-color"</span>, <span class="string">"black"</span>);</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line">$(<span class="string">".box1"</span>).<span class="title function_">on</span>(<span class="string">"click"</span>,<span class="keyword">function</span>(<span class="params"></span>){ <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'111'</span>); });</span><br></pre></td></tr></table></figure><h3 id="1-2-事件对象event"><a href="#1-2-事件对象event" class="headerlink" title="1.2 事件对象event"></a>1.2 事件对象event</h3><p>event对象有以下常用属性</p><ul><li>type：事件类型；which：触发该事件的鼠标按钮或键盘的键；</li><li>target：触发事件的DOM元素；</li><li>pageX/Y：事件触发时鼠标相对页面左上角的水平/垂直坐标</li><li>clientX/Y：事件触发时鼠标相对于窗口的水平，垂直坐标</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'.box2'</span>).<span class="title function_">click</span>(<span class="keyword">function</span> (<span class="params">event</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(event);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(event.<span class="property">target</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="1-3-jQuery-each-方法"><a href="#1-3-jQuery-each-方法" class="headerlink" title="1.3 jQuery.each()方法"></a>1.3 jQuery.each()方法</h3><p>用于遍历指定的对象和数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>, <span class="number">40</span>];</span><br><span class="line">$.<span class="title function_">each</span>(arr, <span class="keyword">function</span> (<span class="params">index, value</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`我是第<span class="subst">${index + <span class="number">1</span>}</span>元素,值是<span class="subst">${value}</span>`</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="2-HTML的设置与捕获"><a href="#2-HTML的设置与捕获" class="headerlink" title="2. HTML的设置与捕获"></a>2. HTML的设置与捕获</h2><h3 id="2-1-html"><a href="#2-1-html" class="headerlink" title="2.1 html()"></a>2.1 html()</h3><p>返回或设置所选元素的html内容；会解析富文本</p><p><code>$('.box').html('<b>Hello world!</b>');</code></p><p><code>$('.box').html();</code> // <code><b>Hello world!</b></code></p><h3 id="2-2-text"><a href="#2-2-text" class="headerlink" title="2.2 text()"></a>2.2 text()</h3><p>返回或设置所选元素的文本内容；</p><p><code>$('.box').text();</code> // Hello world!</p><p><code>$('.box').text('hello vivy');</code></p><h3 id="2-3-val"><a href="#2-3-val" class="headerlink" title="2.3 val()"></a>2.3 val()</h3><p>返回或设置表单字段的值</p><p><code>$('input').val();</code> // 获取value属性的值</p><p><code>$('input').val('设置的value属性的值');</code></p><blockquote><p>不常用警告：上述三个方法的都有一个可选参数：回调函数，回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值；返回值为上述三个方法想要设置的字符串；</p></blockquote><h3 id="2-4-attr-、prop"><a href="#2-4-attr-、prop" class="headerlink" title="2.4 attr()、prop()"></a>2.4 attr()、prop()</h3><ol><li>属性值为布尔类型的属性，需要使用prop();</li><li>自定义属性需要使用attr();</li><li>其他属性两个通用</li></ol><h2 id="3-HTML的页面尺寸操作"><a href="#3-HTML的页面尺寸操作" class="headerlink" title="3. HTML的页面尺寸操作"></a>3. HTML的页面尺寸操作</h2><ul><li><p><code>width()</code> 和 <code>height()</code> 方法<br>设置或返回元素的宽度/高度（不包括内边距、边框或外边距）</p></li><li><p><code>innerWidth()</code> 和 <code>innerHeight()</code> 方法<br>设置或返回元素的宽度（包括内边距）</p></li><li><p><code>outerWidth()</code> 和 <code>outerHeight()</code> 方法<br>设置或返回元素的宽度（包括内边距和边框）</p></li><li><p><code>scrollTop()</code> 和 <code>scrollLeft()</code> 方法<br>设置或返回元素被滚动条卷曲的高度</p></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#div1"</span>).<span class="title function_">width</span>(<span class="number">20</span>);</span><br><span class="line">$(<span class="string">"#div1"</span>).<span class="title function_">innerWidth</span>(<span class="number">30</span>);</span><br><span class="line">$(<span class="string">"#div1"</span>).<span class="title function_">outerWidth</span>(<span class="number">32</span>);</span><br><span class="line">$(<span class="string">"#div1"</span>).<span class="title function_">scrollTop</span>(<span class="number">0</span>);</span><br></pre></td></tr></table></figure><h2 id="4-添加-删除元素"><a href="#4-添加-删除元素" class="headerlink" title="4. 添加/删除元素"></a>4. 添加/删除元素</h2><ul><li><p><code>append()</code>和<code>prepend()</code> 方法<br><code>append()</code>：添加到被选元素子元素的结尾<br><code>prepend()</code>：添加到被选元素子元素的开头</p></li><li><p><code>after()</code>和<code>before()</code>方法<br><code>after()</code>：添加到被选元素的后面<br><code>before()</code>：添加到被选元素的前面</p></li><li><p><code>remove()</code>和<code>empty()</code>方法<br><code>remove()</code>：删除被选元素及其子元素<br><code>empty()</code>：清空被选元素，保留本身</p></li></ul><h2 id="5-插件的引用"><a href="#5-插件的引用" class="headerlink" title="5. 插件的引用"></a>5. 插件的引用</h2><p><code>jquery.color.js</code>插件，引入后能支持animate动画改变颜色(原生jQuery不支持动画中颜色的改变)</p><p><code>jquery.lazyload.js</code>插件，懒加载；引入后图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//图片路径属性要设置为data-original</span></span><br><span class="line"><img <span class="keyword">class</span>=<span class="string">"lazy"</span> data-original=<span class="string">"./image/img1.jpg"</span> alt=<span class="string">""</span>></span><br><span class="line">$(<span class="string">'img'</span>).<span class="title function_">lazyload</span>({</span><br><span class="line"> <span class="comment">// threshold: 提前开始加载高度. .</span></span><br><span class="line"> <span class="attr">threshold</span>: <span class="number">200</span>,</span><br><span class="line"> <span class="comment">//failurelimit: 一次次加载图片的张数(图片排序混乱时使用)</span></span><br><span class="line"> <span class="attr">failurelimit</span>: <span class="number">10</span>,</span><br><span class="line"> <span class="comment">// failure_ limit:同failurelimit</span></span><br><span class="line"> <span class="attr">failure_limit</span>: <span class="number">10</span>,</span><br><span class="line"> <span class="comment">// event: 设置何种事件触发时才加载，默认scroll</span></span><br><span class="line"> <span class="attr">event</span>: <span class="string">'click'</span>,</span><br><span class="line"> <span class="comment">// effect:使用何种载入效果</span></span><br><span class="line"> <span class="attr">effect</span>: <span class="string">"fadeIn"</span>,</span><br><span class="line"> <span class="comment">// container: 对某容器中的图片实现效果</span></span><br><span class="line"> <span class="attr">container</span>: $(<span class="string">"#container"</span>),</span><br><span class="line"> <span class="comment">// data_ attribute: 用于设置lazyload 操作的自定义属性(data-后面的属性名)</span></span><br><span class="line"> <span class="attr">data_attribute</span>: <span class="string">"attr"</span>,</span><br><span class="line"> <span class="comment">// skip_ invisible: 是否不加载不可见图片。 true不加载， false 加载.</span></span><br><span class="line"> <span class="attr">skip_invisible</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="comment">// appear:用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画.</span></span><br><span class="line"> <span class="attr">appear</span>: <span class="keyword">function</span> (<span class="params"></span>) { },</span><br><span class="line"> <span class="comment">// load:用于图片加载完毕之后执行的函数.</span></span><br><span class="line"> <span class="attr">load</span>: <span class="keyword">function</span> (<span class="params"></span>) { },</span><br><span class="line"> <span class="comment">// placeholder:设置占位图片路径</span></span><br><span class="line"> <span class="attr">placeholder</span>: <span class="string">"img/lazy.gif"</span>,</span><br><span class="line"> <span class="comment">// effectspeed: 设置动画持续时长，单位毫秒</span></span><br><span class="line"> <span class="attr">effectspeed</span>: <span class="number">1000</span>,</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p><code>jquery.ui.js</code>插件，引入后可以方便的使用一些用户界面交互、特效、小部件。</p><p>要配合<code>jquery-ui.min.css</code>一起食用</p><p><a href="https://www.jqueryui.org.cn/api/43.html">API文档</a></p><ul><li><a href="https://www.jqueryui.org.cn/api/43.html">特效（Effects）</a></li><li><a href="https://www.jqueryui.org.cn/api/52.html">小部件（Widgets）</a></li></ul><p><code>echarts.min.js</code>插件，引入后可以快捷绘制各种图标</p><p><a href="https://echarts.apache.org/zh/option.html#title">API文档</a></p><p><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></p>]]></content>
<categories>
<category> 代码 </category>
</categories>
<tags>
<tag> jquery </tag>
</tags>
</entry>