-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1214 lines (838 loc) · 67.8 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 lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 3.9.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<script id="hexo-configurations">
var NexT = window.NexT || {};
var CONFIG = {"hostname":"tgshell.com","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"always","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
</script>
<meta property="og:type" content="website">
<meta property="og:title" content="WebPoints">
<meta property="og:url" content="https://tgshell.com/index.html">
<meta property="og:site_name" content="WebPoints">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="WebPoints">
<link rel="canonical" href="https://tgshell.com/">
<script id="page-configurations">
// https://hexo.io/docs/variables.html
CONFIG.page = {
sidebar: "",
isHome : true,
isPost : false,
lang : 'zh-CN'
};
</script>
<title>WebPoints</title>
<noscript>
<style>
.use-motion .brand,
.use-motion .menu-item,
.sidebar-inner,
.use-motion .post-block,
.use-motion .pagination,
.use-motion .comments,
.use-motion .post-header,
.use-motion .post-body,
.use-motion .collection-header { opacity: initial; }
.use-motion .site-title,
.use-motion .site-subtitle {
opacity: initial;
top: initial;
}
.use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; }
</style>
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="container use-motion">
<div class="headband"></div>
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切换导航栏">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<h1 class="site-title">WebPoints</h1>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger">
</div>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="main-menu menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
<main class="main">
<div class="main-inner">
<div class="content-wrap">
<div class="content index posts-expand">
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2021/02/03/FE/eslint/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/02/03/FE/eslint/" class="post-title-link" itemprop="url">eslint 的玩法</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2021-02-03 10:00:00" itemprop="dateCreated datePublished" datetime="2021-02-03T10:00:00+08:00">2021-02-03</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2021-03-02 16:55:45" itemprop="dateModified" datetime="2021-03-02T16:55:45+08:00">2021-03-02</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/fe/" itemprop="url" rel="index"><span itemprop="name">fe</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>eslint 想必大家都非常熟悉了，即代码规范检查，<code>Find and fix problems in your JavaScript code</code>，具有非常多的配置项，且支持自定义规则，是研发的好帮手。<br>东西确实是好东西，但配置太多同样又会很头疼，所以有些企业，或者框架的作者，或者爱折腾的开发又开源出来了很多规则包，让使用者拿去直接就行了，省去了折腾规则的过程。<br>然后就又出现了新问题，规则包太多了啊！该用哪个包？为什么要用这个包？所以多数情况下是靠搜索或者在某个包中摘抄了 eslint 配置，简化了头疼的过程。<br>痛定思痛，所幸花时间挖了一次 eslint 的基本玩法。</p>
<p>先来看一份示例的 eslint 配置文件：</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></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> extends: [</span><br><span class="line"> <span class="string">'airbnb-base'</span>,</span><br><span class="line"> <span class="string">'plugin:@typescript-eslint/recommended'</span>,</span><br><span class="line"> ],</span><br><span class="line"> plugins: [<span class="string">'@typescript-eslint'</span>],</span><br><span class="line"> parserOptions: {</span><br><span class="line"> parser: <span class="string">'@typescript-eslint/parser'</span>, <span class="comment">// 指定 eslint-plugin-vue parser</span></span><br><span class="line"> ecmaVersion: <span class="number">2018</span>,</span><br><span class="line"> sourceType: <span class="string">'module'</span>,</span><br><span class="line"> extraFileExtensions: [<span class="string">'.vue'</span>],</span><br><span class="line"> ecmaFeatures: {</span><br><span class="line"> jsx: <span class="literal">true</span>, <span class="comment">// 支持 tsx</span></span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> env: {</span><br><span class="line"> browser: <span class="literal">true</span>,</span><br><span class="line"> es6: <span class="literal">true</span>,</span><br><span class="line"> node: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line"> globals: {</span><br><span class="line"> <span class="built_in">window</span>: <span class="literal">true</span>,</span><br><span class="line"> history: <span class="literal">true</span>,</span><br><span class="line"> <span class="built_in">Promise</span>: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line"> rules: {</span><br><span class="line"> indent: [<span class="string">'error'</span>, <span class="number">2</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>extends</code>、<code>plugins</code>、<code>parserOptions</code>…<code>rules</code> 等等很多配置属性，配置属性又有对应的配置项，今天就来彻底搞懂这些配置的玩法及作用。</p>
<h2 id="配置项"><a href="#配置项" class="headerlink" title="配置项"></a>配置项</h2><h3 id="extends"><a href="#extends" class="headerlink" title="extends"></a>extends</h3><p>用来继承其他的规则包，如 <code>airbnb-base</code> = 继承了 <code>eslint-config-airbnb-base</code> 规则包的配置。<br>有两种写法：<br><figure class="highlight plain"><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">extends: 'airbnb-base' // 只继承单个规则包</span><br><span class="line">extends: ['airbnb-base', 'eslint:recommended'] // 继承多个规则包，需要注意顺序，后面的规则包会合并/覆盖前面规则包的同属性配置。</span><br></pre></td></tr></table></figure></p>
<h3 id="plugins"><a href="#plugins" class="headerlink" title="plugins"></a>plugins</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></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> rules: {</span><br><span class="line"> <span class="string">'dollar-sign'</span>: {</span><br><span class="line"> create: <span class="function"><span class="keyword">function</span> (<span class="params">context</span>) </span>{</span><br><span class="line"> <span class="comment">// rule implementation ...</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>这样就导出了一个名为 <code>dollar-sign</code> 的 <code>rule</code>。</p>
<p>详情可参见 <a href="https://eslint.cn/docs/developer-guide/working-with-plugins" target="_blank" rel="noopener">working-with-plugins</a></p>
<h3 id="parserOptions"><a href="#parserOptions" class="headerlink" title="parserOptions"></a>parserOptions</h3><p>要支持的 JavaScript 语言选项配置。</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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> parserOptions: {</span><br><span class="line"> ecmaVersion: <span class="number">6</span>, <span class="comment">// ECMAScript 版本</span></span><br><span class="line"> sourceType: <span class="string">'module'</span>, <span class="comment">// ECMAScript 模块</span></span><br><span class="line"> ecmaFeatures: { <span class="comment">// 设置额外的语言特性</span></span><br><span class="line"> jsx: <span class="literal">true</span>, <span class="comment">// 启用 jsx</span></span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="env"><a href="#env" class="headerlink" title="env"></a>env</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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> env: {</span><br><span class="line"> browser: <span class="literal">true</span>,</span><br><span class="line"> node: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="globals"><a href="#globals" class="headerlink" title="globals"></a>globals</h3><p>定义全局变量，避免撞上 <code>no-undef</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><br><span class="line"> globals: {</span><br><span class="line"> <span class="built_in">Promise</span>: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="rules"><a href="#rules" class="headerlink" title="rules"></a>rules</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><br><span class="line"> rules: {</span><br><span class="line"> <span class="string">'arrow-parens'</span>: [<span class="string">'error'</span>, <span class="string">'as-needed'</span>], <span class="comment">// 箭头函数单个参数无括号</span></span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="如何收敛团队-eslint-规则？"><a href="#如何收敛团队-eslint-规则？" class="headerlink" title="如何收敛团队 eslint 规则？"></a>如何收敛团队 eslint 规则？</h2><h3 id="第一步，给-eslint-包起个名"><a href="#第一步，给-eslint-包起个名" class="headerlink" title="第一步，给 eslint 包起个名"></a>第一步，给 eslint 包起个名</h3><figure class="highlight plain"><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">eslint-config-xxx</span><br><span class="line">eslint-plugin-xxx</span><br></pre></td></tr></table></figure>
<p>使用方可在 extends/plugins 中直接简写为：</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><br><span class="line"> extends: [<span class="string">'xxx'</span>],</span><br><span class="line"> plugins: [<span class="string">'yyy'</span>],</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>详见：<a href="https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files" target="_blank" rel="noopener">Extending Configuration Files</a></p>
<h3 id="第二步，填充基础-公共配置项，如最上面的示例配置"><a href="#第二步，填充基础-公共配置项，如最上面的示例配置" class="headerlink" title="第二步，填充基础/公共配置项，如最上面的示例配置"></a>第二步，填充基础/公共配置项，如最上面的示例配置</h3><h3 id="最后，发布为-npm-包"><a href="#最后，发布为-npm-包" class="headerlink" title="最后，发布为 npm 包"></a>最后，发布为 npm 包</h3>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2020/12/28/FE/vue原理/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/12/28/FE/vue原理/" class="post-title-link" itemprop="url">Vue原理</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2020-12-28 10:10:00 / 修改时间：19:25:21" itemprop="dateCreated datePublished" datetime="2020-12-28T10:10:00+08:00">2020-12-28</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/fe/" itemprop="url" rel="index"><span itemprop="name">fe</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><h3 id="对-Array-的特殊处理"><a href="#对-Array-的特殊处理" class="headerlink" title="对 Array 的特殊处理"></a>对 Array 的特殊处理</h3><p>表现：改变数组的索引，不会触发视图更新，可使用 <code>Vue.set(vm.items, indexOfItem, newValue);</code> 达到触发视图更新的效果</p>
<p>原因：Vue 没有使用 <code>Object.defineProperty</code> 去监听数组索引的变化，因为作者认为性能消耗太大，于是在性能和用户体验之间做了取舍</p>
<p>实现：拦截数组的原型中7个能够改变数组自身的几个方法，重写的方法中会手动触发通知该数组的所有依赖进行更新</p>
<h3 id="Dep"><a href="#Dep" class="headerlink" title="Dep"></a>Dep</h3><p>订阅管理</p>
<h3 id="Observer"><a href="#Observer" class="headerlink" title="Observer"></a>Observer</h3><ol>
<li>遍历 data 下的每一个属性，若是对象，则执行 new Observer(), 在对象上新增 <strong>ob</strong> 属性,该属性的值为 Observer 的实例</li>
<li>劫持对象属性的变化，在 getter 的时候，拿到 Observer 实例的dep实例，执行 dep.depend()</li>
</ol>
<h3 id="Watcher"><a href="#Watcher" class="headerlink" title="Watcher"></a>Watcher</h3><p>实例化 Watcher 时,会执行 Dep.target = this，然后执行 this.vm[exp], 也就是取一次值，那么会触发 getter,将自身（Watcher实例）添加到 dep 的订阅者数组内</p>
<h3 id="compile"><a href="#compile" class="headerlink" title="compile"></a>compile</h3><p>模板解析是 Vue 模板编译的第一步，即通过模板得到 AST（抽象语法树 abstract syntax tree）</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2020/12/25/FE/原型链/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/12/25/FE/原型链/" class="post-title-link" itemprop="url">原型链</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2020-12-25 11:16:00" itemprop="dateCreated datePublished" datetime="2020-12-25T11:16:00+08:00">2020-12-25</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2021-02-20 17:06:34" itemprop="dateModified" datetime="2021-02-20T17:06:34+08:00">2021-02-20</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/fe/" itemprop="url" rel="index"><span itemprop="name">fe</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<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="built_in">Function</span>.prototype.a = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">Object</span>.prototype.b = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{}</span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> A();</span><br><span class="line">a.a();</span><br><span class="line">a.b();</span><br><span class="line">A.a()</span><br></pre></td></tr></table></figure>
<p align="left"><br> <img src="https://s3.ax1x.com/2021/02/20/y5jfPK.png" width="400"><br></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2020/12/23/FE/http/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/12/23/FE/http/" class="post-title-link" itemprop="url">http</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2020-12-23 10:20:00" itemprop="dateCreated datePublished" datetime="2020-12-23T10:20:00+08:00">2020-12-23</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2021-02-20 16:20:35" itemprop="dateModified" datetime="2021-02-20T16:20:35+08:00">2021-02-20</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/fe/" itemprop="url" rel="index"><span itemprop="name">fe</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="http"><a href="#http" class="headerlink" title="http"></a>http</h2><h3 id="http1-0、http1-1、http2-0、http3-0"><a href="#http1-0、http1-1、http2-0、http3-0" class="headerlink" title="http1.0、http1.1、http2.0、http3.0"></a>http1.0、http1.1、http2.0、http3.0</h3><h4 id="http1-0"><a href="#http1-0" class="headerlink" title="http1.0"></a>http1.0</h4><p>浏览器的每次请求都需要与服务器建立一个 TCP 连接，下一个请求必须在前一个请求响应到达之前才能发送</p>
<p>无状态：服务器不跟踪每个客户端也不记录过去的请求<br>无连接：服务器处理完成后立即断开 TCP 连接，无法复用连接</p>
<h4 id="http1-1"><a href="#http1-1" class="headerlink" title="http1.1"></a>http1.1</h4><ul>
<li>浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞，所以一些站点的资源会使用多个 CDN 域名来突破数量限制</li>
<li>并发依赖于多个 TCP 连接</li>
</ul>
<p>特性：</p>
<p>长连接：HTTP1.1 增加了一个 Connection 字段，通过设置 Keep-Alive 可以保持 HTTP 连接不断开，避免了每次客户端与服务器请求都要重复建立释放建立 TCP 连接，提高了网络的利用率。如果客户端想关闭 HTTP 连接，可以在请求头中携带 Connection: false 来告知服务器关闭请求</p>
<p>缓存处理：在 HTTP1.0 中主要使用 header 里的 If-Modified-Since, Expires 来做为缓存判断的标准，HTTP1.1 则引入了更多的缓存控制策略例如 Entity tag，If-Unmodified-Since, If-Match, If-None-Match 等更多可供选择的缓存头来控制缓存策略。</p>
<p>带宽优化及网络连接的使用：HTTP1.0 中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1 则在请求头引入了 range 头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。<br>错误通知的管理，在 HTTP1.1 中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。</p>
<p>Host 头处理：在 HTTP1.0 中认为每台服务器都绑定一个唯一的 IP 地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1 的请求消息和响应消息都应支持 Host 头域，且请求消息中如果没有 Host 头域会报告一个错误（400 Bad Request）。</p>
<h4 id="http2-0"><a href="#http2-0" class="headerlink" title="http2.0"></a>http2.0</h4><p>二进制分帧：通过在应用层和传输层之间增加一个二进制分帧层，将所有传输的信息进行二进制格式的编码，分割为更小的消息和帧</p>
<p>多路复用：基于二进制分帧，在<strong>同一域名</strong>下所有访问都是从同一个 tcp 连接中走，真正的并行传输，在一个 TCP 上进行任意数量双向数据流</p>
<ul>
<li>流（stream）：已建立连接上的双向字节流</li>
<li>消息：与逻辑消息对应的完整的一系列数据帧</li>
<li>帧（frame）：HTTP2.0 通信的最小单位，每个帧包含帧头部，至少也会标识出当前帧所属的流（stream id）<br>每个请求是一个数据流，数据流以消息的方式发送，而消息又分为多个帧，帧头部记录着 stream id 用来标识所属的数据流，不同属的帧可以在连接中随机混杂在一起。接收方可以根据 stream id 将帧再归属到各自不同的请求当中去</li>
</ul>
<p>头部压缩：减少需要传输的 header 大小，通讯双方各自 cache 一份 header fields 表，避免重复的 header 传输，减少传输内容大小</p>
<p>服务器推送：服务器可以主动向客户端推送资源</p>
<h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><ul>
<li>http1.0 到http1.1的主要区别，就是从无连接到长连接</li>
<li>http2.0对比1.X版本主要区别就是多路复用</li>
</ul>
<h4 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h4><p><a href="https://segmentfault.com/a/1190000013028798" target="_blank" rel="noopener">HTTP1.0 HTTP1.1 HTTP2.0 主要特性对比</a></p>
<h3 id="http-缓存"><a href="#http-缓存" class="headerlink" title="http 缓存"></a>http 缓存</h3><p><a href="https://www.cnblogs.com/chenqf/p/6386163.html" target="_blank" rel="noopener">彻底弄懂HTTP缓存机制及原理</a></p>
<h2 id="websocket"><a href="#websocket" class="headerlink" title="websocket"></a>websocket</h2><h2 id="http、websocket-适用场景"><a href="#http、websocket-适用场景" class="headerlink" title="http、websocket 适用场景"></a>http、websocket 适用场景</h2><p>相比较 WebSocket 和 HTTP，可以说 HTTP 请求比 WebSocket 更简单，但是也有局限性。在不同的使用场景可以选择更合适的协议。目前互联网上大多数网站都是直接加载网页，除了单击加载新页面之外，交互工作都很少。在这种场景下没有必要保持长连接，使用 WebSocket 会显得过于“笨重”。一般的网页都会使用静态资源，例如 Image 图片，Javascript 或 CSS 文件等。为了加载更快，这些静态资源都需要进行缓存，而且它们可能并不来自同一个域名，这时当然使用 HTTP 更为轻便快捷。HTTP 协议的每个请求都需要发送一次请求头，而 WebSocket 仅在初始请求建立连接中携带头信息（当然了，传递消息中也会有一些开销，但都是比较小的）。因此，如果想持续发送多个消息，使用 Websocket 会更节省资源。如果要开发一个客户端和服务器持续交互的程序，那么 WebSockets 将是最佳选择。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2020/11/09/FE/前端工程化/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/11/09/FE/前端工程化/" class="post-title-link" itemprop="url">前端工程化</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2020-11-09 09:49:30" itemprop="dateCreated datePublished" datetime="2020-11-09T09:49:30+08:00">2020-11-09</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2021-01-12 11:25:56" itemprop="dateModified" datetime="2021-01-12T11:25:56+08:00">2021-01-12</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="名词"><a href="#名词" class="headerlink" title="名词"></a>名词</h2><h3 id="cli"><a href="#cli" class="headerlink" title="cli"></a>cli</h3><p>全称：command-line interface</p>
<h2 id="应用工程化"><a href="#应用工程化" class="headerlink" title="应用工程化"></a>应用工程化</h2><h2 id="Npm-Packages-工程化"><a href="#Npm-Packages-工程化" class="headerlink" title="Npm Packages 工程化"></a>Npm Packages 工程化</h2><h2 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h2><h3 id="hybrid-离线、减少-http-请求、压缩合并-js-以及-css、图片懒加载的技术、防止回流和重绘、css-放头部、js-放底部"><a href="#hybrid-离线、减少-http-请求、压缩合并-js-以及-css、图片懒加载的技术、防止回流和重绘、css-放头部、js-放底部" class="headerlink" title="hybrid 离线、减少 http 请求、压缩合并 js 以及 css、图片懒加载的技术、防止回流和重绘、css 放头部、js 放底部"></a>hybrid 离线、减少 http 请求、压缩合并 js 以及 css、图片懒加载的技术、防止回流和重绘、css 放头部、js 放底部</h3><h2 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h2><h3 id="常用配置（属性、插件）及优化"><a href="#常用配置（属性、插件）及优化" class="headerlink" title="常用配置（属性、插件）及优化"></a>常用配置（属性、插件）及优化</h3><h2 id="git-commit-format"><a href="#git-commit-format" class="headerlink" title="git commit format"></a>git commit format</h2><h2 id="jenkins"><a href="#jenkins" class="headerlink" title="jenkins"></a>jenkins</h2><h2 id="elk、kafka"><a href="#elk、kafka" class="headerlink" title="elk、kafka"></a>elk、kafka</h2><h2 id="low-code-vs-no-code"><a href="#low-code-vs-no-code" class="headerlink" title="low code vs no code"></a>low code vs no code</h2><p>no code: 是一个无需任何编码的现成的工具，就是完全没有编程的入口；<br>low code: 是一个需要部分编码的工具，为了是给一些非专业人士但又有编程需要的人员使用，强调开发出来给别人用，常见的比如给运营人员用的h5编辑器</p>
<h2 id="serverless"><a href="#serverless" class="headerlink" title="serverless"></a>serverless</h2><h2 id="WebAssembly-wasm"><a href="#WebAssembly-wasm" class="headerlink" title="WebAssembly(wasm)"></a>WebAssembly(wasm)</h2>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2020/11/09/FE/fe-points/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/11/09/FE/fe-points/" class="post-title-link" itemprop="url">fe-points</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2020-11-09 09:27:26" itemprop="dateCreated datePublished" datetime="2020-11-09T09:27:26+08:00">2020-11-09</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2020-12-25 14:00:35" itemprop="dateModified" datetime="2020-12-25T14:00:35+08:00">2020-12-25</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/fe/" itemprop="url" rel="index"><span itemprop="name">fe</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><h2 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h2><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><h4 id="mvvm"><a href="#mvvm" class="headerlink" title="mvvm"></a>mvvm</h4><p>MVVM 模式，即 Model-View-ViewModel 模式，本质上是 MVC 的改进版。最早的 MVVM 框架：knockout。</p>
<p><strong>重点：双向绑定(data-binding)</strong></p>
<p><strong>React(单向数据流) 和 Vue(VM) 都不是纯正的 MVVM。但是完整的项目中，React、Vue 可以理解为 MVVM 模型</strong></p>
<p>简述：</p>
<ul>
<li>Model: 域模型，用于持久化</li>
<li>View: 作为视图模板存在</li>
<li>ViewModel: 作为视图的模型，为视图服务</li>
</ul>
<p>详细说明：</p>
<ul>
<li>Model 层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。</li>
<li>View 层，作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明。</li>
<li>ViewModel 层把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。</li>
</ul>
<p>一句话总结 Web 前端 MVVM：操作数据，就是操作视图，就是操作 DOM（所以无须操作 DOM ）。</p>
<p>开发者在 View 层的视图模板中声明数据绑定、事件绑定 后，在 ViewModel 中进行业务逻辑的数据处理。事件触发后，ViewModel 中数据变更， View 层自动更新。因为 MVVM 框架的引入，开发者只需关注业务逻辑、完成数据抽象、聚焦数据，MVVM 的视图引擎会帮你搞定 View。因为数据驱动，一切变得更加简单。</p>
<h4 id="module-exports-vs-export"><a href="#module-exports-vs-export" class="headerlink" title="module.exports vs export"></a>module.exports vs export</h4><table>
<thead>
<tr>
<th></th>
<th>node.js</th>
<th>es6</th>
</tr>
</thead>
<tbody>
<tr>
<td>使用方法</td>
<td>module.exports</td>
<td>export</td>
</tr>
<tr>
<td>加载机制</td>
<td>同步运行时</td>
<td>异步、编译时</td>
</tr>
<tr>
<td>适用场景</td>
<td>服务端</td>
<td>浏览器、服务端</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th></th>
<th>AMD</th>
<th>CMD</th>
<th>UMD</th>
</tr>
</thead>
<tbody>
<tr>
<td>全称</td>
<td>Asynchronous Module Definition</td>
<td>Common Module Definition</td>
<td>Universal Module Definition</td>
</tr>
<tr>
<td>代表</td>
<td>RequireJS</td>
<td>SeaJS</td>
<td></td>
</tr>
<tr>
<td>加载机制</td>
<td>异步、前置</td>
<td>异步、就近</td>
<td>集合 AMD & CMD</td>
</tr>
<tr>
<td>适用场景</td>
<td>浏览器</td>
<td>浏览器</td>
<td>浏览器、服务端</td>
</tr>
</tbody>
</table>
<p>参考：</p>
<ul>
<li><a href="https://juejin.im/post/6844903955282165773" target="_blank" rel="noopener">还傻傻分不清 module.exports 和 export default 吗？</a></li>
</ul>
<h4 id="event-loop"><a href="#event-loop" class="headerlink" title="event loop"></a>event loop</h4><h4 id="promise-原理"><a href="#promise-原理" class="headerlink" title="promise 原理"></a>promise 原理</h4><p><a href="https://segmentfault.com/a/1190000006103601" target="_blank" rel="noopener">es6 promise源码实现</a></p>
<p>三种状态：</p>
<ul>
<li>pending</li>
<li>fulfilled</li>
<li>reject</li>
</ul>
<h4 id="call-apply-bind-的区别"><a href="#call-apply-bind-的区别" class="headerlink" title="call apply bind 的区别"></a>call apply bind 的区别</h4><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">call(<span class="keyword">this</span>, p1, p2, p3);</span><br><span class="line">apply(<span class="keyword">this</span>, [p1, p2, p3]);</span><br><span class="line"><span class="keyword">const</span> fn = bind(<span class="keyword">this</span>, p1, p2, p3);</span><br><span class="line">fn();</span><br></pre></td></tr></table></figure>
<h3 id="技能"><a href="#技能" class="headerlink" title="技能"></a>技能</h3><h4 id="地理位置"><a href="#地理位置" class="headerlink" title="地理位置"></a>地理位置</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">navigator.geolocation.getCurrentPosition(callback)</span><br></pre></td></tr></table></figure>
<h3 id="算法、技巧"><a href="#算法、技巧" class="headerlink" title="算法、技巧"></a>算法、技巧</h3><h4 id="array-去重"><a href="#array-去重" class="headerlink" title="array 去重"></a>array 去重</h4><h2 id="css"><a href="#css" class="headerlink" title="css"></a>css</h2><h2 id="node-js"><a href="#node-js" class="headerlink" title="node.js"></a>node.js</h2><h3 id="generator-实现原理"><a href="#generator-实现原理" class="headerlink" title="generator 实现原理"></a>generator 实现原理</h3><p><a href="https://blog.csdn.net/juse__we/article/details/88912300" target="_blank" rel="noopener">generator（生成器）原理、使用及常见问题集锦</a></p>
<h3 id="koa"><a href="#koa" class="headerlink" title="koa"></a>koa</h3><h3 id="egg-js"><a href="#egg-js" class="headerlink" title="egg.js"></a>egg.js</h3><p><a href="https://zhuanlan.zhihu.com/p/29102746?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io" target="_blank" rel="noopener">结合源码解密 egg 运行原理</a></p>
<h2 id="框架"><a href="#框架" class="headerlink" title="框架"></a>框架</h2><h2 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h2><h3 id="原理、生命周期、vuex"><a href="#原理、生命周期、vuex" class="headerlink" title="原理、生命周期、vuex"></a>原理、生命周期、vuex</h3><h3 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h3><ul>
<li>数据劫持：Object.defineProperty</li>
<li>发布者-订阅者模式：属性发生变化，通知订阅者 Watcher 检测否需要更新</li>
</ul>
<p>监听器 Observer：对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者</p>
<p>订阅者 Watcher：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数</p>
<p>解析器 Compile：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图</p>
<h3 id="watch-原理"><a href="#watch-原理" class="headerlink" title="watch 原理"></a>watch 原理</h3><h3 id="Array-的处理"><a href="#Array-的处理" class="headerlink" title="Array 的处理"></a>Array 的处理</h3><h2 id="react"><a href="#react" class="headerlink" title="react"></a>react</h2><h3 id="原理、生命周期、redux"><a href="#原理、生命周期、redux" class="headerlink" title="原理、生命周期、redux"></a>原理、生命周期、redux</h3>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2020/07/22/Mac/mhdisk-lost/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/07/22/Mac/mhdisk-lost/" class="post-title-link" itemprop="url">解决 Mac 移动硬盘无法挂载的问题</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2020-07-22 21:00:00" itemprop="dateCreated datePublished" datetime="2020-07-22T21:00:00+08:00">2020-07-22</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2020-07-23 10:40:09" itemprop="dateModified" datetime="2020-07-23T10:40:09+08:00">2020-07-23</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>我的移动硬盘有很长一段时间没用过了，连接 Mac 的时候发现无法挂载了，然后进行了多次非正常推出（直接拔 usb 接口）。以为彻底凉了，好在通过网上的方法解决了，所以记录下本次的解决办法。</p>
<ol>
<li>打开 <code>terminal</code> 工具，使用 <code>diskutil list</code> 查看宗卷列表，一般对应的是 <code>/dev/disk2</code>，如果是某个盘符无法挂载，则一般对应的是 <code>/dev/disk2sx</code>，例如 <code>/dev/disk2s2</code></li>
<li>卸载盘符<ul>
<li>整盘卸载 <code>diskutil unmountDisk /dev/disk2</code></li>
</ul>
</li>
<li>挂载盘符<ul>
<li>如果整盘无法挂载，则输入 <code>sudo diskutil mount /dev/disk2</code></li>
<li>如果是某个盘符无法挂载，，则输入 <code>sudo diskutil mount /dev/disk2s2</code></li>
</ul>
</li>
</ol>
<p>  当然，挂载可能会失败，甚至出现 <code>timed out waiting to mount</code></p>
<ol start="4">
<li><p>再看下移动硬盘的灯是否一直在闪烁，如果是，那么就说明有进程一直在与硬盘进行读或写，遇到这种情况继续往下看</p>
</li>
<li><p>尝试干掉 <code>fsck</code>，这个方案原文参见 <a href="https://apple.stackexchange.com/questions/235309/external-drive-does-not-mount-after-plug-off-without-eject" target="_blank" rel="noopener">External drive does not mount after plug off without eject</a></p>
</li>
</ol>
<p style="padding: 0 30px">关键内容：I was having the exact same issue where unmountDisk would work fine but eject would result in the “timed out” message. I finally found a suggestion to see if fsck was holding the disk hostage. A quick ps aux | grep fsck revealed that indeed it was hijacking the disk/volume as soon as it was plugged in. sudo pkill -f fsck (or just kill with the PID if you prefer) immediately allowed the volume to be mounted. </p>
<p style="padding: 0 30px">输入 <code>ps aux | grep fsck</code>，如果存在 <code>fsck</code> 进程，运行 <code>sudo pkill -f fsck</code> 杀掉进程，再看下盘符是否可以正常退出了（或者看下移动硬盘的灯是否还在闪烁），如果正常退出了，那么就说明解决了，接下来就可以查看移动硬盘里的文件了。</p>
<p>最后的建议：</p>
<ul>
<li>不要随意拔掉 usb 接口，移动硬盘与电脑进程交互的时候粗暴的中断可能会操作到硬盘的分区、存储，严重甚至会导致硬盘坏掉</li>
<li>虽然此次问题解决了，但是保险起见，对移动硬盘进行下格式化，再把文件存回去</li>
</ul>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2019/12/27/FE/vue+typescript+monorepo/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2019/12/27/FE/vue+typescript+monorepo/" class="post-title-link" itemprop="url">vue + typescript + lerna + webpack</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2019-12-27 12:00:00 / 修改时间：14:21:06" itemprop="dateCreated datePublished" datetime="2019-12-27T12:00:00+08:00">2019-12-27</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Javascript/" itemprop="url" rel="index"><span itemprop="name">Javascript</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="写在前面"><a href="#写在前面" class="headerlink" title="写在前面"></a>写在前面</h2><p>由于前端语言发展形势的影响，近期启动对基于 vue 的 monorepo 工程集成 typescript。涉及的语言及插件如下：</p>
<h2 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h2><p><code>vue</code> 从 <code>2.5x</code> 已经开始对 <code>typescript</code> 进行支持。本文是基于 <code>vue 2.6.10</code> 版本进行的升级动作。<br><br>现在 <code>vue</code> 已经发布了 3.0 版本源码，即 <code>vue-next</code>，可以查看<a href>尤雨溪的宣讲</a>即，有兴趣也可以到 <code>github</code> <code>star</code> 一下。地址：<a href="https://github.com/vuejs/vue-next" target="_blank" rel="noopener"><code>vue-next(3.0)</code></a>。</p>
<h2 id="typescript"><a href="#typescript" class="headerlink" title="typescript"></a>typescript</h2><p>官方定义：JavaScript的超集。文档地址：<br><a href="http://www.typescriptlang.org/" target="_blank" rel="noopener">英文官网</a>，<a href="https://www.tslang.cn/docs/home.html" target="_blank" rel="noopener">中文网</a></p>
<h3 id="lerna"><a href="#lerna" class="headerlink" title="lerna"></a>lerna</h3><p>组件库使用 <code>lerna</code> 进行管理，<a href="https://github.com/lerna/lerna" target="_blank" rel="noopener"><code>点击前往 lerna 官网</code></a>。</p>
<h3 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h3><p>使用 <a href="http://eslint.cn/docs/user-guide/configuring" target="_blank" rel="noopener"><code>eslint</code></a> + <a href="https://prettier.io/docs/en/options.html" target="_blank" rel="noopener"><code>prettier</code></a></p>
<blockquote>
<p>tslint 已经官方宣布2019年停止维护，转向 eslint。</p>
</blockquote>
<h3 id="编译"><a href="#编译" class="headerlink" title="编译"></a>编译</h3><p>使用 <a href="https://www.webpackjs.com/concepts/" target="_blank" rel="noopener"><code>webpack4</code></a> 作为运行测试及打包工具。</p>
<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><p>在 typescript 2.7 版本，属性定义需要指定 !:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@Prop({ default: false }) isGetBackPwdDisable!: boolean;</span><br></pre></td></tr></table></figure></p>
<p>若不指定，编辑器会提示<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Property 'isGetBackPwdDisable' has no initializer and is not definitely assigned in the constructor.</span><br></pre></td></tr></table></figure></p>
<p>查看官方释义 <a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions" target="_blank" rel="noopener"><code>Definite Assignment Assertions</code></a>，也可以通过以下配置方式解决<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">"strictPropertyInitialization": false</span><br></pre></td></tr></table></figure></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2019/12/16/FE/使用service-worker/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2019/12/16/FE/使用service-worker/" class="post-title-link" itemprop="url">使用 service-worker</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建时间：2019-12-16 14:23:31" itemprop="dateCreated datePublished" datetime="2019-12-16T14:23:31+08:00">2019-12-16</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新于</span>
<time title="修改时间：2021-02-20 16:10:22" itemprop="dateModified" datetime="2021-02-20T16:10:22+08:00">2021-02-20</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h2><ul>
<li>默认必须运行在 https 协议下，为方便开发，也允许 <a href="http://127.0.0.1/" target="_blank" rel="noopener">http://127.0.0.1/</a> <a href="http://localhost/" target="_blank" rel="noopener">http://localhost/</a> 下运行</li>
</ul>
<h2 id="安装与激活"><a href="#安装与激活" class="headerlink" title="安装与激活"></a>安装与激活</h2><ul>
<li>用户首次访问 service worker 控制的网站或页面时，service worker 会立刻被下载</li>
<li>首次安装并激活后，下次安装会发生在 service worker 文件代码改动或者24小时后，但会在没有页面依赖旧的service worker 时激活</li>
</ul>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers" target="_blank" rel="noopener">MDN 使用 Service Workers</a></li>
</ul>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
<link itemprop="mainEntityOfPage" href="https://tgshell.com/2019/12/10/FE/h5-软键盘兼容性问题/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="tgshell">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="WebPoints">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2019/12/10/FE/h5-软键盘兼容性问题/" class="post-title-link" itemprop="url">h5-软键盘兼容性问题</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">