-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1214 lines (762 loc) · 161 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="http://yoursite.com">
<title>JeanneWu's blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="JeanneWu's blog">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="JeanneWu's blog">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="JeanneWu">
<meta name="twitter:card" content="summary">
<link rel="alternative" href="/atom.xml" title="JeanneWu's blog" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link rel="stylesheet" type="text/css" href="/./main.0cf68a.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
<meta name="generator" content="Hexo 4.2.0"></head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #4d4d4d"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<img src="/assets/img/head.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="/">JeanneWu</a></h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/wuqin0791" title="github"><i class="icon-github"></i></a>
<a class="weibo" target="_blank" href="https://www.weibo.com/u/1978411695" title="weibo"><i class="icon-weibo"></i></a>
<a class="rss" target="_blank" href="#" title="rss"><i class="icon-rss"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/jeannewu" title="zhihu"><i class="icon-zhihu"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #4d4d4d"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img src="/assets/img/head.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author js-header-author">JeanneWu</h1>
</hgroup>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/wuqin0791" title="github"><i class="icon-github"></i></a>
<a class="weibo" target="_blank" href="https://www.weibo.com/u/1978411695" title="weibo"><i class="icon-weibo"></i></a>
<a class="rss" target="_blank" href="#" title="rss"><i class="icon-rss"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/jeannewu" title="zhihu"><i class="icon-zhihu"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 50%">
<li style="width: 100%"><a href="/">主页</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-初探react之井字棋游戏" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/07/05/%E5%88%9D%E6%8E%A2react%E4%B9%8B%E4%BA%95%E5%AD%97%E6%A3%8B%E6%B8%B8%E6%88%8F/">初探react之井字棋游戏</a>
</h1>
<a href="/2020/07/05/%E5%88%9D%E6%8E%A2react%E4%B9%8B%E4%BA%95%E5%AD%97%E6%A3%8B%E6%B8%B8%E6%88%8F/" class="archive-article-date">
<time datetime="2020-07-05T14:50:13.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-07-05</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>一直都是在做vue的项目，对于react的探索搁置了许久，趁着回国在深圳隔离的时间，做了一个有别于react官网的井字棋游戏，总结下来，让自己思路更加清晰。</p>
</blockquote>
<a class="article-more-a" href="/2020/07/05/%E5%88%9D%E6%8E%A2react%E4%B9%8B%E4%BA%95%E5%AD%97%E6%A3%8B%E6%B8%B8%E6%88%8F/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">react</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/07/05/%E5%88%9D%E6%8E%A2react%E4%B9%8B%E4%BA%95%E5%AD%97%E6%A3%8B%E6%B8%B8%E6%88%8F/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vscode-常用快捷键" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/06/25/vscode-%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/">vscode 常用快捷键</a>
</h1>
<a href="/2020/06/25/vscode-%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="archive-article-date">
<time datetime="2020-06-25T14:15:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-06-25</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>vscode的常见快捷键</p>
</blockquote>
<ol>
<li>⌥Opt+⌘Cmd+↑/↓ — VSCode中的多行编辑</li>
</ol>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">vscode</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/06/25/vscode-%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-如何写出一个完美的深拷贝" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/06/25/%E5%A6%82%E4%BD%95%E5%86%99%E5%87%BA%E4%B8%80%E4%B8%AA%E5%AE%8C%E7%BE%8E%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D/">如何写出一个完美的深拷贝</a>
</h1>
<a href="/2020/06/25/%E5%A6%82%E4%BD%95%E5%86%99%E5%87%BA%E4%B8%80%E4%B8%AA%E5%AE%8C%E7%BE%8E%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D/" class="archive-article-date">
<time datetime="2020-06-25T07:41:31.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-06-25</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>手写深拷贝是一个经常被面试官问到的题目，可是我们通常只考虑对象和数组两种情况，也不考虑成环的情况。下面想分享一个近乎完美的深拷贝代码。</p>
</blockquote>
<h2 id="什么是深拷贝？"><a href="#什么是深拷贝？" class="headerlink" title="什么是深拷贝？"></a>什么是深拷贝？</h2><blockquote>
<p>深拷贝就是对象a和对象b之间没有引用，简单来说就是对象a、b之间没有联系。</p>
</blockquote>
<a class="article-more-a" href="/2020/06/25/%E5%A6%82%E4%BD%95%E5%86%99%E5%87%BA%E4%B8%80%E4%B8%AA%E5%AE%8C%E7%BE%8E%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">js面试</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/06/25/%E5%A6%82%E4%BD%95%E5%86%99%E5%87%BA%E4%B8%80%E4%B8%AA%E5%AE%8C%E7%BE%8E%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vue造轮子之button" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/06/24/vue%E9%80%A0%E8%BD%AE%E5%AD%90%E4%B9%8Bbutton/">vue造轮子之button组件</a>
</h1>
<a href="/2020/06/24/vue%E9%80%A0%E8%BD%AE%E5%AD%90%E4%B9%8Bbutton/" class="archive-article-date">
<time datetime="2020-06-24T11:21:55.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-06-24</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>最近闲来无事，研究了如何使用vue来造轮子，丰富自己的组件库，那么就从最简单的button开始吧。<br>所有的代码都在下面这个仓库里，欢迎star~ <a href="https://github.com/wuqin0791/gulu" target="_blank" rel="noopener">https://github.com/wuqin0791/gulu</a></p>
</blockquote>
<a class="article-more-a" href="/2020/06/24/vue%E9%80%A0%E8%BD%AE%E5%AD%90%E4%B9%8Bbutton/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/06/24/vue%E9%80%A0%E8%BD%AE%E5%AD%90%E4%B9%8Bbutton/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-利用es6的proxy来处理表单数据验证" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/05/16/%E5%88%A9%E7%94%A8es6%E7%9A%84proxy%E6%9D%A5%E5%A4%84%E7%90%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81/">利用es6的proxy来处理表单数据验证</a>
</h1>
<a href="/2020/05/16/%E5%88%A9%E7%94%A8es6%E7%9A%84proxy%E6%9D%A5%E5%A4%84%E7%90%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81/" class="archive-article-date">
<time datetime="2020-05-16T12:25:54.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-05-16</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<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><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">validator</span>(<span class="params">target, validatior</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Proxy</span>(target, {</span><br><span class="line"> _validator: validator,</span><br><span class="line"> <span class="keyword">set</span>(target, key, value, proxy){</span><br><span class="line"> <span class="keyword">if</span>(target.hasOwnProperty(key)){</span><br><span class="line"> <span class="keyword">let</span> va = <span class="keyword">this</span>._validator[key];</span><br><span class="line"> <span class="keyword">if</span>(!!va(value)){</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Reflect</span>.set(target, key, value, proxy)</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">throw</span> <span class="built_in">Error</span>(<span class="string">`不能设置<span class="subst">${key}</span>到<span class="subst">${value}</span>`</span>)</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">throw</span> <span class="built_in">Error</span>(<span class="string">`<span class="subst">${key}</span> 不存在`</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> personValidators = {</span><br><span class="line"> name(val){</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">typeof</span> val === <span class="string">'string'</span></span><br><span class="line"> },</span><br><span class="line"> age(val){</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">typeof</span> val === <span class="string">'number'</span> && val > <span class="number">18</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span></span>{</span><br><span class="line"> <span class="keyword">constructor</span>(name,age){</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.age = age;</span><br><span class="line"> <span class="keyword">return</span> validator(<span class="keyword">this</span>, personValidators)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> person = <span class="keyword">new</span> Person(<span class="string">'lilei'</span>, <span class="number">30</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">person.name = <span class="number">48</span>;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>这样用proxy来代理对象，并且结合类的使用，可以使得代码的灵活性更高。比如新增一个电话号码的验证，就可以直接修改personValidators的规则。</p>
</blockquote>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">ES6</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/05/16/%E5%88%A9%E7%94%A8es6%E7%9A%84proxy%E6%9D%A5%E5%A4%84%E7%90%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-理解vue的diff算法" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/23/%E7%90%86%E8%A7%A3vue%E7%9A%84diff%E7%AE%97%E6%B3%95/">理解vue的diff算法</a>
</h1>
<a href="/2020/04/23/%E7%90%86%E8%A7%A3vue%E7%9A%84diff%E7%AE%97%E6%B3%95/" class="archive-article-date">
<time datetime="2020-04-23T02:39:35.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p>直接看这篇文章吧，太优秀了<br><a href="https://juejin.im/post/5affd01551882542c83301da#heading-1" target="_blank" rel="noopener">https://juejin.im/post/5affd01551882542c83301da#heading-1</a></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">js面试</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/23/%E7%90%86%E8%A7%A3vue%E7%9A%84diff%E7%AE%97%E6%B3%95/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-http的发展史" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/21/http%E7%9A%84%E5%8F%91%E5%B1%95%E5%8F%B2/">http的发展史</a>
</h1>
<a href="/2020/04/21/http%E7%9A%84%E5%8F%91%E5%B1%95%E5%8F%B2/" class="archive-article-date">
<time datetime="2020-04-21T03:19:12.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-21</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="http的发展史可以分为四个版本"><a href="#http的发展史可以分为四个版本" class="headerlink" title="http的发展史可以分为四个版本"></a>http的发展史可以分为四个版本</h3><ol>
<li>http/0.9 (1991)</li>
<li>http/1.0 (1996)</li>
<li>http/1.1 (1999)</li>
<li>http/2 (2015)</li>
</ol>
<h2 id="http-0-9"><a href="#http-0-9" class="headerlink" title="http/0.9"></a>http/0.9</h2><ol>
<li>http是基于TCP/IP协议的应用层协议（OSI的七层模型）</li>
<li>默认80端口</li>
<li>只支持get方式</li>
<li>不支持传输数据包，只能够传输html规格的字符串</li>
</ol>
<blockquote>
<p>ps: 数据包在http1.0之后分为数据请求包，数据响应包<br>请求包：请求行；消息头；消息正文<br>响应包：状态行；消息头；响应正文</p>
</blockquote>
<h2 id="http-1-0"><a href="#http-1-0" class="headerlink" title="http/1.0"></a>http/1.0</h2><ol>
<li>所有的形式的文件都可以传输，包括图像视频等二进制文件</li>
<li>除了GET，还引入了POST和HEAD命令</li>
<li>http请求的回应格式也不同，除了数据，还有http header数据头部分</li>
<li>缓存主要靠的是If-Modified-Since,Expires</li></ol>
<a class="article-more-a" href="/2020/04/21/http%E7%9A%84%E5%8F%91%E5%B1%95%E5%8F%B2/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">http</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/21/http%E7%9A%84%E5%8F%91%E5%B1%95%E5%8F%B2/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-一个关于http的总结-发誓再也不要被面试官虐" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/18/%E4%B8%80%E4%B8%AA%E5%85%B3%E4%BA%8Ehttp%E7%9A%84%E6%80%BB%E7%BB%93-%E5%8F%91%E8%AA%93%E5%86%8D%E4%B9%9F%E4%B8%8D%E8%A6%81%E8%A2%AB%E9%9D%A2%E8%AF%95%E5%AE%98%E8%99%90/">一个关于http的总结,发誓再也不要被面试官虐</a>
</h1>
<a href="/2020/04/18/%E4%B8%80%E4%B8%AA%E5%85%B3%E4%BA%8Ehttp%E7%9A%84%E6%80%BB%E7%BB%93-%E5%8F%91%E8%AA%93%E5%86%8D%E4%B9%9F%E4%B8%8D%E8%A6%81%E8%A2%AB%E9%9D%A2%E8%AF%95%E5%AE%98%E8%99%90/" class="archive-article-date">
<time datetime="2020-04-18T07:48:55.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-18</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>最近和朋友交流，如何才能答出一个出彩的回答，有了一些总结，低端的选手背答案，中档的选手理解知识，高级的选手抛出应用场景，sp是提出解决问题的方案，ssp会统筹调动资源。</p>
</blockquote>
<blockquote>
<p>Q:为什么会想总结一个这样的话题呢？<br>A:本质上，就是不想再被面试官虐；其次就是改变自己”被灌输“的思维习惯。</p>
</blockquote>
<h2 id="什么是http-什么是https-（先来点basic）"><a href="#什么是http-什么是https-（先来点basic）" class="headerlink" title="什么是http? 什么是https?（先来点basic）"></a>什么是http? 什么是https?（先来点basic）</h2><blockquote>
<p>http英文是hyperText Transfer Protocol，超文本传输协议<br>https英文是hyperText Transfer Protocol Secure, 超文本传输安全协议</p>
</blockquote>
<h2 id="差别在哪里？-差别在于多了S。"><a href="#差别在哪里？-差别在于多了S。" class="headerlink" title="差别在哪里？ 差别在于多了S。"></a>差别在哪里？ 差别在于多了S。</h2><blockquote>
<p>表面上多了个secure，这里面需要解释的东西就挺多的了。<br>secure本质上是基于SSL服务器数字证书的，SSL（Secure Sockets Layer）是一个安全协议（位于安全套接层），由网景公司开发，而SSL证书是遵从这样一个协议的「服务器数字证书」，在SSL 3.0的协议规范上，是SSL 3.0的后续版本。</p>
</blockquote>
<h2 id="http和https的区别？（标准答案）"><a href="#http和https的区别？（标准答案）" class="headerlink" title="http和https的区别？（标准答案）"></a>http和https的区别？（标准答案）</h2><blockquote>
<ol>
<li>HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头</li>
<li>HTTP 是不安全的，而 HTTPS 是安全的</li>
<li>HTTP 标准端口是80 ，而 HTTPS 的标准端口是443</li>
<li>在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层</li>
<li>HTTP 无法加密，而HTTPS 对传输的数据进行加密</li>
<li>HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书</li>
</ol>
</blockquote>
<a class="article-more-a" href="/2020/04/18/%E4%B8%80%E4%B8%AA%E5%85%B3%E4%BA%8Ehttp%E7%9A%84%E6%80%BB%E7%BB%93-%E5%8F%91%E8%AA%93%E5%86%8D%E4%B9%9F%E4%B8%8D%E8%A6%81%E8%A2%AB%E9%9D%A2%E8%AF%95%E5%AE%98%E8%99%90/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">http</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/18/%E4%B8%80%E4%B8%AA%E5%85%B3%E4%BA%8Ehttp%E7%9A%84%E6%80%BB%E7%BB%93-%E5%8F%91%E8%AA%93%E5%86%8D%E4%B9%9F%E4%B8%8D%E8%A6%81%E8%A2%AB%E9%9D%A2%E8%AF%95%E5%AE%98%E8%99%90/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-手写一个promise" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/15/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AApromise/">手写一个promise</a>
</h1>
<a href="/2020/04/15/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AApromise/" class="archive-article-date">
<time datetime="2020-04-15T03:27:34.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-15</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>先上代码吧</p>
</blockquote>
<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><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Promise</span>(<span class="params">excutor</span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> self = <span class="keyword">this</span>;</span><br><span class="line"> self.status = <span class="string">'pending'</span>;</span><br><span class="line"> self.value = <span class="literal">undefined</span>; <span class="comment">//成功之后传递出来的值</span></span><br><span class="line"> self.reason = <span class="literal">undefined</span>; <span class="comment">// 失败的原因</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">resolve</span>(<span class="params">value</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(self.status === <span class="string">'pending'</span>){</span><br><span class="line"> self.status = <span class="string">'resolved'</span>;</span><br><span class="line"> self.value = value;</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">reject</span>(<span class="params">reason</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(self.status === <span class="string">'pending'</span>){</span><br><span class="line"> self.status = <span class="string">'rejected'</span>;</span><br><span class="line"> self.reason = reason;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">try</span>{</span><br><span class="line"> excutor(resolve, reject)</span><br><span class="line"> }<span class="keyword">catch</span>(e){</span><br><span class="line"> reject(e)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// onFullfiled 成功的回调</span></span><br><span class="line"><span class="comment">// onReject 失败的回调</span></span><br><span class="line"><span class="built_in">Promise</span>.prototype.then = <span class="function"><span class="keyword">function</span>(<span class="params">onFullfiled, onReject</span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> self = <span class="keyword">this</span>;</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'resolved'</span>){</span><br><span class="line"> onFullfiled(self.value)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(self.status === <span class="string">'resolved'</span>){</span><br><span class="line"> onReject(self.reason)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="built_in">Promise</span>;</span><br></pre></td></tr></table></figure>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">js面试</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/15/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AApromise/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-原生js写一个拖拽效果" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/08/%E5%8E%9F%E7%94%9Fjs%E5%86%99%E4%B8%80%E4%B8%AA%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/">原生js写一个拖拽效果</a>
</h1>
<a href="/2020/04/08/%E5%8E%9F%E7%94%9Fjs%E5%86%99%E4%B8%80%E4%B8%AA%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/" class="archive-article-date">
<time datetime="2020-04-08T06:27:40.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2020-04-08</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="先上代码呗"><a href="#先上代码呗" class="headerlink" title="先上代码呗~"></a>先上代码呗~</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">title</span>></span>HTML5拖拽<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"><span class="selector-id">#div1</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">width</span><span class="selector-pseudo">:350px</span>;<span class="selector-tag">height</span><span class="selector-pseudo">:70px</span>;<span class="selector-tag">padding</span><span class="selector-pseudo">:10px</span>;<span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#aaaaaa</span>;</span></span><br><span class="line"> position: absolute;</span><br><span class="line"> top: 0px;</span><br><span class="line"> left: 0px;</span><br><span class="line"> }</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"div1"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> dom = <span class="built_in">document</span>.getElementById(<span class="string">'div1'</span>);</span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> status = <span class="literal">false</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> position = [<span class="number">350</span>/<span class="number">2</span>, <span class="number">35</span>];;</span></span><br><span class="line"><span class="actionscript">dom.addEventListener(<span class="string">'mousedown'</span>, e => {</span></span><br><span class="line"><span class="actionscript"> status = <span class="literal">true</span>;</span></span><br><span class="line"> </span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="number">11</span>);</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.addEventListener(<span class="string">'mousemove'</span>, e => {</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">if</span> (status === <span class="literal">false</span>) <span class="keyword">return</span>;</span></span><br><span class="line"> </span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> left = +dom.style.left.split(<span class="string">'px'</span>)[<span class="number">0</span>] || <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> top = +dom.style.top.split(<span class="string">'px'</span>)[<span class="number">0</span>] || <span class="number">0</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> x = e.clientX;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> y = e.clientY;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> deltaX = x - position[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript"> <span class="keyword">let</span> deltaY = y - position[<span class="number">1</span>];</span></span><br><span class="line"></span><br><span class="line"> deltaX = deltaX < 0 ? 0: deltaX;</span><br><span class="line"> deltaY = deltaY < 0 ? 0: deltaY;</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><span class="actionscript"> dom.style.left = deltaX + <span class="string">'px'</span>;</span></span><br><span class="line"><span class="actionscript"> dom.style.top = deltaY + <span class="string">'px'</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(deltaX,<span class="string">'deltaX'</span>);</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(dom.style.left,<span class="string">'dom.style.left'</span>);</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="actionscript"> <span class="comment">// position[x,y];</span></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.addEventListener(<span class="string">'mouseup'</span>, e => {</span></span><br><span class="line"><span class="actionscript"> status = <span class="literal">false</span>;</span></span><br><span class="line"> position[e.clientX, e.clientY];</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="思想："><a href="#思想：" class="headerlink" title="思想："></a>思想：</h2><ol>
<li>鼠标移动后停住的距离 - 起始的距离 = delta 改变的距离</li>
<li>clientX 和 clientY 是距离浏览器左上角原点的水平和垂直距离</li>
<li>计算的时候，要小心 dom.style.left 默认带px单位</li>
<li>对delta的边界值判断，不可越界。</li>
</ol>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">js面试</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2020/04/08/%E5%8E%9F%E7%94%9Fjs%E5%86%99%E4%B8%80%E4%B8%AA%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/">Next &raquo;</a>
</nav>
</div>
</div>
</div>
<!--
* @Description: This is a python file
* @Author: JeanneWu
* @Date: 2020-02-21 16:49:35
-->
<footer id="footer">
<div class="outer">
<div id="footer-info">
<div class="footer-left">
© by JeanneWu
</div>
<!-- <div class="footer-right">
<a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
</div> -->
</div>
</div>
</footer>
</div>
<script>
var yiliaConfig = {
mathjax: false,
isHome: true,
isPost: false,
isArchive: false,
isTag: false,
isCategory: false,
open_in_new: true,
toc_hide_index: true,
root: "/",