-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
897 lines (673 loc) · 123 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
<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="utf-8">
<title>学无止境</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="学无止境">
<meta property="og:url" content="https://yangyang158.github/index.html">
<meta property="og:site_name" content="学无止境">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="学无止境">
<link rel="alternate" href="/atom.xml" title="学无止境" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">学无止境</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="https://yangyang158.github"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-框架" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/09/01/框架/" class="article-date">
<time datetime="2020-09-01T10:24:31.000Z" itemprop="datePublished">2020-09-01</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/09/01/框架/">框架</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、单页面和多页面应用"><a href="#一、单页面和多页面应用" class="headerlink" title="一、单页面和多页面应用"></a>一、单页面和多页面应用</h2><p>单页面：<br> 解释：一个应用只有一个html主页面, 只加载一次html、css、js等资源, 所有子页面都包含在主页面中, 通过路由去切换页面<br> 优点：切换页面比较快<br>多页面：一个应用有多个html页面<br> 缺点：不同页面之间跳转比较慢</p>
<h2 id="二、洋葱模型"><a href="#二、洋葱模型" class="headerlink" title="二、洋葱模型"></a>二、洋葱模型</h2><p>一句话：在每个中间件里面调用了下一个中间件函数，除了最后一个<br><a href="https://segmentfault.com/a/1190000021394840" target="_blank" rel="noopener">https://segmentfault.com/a/1190000021394840</a></p>
<p><img src="/2020/09/01/框架/onion.png" alt="洋葱模型" title="洋葱模型"></p>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/09/01/框架/" data-id="ckgujwhqf000fwsuvqt2gi2w0" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-promise" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/08/14/promise/" class="article-date">
<time datetime="2020-08-14T03:22:56.000Z" itemprop="datePublished">2020-08-14</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/08/14/promise/">promise</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="一、手写一个prmose-不能链式调用"><a href="#一、手写一个prmose-不能链式调用" class="headerlink" title="一、手写一个prmose(不能链式调用)"></a>一、手写一个prmose(不能链式调用)</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> MyPromise(fn) {</span><br><span class="line"> <span class="built_in">let</span> self = this</span><br><span class="line"> self.status = <span class="string">'pedding'</span></span><br><span class="line"> self.value = <span class="string">''</span></span><br><span class="line"> // 存储<span class="keyword">then</span>的两个函数</span><br><span class="line"> self.callback = []</span><br><span class="line"> <span class="keyword">function</span> resolve(value) {</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.status = <span class="string">'fulfulled'</span></span><br><span class="line"> self.value = value</span><br><span class="line"> <span class="keyword">if</span> (self.callback.length > 0) {</span><br><span class="line"> try {</span><br><span class="line"> self.callback[0].onFulFilled(value)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> self.callback[0].onRejected(err)</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">function</span> reject(value) {</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.status = <span class="string">'rejected'</span></span><br><span class="line"> self.value = value</span><br><span class="line"> <span class="keyword">if</span> (self.callback.length > 0) {</span><br><span class="line"> try {</span><br><span class="line"> self.callback[0].onRejected(value)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> self.callback[0].onRejected(err)</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"> try {</span><br><span class="line"> fn(resolve, reject)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">MyPromise.prototype.then = <span class="keyword">function</span>(onFulFilled, onRejected) {</span><br><span class="line"> <span class="built_in">let</span> self = this</span><br><span class="line"> <span class="keyword">if</span> (typeof onFulFilled !== <span class="string">'function'</span>) {</span><br><span class="line"> onFulFilled = () => {}</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (typeof onRejected !== <span class="string">'function'</span>) {</span><br><span class="line"> onRejected = () => {}</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> ( self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.callback.push({</span><br><span class="line"> onFulFilled,</span><br><span class="line"> onRejected</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">'fulfulled'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> try {</span><br><span class="line"> onFulFilled(self.value)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> onRejected(err)</span><br><span class="line"> }</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">'rejected'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> try {</span><br><span class="line"> onRejected(self.value)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> onRejected(err)</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="built_in">let</span> p2 = new MyPromise(<span class="keyword">function</span>(resolve, reject){</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> resolve(<span class="string">'成功'</span>)</span><br><span class="line"> }, 1000)</span><br><span class="line">})</span><br><span class="line">p2.then(<span class="keyword">function</span>(data){</span><br><span class="line"> console.log(<span class="string">'66'</span>, data)</span><br><span class="line">}, <span class="keyword">function</span>(reason){</span><br><span class="line"> console.log(reason)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="二、支持链式调用的promise"><a href="#二、支持链式调用的promise" class="headerlink" title="二、支持链式调用的promise"></a>二、支持链式调用的promise</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> MyPromise(fn) {</span><br><span class="line"> <span class="built_in">let</span> self = this</span><br><span class="line"> self.status = <span class="string">'pedding'</span></span><br><span class="line"> self.value = <span class="string">''</span></span><br><span class="line"> // 存储<span class="keyword">then</span>的两个函数</span><br><span class="line"> self.callback = []</span><br><span class="line"> <span class="keyword">function</span> resolve(value) {</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.status = <span class="string">'fulfulled'</span></span><br><span class="line"> self.value = value</span><br><span class="line"> <span class="keyword">if</span> (self.callback.length > 0) {</span><br><span class="line"> self.callback[0].onFulFilled(value)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> reject(value) {</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.status = <span class="string">'rejected'</span></span><br><span class="line"> self.value = value</span><br><span class="line"> <span class="keyword">if</span> (self.callback.length > 0) {</span><br><span class="line"> self.callback[0].onRejected(value)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> try {</span><br><span class="line"> fn(resolve, reject)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">MyPromise.prototype.then = <span class="keyword">function</span>(onFulFilled, onRejected) {</span><br><span class="line"> <span class="built_in">let</span> self = this</span><br><span class="line"> <span class="keyword">if</span> (typeof onFulFilled !== <span class="string">'function'</span>) {</span><br><span class="line"> onFulFilled = () => self.value</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (typeof onRejected !== <span class="string">'function'</span>) {</span><br><span class="line"> onRejected = () => self.value</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> new MyPromise(<span class="keyword">function</span>(resolve, reject){</span><br><span class="line"> <span class="keyword">if</span> ( self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.callback.push({</span><br><span class="line"> onFulFilled: (value) => {</span><br><span class="line"> try {</span><br><span class="line"> <span class="built_in">let</span> result = onFulFilled(value)</span><br><span class="line"> <span class="keyword">if</span> (result instanceof MyPromise) {</span><br><span class="line"> result.then(resolve, reject)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(result)</span><br><span class="line"> }</span><br><span class="line"> } catch(err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> onRejected: (value) => {</span><br><span class="line"> try {</span><br><span class="line"> <span class="built_in">let</span> result = onRejected(value)</span><br><span class="line"> <span class="keyword">if</span> (result instanceof MyPromise) {</span><br><span class="line"> result.then(resolve, reject)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(result)</span><br><span class="line"> }</span><br><span class="line"> } catch(err) {</span><br><span class="line"> reject(err)</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">if</span> ( self.status === <span class="string">'fulfulled'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> try {</span><br><span class="line"> <span class="built_in">let</span> result = onFulFilled(self.value)</span><br><span class="line"> <span class="keyword">if</span> (result instanceof MyPromise) {</span><br><span class="line"> result.then(resolve, reject)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(result)</span><br><span class="line"> }</span><br><span class="line"> } catch (err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</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">'rejected'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> try {</span><br><span class="line"> <span class="built_in">let</span> result = onRejected(self.value)</span><br><span class="line"> <span class="keyword">if</span> (result instanceof MyPromise) {</span><br><span class="line"> result.then(resolve, reject)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(result)</span><br><span class="line"> }</span><br><span class="line"> } catch (err) {</span><br><span class="line"> reject(err)</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="built_in">let</span> p2 = new MyPromise(<span class="keyword">function</span>(resolve, reject){</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> reject(<span class="string">'成功'</span>)</span><br><span class="line"> }, 1000)</span><br><span class="line">})</span><br><span class="line">p2</span><br><span class="line">.<span class="keyword">then</span>(<span class="keyword">function</span>(data){</span><br><span class="line"> <span class="built_in">return</span> new MyPromise(<span class="keyword">function</span>(resolve, rejected){</span><br><span class="line"> reject(<span class="string">'hahahahahahhh'</span>)</span><br><span class="line"> })</span><br><span class="line">}, <span class="keyword">function</span>(reason){</span><br><span class="line"> <span class="built_in">return</span> new MyPromise(<span class="keyword">function</span>(resolve, rejected){</span><br><span class="line"> resolve(<span class="string">'hahaha5555555hahahhh'</span>)</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line">.<span class="keyword">then</span>(<span class="keyword">function</span>(data){</span><br><span class="line"> console.log(<span class="string">'p2'</span>, data)</span><br><span class="line">}, <span class="keyword">function</span>(reason){</span><br><span class="line"> console.log(<span class="string">'p2 是'</span>, reason)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h3 id="三、支持链式调用的promise（去除冗余代码）"><a href="#三、支持链式调用的promise（去除冗余代码）" class="headerlink" title="三、支持链式调用的promise（去除冗余代码）"></a>三、支持链式调用的promise（去除冗余代码）</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> MyPromise(fn) {</span><br><span class="line"> <span class="built_in">let</span> self = this</span><br><span class="line"> self.status = <span class="string">'pedding'</span></span><br><span class="line"> self.value = <span class="string">''</span></span><br><span class="line"> // 存储<span class="keyword">then</span>的两个函数</span><br><span class="line"> self.callback = []</span><br><span class="line"> <span class="keyword">function</span> resolve(value) {</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.status = <span class="string">'fulfulled'</span></span><br><span class="line"> self.value = value</span><br><span class="line"> <span class="keyword">if</span> (self.callback.length > 0) {</span><br><span class="line"> self.callback[0].onFulFilled(value)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> reject(value) {</span><br><span class="line"> <span class="keyword">if</span> (self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.status = <span class="string">'rejected'</span></span><br><span class="line"> self.value = value</span><br><span class="line"> <span class="keyword">if</span> (self.callback.length > 0) {</span><br><span class="line"> self.callback[0].onRejected(value)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> try {</span><br><span class="line"> fn(resolve, reject)</span><br><span class="line"> } catch (err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">MyPromise.prototype.then = <span class="keyword">function</span>(onFulFilled, onRejected) {</span><br><span class="line"> <span class="built_in">let</span> self = this</span><br><span class="line"> <span class="keyword">if</span> (typeof onFulFilled !== <span class="string">'function'</span>) {</span><br><span class="line"> onFulFilled = () => self.value</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (typeof onRejected !== <span class="string">'function'</span>) {</span><br><span class="line"> onRejected = () => self.value</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">function</span> parse(result, resolve, reject) {</span><br><span class="line"> try {</span><br><span class="line"> <span class="keyword">if</span> (result instanceof MyPromise) {</span><br><span class="line"> result.then(resolve, reject)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> resolve(result)</span><br><span class="line"> }</span><br><span class="line"> } catch(err) {</span><br><span class="line"> reject(err)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> new MyPromise(<span class="keyword">function</span>(resolve, reject){</span><br><span class="line"> <span class="keyword">if</span> ( self.status === <span class="string">'pedding'</span>) {</span><br><span class="line"> self.callback.push({</span><br><span class="line"> onFulFilled: (value) => {</span><br><span class="line"> <span class="built_in">let</span> result = onFulFilled(value)</span><br><span class="line"> parse(result, resolve, reject)</span><br><span class="line"> },</span><br><span class="line"> onRejected: (value) => {</span><br><span class="line"> <span class="built_in">let</span> result = onRejected(value)</span><br><span class="line"> parse(result, resolve, reject)</span><br><span class="line"> }</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">'fulfulled'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> <span class="built_in">let</span> result = onFulFilled(self.value)</span><br><span class="line"> parse(result, resolve, reject)</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">'rejected'</span>) {</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> <span class="built_in">let</span> result = onRejected(self.value)</span><br><span class="line"> parse(result, resolve, reject)</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="built_in">let</span> p2 = new MyPromise(<span class="keyword">function</span>(resolve, reject){</span><br><span class="line"> setTimeout(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> reject(<span class="string">'成功'</span>)</span><br><span class="line"> }, 1000)</span><br><span class="line">})</span><br><span class="line">p2</span><br><span class="line">.<span class="keyword">then</span>(<span class="keyword">function</span>(data){</span><br><span class="line"> <span class="built_in">return</span> new MyPromise(<span class="keyword">function</span>(resolve, rejected){</span><br><span class="line"> reject(<span class="string">'hahahahahahhh'</span>)</span><br><span class="line"> })</span><br><span class="line">}, <span class="keyword">function</span>(reason){</span><br><span class="line"> <span class="built_in">return</span> new MyPromise(<span class="keyword">function</span>(resolve, rejected){</span><br><span class="line"> resolve(<span class="string">'hahaha5555555hahahhh'</span>)</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line">.<span class="keyword">then</span>(<span class="keyword">function</span>(data){</span><br><span class="line"> console.log(<span class="string">'p2'</span>, data)</span><br><span class="line">}, <span class="keyword">function</span>(reason){</span><br><span class="line"> console.log(<span class="string">'p2 是'</span>, reason)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/08/14/promise/" data-id="ckgujwhqi000iwsuvs9k5gnkp" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-开机自启动脚本" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/06/12/开机自启动脚本/" class="article-date">
<time datetime="2020-06-12T02:43:07.000Z" itemprop="datePublished">2020-06-12</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/06/12/开机自启动脚本/">开机自启动脚本</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="window操作系统"><a href="#window操作系统" class="headerlink" title="window操作系统"></a>window操作系统</h2><p><strong>以开机自动打开浏览器并访问一个页面为例</strong> </p>
<h3 id="一、使用XXX-bat脚本-把该脚本文件放到C-ProgramData-Microsoft-Windows-Start-Menu-Programs-Startup中"><a href="#一、使用XXX-bat脚本-把该脚本文件放到C-ProgramData-Microsoft-Windows-Start-Menu-Programs-Startup中" class="headerlink" title="一、使用XXX.bat脚本, 把该脚本文件放到C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup中"></a>一、使用XXX.bat脚本, 把该脚本文件放到C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup中</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">// open.bat文件 </span><br><span class="line">E:</span><br><span class="line"><span class="built_in">cd</span> E:\webpack-template\node-sever</span><br><span class="line">node ./open-broswer.js</span><br><span class="line">taskkill /f /im cmd.exe</span><br><span class="line"><span class="built_in">exit</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">// open-broswer.js</span><br><span class="line">const {<span class="built_in">exec</span>} = require(<span class="string">"child_process"</span>);</span><br><span class="line"><span class="keyword">function</span> openBroswer (url) {</span><br><span class="line"> // 拿到当前系统的参数</span><br><span class="line"> switch (process.platform) {</span><br><span class="line"> //mac系统使用 一下命令打开url在浏览器</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"darwin"</span>:</span><br><span class="line"> <span class="built_in">exec</span>(`open <span class="variable">${url}</span>`);</span><br><span class="line"> //win系统使用 一下命令打开url在浏览器</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"win32"</span>:</span><br><span class="line"> <span class="built_in">exec</span>(`start <span class="variable">${url}</span>`);</span><br><span class="line"> // 默认mac系统</span><br><span class="line"> default:</span><br><span class="line"> <span class="built_in">exec</span>(`open <span class="variable">${url}</span>`);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">openBroswer(<span class="string">'https://www.bilibili.com/'</span>);</span><br></pre></td></tr></table></figure>
<h3 id="2、将系统包装成pc端的app软件-类似qq、微信等开机自动打开"><a href="#2、将系统包装成pc端的app软件-类似qq、微信等开机自动打开" class="headerlink" title="2、将系统包装成pc端的app软件(类似qq、微信等开机自动打开)"></a>2、将系统包装成pc端的app软件(类似qq、微信等开机自动打开)</h3>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/06/12/开机自启动脚本/" data-id="ckgujwhqg000gwsuvo1zlz68h" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-小程序" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/06/08/小程序/" class="article-date">
<time datetime="2020-06-08T01:32:09.000Z" itemprop="datePublished">2020-06-08</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/06/08/小程序/">小程序</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、小程序和h5页面的性能对比"><a href="#一、小程序和h5页面的性能对比" class="headerlink" title="一、小程序和h5页面的性能对比"></a>一、小程序和h5页面的性能对比</h2><table>
<thead>
<tr>
<th style="text-align:left">类别</th>
<th style="text-align:left">运行环境</th>
<th style="text-align:left">开发标准</th>
<th style="text-align:left">运行流畅度</th>
<th style="text-align:left">发布</th>
<th style="text-align:left">系统权限</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">小程序</td>
<td style="text-align:left">依赖微信客户端,不能操作dom</td>
<td style="text-align:left">有一套自己的开发标准</td>
<td style="text-align:left">流畅</td>
<td style="text-align:left">有一套发布标准</td>
<td style="text-align:left">微信能获取到更多的系统权限，如网络通信状态、数据缓存能力等，这些系统级权限都能与微信小程序无缝衔接</td>
</tr>
<tr>
<td style="text-align:left">h5</td>
<td style="text-align:left">在浏览器里就能运行,可以操作dom</td>
<td style="text-align:left">就和写html页面一样</td>
<td style="text-align:left">有卡顿的感觉</td>
<td style="text-align:left">需要自己部署到服务器上</td>
<td style="text-align:left">少</td>
</tr>
</tbody>
</table>
<h2 id="二、小程序性能优化"><a href="#二、小程序性能优化" class="headerlink" title="二、小程序性能优化"></a>二、小程序性能优化</h2><p>小程序的启动过程：<br>初始化小程序——下载小程序代码——加载小程序代码——初始化小程序首页<br>针对启动过程进行优化：<br>1、初始化小程序我们无法控制<br>2、针对下载和加载小程序代码环节，常见的控制代码包大小的方法如下：<br> 精简代码，清除无用代码<br> 减少在代码包中直接嵌入的资源文件<br> 图片放在cdn，使用适当的图片格式<br> 分包<br>3、针对初始化首页环节<br> 提前请求：在页面 onLoad 阶段就可以发起异步请求，不用等页面 ready<br> 善用缓存：对一些变动频率很低的异步数据进行缓存，下次启动时可以直接利用<br> 优化交互：在首屏渲染的期间，利用 loading 效果或展示骨架图，来缓解用户等待的焦虑<br>4、不要频繁调用setData,与界面渲染无关的数据最好不要设置在 data 中</p>
<h2 id="三、小程序原理"><a href="#三、小程序原理" class="headerlink" title="三、小程序原理"></a>三、小程序原理</h2><p>微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用, 所有的页面更新，都需要通过对数据的更改来实现<br>小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理</p>
<h2 id="四、给标签设置背景图片在真机上显示不出来，开发者工具可以显示"><a href="#四、给标签设置背景图片在真机上显示不出来，开发者工具可以显示" class="headerlink" title="四、给标签设置背景图片在真机上显示不出来，开发者工具可以显示"></a>四、给标签设置背景图片在真机上显示不出来，开发者工具可以显示</h2><pre><code>解决：
1、图片使用base64
2、使用在线图片
</code></pre>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/06/08/小程序/" data-id="ckgujwhq9000dwsuvnuop14jn" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-javascript页面容错处理" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/06/03/javascript页面容错处理/" class="article-date">
<time datetime="2020-06-03T06:56:56.000Z" itemprop="datePublished">2020-06-03</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/06/03/javascript页面容错处理/">javascript页面容错处理</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="一、js脚本运行出错，导致页面空白，可以监听error事件定位错误"><a href="#一、js脚本运行出错，导致页面空白，可以监听error事件定位错误" class="headerlink" title="一、js脚本运行出错，导致页面空白，可以监听error事件定位错误"></a>一、js脚本运行出错，导致页面空白，可以监听error事件定位错误</h3><pre><code>window.onerror = handleErr
var txt = ""
function handleErr(msg,url,l) {
txt = "There was an error on this page.\n\n"
txt += "Error: " + msg + "\n"
txt += "URL: " + url + "\n"
txt += "Line: " + l + "\n\n"
txt += "Click OK to continue.\n\n"
alert(txt)
return false; // true：控制台不显示错误日志; false：控制台显示错误日志
}
可以通过img标签发送get请求 进行错误上报
</code></pre><h3 id="二、捕获错误"><a href="#二、捕获错误" class="headerlink" title="二、捕获错误"></a>二、捕获错误</h3><p>1、try catch——可以绕开错误,代码还可以继续运行<br> try {<br> …<br> } catch (error) {<br> // 代码出错后执行这里<br> console.log(‘错误’, error)<br> } finally {<br> // 不管代码是否报错，都将执行这里<br> …<br> }<br>2、抛异常<br> a、throw exception<br> b、new Error()</p>
<h3 id="三、跨域页面捕获异常-Script-error"><a href="#三、跨域页面捕获异常-Script-error" class="headerlink" title="三、跨域页面捕获异常-Script error"></a>三、跨域页面捕获异常-Script error</h3><pre><code>当引入的第三方脚本发生错误时, 该脚本中的 window.onerror 会将这类错误统一展示为 Script error 。所以为了解决这个问题一般有两种解决方案：
a、后端配置 Access-Control-Allow-origin、前端在 script 标签配置 crossorigin
b、劫持原生方法，使用 try/catch 绕过，将错误抛出
</code></pre><h3 id="四、将错误信息传给后台，保存到服务器上，在查看日志"><a href="#四、将错误信息传给后台，保存到服务器上，在查看日志" class="headerlink" title="四、将错误信息传给后台，保存到服务器上，在查看日志"></a>四、将错误信息传给后台，保存到服务器上，在查看日志</h3>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/06/03/javascript页面容错处理/" data-id="ckgujwhqe000ewsuvr2vxsdut" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-web网页安全" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/05/22/web网页安全/" class="article-date">
<time datetime="2020-05-22T06:02:51.000Z" itemprop="datePublished">2020-05-22</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/05/22/web网页安全/">web网页安全</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、XSS-跨站脚本攻击"><a href="#一、XSS-跨站脚本攻击" class="headerlink" title="一、XSS 跨站脚本攻击"></a>一、XSS 跨站脚本攻击</h2><p>原理：通过在web网页里植入可执行的脚本 盗取信息<br>防御：<br> 1、HttpOnly Cookie<br> 2、不信任用户输入, 对特殊字符进行转义<br> 3、建立白名单, 配置规则, 告诉浏览器可以加载和执行哪些资源, Content-Security-Policy(csp)<br> 开启该规则有两种方式<br> 1、设置meta标签<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"><br> 2、给header设置Content-Security-Policy字段<br>场景：当你的脚本被上传到服务端(存在数据库或者缓存中，常见于评论等功能)，当其他人请求此资源时，服务端就会将此脚本下发至客户端，客服端收到请求后，就会自动执行此脚本。</p>
<h2 id="二、CSRF-Cross-Site-Request-Forgery-，即跨站请求伪造"><a href="#二、CSRF-Cross-Site-Request-Forgery-，即跨站请求伪造" class="headerlink" title="二、CSRF(Cross Site Request Forgery)，即跨站请求伪造"></a>二、CSRF(Cross Site Request Forgery)，即跨站请求伪造</h2><p>原理: 盗用了用户的身份, 以用户的名义发请求<br>场景: 用户登录了某网站且未退出, 被诱惑访问了其他网站<br>防御:<br> 1、检查 header中的refer字段，断请求的来源<br> 2、get请求比较好伪造, get请求不要对数据做修改<br> 3、对账户交易的要加上验证码或token,token要后端生成，前端去获取<br> 4、前端实现：新添加了一个SameSite属性，它标识着在非同源的请求中，是否可以带上Cookie, 取值为Strict、Lax、None</p>
<p>疑问：cookie是不能跨域访问的，为什么会有csrf攻击？<br>浏览器会依据加载的域名附带上对应域名cookie。<br>就是如果用户在a网站登录且生成了授权的cookies，然后访问b网站，b站故意构造请求a站的请求（通过用script，img或者iframe、form之类的加载a站着个请求地址），浏览器会附带上a站此登录用户的授权cookie信息，这样就构成crsf</p>
<h2 id="三、点击劫持"><a href="#三、点击劫持" class="headerlink" title="三、点击劫持"></a>三、点击劫持</h2><p>原理：一种视觉上的欺骗手段, 如：在页面上覆盖一个透明的iframe, 此时用户将在不知情的情况下点击透明的iframe里的页面<br>防御：<br> 1、设置请求头的X-FRAME-OPTIONS字段, 控制访问iframe的来源</p>
<h2 id="四、URL跳转漏洞"><a href="#四、URL跳转漏洞" class="headerlink" title="四、URL跳转漏洞"></a>四、URL跳转漏洞</h2><p>原理: 攻击者做一个恶意链接，比如：qq号被盗 就是打开了一个恶意链接<br>eg: <a href="http://www.XX.XX.com/index?url=http://XXXXX" target="_blank" rel="noopener">http://www.XX.XX.com/index?url=http://XXXXX</a><br>前面看着是安全的链接, 参数url是一个恶意网址<br>防御：<br> 1、加入token对生成的链接进行校验<br> 2、对referer的限制</p>
<h2 id="五、SQL注入"><a href="#五、SQL注入" class="headerlink" title="五、SQL注入"></a>五、SQL注入</h2>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/05/22/web网页安全/" data-id="ckgujwhq00007wsuvqzilakip" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-http" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/05/22/http/" class="article-date">
<time datetime="2020-05-22T05:41:46.000Z" itemprop="datePublished">2020-05-22</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/05/22/http/">http</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、常用的状态码"><a href="#一、常用的状态码" class="headerlink" title="一、常用的状态码"></a>一、常用的状态码</h2><p>200：请求成功<br>301：重定向(长久), 从响应的Location里拿地址(搜索引擎)<br>302：重定向(临时, url请求的资源已经被暂时移动),从响应的Location里拿地址<br>304：Not Modified 请求资源从缓存里拿（协商缓存）<br>400：坏的请求, 客户端请求的语法不对<br>401：身份未认证<br>403：服务器端拒绝客户端请求<br>404：客户端静态资源不存在<br>405：请求方式被禁止<br>413：请求实体过长<br>500：服务端出错<br>502：bad gateway 错误网关<br>504：超时<br>505：服务器不支持http的版本</p>
<h2 id="二、TCP连接"><a href="#二、TCP连接" class="headerlink" title="二、TCP连接"></a>二、TCP连接</h2><p>1、3次握手：客户端和服务器端建立一条连接需要发3次报文<br> 第一次：客户端向服务器端发送请求，等候服务器端回应<br> 第二次：服务器端向客户端回应消息<br> 第三次：客户端告知服务器端收到消息了<br>2、为什么是3次握手不是2次呢？<br> 避免服务器端对失效的连接请求做出回应<br> eg：如果只有2次握手，当客户端向服务器端发出的请求 因为某些原因, 直到75s还没有收到任何回应, 当前连接就失效了，客户端会重新发送。如果那个失效的连接请求抵达了服务端, 服务器端做出了回应, 但此时的客户端早已进入CLOSED状态，不会在进行处理了，而服务器端将一直等下去，这样就浪费了服务端连接资源。</p>
<h2 id="三、ajax请求"><a href="#三、ajax请求" class="headerlink" title="三、ajax请求"></a>三、ajax请求</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">//步骤一:创建异步对象</span><br><span class="line">var ajax = new XMLHttpRequest();</span><br><span class="line">//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端</span><br><span class="line">ajax.open(<span class="string">'get'</span>,<span class="string">'getStar.php?starName='</span>+name);</span><br><span class="line">//步骤三:发送请求</span><br><span class="line">ajax.send();</span><br><span class="line">//步骤四:注册事件 onreadystatechange 状态改变就会调用</span><br><span class="line">ajax.onreadystatechange = <span class="function"><span class="title">function</span></span> () {</span><br><span class="line"> <span class="keyword">if</span> (ajax.readyState == 4 &&ajax.status == 200) {</span><br><span class="line"> //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的</span><br><span class="line"> console.log(ajax.responseText);//输入相应的内容</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">readyState有哪些值：</span><br><span class="line"> 0: 请求未初始化</span><br><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">status有哪些值</span><br><span class="line"> 200: <span class="string">"OK"</span></span><br><span class="line"> 404: 未找到页面</span><br></pre></td></tr></table></figure>
<h2 id="四、HTTP与HTTPS有什么区别？"><a href="#四、HTTP与HTTPS有什么区别？" class="headerlink" title="四、HTTP与HTTPS有什么区别？"></a>四、HTTP与HTTPS有什么区别？</h2><p>1、https,超文本传输安全协议, 默认443 端口, 采用ssl/tls公钥加密技术,较安全<br>2、http, 超文本传输协议,默认80 端口, 以明文方式发送内容, 安全性较差, 被用于在 Web 浏览器和网站服务器之间传递信息。<br>区别：<br>a、HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。<br>b、使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。<br>c、HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。<br>d、http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。<br>e、HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。</p>
<h2 id="五、HTTP2的新特性"><a href="#五、HTTP2的新特性" class="headerlink" title="五、HTTP2的新特性"></a>五、HTTP2的新特性</h2><p>二进制分帧<br>首部压缩<br>流量控制<br>多路复用<br>请求优先级<br>服务器推送</p>
<h2 id="六、TCP和UPD的区别"><a href="#六、TCP和UPD的区别" class="headerlink" title="六、TCP和UPD的区别"></a>六、TCP和UPD的区别</h2><p>1、TCP是面向连接的可靠传输(报文), 传输数据量比较大，速度比较慢<br>2、UPD是面向非连接的不可靠传输(数据包), 传输数据量比较小，速度比较快<br>连接的意思：<br> 非连接：不管对方是什么状态，直接发送消息，不关心对方有没有回复，比如：发短信<br> 连接：通信之前必须和对方建立可靠连接， 比如：打电话</p>
<h2 id="七、说说对http的理解"><a href="#七、说说对http的理解" class="headerlink" title="七、说说对http的理解"></a>七、说说对http的理解</h2><p>http超文本传输协议，是基于tcp的可靠传输，定义了客户端、服务端请求和响应的规则，是无状态的，不会记录用户身份</p>
<h2 id="八、ajax请求方式有哪些及区别"><a href="#八、ajax请求方式有哪些及区别" class="headerlink" title="八、ajax请求方式有哪些及区别"></a>八、ajax请求方式有哪些及区别</h2><p>get：获取、查询数据<br>post：新增、创建数据<br>put：修改数据<br>patch：局部更新数据<br>delete：删除数据</p>
<p>put和patch的区别：<br>假设我们有一个UserInfo，里面有userId， userName， userGender等10个字段。可你的编辑功能因为需求，在某个特别的页面里只能修改userName，这时候的更新怎么做？<br>人们通常(为徒省事)把一个包含了修改后userName的完整userInfo对象传给后端，做完整更新。但仔细想想，这种做法很浪费带宽<br>于是patch诞生，只传一个userName到指定资源去，表示该请求是一个局部更新，后端仅更新接收到的字段</p>
<h2 id="九、现代浏览器在与服务器建立了一个-TCP-连接后是否会在一个-HTTP-请求完成后断开？什么情况下会断开？"><a href="#九、现代浏览器在与服务器建立了一个-TCP-连接后是否会在一个-HTTP-请求完成后断开？什么情况下会断开？" class="headerlink" title="九、现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开？什么情况下会断开？"></a>九、现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开？什么情况下会断开？</h2><p>在http1.0版本里, 一个服务器在发送完一个 HTTP 响应后，会断开 TCP 链接, 但是这样代价有点大, 每次请求都会重新建立和断开 TCP 连接, 所以某些服务器支持设置Connection: keep-alive, 作用是完成这个 HTTP 请求之后，不要断开 HTTP 请求使用的 TCP 连接，只有在请求报头中声明 Connection: close 才会在请求完成后关闭连接。</p>
<h2 id="十、一个-TCP-连接可以对应几个-HTTP-请求？"><a href="#十、一个-TCP-连接可以对应几个-HTTP-请求？" class="headerlink" title="十、一个 TCP 连接可以对应几个 HTTP 请求？"></a>十、一个 TCP 连接可以对应几个 HTTP 请求？</h2><p>了解了第九个问题之后，其实这个问题已经有了答案，如果维持连接，一个 TCP 连接是可以发送多个 HTTP 请求的。</p>
<h2 id="十一、一个-TCP-连接中-HTTP-请求发送可以一起发送么（比如一起发三个请求，再三个响应一起接收）？"><a href="#十一、一个-TCP-连接中-HTTP-请求发送可以一起发送么（比如一起发三个请求，再三个响应一起接收）？" class="headerlink" title="十一、一个 TCP 连接中 HTTP 请求发送可以一起发送么（比如一起发三个请求，再三个响应一起接收）？"></a>十一、一个 TCP 连接中 HTTP 请求发送可以一起发送么（比如一起发三个请求，再三个响应一起接收）？</h2><p>不可以，这样的话 浏览器是没有办法根据响应结果来判断响应对应于哪一个请求的。发送的请求必须有顺序，时间不能重叠。<br>HTTP2提供了 Multiplexing 多路传输特性， 可以在一个 TCP 连接中同时完成多个 HTTP 请求</p>
<h2 id="十二、浏览器对同一-Host-建立-TCP-连接到数量有没有限制？"><a href="#十二、浏览器对同一-Host-建立-TCP-连接到数量有没有限制？" class="headerlink" title="十二、浏览器对同一 Host 建立 TCP 连接到数量有没有限制？"></a>十二、浏览器对同一 Host 建立 TCP 连接到数量有没有限制？</h2><p>有限制，不同浏览器限制不一样，</p>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/05/22/http/" data-id="ckgujwhpy0005wsuvs9abzogs" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-vue框架" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/05/21/vue框架/" class="article-date">
<time datetime="2020-05-21T05:57:45.000Z" itemprop="datePublished">2020-05-21</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/05/21/vue框架/">vue框架</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、数据双向绑定"><a href="#一、数据双向绑定" class="headerlink" title="一、数据双向绑定"></a>一、数据双向绑定</h2><pre><code>1、标签内：使用{{}}
eg：<p>{{message}}</p>
2、标签的属性值：v-bind:属性名(v-bind可以省略)
eg：<p v-bind:title="message">热烈欢迎</p>
eg：<p :title="message">热烈欢迎</p>
eg：<p :title="index === 0 ? '我是title' : ''">热烈欢迎</p>
</code></pre><h2 id="二、条件渲染"><a href="#二、条件渲染" class="headerlink" title="二、条件渲染"></a>二、条件渲染</h2><pre><code>1、控制元素显示与隐藏(dom节点不会生成): 使用v-if、v-else、v-else-if
eg：
<div>
<div v-if="num > 5">{{num}}大于5</div>
<div v-else-if="num > 2">{{num}}大于2小于5</div>
<div v-else>{{num}}小于2</div>
</div>
2、控制元素显示与隐藏(dom节点会生成，通过display为none或block进行隐藏): v-show
eg:
<p v-show="false">隐藏</p>
<p v-show="true">显示</p>
</code></pre><h2 id="三、循环"><a href="#三、循环" class="headerlink" title="三、循环"></a>三、循环</h2><pre><code>使用: v-for, 形式: site in sites
eg：
<div>
<div v-for="(itemNum, index) in numLists" :key="index">
{{ index+1 }}、{{ itemNum }}
</div>
</div>
</code></pre><h2 id="四、事件绑定"><a href="#四、事件绑定" class="headerlink" title="四、事件绑定"></a>四、事件绑定</h2><pre><code>1、绑定使用：v-on, 简写：@click
eg：
<Template>
<div>
<div v-for="(itemNum, index) in numLists" :key="index" @click="sayNum(itemNum)">
{{ index+1 }}、{{ itemNum }}
</div>
</div>
</Template>
<script>
export default {
"name": 'App',
data: function() {
return {
numLists: [200, 121, 4343, 456]
}
},
methods: {
sayNum(itemNum) {
this.numLists.push(itemNum)
}
}
}
</script>
2、事件修饰符
v-on:click.once: 只调用一次
v-on:click.stop: 阻止事件冒泡
v-on:click.self: 只当事件在该元素本身（而不是子元素）时触发
v-on:click.prevent
v-on:click.capture
</code></pre><h2 id="五、表单与业务数据的双向绑定"><a href="#五、表单与业务数据的双向绑定" class="headerlink" title="五、表单与业务数据的双向绑定"></a>五、表单与业务数据的双向绑定</h2><pre><code>使用: v-model
eg:
<div>
<p>{{ test }}</p>
<input v-model="test">
</div>
</code></pre><h2 id="六、计算属性computed"><a href="#六、计算属性computed" class="headerlink" title="六、计算属性computed"></a>六、计算属性computed</h2><pre><code>eg：监听到numLists数组发生改变, lastNum 就会重新计算值
<Template>
<div>
<div v-for="(itemNum, index) in numLists" :key="index" @click="addNum(itemNum)">
{{ index+1 }}、{{ itemNum }}
</div>
<div>获取数组的最后一个元素{{ lastNum }}</div>
</div>
</Template>
<script>
export default {
"name": 'App',
data: function() {
return {
numLists: [200, 121, 4343, 456]
}
},
methods: {
addNum(itemNum) {
this.numLists.push(itemNum)
}
}
computed: {
lastNum() {
const length = this.numLists.length
return this.numLists[length -1 ]
}
}
}
</script>
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
</code></pre><h2 id="七、监听属性watch"><a href="#七、监听属性watch" class="headerlink" title="七、监听属性watch"></a>七、监听属性watch</h2><pre><code>eg：监听数据变化, 执行对应操作
<template>
<div>
<input v-model="meters" type="text">米
<input v-model="kilometers" type="text">千米
</div>
</template>
<script>
export default {
"name": 'App',
data: function() {
return {
meters: 0,
kilometers: 0
}
},
watch: {
meters(val) {
this.kilometers = val * 1000
},
kilometers(val) {
this.meters = val / 1000
}
}
}
</script>
</code></pre><h2 id="八、自定义-全局指令和局部指令"><a href="#八、自定义-全局指令和局部指令" class="headerlink" title="八、自定义 全局指令和局部指令"></a>八、自定义 全局指令和局部指令</h2><pre><code>eg: 注册一个全局指令
<template>
<div>
<div v-changeColor="{text: '使用自定义指令', color: 'red'}"></div>
</div>
</template>
<script>
import Vue from 'vue'
Vue.directive('changeColor', function(el, binding){
el.innerHTML = text
el.style.color = color
})
</script>
</code></pre><h2 id="九、生命周期"><a href="#九、生命周期" class="headerlink" title="九、生命周期"></a>九、生命周期</h2><pre><code>beforeCreated —— 创建组件实例之前
created —— 创建组件实例
beforeMounted —— 组件挂载到页面之前
mounted —— 组件挂载到页面, 在此处虚拟的dom节点被替换成真实的dom节点, 并插入dom树中
beforeUpdated —— 组件更新之前
updated —— 组件更新
beforeDestoryed —— 组件销毁之前
destoryed —— 组件销毁
activated —— 组件被激活时调用
deactivated —— 组件被移除时调用
</code></pre><h2 id="十、注册全局组件和局部组件"><a href="#十、注册全局组件和局部组件" class="headerlink" title="十、注册全局组件和局部组件"></a>十、注册全局组件和局部组件</h2><pre><code>注册：Vue.component(tagName, {
// 声明 props集合
props: {
propA: Number,
propB: [String, Number],
...
},
// 渲染模板
template: '<div></div>',
data: function () {
return {}
},
methods: {},
...
})
调用：<tagName></tagName>
</code></pre><h2 id="十一、组件之间的通信"><a href="#十一、组件之间的通信" class="headerlink" title="十一、组件之间的通信"></a>十一、组件之间的通信</h2><pre><code>1、父传子：
a、通过props——单向传递, 子组件不能修改
b、通过this.$children[0]字段 获取子组件的属性和方法
c、在子组件上声明ref, 通过this.$refs字段 获取子组件的属性和方法
2、子传父
a、通过$emit派发事件
b、通过this.$parent字段 获取父组件的属性和方法
3、隔代通信
$attrs可以获取父作用域传入的值(不包括props中的).
$listeners相当于父作用域的事件监听器
4、兄弟组件之间的通信
a、先子传父, 再父传子
b、借助中央事件总线
var bus = new Vue();
A组件发送事件: bus.$emit('test', '我是A组件');
B组件监听: bus.$on('test', (params)=> {});
5、嵌套很深的组件之间的通信
父组件中通过provide来提供变量。子组件中通过inject来注入变量
6、状态管理-vuex
Mutation集合：声明一系列方法 操作修改state中的值 .....
</code></pre><h2 id="十一、-vue文件代码模板"><a href="#十一、-vue文件代码模板" class="headerlink" title="十一、.vue文件代码模板"></a>十一、.vue文件代码模板</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <div id=<span class="string">"app"</span>></span><br><span class="line"> <router-view /></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"><script></span><br><span class="line"> import userImg from <span class="string">'../assets/img/user-unknown.png'</span></span><br><span class="line"> <span class="built_in">export</span> default {</span><br><span class="line"> <span class="string">"name"</span>: <span class="string">'App'</span>,</span><br><span class="line"> // 页面绑定的数据</span><br><span class="line"> data: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> <span class="built_in">return</span> {}</span><br><span class="line"> },</span><br><span class="line"> // 计算属性</span><br><span class="line"> computed: {},</span><br><span class="line"> // 监听属性</span><br><span class="line"> watch: {},</span><br><span class="line"> // 方法集合</span><br><span class="line"> methods: {},</span><br><span class="line"> // 局部自定义指令</span><br><span class="line"> directives: {},</span><br><span class="line"> // 封装局部组件</span><br><span class="line"> components: {}</span><br><span class="line"> }</span><br><span class="line"></script></span><br><span class="line"><style lang=<span class="string">'less'</span>></span><br><span class="line"> @import <span class="string">'./index.less'</span>;</span><br><span class="line"> .photo {</span><br><span class="line"> height: 20px;</span><br><span class="line"> background: red;</span><br><span class="line"> }</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
<h2 id="十二、页面跳转传参"><a href="#十二、页面跳转传参" class="headerlink" title="十二、页面跳转传参"></a>十二、页面跳转传参</h2><pre><code>1、location.href
2、router-link或a标签
3、this.$router.push({
name: 'page1', // 用path接的话，获取不到参数
params: {
id: 1723
}
})
4、this.$router.push({
path: '/main/role',// 或者name: 'Role
query: {
id: 1723
}
})
在页面里通过this.$route获取url的参数
params和query的区别：
a、query用path或name引入, url地址显示为：http://localhost:8080/page1?id=1723, 页面大刷新 数据不会丢失
b、params用name引入, url地址显示为：http://localhost:8080/page1, 页面大刷新 数据会丢失
route和router的区别：
a、route：获取当前页面的路由信息，解析参数
b、router：是全局路由VueRouter的一个实例，可以跳转页面
</code></pre><h2 id="十三、vuex——管理共享数据"><a href="#十三、vuex——管理共享数据" class="headerlink" title="十三、vuex——管理共享数据"></a>十三、vuex——管理共享数据</h2><pre><code>核心模块：
state：定义变量，保存数据
getters：定义一系列方法, 方法的作用类似computed
mutations：定义一系列更改state数据的回调方法, 不可以含异步回调
action: 定义一系列更改state数据的回调方法, 可以含异步回调
dispatch('方法名') 会触发action里面的方法
commit('方法名') 会触发mutations里面的方法
</code></pre><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line">//main.js</span><br><span class="line">const store = new Vuex.Store({</span><br><span class="line">state:{</span><br><span class="line"> products: [</span><br><span class="line"> {name: <span class="string">'鼠标'</span>, price: 20},</span><br><span class="line"> {name: <span class="string">'键盘'</span>, price: 40},</span><br><span class="line"> {name: <span class="string">'耳机'</span>, price: 60},</span><br><span class="line"> {name: <span class="string">'显示屏'</span>, price: 80}</span><br><span class="line"> ]</span><br><span class="line">},</span><br><span class="line">getters: {</span><br><span class="line"> saleProducts: (state) => {</span><br><span class="line"> <span class="built_in">let</span> saleProducts = state.products.map( product => {</span><br><span class="line"> <span class="built_in">return</span> {</span><br><span class="line"> name: product.name,</span><br><span class="line"> price: product.price / 2</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">return</span> saleProducts;</span><br><span class="line"> }</span><br><span class="line">},</span><br><span class="line">mutations:{</span><br><span class="line"> minusPrice (state, payload ) {</span><br><span class="line"> <span class="built_in">let</span> newPrice = state.products.forEach( product => {</span><br><span class="line"> product.price -= payload</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">},</span><br><span class="line">actions:{ //添加actions</span><br><span class="line"> minusPriceAsync( context, payload ) {</span><br><span class="line"> setTimeout( () => {</span><br><span class="line"> context.commit( <span class="string">'minusPrice'</span>, payload ); //context提交</span><br><span class="line"> }, 2000)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line">// page.vue</span><br><span class="line"><span class="built_in">export</span> default {</span><br><span class="line"> <span class="function"><span class="title">data</span></span> () {</span><br><span class="line"> <span class="built_in">return</span> {</span><br><span class="line"> products: this.<span class="variable">$store</span>.state.products</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> <span class="function"><span class="title">minusPrice</span></span>() {</span><br><span class="line"> this.<span class="variable">$store</span>.commit(<span class="string">'minusPrice'</span>, 2);</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="title">minusPriceAsync</span></span>() {</span><br><span class="line"> this.<span class="variable">$store</span>.dispatch(<span class="string">'minusPriceAsync'</span>, 5); //分发actions中的minusPriceAsync这个异步函数</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="十四、vue-双向绑定的原理"><a href="#十四、vue-双向绑定的原理" class="headerlink" title="十四、vue 双向绑定的原理"></a>十四、vue 双向绑定的原理</h2><p>通过重写Object.defineProperty的set和get方法去更改属性值。</p>
<pre><code>let Person = {}
Object.defineProperty(Person, 'name', {
value: '杨洋'
})
Person.name = '小刚'
// Person = {name: '杨洋'} name值不可改
// delete Person.name false 不能删除
// Object.keys(Person) []
Object.defineProperty(Person, 'name', {
value: '杨洋',
writable: true,
configurable: true,
enumerable: true
})
Person.name = '小红'
// Person = {name: '小红'} name值可改
// Object.keys(Person) ['name']
// delete Person.name true 可删除
let age = 12
Object.defineProperty(Person, 'age', {
writable: true,
get: function() {
console.log('获取属性值')
return value
},
set: function(value ) {
console.log('设置属性值', value)
age = value
},
})
// Person.age 12
Person.age = 80
// Person.age 80
</code></pre><table>
<thead>
<tr>
<th style="text-align:left">描述符</th>
<th style="text-align:left">作用</th>
<th style="text-align:left">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">writable</td>
<td style="text-align:left">属性值是否可修改</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">value</td>
<td style="text-align:left">设置属性值</td>
<td style="text-align:left">undefined</td>
</tr>
<tr>
<td style="text-align:left">configurable</td>
<td style="text-align:left">属性值是否可删除、可配置</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">enumerable</td>
<td style="text-align:left">描述属性是否会出现在for in 或者 Object.keys()的遍历中</td>
<td style="text-align:left">false</td>
</tr>
<tr>
<td style="text-align:left">get</td>
<td style="text-align:left">获取属性值</td>
<td style="text-align:left">undefined</td>
</tr>
<tr>
<td style="text-align:left">set</td>
<td style="text-align:left">设置属性值</td>
<td style="text-align:left">undefined</td>
</tr>
</tbody>
</table>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/05/21/vue框架/" data-id="ckgujwhqj000jwsuvb6w8ua1i" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-算法题" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/05/13/算法题/" class="article-date">
<time datetime="2020-05-13T08:26:21.000Z" itemprop="datePublished">2020-05-13</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/05/13/算法题/">算法题</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h5 id="1、实现阶乘"><a href="#1、实现阶乘" class="headerlink" title="1、实现阶乘"></a>1、实现阶乘</h5><p>阶乘：<br> 0! = 1<br> 1! = 1<br> 2! = 2 <em> 1<br> 3! = 3 </em> 2 <em> 1<br> 4! = 4 </em> 3 <em> 2 </em> 1<br> 5! = 5 <em> 4 </em> 3 <em> 2 </em> 1<br> 6! = 6 <em> 5 </em> 4 <em> 3 </em> 2 * 1<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">// 方法一</span><br><span class="line"><span class="keyword">function</span> factorial (num) {</span><br><span class="line"> <span class="keyword">if</span> (num < 0) {</span><br><span class="line"> <span class="built_in">return</span> -1</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (num === 0 || num === 1) {</span><br><span class="line"> <span class="built_in">return</span> 1</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">return</span> num * factorial(num - 1)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">// 方法二</span><br><span class="line"><span class="keyword">function</span> factorial (num) {</span><br><span class="line"> <span class="built_in">let</span> result = 1</span><br><span class="line"> <span class="keyword">while</span> (num) {</span><br><span class="line"> result = result * num</span><br><span class="line"> num--</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> result</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h5 id="2、编写一个函数，输入两个数组，输出它们的交集。输出数组中不含重复的元素，元素排列顺序可随意。"><a href="#2、编写一个函数，输入两个数组，输出它们的交集。输出数组中不含重复的元素，元素排列顺序可随意。" class="headerlink" title="2、编写一个函数，输入两个数组，输出它们的交集。输出数组中不含重复的元素，元素排列顺序可随意。"></a>2、编写一个函数，输入两个数组，输出它们的交集。输出数组中不含重复的元素，元素排列顺序可随意。</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="built_in">test</span> (arr1, arr2) {</span><br><span class="line"> <span class="built_in">let</span> newArr = []</span><br><span class="line"> arr1.forEach(<span class="keyword">function</span>(item){</span><br><span class="line"> <span class="keyword">if</span> (arr2.includes(item)) {</span><br><span class="line"> newArr.push(item) </span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">return</span> newArr</span><br><span class="line">}</span><br><span class="line"><span class="built_in">test</span>([1,2,3,3,6,8,0], [2,2,5,9,4,8])</span><br></pre></td></tr></table></figure>
<h5 id="3、判断两个字符串是否同构。"><a href="#3、判断两个字符串是否同构。" class="headerlink" title="3、判断两个字符串是否同构。"></a>3、判断两个字符串是否同构。</h5><pre><code>比如 s = "egg", t = "add", s和t就是同构
</code></pre><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> str1 = <span class="string">'asccdssaa'</span></span><br><span class="line"><span class="built_in">let</span> str2 = <span class="string">'tdaaeddtt'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="built_in">test</span>(str) {</span><br><span class="line"> <span class="built_in">let</span> arr = []</span><br><span class="line"> <span class="keyword">for</span>(<span class="built_in">let</span> char of str) {</span><br><span class="line"> <span class="keyword">if</span> (!arr.includes(char)) {</span><br><span class="line"> arr.push(char)</span><br><span class="line"> str = str.replace(new RegExp(char,<span class="string">'g'</span>), arr.indexOf(char) + 1)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> str</span><br><span class="line">}</span><br><span class="line"><span class="built_in">test</span>(str1) === <span class="built_in">test</span>(str2)</span><br></pre></td></tr></table></figure>
<h5 id="4、判断一个页面使用最多的3个标签及使用次数"><a href="#4、判断一个页面使用最多的3个标签及使用次数" class="headerlink" title="4、判断一个页面使用最多的3个标签及使用次数"></a>4、判断一个页面使用最多的3个标签及使用次数</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> getTagPage(str) {</span><br><span class="line"> <span class="built_in">let</span> nodes = Array.from(document.getElementsByTagName(<span class="string">'*'</span>))</span><br><span class="line"> <span class="built_in">let</span> obj = {}</span><br><span class="line"> nodes.forEach(node => {</span><br><span class="line"> <span class="built_in">let</span> tagName = node.tagName.toLowerCase()</span><br><span class="line"> <span class="keyword">if</span> (obj[tagName]) {</span><br><span class="line"> obj[tagName] = obj[tagName] + 1</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> obj[tagName] = 1</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">return</span> obj</span><br><span class="line">}</span><br><span class="line">var result = getTagPage()</span><br><span class="line">var sortArr = Object.keys(result).sort(<span class="keyword">function</span>(a, b){</span><br><span class="line"> <span class="built_in">return</span> result[b] - result[a]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h5 id="5、实现浅拷贝、深拷贝"><a href="#5、实现浅拷贝、深拷贝" class="headerlink" title="5、实现浅拷贝、深拷贝"></a>5、实现浅拷贝、深拷贝</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> obj = {</span><br><span class="line"> name: <span class="string">'yy'</span>,</span><br><span class="line"> age: 13,</span><br><span class="line"> like: [<span class="string">'sing'</span>, <span class="string">'dance'</span>]</span><br><span class="line">}</span><br><span class="line">// 浅拷贝</span><br><span class="line"><span class="keyword">function</span> shallowClone(obj) {</span><br><span class="line"> <span class="built_in">let</span> newObj = {}</span><br><span class="line"> <span class="keyword">for</span>(<span class="built_in">let</span> key <span class="keyword">in</span> obj) {</span><br><span class="line"> newObj[key] = obj[key]</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> newObj</span><br><span class="line">}</span><br><span class="line">shallowClone(obj)</span><br><span class="line">// 深拷贝</span><br><span class="line"><span class="keyword">function</span> deepClone(obj) {</span><br><span class="line"> <span class="built_in">let</span> newObj = Array.isArray(obj) ? [] : {}</span><br><span class="line"> <span class="keyword">for</span>(<span class="built_in">let</span> key <span class="keyword">in</span> obj) {</span><br><span class="line"> <span class="keyword">if</span> (typeof obj[key] === <span class="string">'object'</span>) {</span><br><span class="line"> newObj[key] = deepClone(obj[key])</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> newObj[key] = obj[key]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> newObj</span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> obj = {</span><br><span class="line"> name: <span class="string">'yy'</span>,</span><br><span class="line"> age: 13,</span><br><span class="line"> like: [<span class="string">'sing'</span>, <span class="string">'dance'</span>]</span><br><span class="line">}</span><br><span class="line">deepClone(obj)</span><br></pre></td></tr></table></figure>
<h5 id="6、实现防抖、节流"><a href="#6、实现防抖、节流" class="headerlink" title="6、实现防抖、节流"></a>6、实现防抖、节流</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">// 防抖</span><br><span class="line"><span class="keyword">function</span> debounce(fn, time) {</span><br><span class="line"> <span class="built_in">let</span> timeId = null</span><br><span class="line"> <span class="built_in">return</span> () => {</span><br><span class="line"> clearTimeout(timeId)</span><br><span class="line"> timeId = setTimeout(() => {</span><br><span class="line"> fn()</span><br><span class="line"> }, time)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">document.body.onclick = debounce(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> console.log(<span class="string">'节流'</span>)</span><br><span class="line">}, 1000)</span><br><span class="line">// 节流</span><br><span class="line"><span class="keyword">function</span> throtte(fn, time) {</span><br><span class="line"> <span class="built_in">let</span> startTime = 0</span><br><span class="line"></span><br><span class="line"> <span class="built_in">return</span> () => {</span><br><span class="line"> <span class="built_in">let</span> endTime = Date.now()</span><br><span class="line"> <span class="keyword">if</span> (endTime - startTime > time) {</span><br><span class="line"> fn()</span><br><span class="line"> startTime = endTime</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">document.body.onclick = throtte(<span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> console.log(<span class="string">'防抖'</span>)</span><br><span class="line">}, 1000)</span><br></pre></td></tr></table></figure>
<h5 id="7、实现call"><a href="#7、实现call" class="headerlink" title="7、实现call"></a>7、实现call</h5><pre><code>参考文献：https://github.com/mqyqingfeng/Blog/issues/12
</code></pre><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> <span class="built_in">test</span> = {</span><br><span class="line"> name: <span class="string">'test'</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> obj = {</span><br><span class="line"> name: <span class="string">'哈哈'</span>,</span><br><span class="line"> speak: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> console.log(this.name, arguments)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Function.prototype.myCall = <span class="keyword">function</span>(context, ...args) {</span><br><span class="line"> // _fn_是任意起的，之后会被删除</span><br><span class="line"> <span class="built_in">let</span> context = context || window;</span><br><span class="line"> context._fn_ = this; //在obj上添加_fn_属性，值是this(要调用此方法的那个函数对象)。</span><br><span class="line"> context._fn_(...args); //在obj上调用函数,那函数的this值就是obj.</span><br><span class="line"> delete context._fn_; </span><br><span class="line">}</span><br><span class="line">// 原生js</span><br><span class="line">obj.speak.call(<span class="built_in">test</span>, 1, 2, 3)</span><br><span class="line">// 自定义call</span><br><span class="line">obj.speak.myCall(<span class="built_in">test</span>, 1, 2, 3)</span><br><span class="line"></span><br><span class="line">// 解题思路</span><br><span class="line">将<span class="built_in">test</span>构造为如下样子</span><br><span class="line"><span class="built_in">let</span> <span class="built_in">test</span> = {</span><br><span class="line"> name: <span class="string">'test'</span>,</span><br><span class="line"> _fn_: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> console.log(this.name, arguments)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">1、将函数设为对象的属性</span><br><span class="line">2、执行该函数</span><br><span class="line">3、删除该属性</span><br></pre></td></tr></table></figure>
<h5 id="8、实现apply（原理和call差不多）"><a href="#8、实现apply（原理和call差不多）" class="headerlink" title="8、实现apply（原理和call差不多）"></a>8、实现apply（原理和call差不多）</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> <span class="built_in">test</span> = {</span><br><span class="line"> name: <span class="string">'test'</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> obj = {</span><br><span class="line"> name: <span class="string">'哈哈'</span>,</span><br><span class="line"> speak: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> console.log(this.name, arguments)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Function.prototype.myApply = <span class="keyword">function</span>(context, arr) {</span><br><span class="line"> var context = context || window</span><br><span class="line"> context._fn_ = this</span><br><span class="line"> <span class="keyword">if</span> (!arr || arr.length === 0) {</span><br><span class="line"> context._fn_()</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">let</span> params = []</span><br><span class="line"> <span class="keyword">for</span>(<span class="built_in">let</span> i = 0 ; i<arr.length ; i++){</span><br><span class="line"> params.push(arr[i]) ;</span><br><span class="line"> }</span><br><span class="line"> context._fn_(...params)</span><br><span class="line"> }</span><br><span class="line"> delete context._fn_</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 原生js</span><br><span class="line">obj.speak.apply(<span class="built_in">test</span>, [1, 2, 3])</span><br><span class="line">// 自定义apply</span><br><span class="line">obj.speak.myApply(<span class="built_in">test</span>, [1, 2, 3])</span><br></pre></td></tr></table></figure>
<h5 id="9、实现bind"><a href="#9、实现bind" class="headerlink" title="9、实现bind"></a>9、实现bind</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> <span class="built_in">test</span> = {</span><br><span class="line"> name: <span class="string">'test'</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">let</span> obj = {</span><br><span class="line"> name: <span class="string">'哈哈'</span>,</span><br><span class="line"> speak: <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> this.habit = <span class="string">'shopping'</span>;</span><br><span class="line"> console.log(this.name, arguments)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Function.prototype.myBind = <span class="keyword">function</span>(context) {</span><br><span class="line"> var self = this</span><br><span class="line"> // 接受<span class="built_in">bind</span>函数的参数，在此处为1，2，3</span><br><span class="line"> var args = Array.from(arguments).slice(1)</span><br><span class="line"> <span class="built_in">let</span> fBound = <span class="function"><span class="title">function</span></span>() {</span><br><span class="line"> // 接受<span class="built_in">bind</span>返回的函数的参数，在此处为4，5</span><br><span class="line"> var args1 = Array.from(arguments)</span><br><span class="line"> // 当<span class="built_in">bind</span>返回的函数作为构造函数使用时,要判断一下</span><br><span class="line"> self.apply(this instanceof fBound ? this : context, args.concat(args1))</span><br><span class="line"> }</span><br><span class="line"> fBound.prototype = Object.create(this.prototype);</span><br><span class="line"> <span class="built_in">return</span> fBound</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 原生js</span><br><span class="line">var s = obj.speak.bind(<span class="built_in">test</span>, 1, 2, 3)</span><br><span class="line">// 自定义<span class="built_in">bind</span></span><br><span class="line">var s = obj.speak.myBind(<span class="built_in">test</span>, 1, 2, 3)</span><br><span class="line">s(4, 5)</span><br><span class="line">// 复杂的情况</span><br><span class="line"><span class="built_in">let</span> s1 = new s()</span><br></pre></td></tr></table></figure>
<h5 id="9、从数组中获取两数之和等于给定的数值"><a href="#9、从数组中获取两数之和等于给定的数值" class="headerlink" title="9、从数组中获取两数之和等于给定的数值"></a>9、从数组中获取两数之和等于给定的数值</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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">function</span> getArr (arr, target) {</span><br><span class="line"> <span class="built_in">let</span> obj = {}</span><br><span class="line"> <span class="built_in">let</span> result = []</span><br><span class="line"> arr.forEach((item, index) => {</span><br><span class="line"> <span class="built_in">let</span> temp = target - item</span><br><span class="line"> <span class="keyword">if</span> (obj[item]) {</span><br><span class="line"> result.push([obj[item], index])</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> obj[temp] = index</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> getArr(nums, k) {</span><br><span class="line">// 1.数组的长度必须大于等于2</span><br><span class="line"><span class="keyword">if</span> (nums.length <= 1) { <span class="built_in">return</span> <span class="literal">false</span> }</span><br><span class="line">// 2.先对数组升序排序</span><br><span class="line"> nums.sort(<span class="keyword">function</span> (a, b) {</span><br><span class="line"> <span class="built_in">return</span> a > b</span><br><span class="line">})</span><br><span class="line">var i = 0;</span><br><span class="line">var j = nums.length - 1;</span><br><span class="line">var result = []</span><br><span class="line"><span class="keyword">while</span> (i < j) {</span><br><span class="line"> <span class="keyword">if</span> (nums[i] + nums[j] == k) {</span><br><span class="line"> result.push([nums[i], nums[j]])</span><br><span class="line"> j--</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (nums[i] + nums[j] < k) {</span><br><span class="line"> i++</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> j--</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">return</span> result</span><br><span class="line">}</span><br><span class="line">getArr([1,2,3,5, 2], 3)</span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/05/13/算法题/" data-id="ckgujwhqh000hwsuv473zyer5" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-微信公众号" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2020/04/30/微信公众号/" class="article-date">
<time datetime="2020-04-30T01:57:09.000Z" itemprop="datePublished">2020-04-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2020/04/30/微信公众号/">微信公众号</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="一、配置菜单"><a href="#一、配置菜单" class="headerlink" title="一、配置菜单"></a>一、配置菜单</h2><p>登录微信平台, 点击 功能 << 自定义菜单, 即可编辑菜单及其页面url<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">菜单配置demo:</span><br><span class="line">菜单名称：我要投诉</span><br><span class="line">菜单url: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdfdfdfd&redirect_url=http%3A%2F%2Fwww.ashzz.com%2Fpages%2Fcomplaints.html&response_type=code&scope=snsapi_userinfo&state=STATE<span class="comment">#wechat_redirect </span></span><br><span class="line">授权通过后 回跳页面 http://www.ashzz.com/pages/complaints.html?code=011j5WXW0tM6402zSNXW0bG8YW0j5WXY&state=STATE<span class="comment">#</span></span><br><span class="line"></span><br><span class="line">解释：</span><br><span class="line">1、redirect_url的页面路径必须通过该函数进行编码->encodeURIComponent(页面url)</span><br><span class="line">2、授权成功后, 会回跳redirect_url指向的页面, 并拼上code和state参数</span><br><span class="line">3、在页面中可以从url上获取code</span><br></pre></td></tr></table></figure></p>
<h2 id="二、微信授权的两种方式"><a href="#二、微信授权的两种方式" class="headerlink" title="二、微信授权的两种方式"></a>二、微信授权的两种方式</h2><p>1、静默授权(scope=snsapi_base)<br> 只能获取到用户的唯一标识openid,无法获取用户的个人信息, 静默授权不需要用户确认, 是无感知的, 用户感知的就是直接进入了回调页<br>2、网页授权(scope=snsapi_userinfo)<br> 获取用户的openid、个人信息、关注信息等以接口返回形式; 如果已经关注过, 用户也是无感知访问页面; 如果未关注, 则需要用户手动确认授权</p>
<h2 id="三、开发调试及部署"><a href="#三、开发调试及部署" class="headerlink" title="三、开发调试及部署"></a>三、开发调试及部署</h2><p>1、微信开发者工具里调试页面<br>必须通过ip访问html页面, 可以使用nginx部署静态资源服务器<br>2、部署测试及微信后台配置<br>登录微信平台, 点击 设置 << 公众号设置 << 点击功能设置tab << <strong>配置JS接口安全域名和网页授权域名</strong><br><< 将.txt文件放置在域名根目录下</p>
<p>若无 网页授权, 则需要去 开发 << 接口权限 << 找到网页服务里的网页授权 去获取权限</p>
<p><strong>注:</strong><br>1、必须部署在带域名的服务器上测试<br>2、域名必须通过ICP备案, 备案大概需要1个月<br>3、可以将一个本地ip映射到一个备案的域名上<br>4、redirect_uri参数错误的原因是由于在微信后台未设置安全域名</p>
</div>
<footer class="article-footer">
<a data-url="https://yangyang158.github/2020/04/30/微信公众号/" data-id="ckgujwhq6000bwsuv6yb00yum" class="article-share-link">Share</a>
</footer>
</div>
</article>
<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 »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">September 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">August 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">June 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">May 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">April 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/02/">February 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/01/">January 2019</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2020/09/01/框架/">框架</a>
</li>
<li>
<a href="/2020/08/14/promise/">promise</a>
</li>
<li>
<a href="/2020/06/12/开机自启动脚本/">开机自启动脚本</a>
</li>
<li>
<a href="/2020/06/08/小程序/">小程序</a>
</li>
<li>
<a href="/2020/06/03/javascript页面容错处理/">javascript页面容错处理</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2020 Candy<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>