-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1607 lines (912 loc) · 166 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="http://linjiefe.github.io">
<title>前端.林杰</title>
<meta name="generator" content="hexo-theme-yilia-plus">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <meta name="keywords" content="">
<meta name="description" content="前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验"> -->
<meta name="description" content="前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验">
<meta property="og:type" content="website">
<meta property="og:title" content="前端.林杰">
<meta property="og:url" content="http://linjiefe.github.io/index.html">
<meta property="og:site_name" content="前端.林杰">
<meta property="og:description" content="前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="林杰">
<meta name="twitter:card" content="summary">
<link rel="alternative" href="/atom.xml" title="前端.林杰" type="application/atom+xml">
<link rel="icon" href="/linjie.jpg">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<link rel="stylesheet" type="text/css" href="/./main.a5fda8.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
<script src="/lib/clickLove.js"></script>
<script src="/lib/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet">
</head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #ff6565;"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/WechatIMG14.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">林杰</a></h1>
</hgroup>
<p class="header-subtitle">让未来的你的感谢现在的自己！</p>
<nav class="header-menu">
<ul>
<li><a href="/" target="_blank">主页</a></li>
<li><a href="/tags/%E9%9A%8F%E7%AC%94/" target="_blank">随笔</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'friends')" href="javascript:void(0)">友链</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" href="https://github.com/linjieFE"
title="GitHub" target="_blank"><i class="icon-github"></i></a>
<a class="gitee" href="https://gitee.com/FElinjie"
title="码云" target="_blank"><i class="icon-gitee"></i></a>
<a class="jianshu" href="https://www.jianshu.com/u/90519ab3caad"
title="简书" target="_blank"><i class="icon-jianshu"></i></a>
<a class="mail" href="mailto:[email protected]"
title="邮件联系" target="_blank"><i class="icon-mail"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #ff6565"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<a href="/">
<img src="/WechatIMG14.jpg" class="js-avatar">
</a>
</div>
<hgroup>
<h1 class="header-author js-header-author">林杰</h1>
</hgroup>
<p class="header-subtitle"><i class="icon icon-quo-left"></i>让未来的你的感谢现在的自己！<i class="icon icon-quo-right"></i></p>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank"
href="https://github.com/linjieFE" title="GitHub"><i class="icon-github"></i></a>
<a class="gitee" target="_blank"
href="https://gitee.com/FElinjie" title="码云"><i class="icon-gitee"></i></a>
<a class="jianshu" target="_blank"
href="https://www.jianshu.com/u/90519ab3caad" title="简书"><i class="icon-jianshu"></i></a>
<a class="mail" target="_blank"
href="mailto:[email protected]" title="邮件联系"><i class="icon-mail"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 50%">
<li style="width: 50%"><a href="/">主页</a></li>
<li style="width: 50%"><a href="/tags/%E9%9A%8F%E7%AC%94/">随笔</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1"
class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-webGL之three-js" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2024/03/27/webGL%E4%B9%8Bthree-js/" target="_blank">webGL之three.js</a>
</h1>
<a href="/2024/03/27/webGL%E4%B9%8Bthree-js/" class="archive-article-date">
<time datetime="2024-03-27T05:14:18.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2024-03-27</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="threeJs文件包下载"><a href="#threeJs文件包下载" class="headerlink" title="threeJs文件包下载"></a>threeJs文件包下载</h2><ul>
<li><p><a target="_blank" rel="noopener" href="https://github.com/mrdoob/three.js/releases">threejs官方文件包所有版本</a></p>
</li>
<li><p><a href="www.webgl3d.cn">Threejs中文网(电子书课件)</a></p>
</li>
</ul>
<h2 id="文件资源目录介绍"><a href="#文件资源目录介绍" class="headerlink" title="文件资源目录介绍"></a>文件资源目录介绍</h2><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">three.<span class="property">js</span>-文件包</span><br><span class="line">└───build——three.<span class="property">js</span>相关库，可以引入你的.<span class="property">html</span>文件中。</span><br><span class="line"> │</span><br><span class="line">└───docs——<span class="title class_">Three</span>.<span class="property">js</span> <span class="variable constant_">API</span>文档文件</span><br><span class="line"> │───index.<span class="property">html</span>——打开该文件，本地离线方式预览threejs文档</span><br><span class="line">└───examples——大量的3D案例，是你平时开发参考学习的最佳资源</span><br><span class="line"> │───jsm——threejs各种功能扩展库</span><br><span class="line">└───src——<span class="title class_">Three</span>.<span class="property">js</span>引擎的源码，有兴趣可以阅读。</span><br><span class="line"> │</span><br><span class="line">└───editor——<span class="title class_">Three</span>.<span class="property">js</span>的可视化编辑器，可以编辑3D场景</span><br><span class="line"> │───index.<span class="property">html</span>——打开应用程序</span><br></pre></td></tr></table></figure>
<h2 id="工欲善其事，必先利其器——-gt-本地静态服务器开发环境"><a href="#工欲善其事，必先利其器——-gt-本地静态服务器开发环境" class="headerlink" title="工欲善其事，必先利其器——> 本地静态服务器开发环境"></a>工欲善其事，必先利其器——> 本地静态服务器开发环境</h2><p>正式的web项目开发，往往会用webpack或vite或其它方式配置一个开发环境。如果只是学习threejs的话，没必要这么麻烦 选择一个轻量级的应用打包工具就可以，比如<a target="_blank" rel="noopener" href="https://parceljs.org/docs/">Parcel</a> 或者通过代码编辑器快速创建本地静态服务器，比如vsocde，安装<code>live-server</code>插件即可。</p>
<h3 id="vscode配置live-server插件"><a href="#vscode配置live-server插件" class="headerlink" title="vscode配置live-server插件"></a>vscode配置<code>live-server</code>插件</h3><p>不同代码编辑器创建本地静态服务器方式不同，课程就以vscode为了大家演示。</p>
<p>安装 - vscode软件界面左侧，点击扩展，输入live-server关键词查询安装。</p>
<p>使用 - 如果你想预览代码3D效果，打开对应.html文件，右键点击Open with Live Server即可。</p>
<p>我个人是选用了<code>vite</code> + <code>vue3</code> 搭建了一个本地web服务</p>
<h2 id="创建3D场景三要素场景Scene、相机Camera、渲染器Renderer三个基本概念"><a href="#创建3D场景三要素场景Scene、相机Camera、渲染器Renderer三个基本概念" class="headerlink" title="创建3D场景三要素场景Scene、相机Camera、渲染器Renderer三个基本概念"></a>创建3D场景三要素<code>场景Scene</code>、<code>相机Camera</code>、<code>渲染器Renderer</code>三个基本概念</h2><h3 id="物体形状：几何体Geometry"><a href="#物体形状：几何体Geometry" class="headerlink" title="物体形状：几何体Geometry"></a>物体形状：几何体Geometry</h3><img src="/2024/03/27/webGL%E4%B9%8Bthree-js/Geometry.png" width="600" alt="点击查看大图" title="点击查看大图">
<h3 id="物体外观：材质Material"><a href="#物体外观：材质Material" class="headerlink" title="物体外观：材质Material"></a>物体外观：材质Material</h3><img src="/2024/03/27/webGL%E4%B9%8Bthree-js/Material.png" width="600" alt="点击查看大图" title="点击查看大图">
<h3 id="相机-Camera-–-透视投影相机PerspectiveCamera"><a href="#相机-Camera-–-透视投影相机PerspectiveCamera" class="headerlink" title="相机 Camera – 透视投影相机PerspectiveCamera"></a>相机 Camera – 透视投影相机PerspectiveCamera</h3><p>透视投影相机的四个参数<code>fov</code>, <code>aspect</code>, <code>near</code>, <code>far</code>构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。</p>
<img src="/2024/03/27/webGL%E4%B9%8Bthree-js/Sense.png" width="600" alt="点击查看大图" title="点击查看大图">
<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></pre></td><td class="code"><pre><span class="line"><span class="comment">// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)</span></span><br><span class="line"><span class="keyword">const</span> width = <span class="number">800</span>; <span class="comment">//宽度</span></span><br><span class="line"><span class="keyword">const</span> height = <span class="number">500</span>; <span class="comment">//高度</span></span><br><span class="line"><span class="comment">// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面</span></span><br><span class="line"><span class="comment">// 参数介绍 - PerspectiveCamera( fov, aspect, near, far )</span></span><br><span class="line"><span class="keyword">const</span> camera = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PerspectiveCamera</span>(<span class="number">30</span>, width / height, <span class="number">1</span>, <span class="number">3000</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数</th>
<th>含义</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>fov</td>
<td>相机视锥体竖直方向视野角度</td>
<td>50</td>
</tr>
<tr>
<td>aspect</td>
<td>相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height</td>
<td>1</td>
</tr>
<tr>
<td>near</td>
<td>相机视锥体近裁截面相对相机距离</td>
<td>0.1</td>
</tr>
<tr>
<td>far</td>
<td>相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向</td>
<td>2000</td>
</tr>
</tbody>
</table>
<h3 id="光源对物体表面影响"><a href="#光源对物体表面影响" class="headerlink" title="光源对物体表面影响"></a>光源对物体表面影响</h3><p>threejs提供的网格材质，有的受光照影响，有的不受光照影响。</p>
<img src="/2024/03/27/webGL%E4%B9%8Bthree-js/light.png" width="600" alt="点击查看大图" title="点击查看大图">
<ul>
<li><p>光源简介</p>
<img src="/2024/03/27/webGL%E4%B9%8Bthree-js/lightType.png" width="600" alt="点击查看大图" title="点击查看大图">
</li>
<li><p>点光、平行光与环境光</p>
<img src="/2024/03/27/webGL%E4%B9%8Bthree-js/lightPosition.png" width="600" alt="点击查看大图" title="点击查看大图">
</li>
<li><p>相机控件OrbitControls<br>平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。<br>OrbitControls使用<br>你可以打开课件案例源码测试下效果。</p>
</li>
</ul>
<p>旋转：拖动鼠标左键<br>缩放：滚动鼠标中键<br>平移：拖动鼠标右键</p>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2024/03/27/webGL%E4%B9%8Bthree-js/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vue3-ts-admin脚手架搭建" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2024/02/18/vue3-ts-admin%E8%84%9A%E6%89%8B%E6%9E%B6%E6%90%AD%E5%BB%BA/" target="_blank">vue3-ts-admin脚手架搭建</a>
</h1>
<a href="/2024/02/18/vue3-ts-admin%E8%84%9A%E6%89%8B%E6%9E%B6%E6%90%AD%E5%BB%BA/" class="archive-article-date">
<time datetime="2024-02-18T11:36:36.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2024-02-18</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p style="color:#999">开篇先说句废话。毕竟子曾经曰过 ——人与人的相处，都是从废话开始的。<b style="text-decoration: line-through">(孔子: 我没说过!)</b></p>
<span style="color:#999">
因为有人反馈我的文章错别字特别多。我很欣慰，能收到建议说明我的东西还有人看。希望大家能保持,有什么建议尽管放心大胆的提，在我这，千万不要有什么心理压力，在乎面子不面子的，反正我也没打算真要改</span>
<p><span style="color:#999">话说这么多年，我的文理科也一直没闲着，一直在忙着相互切磋和较量。————比谁学的最差？后来发现，经过它们多年承让，两者早已经没有了最差，只有更差！所以写错几个字纯属无心，我先尽量克制自己少写吧，毕竟它也跟随了我多年，已经有感情了。所以希望大家先忍一忍，让我慢慢跟它告别。在不影响阅读、不产生歧义的前题下就当做防伪标识来看就好。比如你想分辨一篇文章是不是我原创就显得很容易，看有没有错别字就能知道。是不是比毛爷爷上面的安全线容易辨别多了？这么一想，是不是感觉就好多了？！好了不贫了，开！始！正！题！吧！</span></p>
<p>–============= 我是转入正题的分割线 ================–</p>
<ul>
<li><p>主要前端技术栈：<code>vue3</code>、<code>typesciprt</code>、<code>elementPlus</code></p>
</li>
<li><p>后端技术栈：<code>Nodejs</code>,<code>Express</code></p></li></ul>
<a class="article-more-a" href="/2024/02/18/vue3-ts-admin%E8%84%9A%E6%89%8B%E6%9E%B6%E6%90%AD%E5%BB%BA/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">typescript</a>
</li>
</ul>
</div>
<div class="article-category tagcloud">
<i class="icon-book icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="/categories/技术分享//" class="article-tag-list-link color5">技术分享</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2024/02/18/vue3-ts-admin%E8%84%9A%E6%89%8B%E6%9E%B6%E6%90%AD%E5%BB%BA/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-关于vue3" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2024/01/11/%E5%85%B3%E4%BA%8Evue3/" target="_blank">关于vue3</a>
</h1>
<a href="/2024/01/11/%E5%85%B3%E4%BA%8Evue3/" class="archive-article-date">
<time datetime="2024-01-11T10:10:50.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2024-01-11</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p><em style="color:#999"> ps:这一篇从起稿大纲至今天结稿，历经四天之久。<br>写的心焦手酸，自己也没预判到会写这么多<br>文中可能出现诸多错别字还请自行忽略、多多包涵，后续会骤步完善</em></p>
<a class="article-more-a" href="/2024/01/11/%E5%85%B3%E4%BA%8Evue3/#more">more >></a>
</div>
<div class="article-info article-info-index">
<p class="article-more-link">
<a class="article-more-a" href="/2024/01/11/%E5%85%B3%E4%BA%8Evue3/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Observer-Pattern-观察者模式-和Publisher-Subscriber-Pattern-发布者-订阅者模式" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2023/11/15/Observer-Pattern-%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F-%E5%92%8CPublisher-Subscriber-Pattern-%E5%8F%91%E5%B8%83%E8%80%85-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F/" target="_blank">Observer Pattern(观察者模式)和Publisher-Subscriber Pattern(发布者/订阅者模式)</a>
</h1>
<a href="/2023/11/15/Observer-Pattern-%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F-%E5%92%8CPublisher-Subscriber-Pattern-%E5%8F%91%E5%B8%83%E8%80%85-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F/" class="archive-article-date">
<time datetime="2023-11-15T14:33:43.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2023-11-15</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p>在许多地方都能见到基于发布/订阅模式和观察者模式设计的框架</p>
<ol>
<li>函数或插件在浏览器中使用addEventListener(type,fn)对dom元素进行事件委托。</li>
<li>事件监听用户的异步操作Android中也有一个事件发布/订阅的轻量级框架：EventBus，原理与web相似Socket.io的许多方法也是基于此类模式，监听与触发事件，批量广播等。</li>
<li>在Node中同样也有一个events事件触发器解决异步操作的同步响应</li></ol>
<a class="article-more-a" href="/2023/11/15/Observer-Pattern-%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F-%E5%92%8CPublisher-Subscriber-Pattern-%E5%8F%91%E5%B8%83%E8%80%85-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">随笔</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2023/11/15/Observer-Pattern-%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F-%E5%92%8CPublisher-Subscriber-Pattern-%E5%8F%91%E5%B8%83%E8%80%85-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-土味正则系列之二" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2023/11/14/%E5%9C%9F%E5%91%B3%E6%AD%A3%E5%88%99%E7%B3%BB%E5%88%97%E4%B9%8B%E4%BA%8C/" target="_blank">土味正则系列之——负向前瞻断言</a>
</h1>
<a href="/2023/11/14/%E5%9C%9F%E5%91%B3%E6%AD%A3%E5%88%99%E7%B3%BB%E5%88%97%E4%B9%8B%E4%BA%8C/" class="archive-article-date">
<time datetime="2023-11-14T05:16:40.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2023-11-14</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 距离上一篇《土味正则》已经过去两年半，由于近期工作正好又用到了正则，去翻笔记才发现上一篇内容正好停更在了我正需要的查阅的内容就没了下续。<br>什么叫书到用时方恨少？！很多时候，我不是败给了难，而是败给了懒。对，懒散的懒，天秤与生具来的那种。小时候的夙愿就是长大最好自己什么都不用做，动动我发财的小手指就能把钱赚了。so far 码农让我“美梦成真”了……痛定思痛、开始亡羊补牢吧</p>
<a class="article-more-a" href="/2023/11/14/%E5%9C%9F%E5%91%B3%E6%AD%A3%E5%88%99%E7%B3%BB%E5%88%97%E4%B9%8B%E4%BA%8C/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">学习笔记</a>
</li>
</ul>
</div>
<div class="article-category tagcloud">
<i class="icon-book icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="/categories/学习笔记//" class="article-tag-list-link color5">学习笔记</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2023/11/14/%E5%9C%9F%E5%91%B3%E6%AD%A3%E5%88%99%E7%B3%BB%E5%88%97%E4%B9%8B%E4%BA%8C/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-MQTT" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2023/04/12/MQTT/" target="_blank">MQTT 从0-1</a>
</h1>
<a href="/2023/04/12/MQTT/" class="archive-article-date">
<time datetime="2023-04-12T11:12:22.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2023-04-12</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p>最近在做机器人联网方向的工作。于是利用下班时间把之前 搭建的 MQTT demo 重新温习一遍。也借此把自己的技术极客再丰富一下。</p>
<p><code>MQTT</code>应该是当今世界上最受欢迎的物联网协议了，没有之一。<br>MQTT主要应用在<code>车联网，智能家居、即时聊天应用和工业互联网</code>等领域。<br>目前MQTT连接的设备已经过亿，这些都得益于MQTT为设备提供了<code>稳定、可靠、易用</code>的通信基础。<br>MQTT跟HTTP类似，但由于轻量简单的传输效率可能是后者的10倍，所以也逐渐成为了物联网领域的最佳选择。<br>*** 其实你们可能用过MQTT，比如：你用手机解锁一辆共享单车的时候…… ***</p>
<p>今天我依然会要用尽可能简单易懂的文字来写这篇笔记。尽量做到入门小白也能看懂的程度。<br>也是 防止自己淡忘，容易重新激起记忆联想。</p>
<a class="article-more-a" href="/2023/04/12/MQTT/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">技术分享</a>
</li>
</ul>
</div>
<div class="article-category tagcloud">
<i class="icon-book icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="/categories/技术分享//" class="article-tag-list-link color5">技术分享</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2023/04/12/MQTT/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-关于正则" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2021/07/16/%E5%85%B3%E4%BA%8E%E6%AD%A3%E5%88%99/" target="_blank">土味正则</a>
</h1>
<a href="/2021/07/16/%E5%85%B3%E4%BA%8E%E6%AD%A3%E5%88%99/" class="archive-article-date">
<time datetime="2021-07-16T05:12:22.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2021-07-16</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p>距离上次更新已有5年之久，本着生命不息，学习不止的态度，<br>今天趁着大家顶着7月的烈日炎炎出去团建，而我在公司吹着免费空调、喝着老板请的星爸爸、摸着鱼…<br>打开沉封已久的博客，随便更新点东西<br>今天不讲新技术，不说新轮子。随便扒一扒百家通用的基础 <code>正则</code><br>学习任何技术最好的线上教科书莫过于<a target="_blank" rel="noopener" href="https://doc.houdunren.com/php/5%20%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.html#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F">官方文档</a>，这里附上链接，大家自行翻阅</p>
<a class="article-more-a" href="/2021/07/16/%E5%85%B3%E4%BA%8E%E6%AD%A3%E5%88%99/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">学习笔记</a>
</li>
</ul>
</div>
<div class="article-category tagcloud">
<i class="icon-book icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="/categories/学习笔记//" class="article-tag-list-link color5">学习笔记</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2021/07/16/%E5%85%B3%E4%BA%8E%E6%AD%A3%E5%88%99/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-react-环境搭建" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/10/20/react-%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" target="_blank">react 环境搭建</a>
</h1>
<a href="/2016/10/20/react-%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="archive-article-date">
<time datetime="2016-10-20T10:12:15.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-10-20</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="1、node安装"><a href="#1、node安装" class="headerlink" title="1、node安装"></a>1、node安装</h2><p>首先，需要node环境支持，如果你还没有安装node.js，请移步<a target="_blank" rel="noopener" href="https://nodejs.org/en/">nodejs官网</a>。</p>
<h2 id="2、初始化项目"><a href="#2、初始化项目" class="headerlink" title="2、初始化项目"></a>2、初始化项目</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
<p>回车即可 到最后，你的项目根目录会多一个package.json的文件。</p>
<a class="article-more-a" href="/2016/10/20/react-%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">react</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2016/10/20/react-%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/">展开全文 >></a>
</p>