-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1722 lines (855 loc) · 85.7 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 class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">
<script src="/lib/pace/pace.min.js?v=1.0.2"></script>
<link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/logo32.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/logo16.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT">
<link rel="alternate" href="/atom.xml" title="追风" type="application/atom+xml">
<meta name="description" content="记录学习，记录生活，记录点滴">
<meta name="keywords" content="JavaScript react">
<meta property="og:type" content="website">
<meta property="og:title" content="追风">
<meta property="og:url" content="https://huchenh.github.io/index.html">
<meta property="og:site_name" content="追风">
<meta property="og:description" content="记录学习，记录生活，记录点滴">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="追风">
<meta name="twitter:description" content="记录学习，记录生活，记录点滴">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Mist',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
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"}
}
};
</script>
<link rel="canonical" href="https://huchenh.github.io/">
<title>追风</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<a href="https://github.com/huchenh" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">追风</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">我的前端之路</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br>
首页
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about/" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br>
关于
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
标签
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br>
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
归档
</a>
</li>
<li class="menu-item menu-item-search">
<a href="javascript:;" class="popup-trigger">
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
搜索
</a>
</li>
</ul>
<div class="site-search">
<div class="popup search-popup local-search-popup">
<div class="local-search-header clearfix">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
<div class="local-search-input-wrapper">
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
</div>
</div>
<div id="local-search-result"></div>
</div>
</div>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://huchenh.github.io/2020/07/13/基于react的虚拟列表/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="陈虎">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/pho.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="追风">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2020/07/13/基于react的虚拟列表/" itemprop="url">基于react的虚拟列表</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-13T21:48:09+08:00">
2020-07-13
</time>
</span>
<span class="post-category">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/react/" itemprop="url" rel="index">
<span itemprop="name">react</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="虚拟列表"><a href="#虚拟列表" class="headerlink" title="虚拟列表"></a>虚拟列表</h3><p>在工作中，我们经常会以列表的形式来展示内容，当时如果列表项很多的话，在pc端我们会考虑用分页的形式来解决长列表带来的性能问题。但是如果是在移动设备，为了用户体验，我们通常是用长列表的形式来展示，用户只需上下滑动来浏览。这时如果不做处理，而是一次加载全部的数据，那么当数据量过大的时候，就会出现性能问题，影响体验。这时，我们就需要用到<code>*虚拟列表*</code>了。</p>
<p>虚拟列表是按需显示的一种技术，可以根据用户的滚动，不必渲染所有列表项，而只是渲染可视区域内的一部分列表元素的技术。</p>
<p><img src="https://user-gold-cdn.xitu.io/2020/7/12/173437b972d26904?w=720&h=481&f=webp&s=9326" alt="img"></p>
<p>如图所示，当页面有很多数据的时候，我们只需渲染用户可看到的区域<code>item8</code>到<code>item15</code>。这样就大大提升了性能和用户体验。</p>
<h3 id="固定高度长列表"><a href="#固定高度长列表" class="headerlink" title="固定高度长列表"></a>固定高度长列表</h3><p>我们项目中的列表如果都是高度固定，那么这种情况就是固定高度的长列表。这种情况的处理相对简单，我们只要根据可视区域的高度和列表的高度，就能计算出可视区域要渲染列表项的索引（范围）啦。<br>首先我们可以根据<code>scrollTop</code>属性来确定可视区域开始项的索引；然后我们可以根据可视区域的高度和列表项的高度，计算得出结束索引的值，这样可视区域要渲染的内容索引已经确认，可视区域上下方的高度，也就是开始索引的值<em>列表项的高度和（列表的长度-结束索引）</em>列表项的高度。监听容器的<code>scroll</code>事情，重复上面的计算，这就是当列表项目固定的情况下，实现虚拟列表的原理。</p>
<p>如果是列表项高度不一，但是我们可以确定没项列表的高度，那么也是可用上面的方法计算，我们只需为列表增加一个<code>height</code>属性来记录每个列表的高度，然后根据索引和之前列表的高度相加，我们就可以确定当前列表的<code>top</code>相对与股东容器的高度，这样形成了一个有序的top值数组，然后我们就可以使用<code>二分法</code>结合<code>固定列表项高度</code>的情况来得到可视区域的索引范围。</p>
<p>由于本文的讨论重点不是上面两种情况，对上面两种情况感兴趣的同学，推荐我自己之前看到过的一篇文章，讲的很详细 <a href="https://juejin.im/post/5ae05bd66fb9a07aa631724b" target="_blank" rel="noopener">虚拟滚动的轮子是如何造成的？</a></p>
<h3 id="不固定列表高度的情况"><a href="#不固定列表高度的情况" class="headerlink" title="不固定列表高度的情况"></a>不固定列表高度的情况</h3><p>终于来到今天讨论的重点啦。在高度不固定的情况下，要怎么实现虚拟列表呢？通过前面的概述，相信大家也认识到要实现一个虚拟列表，我们只需要确定可是区域的渲染范围（索引）即可，滚动盒子上下高度根据计算出来的索引和列表的总长度就可以计算出来啦。那么，我们要怎么确定可视区域要渲染列表的索引呢？</p>
<p>其实在高度不确定的情况下，我们就只有等到列表项渲染完成后，才能得到列表项的真实高度，所以我们要动态的记录列表项的真实高度。为了不是页面发生错误的情况，我们需要一个预估列表项的高度来尽可能撑开滚动盒子，就等到列表项渲染后，我们就可以拿到真实dom的高度，在替换可视区域。考虑到单独的记录每个列表项的真实高度，会比较麻烦，所以我就页为单位来记录<code>pageHeight</code>。</p>
<p>来看代码<code>ScrollList</code><br><figure class="highlight plain"><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><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br></pre></td><td class="code"><pre><span class="line">import React, { PureComponent } from 'react'</span><br><span class="line">import { throttle } from '../../utils/index'</span><br><span class="line"></span><br><span class="line">// 应该接收的props: renderItem: Function, height:string; estimateHeight:Number</span><br><span class="line">class ScrollList extends PureComponent {</span><br><span class="line"> constructor (props) {</span><br><span class="line"> super(props)</span><br><span class="line"> this.renderItem = props.renderItem</span><br><span class="line"> this.getData = props.getData</span><br><span class="line"> // 预估高度 做屏幕适配</span><br><span class="line"> this.estimateHeight = document.documentElement.clientWidth * (props.estimateHeight / 320)</span><br><span class="line"> // 每一页展示的数据</span><br><span class="line"> //一页10条数据，进行一页数据的预估</span><br><span class="line"> // 每一页的总体高度</span><br><span class="line"> this.pageHeight = []</span><br><span class="line"> this.state = {</span><br><span class="line"> List: []</span><br><span class="line"> }</span><br><span class="line"> this.scrollWrapper = React.createRef()</span><br><span class="line"> this.handleScroll = throttle(this.onScroll, 300)</span><br><span class="line"> this.hasDidMounted = false</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> async componentDidMount () {</span><br><span class="line"> console.log('----- sroll list mount')</span><br><span class="line"> this.init()</span><br><span class="line"> this.hasDidMounted = true</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> init=async (isEimtByParant = false) => {</span><br><span class="line"> const { offset, events } = await this.props.getData()</span><br><span class="line"> this.initOptions({ offset, events, isEimtByParant })</span><br><span class="line"> }</span><br><span class="line"> // resource</span><br><span class="line"> // static getDerivedStateFromProps ({ resource, pageSize }) {</span><br><span class="line"> // if (resource.length && resource.length <= pageSize) {</span><br><span class="line"> // self.initOptions({ offset: 0, events: resource })</span><br><span class="line"> // console.log(resource, pageSize)</span><br><span class="line"> // }</span><br><span class="line"> // return null</span><br><span class="line"> // }</span><br><span class="line"></span><br><span class="line"> initOptions = ({ offset = 0, events = [], isEimtByParant }) => {</span><br><span class="line"> const page = Math.floor(offset / this.props.pageSize)</span><br><span class="line"> let pageList = [...this.state.List]</span><br><span class="line"></span><br><span class="line"> if (!offset) {</span><br><span class="line"> pageList = []</span><br><span class="line"> }</span><br><span class="line"> // 列表数据</span><br><span class="line"> if (!pageList.length) {</span><br><span class="line"> pageList[0] = {</span><br><span class="line"> data: events,</span><br><span class="line"> visible: true</span><br><span class="line"> }</span><br><span class="line"> } else {</span><br><span class="line"> pageList[page] = {</span><br><span class="line"> data: events,</span><br><span class="line"> visible: false</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> if (isEimtByParant) {</span><br><span class="line"> this.pageHeight = []</span><br><span class="line"> }</span><br><span class="line"> // debugger</span><br><span class="line"> // 然后对pageHeight根据预估高度进行预估初始化，后续重新进行计算,每个列表的预估位置高度</span><br><span class="line"> if (this.pageHeight.length) {</span><br><span class="line"> this.pageHeight[page] = {</span><br><span class="line"> top: this.pageHeight[page - 1].height + this.pageHeight[page - 1].top,</span><br><span class="line"> height: this.estimateHeight * events.length,</span><br><span class="line"> isComputed: false</span><br><span class="line"> }</span><br><span class="line"> } else {</span><br><span class="line"> this.pageHeight.push({</span><br><span class="line"> top: 0,</span><br><span class="line"> height: this.estimateHeight * events.length,</span><br><span class="line"> isComputed: false</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> console.log('inint options ', this.pageHeight)</span><br><span class="line"> this.setState({</span><br><span class="line"> List: pageList</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> initHeight =(offsetHeight, scrollTop) => {</span><br><span class="line"> requestAnimationFrame(() => {</span><br><span class="line"> // 判断一下需要展示的列表，其他的列表都给隐藏了</span><br><span class="line"> const listShow = [...this.state.List]</span><br><span class="line"> // console.log(listShow)</span><br><span class="line"> listShow.forEach((item, index) => {</span><br><span class="line"> if (this.pageHeight[index]) {</span><br><span class="line"> const bottom = this.pageHeight[index].top + this.pageHeight[index].height</span><br><span class="line"> // console.log('------', bottom, scrollTop, this.pageHeight[index].top > scrollTop + offsetHeight + 5)</span><br><span class="line"> if ((bottom < scrollTop - 10) || (this.pageHeight[index].top > scrollTop + offsetHeight + 10)) {</span><br><span class="line"> listShow[index].visible = false</span><br><span class="line"> } else {</span><br><span class="line"> // 根据预估高度算出来它在视野内的时候，先给它变成visible，让他出现，才能拿到元素高度</span><br><span class="line"> this.setState(prevState => {</span><br><span class="line"> const List = [...prevState.List]</span><br><span class="line"> List[index].visible = true</span><br><span class="line"> return {</span><br><span class="line"> List</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> // console.log(1111111, this.state.List)</span><br><span class="line"> // 出现以后，然后计算高度，替换掉之前用预估高度设置的height</span><br><span class="line"> const target = this[`page${index}`].current</span><br><span class="line"> let top = 0</span><br><span class="line"> if (index > 0) {</span><br><span class="line"> top = this.pageHeight[index - 1].top + this.pageHeight[index - 1].height</span><br><span class="line"> }</span><br><span class="line"> if (target && target.offsetHeight && !listShow[index].isComputed) {</span><br><span class="line"> this.pageHeight[index] = { top, height: target.offsetHeight }</span><br><span class="line"> // console.log(target.offsetHeight)</span><br><span class="line"> listShow[index].visible = true</span><br><span class="line"> listShow[index].isComputed = true</span><br><span class="line"> // 计算好了以后，还要再setState一下，调整列表高度</span><br><span class="line"> this.setState({</span><br><span class="line"> List: listShow</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> } else {</span><br><span class="line"> this.pageHeight[index] = { top, height: this.estimateHeight * this.props.pageSize }</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"> onScroll= async () => {</span><br><span class="line"> const { offsetHeight, scrollHeight, scrollTop } = this.scrollWrapper.current</span><br><span class="line"> this.initHeight(offsetHeight, scrollTop)</span><br><span class="line"> // console.log(offsetHeight, scrollHeight)</span><br><span class="line"> if (offsetHeight + scrollTop + 10 > scrollHeight && this.props.hasMore) {</span><br><span class="line"> const { events, offset } = await this.props.getData(1)</span><br><span class="line"> this.initOptions({ offset, events })</span><br><span class="line"> this.initHeight(offsetHeight, scrollTop)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> render () {</span><br><span class="line"> const { List } = this.state</span><br><span class="line"> // console.log('list', List)</span><br><span class="line"> let headerHeight = 0</span><br><span class="line"> let bottomHeight = 0</span><br><span class="line"> let i = 0</span><br><span class="line"> for (; i < List.length; i++) {</span><br><span class="line"> if (!List[i].visible) {</span><br><span class="line"> headerHeight += this.pageHeight[i].height</span><br><span class="line"> } else {</span><br><span class="line"> break</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> for (; i < List.length; i++) {</span><br><span class="line"> if (!List[i].visible) {</span><br><span class="line"> bottomHeight += this.pageHeight[i].height || 0</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> const renderList = List.map((item, index) => {</span><br><span class="line"> this[`page${index}`] = React.createRef()</span><br><span class="line"> if (item.visible) {</span><br><span class="line"> return <div ref={this[`page${index}`]} key={`${item.id}_page${index}`}></span><br><span class="line"> {item.data.map((value, log) => {</span><br><span class="line"> return (</span><br><span class="line"> this.renderItem(value, `${index}-${log}`)</span><br><span class="line"> )</span><br><span class="line"> })}</span><br><span class="line"> </div></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> return (<div</span><br><span class="line"> ref={this.scrollWrapper}</span><br><span class="line"> onScroll={this.handleScroll}</span><br><span class="line"> style={{ height: '100%', overflow: 'scroll' }}</span><br><span class="line"> ></span><br><span class="line"> <div style={{ height: headerHeight }} /></span><br><span class="line"> {renderList}</span><br><span class="line"> <div style={{ height: bottomHeight }} /></span><br><span class="line"> {/* {this.state.loading && (</span><br><span class="line"> <div>加载中</div></span><br><span class="line"> )}</span><br><span class="line"> {this.state.showMsg && (</span><br><span class="line"> <div>暂无更多内容</div></span><br><span class="line"> )} */}</span><br><span class="line"> </div>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">export default ScrollList</span><br></pre></td></tr></table></figure></p>
<p>从代码中我们可以看到组件<code>ScollList</code>接收的props有：</p>
<ul>
<li>renderItem：渲染列表项的函数，由用户传入即可。</li>
<li>hasMore：判断是否还有下一页数据，用户往下滑动。</li>
<li>pageSize：表示每一页的列表项，因为scrollList是以页为单位来计算高度的</li>
<li>getData： 获取列表项</li>
<li>estimateHeight： 列表项的预估高度，可以稍微大些，撑开滚动盒子的高度</li>
</ul>
<p><em>原理梳理</em></p>
<ul>
<li>先设置一个预设一个列表高度，如 320</li>
<li><p>然后componentDidMounted中加载一页数据，并用<code>pageHeight</code>来存储每一页（10）条数据的预估高度和，还有顶端位置，用<code>top</code>记录</p>
<figure class="highlight plain"><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">// pageHeight</span><br><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> top: 0,</span><br><span class="line"> height: document.documentElement.clientWidth * (props.estimateHeight / 320)</span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
</li>
<li><p>在state中用List，来接受请求的数据</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></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> data: [....] <span class="comment">// 要渲染的真实数据,</span></span><br><span class="line"> isComputed: <span class="literal">false</span> <span class="comment">// 表示这页数据是用的预估的高度来渲染的，在滚动事件中，我们会用真实的这页数据的高度来替换，在重新更新页面</span></span><br><span class="line"> visible: <span class="literal">false</span> <span class="comment">// 标示本页数据是否在可是区域</span></span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
</li>
<li><p>scroll事件，根据hasMore来请求后面的数据</p>
</li>
</ul>
<p>最后贴下冴羽大佬的<code>throttle</code><br><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><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">export</span> <span class="keyword">const</span> throttle = <span class="function">(<span class="params">func, wait, options = { leading: <span class="literal">true</span>, trailing: <span class="literal">true</span> }</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> timeout, context, args <span class="comment">// result</span></span><br><span class="line"> <span class="keyword">let</span> previous = <span class="number">0</span></span><br><span class="line"> <span class="keyword">if</span> (!options) options = {}</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> later = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> previous = options.leading === <span class="literal">false</span> ? <span class="number">0</span> : <span class="keyword">new</span> <span class="built_in">Date</span>().getTime()</span><br><span class="line"> timeout = <span class="literal">null</span></span><br><span class="line"> func.apply(context, args)</span><br><span class="line"> <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> throttled = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>().getTime()</span><br><span class="line"> <span class="keyword">if</span> (!previous && options.leading === <span class="literal">false</span>) previous = now</span><br><span class="line"> <span class="keyword">const</span> remaining = wait - (now - previous)</span><br><span class="line"> context = <span class="keyword">this</span></span><br><span class="line"> args = <span class="built_in">arguments</span></span><br><span class="line"> <span class="keyword">if</span> (remaining <= <span class="number">0</span> || remaining > wait) {</span><br><span class="line"> <span class="keyword">if</span> (timeout) {</span><br><span class="line"> clearTimeout(timeout)</span><br><span class="line"> timeout = <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line"> previous = now</span><br><span class="line"> func.apply(context, args)</span><br><span class="line"> <span class="keyword">if</span> (!timeout) context = args = <span class="literal">null</span></span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (!timeout && options.trailing !== <span class="literal">false</span>) {</span><br><span class="line"> timeout = setTimeout(later, remaining)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> throttled.cancel = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> clearTimeout(timeout)</span><br><span class="line"> previous = <span class="number">0</span></span><br><span class="line"> timeout = <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> throttled</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>以上就是本人在项目有用到的虚拟列表实现方法，大家可以帮忙优化下哈！</p>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://huchenh.github.io/2020/06/07/迟来的前端面经/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="陈虎">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/pho.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="追风">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2020/06/07/迟来的前端面经/" itemprop="url">迟来的前端面经</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2020-06-07T11:05:24+08:00">
2020-06-07
</time>
</span>
<span class="post-category">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/前端三剑客/" itemprop="url" rel="index">
<span itemprop="name">前端三剑客</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>最近也是在换工作，小公司和大厂（虾皮、腾讯）都有面试。几次面试收获还是比较大的，了解许多自己的短板，当然也拿到了合适的offer。本文主要整理下面试遇到的问题和知识点，希望对准备找工作的掘友有所帮助。</p>
<h3 id="基础部分"><a href="#基础部分" class="headerlink" title="基础部分"></a>基础部分</h3><p>面试的时候，前端基础知识，还是仔细准备，这一块可以问的东西很多，不管哪一面，都将会有问到，或者通过面试题来考察。</p>
<ol>
<li>你对css3的动画属性了解多少？</li>
</ol>
<p>这个问题，是在介绍项目的时候，面试官提出来的。我介绍的项目是一个利用贝塞尔曲线公式，来控制小车做曲线运动移动到对应的位置，抽取奖品。我自己是用js套用公式做的，当时面试官，有提到具体的公式是怎样的（有点慌，确实是百度来的。。。），车的坐标怎么控制，小车是否可以连续运动（项目中采用的是把所有动画函数放入一个数组，采用类似express中间件 next这样的方式来实现）。然后面试就提了上面的问题，我的回答（常规操作），animation开头的后面的属性，能记住的都说了，最后面试官问我知道 css3也可以设置贝塞尔曲线么，还有<code>animationend 事件</code>，然后项目的新的思路就出来了，利用css3 <code>cubic-bezier</code>结合动画结束事件<code>animationend</code>,就可以实现小车的曲线运动了。嗯，服气！</p>
<ol start="2">
<li>session和cookie的区别是啥？</li>
</ol>
<p>这个网上答案有很多，建议回答的时候，就是解释一下基本的概念，然后结合场景说明下用途就ok啦。。。。</p>
<ol start="3">
<li>聊聊js的原型链吧？</li>
</ol>
<p>这个考的方式有很多。比如直接说出一个<code>function Person</code>，让你画图的（如果头脑清晰，可以把函数也是对象的那部分画出来，这是一个加分项）;还有就是出一个题，让你说出<code>p1.__proto__</code> ，<code>Person.prototype</code>的关系或是各种<code>__proto__</code>的指向问题，建议用纸笔仔细捋捋。</p>
<ol start="4">
<li><p>防抖和节流的实现原理，和使用场景？<br>这个也是一个面试高频问题。防抖类似于，我们排队上地铁，一个人上去后，后面的人才能接着上（one by one），一般用在<code>搜索展示下拉框</code>这样的场景；节流，是理解为是<code>水龙头按节奏的滴水</code>，一般是用在有<code>onresize</code> <code>onsrcoll</code> 这样的场景。</p>
</li>
<li><p>http的缓存机制？<br>协商缓存(etag,last-mofify)和强制缓存（cache-control）。分别解释了各种概念后，面试官追问，既然有了last-modify为什么还要有etag：1、文件内容没有变的情况，但是last-mofidy会变，比如，打开文件修改，当时内容没有变化。2、就是last-mofify的时间精度是秒级，但后台可能存在一秒对文件多次操作的可能。</p>
</li>
<li><p>聊聊http2的特性？</p>
</li>
</ol>
<p>概念性问题，背背书。。。。</p>
<ol start="7">
<li>addeventlistener第三个参数作用</li>
</ol>
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2020/06/07/迟来的前端面经/#more" rel="contents">
阅读全文 »
</a>
</div>
<!--/noindex-->
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://huchenh.github.io/2020/03/21/vue收集依赖watcher/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="陈虎">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/pho.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="追风">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2020/03/21/vue收集依赖watcher/" itemprop="url">vue收集依赖watcher</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-21T18:23:07+08:00">
2020-03-21
</time>
</span>
<span class="post-category">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Vue/" itemprop="url" rel="index">
<span itemprop="name">Vue</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>前文，有聊到vue中的数据侦测机制（<a href="https://juejin.im/post/5e6dc3f7518825494466c181" target="_blank" rel="noopener">observer</a>），如果实现对监听对象<code>object</code>和数组的数据变化。但是，如果我们只知道数据的变化，也无法及时的把这些数据更新到视图。所以，我们需要收集依赖，等数据更新了，就把收集到的依赖循环触发一遍就好了，这样数据的变化就可以及时更新到视图了。</p>
<h3 id="收集依赖Dep"><a href="#收集依赖Dep" class="headerlink" title="收集依赖Dep"></a>收集依赖Dep</h3><p>对于对象来说，依赖是在<code>getter</code>中收集，在<code>setter</code>中触发执行。那么，依赖存储在哪呢？vue中用了一个<code>Dep</code>类来管理依赖，对于响应数据对象的每一个<code>key</code>值，都有一个数组来存储依赖。先来看看<code>Dep</code>类，它可以帮助我们收集依赖、删除依赖和触发依赖。<br><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><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="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>{</span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>() {</span><br><span class="line"> <span class="keyword">this</span>.subs = []</span><br><span class="line"> }</span><br><span class="line"> addSub(sub) {</span><br><span class="line"> <span class="keyword">this</span>.subs.push(sub)</span><br><span class="line"> }</span><br><span class="line"> removeSub(sub) {</span><br><span class="line"> remove(<span class="keyword">this</span>.subs,sub)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> depend() {</span><br><span class="line"> <span class="keyword">if</span>(Window.target) {</span><br><span class="line"> <span class="keyword">this</span>.addSub(<span class="built_in">window</span>.target)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> notify() {</span><br><span class="line"> <span class="keyword">const</span> subs = <span class="keyword">this</span>.subs.slice();</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>,len = subs.slice.length;i<<span class="number">1</span>;i++) {</span><br><span class="line"> subs[i].update()</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="function"><span class="keyword">function</span> <span class="title">remove</span>(<span class="params">arr,item</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(arr.length) {</span><br><span class="line"> <span class="keyword">const</span> index = arr.indexOf(item);</span><br><span class="line"> <span class="keyword">if</span>(index > <span class="number">-1</span>) {</span><br><span class="line"> <span class="keyword">return</span> arr.splice(index,<span class="number">1</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>
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2020/03/21/vue收集依赖watcher/#more" rel="contents">
阅读全文 »
</a>
</div>
<!--/noindex-->
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://huchenh.github.io/2020/03/15/vue数据监测机制observer/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="陈虎">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/pho.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="追风">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2020/03/15/vue数据监测机制observer/" itemprop="url">vue数据监测机制observer</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-15T13:59:02+08:00">
2020-03-15
</time>
</span>
<span class="post-category">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Vue/" itemprop="url" rel="index">
<span itemprop="name">Vue</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>vue的mvvm模型，解耦了视图和数据，为前端开发提供了极大的便利，而其中最重要的是数据变化检测，vue的data检测机制有以下几个特点：</p>
<ul>
<li>检测数据为对象的时候，必须先声明属性 ，这个属性才是响应式的。</li>
<li>增加不存在的属性 不能更新视图 （vm.$set）</li>
<li>修改数组索引和长度 是不会导致视图更新的</li>
<li>数组里套对象 对象是支持响应式变化的，如果是常量则没有效果</li>
<li>如果新增的数据 vue中也会帮你监控（对象类型）</li>
</ul>
<h2 id="Object的变化检测"><a href="#Object的变化检测" class="headerlink" title="Object的变化检测"></a>Object的变化检测</h2><p>在js中有两种方法可以侦测到对象的变化<code>Object.defineProperty</code>和<code>ES6的Proxy</code>,vue2.0的版本是采用<code>Object.defineProperty</code>来检测对象数据的变化。根据vue的使用特性，我们要检测对象的所有key值，并且对新增的数据也要检测，我们可以写出下面的代码：<br><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><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">observer</span>(<span class="params">obj</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">'object'</span> || obj == <span class="literal">null</span>) {</span><br><span class="line"> <span class="keyword">return</span> obj;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 监听对象的每一个属性 key</span></span><br><span class="line"> <span class="built_in">Object</span>.keys(obj).forEach(<span class="function"><span class="params">key</span>=></span>{</span><br><span class="line"> defineReactive(obj,key,obj[key]) </span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">defineReactive</span>(<span class="params">obj,key,value</span>) </span>{</span><br><span class="line"> <span class="comment">// 递归对象的值，如果值为对象，也监测</span></span><br><span class="line"> observer(value);</span><br><span class="line"> <span class="built_in">Object</span>.defineProperty(obj,key,{</span><br><span class="line"> enumerable:<span class="literal">true</span>,</span><br><span class="line"> configurable: <span class="literal">true</span>,</span><br><span class="line"> <span class="keyword">get</span>() {</span><br><span class="line"> <span class="comment">// 对于对象 我们在这里 收集依赖 watcher</span></span><br><span class="line"> <span class="keyword">return</span> value</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">set</span>(newValue) { </span><br><span class="line"> <span class="comment">//给某个key设置值的时候 可能也是一个对象 也需要监听</span></span><br><span class="line"> observer(newValue);</span><br><span class="line"> <span class="comment">//对象： 在这里触发收集的依赖</span></span><br><span class="line"> value = newValue;</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'视图更新'</span>);</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2020/03/15/vue数据监测机制observer/#more" rel="contents">
阅读全文 »
</a>
</div>
<!--/noindex-->
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://huchenh.github.io/2020/03/07/vue实现api调用的消息弹框/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="陈虎">
<meta itemprop="description" content>
<meta itemprop="image" content="/images/pho.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="追风">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2020/03/07/vue实现api调用的消息弹框/" itemprop="url">vue实现api调用的消息弹框</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-07T17:40:38+08:00">
2020-03-07
</time>
</span>