-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathsearch.xml
More file actions
1505 lines (1336 loc) · 183 KB
/
search.xml
File metadata and controls
1505 lines (1336 loc) · 183 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>node 常用工具大整合</title>
<url>/2019/12/31/nodegongju/</url>
<content><![CDATA[<blockquote>
<p>node 常用工具大整合</p>
<ol>
<li><p>pm2 解决了node不能多线</p>
</li>
<li><p>nvm 让你的电脑里安装很多个不同的node版本</p>
</li>
<li><p>nrm 快速管理你的npm,多个镜像源内切换</p>
</li>
<li><p>nodemon 监控node代码段是否更新,让代码重新运行</p>
</li>
</ol>
</blockquote>
<a id="more"></a>
<h1 id="node-常用工具大整合"><a href="#node-常用工具大整合" class="headerlink" title="node 常用工具大整合"></a>node 常用工具大整合</h1><blockquote>
<p>这些都是我个人平常总是使用的一些关于node的工具,不喜勿喷</p>
</blockquote>
<h2 id="pm2"><a href="#pm2" class="headerlink" title="pm2"></a>pm2</h2><blockquote>
<p>先声明对于线程的补充 我们引用官方的解释：线程可以独立运行的最小的CPU单位，可以在同一个进程里并发运行，共享该进程下的内存地址空间</p>
</blockquote>
<p>都说js是单线程的语言,即使有很多工具的帮助,也改变不了单线程的一个特点,即使是使用了node之后</p>
<p>node的最大特点是异步I/O,node官网的几乎所有方法都提供了关于异步的使用方法,比如<code>dir.read(callback)</code>和<code>dir.readSync()</code>,但是node还是被很多人排挤的一部分原因是没办法多线程去运行node项目,但是pm2的诞生可以说是又极大的提升了node的地位,他可以充分利用cpu和内存的资源,让node发挥到了极致</p>
<p>关于pm2的常用命令</p>
<ol>
<li>npm install pm2 -g 全局安装pm2</li>
<li>pm2 start xxx 运行某一个脚本<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_14-48-16.png" />
</fancybox></li>
<li>pm2 list 查看全部运行的node程序<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_14-50-23.png" />
</fancybox></li>
<li>pm2 stop <app_name|namespace|id|’all’|json_conf> 停止运行<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_14-51-30.png" />
</fancybox></li>
<li>pm2 delete <app_name|namespace|id|’all’|json_conf> 删除<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_14-53-01.png" />
</fancybox></li>
<li>pm2 reload all 重新加载所有的node线程</li>
<li>pm2 logs 查看所有日志<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_14-55-41.png" />
</fancybox>
</li>
</ol>
<h2 id="nvm"><a href="#nvm" class="headerlink" title="nvm"></a>nvm</h2><blockquote>
<p>nvm是一种用来让你的电脑同时可以安装多个node版本,而且可以快速的切换各个node之间的版本,在开发的过程中,总会遇到一些要求node版本的特殊并且过分的理由,比如上次踩坑安装的easy-mock模拟的数据接口,竟然过分的要求node版本是1.8.x,太难了=-=</p>
</blockquote>
<ol>
<li>npm i -g nvm 全局安装nvm</li>
<li>nvm ls 查看电脑安装了几个版本的node<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_14-59-21.png" />
</fancybox></li>
<li>nvm install node 安装最新版本的node</li>
<li>nvm install 6.14.4 安装制定版本的node</li>
<li>nvm use 6.14.4 使用某个版本的node<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_15-02-11.png" />
</fancybox></li>
<li>nvm uninstall 6.14.1 卸载某个版本的node</li>
</ol>
<blockquote>
<p>还有很多高级的操作可以查看<a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener">官网</a></p>
</blockquote>
<h2 id="nrm"><a href="#nrm" class="headerlink" title="nrm"></a>nrm</h2><blockquote>
<p>nrm是一个用来快速切换pm2的,让你在多个镜像源之间来回穿梭</p>
</blockquote>
<p>nrm常用命令</p>
<ol>
<li>npm i -g nrm 全局安装nrm</li>
<li>nrm ls 查看有多少个镜像源<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-31_15-09-49.png" />
</fancybox></li>
<li>nrm add <registry> <url> [home] 添加一个镜像源</li>
<li>nrm use <registry> 使用某个镜像源</li>
<li>nrm current 当前在哪个镜像源</li>
<li>nrm del <registry> 删除某个镜像源</li>
</ol>
<blockquote>
<p>还有很多高级的操作可以查看<a href="https://github.com/Pana/nrm" target="_blank" rel="noopener">官网</a></p>
</blockquote>
<h2 id="nodemon"><a href="#nodemon" class="headerlink" title="nodemon"></a>nodemon</h2><blockquote>
<p>nodemon可以让你每次修改完js代码之后,只要保存之后,他就会重新加载这个代码段</p>
</blockquote>
<ol>
<li>npm install -g nodemon 全局安装nodemon</li>
<li>nodemon app.js 监控这个代码段</li>
</ol>
<blockquote>
<p>还有很多高级的操作可以查看<a href="https://github.com/remy/nodemon" target="_blank" rel="noopener">官网</a></p>
</blockquote>
]]></content>
<categories>
<category>Node</category>
</categories>
<tags>
<tag>nvm</tag>
<tag>nrm</tag>
<tag>node</tag>
<tag>pm2</tag>
<tag>nodemon</tag>
<tag>工具大合集</tag>
</tags>
</entry>
<entry>
<title>用pjax让你的页面加载飞起来!</title>
<url>/2019/12/20/pjax/</url>
<content><![CDATA[<blockquote>
<p>什么是pjax?</p>
<p>pjax = ajax + pushState</p>
<p>目的!</p>
<p>让页面加载飞起来</p>
</blockquote>
<a id="more"></a>
<h2 id="什么是pjax"><a href="#什么是pjax" class="headerlink" title="什么是pjax?"></a>什么是pjax?</h2><p>pjax = ajax + pushState</p>
<blockquote>
<p>通过ajax让页面进行局部刷新,然后通过pushstate让url发生改变,再让pushState,让页面产生一个回退的记录,从而让页面的性能进行大幅度的优化</p>
</blockquote>
<h3 id="简单demo感受一下"><a href="#简单demo感受一下" class="headerlink" title="简单demo感受一下"></a>简单demo感受一下</h3><blockquote>
<p>准备两个页面 index.html content.html</p>
</blockquote>
<ol>
<li><p>index.html</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">class</span>=<span class="string">"font-auto"</span> <span class="attr">lang</span>=<span class="string">"zh-cmn-hans"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>残梦博客园<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/pjax/pjax.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">loader</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"plane"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">loader</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">header</span>></span></span><br><span class="line"> 页眉内容...</span><br><span class="line"> <span class="tag"></<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"content.html"</span>></span>中间<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">footer</span>></span></span><br><span class="line"> 页尾内容...</span><br><span class="line"> <span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> pjax = <span class="keyword">new</span> Pjax({</span></span><br><span class="line"><span class="actionscript"> <span class="comment">// 在页面进行 PJAX 时需要被替换的元素或容器，一条一个 CSS 选择器，数组形式</span></span></span><br><span class="line"> selectors: [</span><br><span class="line"><span class="actionscript"> <span class="string">"title"</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="string">"meta[name=description]"</span>, <span class="comment">// 如果是全部 meta 替换的话，只需要写 meta</span></span></span><br><span class="line"><span class="actionscript"> <span class="string">"main"</span></span></span><br><span class="line"> ],</span><br><span class="line"><span class="actionscript"> cacheBust: <span class="literal">false</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>content.html</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">class</span>=<span class="string">"font-auto"</span> <span class="attr">lang</span>=<span class="string">"zh-cmn-hans"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>残梦博客园<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/pjax/pjax.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">loader</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"plane"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">loader</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">header</span>></span></span><br><span class="line"> 页眉内容...</span><br><span class="line"> <span class="tag"></<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span>></span>中间<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">footer</span>></span></span><br><span class="line"> 页尾内容...</span><br><span class="line"> <span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> pjax = <span class="keyword">new</span> Pjax({</span></span><br><span class="line"><span class="actionscript"> <span class="comment">// 在页面进行 PJAX 时需要被替换的元素或容器，一条一个 CSS 选择器，数组形式</span></span></span><br><span class="line"> selectors: [</span><br><span class="line"><span class="actionscript"> <span class="string">"title"</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="string">"main"</span></span></span><br><span class="line"> ],</span><br><span class="line"><span class="actionscript"> cacheBust: <span class="literal">false</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>发现真的是神速啊,用f12看了一下,发现就中间的dom结构发生了改变(这里面也就是main发生了改变),页面的js,css脚本也不用重新下载</p>
<h3 id="深度学习一下"><a href="#深度学习一下" class="headerlink" title="深度学习一下"></a>深度学习一下</h3><p>感受到了他的牛逼之后,我们不如让我们的页面也能这样去渲染,岂不是很快</p>
<blockquote>
<p>在<a href="https://github.com/" target="_blank" rel="noopener">github</a>上面,我们可以找到pjax,主要分为两个版本</p>
</blockquote>
<ol>
<li>不需要jquery插件的pjax (这里面我们使用这种方式)</li>
<li>需要jquery的pjax</li>
</ol>
<h4 id="引入脚本"><a href="#引入脚本" class="headerlink" title="引入脚本"></a>引入脚本</h4><p>引入pjax的CDN加速脚本</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><script src=<span class="string">"https://cdn.jsdelivr.net/npm/pjax/pjax.js"</span>><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
<p>首先我们要实例化Pjax,并且传入一个对象<br>第一个参数一般是指我们想让点击哪里去触发pjax(这里面只能指向a或者form)<br>第二个参数为一个选择器数组,我们传递的是我们需要更新的dom节点(更新的dom越少,性能越好,当然尽量不要写重复的结构)</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> pjax = <span class="keyword">new</span> Pjax({</span><br><span class="line"> elements: <span class="string">"a"</span>,</span><br><span class="line"> selectors: [</span><br><span class="line"> <span class="string">"title"</span>,</span><br><span class="line"> <span class="string">".l_main"</span>,</span><br><span class="line"> <span class="string">".l_side .toc-wrapper"</span>,</span><br><span class="line"> <span class="string">"#links"</span>,</span><br><span class="line"> <span class="string">".comments"</span>,</span><br><span class="line"> <span class="string">"#pages"</span>,</span><br><span class="line"> ]</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>这样我们就成功的配置完了pjax<br>但是新的页面可能需要渲染的dom结构很大,可能产生一瞬间的停顿,这样就会让页面像卡主了一样,没有给用户良好的反馈,我们可以自己做一个loading的加载或者使用nprogress,据说github就是使用的nprogress+pjax(发现自己之前真的是故落寡闻了)</p>
<h4 id="优化加载"><a href="#优化加载" class="headerlink" title="优化加载"></a>优化加载</h4><p>准备css文件</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.loading</span>{<span class="attribute">display</span>:none}</span><br><span class="line"><span class="selector-class">.loading</span>{<span class="attribute">height</span>:<span class="number">100%</span>;<span class="attribute">width</span>:<span class="number">100%</span>;<span class="attribute">position</span>:fixed;<span class="attribute">top</span>:<span class="number">0</span>;<span class="attribute">left</span>:<span class="number">0</span>;<span class="attribute">z-index</span>:<span class="number">999999</span>;<span class="attribute">background-color</span>:<span class="built_in">rgba</span>(250,250,250,.9)}</span><br><span class="line"><span class="selector-class">.loading</span> <span class="selector-tag">img</span>{<span class="attribute">width</span>: <span class="number">280px</span>;<span class="attribute">height</span>:<span class="number">210px</span>;<span class="attribute">position</span>: relative;<span class="attribute">top</span>: <span class="number">45%</span>;<span class="attribute">left</span>: <span class="number">50%</span>;<span class="attribute">margin-left</span>:-<span class="number">140px</span>;<span class="attribute">margin-top</span>: -<span class="number">105px</span>;}</span><br><span class="line"><span class="selector-id">#loader</span>{<span class="attribute">display</span>: block; <span class="attribute">position</span>: relative; <span class="attribute">left</span>: <span class="number">50%</span>; <span class="attribute">top</span>: <span class="number">50%</span>; <span class="attribute">width</span>: <span class="number">150px</span>; <span class="attribute">height</span>: <span class="number">150px</span>; <span class="attribute">margin</span>: -<span class="number">75px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">75px</span>; <span class="attribute">border-radius</span>: <span class="number">50%</span>; <span class="attribute">border</span>: <span class="number">3px</span> solid transparent; <span class="attribute">border-top-color</span>: <span class="number">#ff5a5a</span>; <span class="attribute">-webkit-animation</span>: spin <span class="number">1s</span> linear infinite; <span class="attribute">animation</span>: spin <span class="number">1s</span> linear infinite;}</span><br><span class="line"><span class="selector-id">#loader</span><span class="selector-pseudo">:before</span>{<span class="attribute">content</span>: <span class="string">""</span>; <span class="attribute">position</span>: absolute; <span class="attribute">top</span>: <span class="number">5px</span>; <span class="attribute">left</span>: <span class="number">5px</span>; <span class="attribute">right</span>: <span class="number">5px</span>; <span class="attribute">bottom</span>: <span class="number">5px</span>; <span class="attribute">border-radius</span>: <span class="number">50%</span>; <span class="attribute">border</span>: <span class="number">3px</span> solid transparent; <span class="attribute">border-top-color</span>: <span class="number">#5af33f</span>; <span class="attribute">-webkit-animation</span>: spin <span class="number">3s</span> linear infinite; <span class="attribute">animation</span>: spin <span class="number">3s</span> linear infinite;}</span><br><span class="line"><span class="selector-id">#loader</span><span class="selector-pseudo">:after</span>{<span class="attribute">content</span>: <span class="string">""</span>; <span class="attribute">position</span>: absolute; <span class="attribute">top</span>: <span class="number">15px</span>; <span class="attribute">left</span>: <span class="number">15px</span>; <span class="attribute">right</span>: <span class="number">15px</span>; <span class="attribute">bottom</span>: <span class="number">15px</span>; <span class="attribute">border-radius</span>: <span class="number">50%</span>; <span class="attribute">border</span>: <span class="number">3px</span> solid transparent; <span class="attribute">border-top-color</span>: <span class="number">#6dc9ff</span>; <span class="attribute">-webkit-animation</span>: spin <span class="number">2s</span> linear infinite; <span class="attribute">animation</span>: spin <span class="number">2s</span> linear infinite;}</span><br><span class="line">@-<span class="keyword">webkit</span>-<span class="keyword">keyframes</span> spin{0%{<span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(0deg); <span class="attribute">-ms-transform</span>: <span class="built_in">rotate</span>(0deg); <span class="attribute">transform</span>: <span class="built_in">rotate</span>(0deg);} 100%{<span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(360deg); <span class="attribute">-ms-transform</span>: <span class="built_in">rotate</span>(360deg); <span class="attribute">transform</span>: <span class="built_in">rotate</span>(360deg);}}</span><br><span class="line">@<span class="keyword">keyframes</span> spin{0%{<span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(0deg); <span class="attribute">-ms-transform</span>: <span class="built_in">rotate</span>(0deg); <span class="attribute">transform</span>: <span class="built_in">rotate</span>(0deg);} 100%{<span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(360deg); <span class="attribute">-ms-transform</span>: <span class="built_in">rotate</span>(360deg); <span class="attribute">transform</span>: <span class="built_in">rotate</span>(360deg);}}</span><br></pre></td></tr></table></figure>
<p>准备一个html结构的div,选择器的名字和上面对应上就好,怎么写就看个人爱好了</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"loading"</span>></span><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"loader"</span>></span><span class="tag"></<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<p>准备一个js</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 开始 PJAX 执行的函数</span></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'pjax:send'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="string">".loading"</span>).css(<span class="string">"display"</span>, <span class="string">"block"</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// PJAX 完成之后执行的函数</span></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'pjax:complete'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="string">".loading"</span>).css(<span class="string">"display"</span>, <span class="string">"none"</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>这样子我们的页面就可以进行快速跳转了,主需要渲染一部分哦!</p>
<p>效果可以在我的<a href="https://shtodream.cn/" target="_blank" rel="noopener">个人博客</a>上面去看</p>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>性能优化</tag>
<tag>pjax</tag>
<tag>ajax</tag>
<tag>html5</tag>
<tag>nprogress</tag>
<tag>github</tag>
<tag>loading</tag>
</tags>
</entry>
<entry>
<title>使用 Travis-CI 持续集成部署 HEXO 博客项目</title>
<url>/2019/12/20/kcxhjc/</url>
<content><![CDATA[<blockquote>
<p>优点</p>
<ol>
<li><p>让你的项目和源码能够完全分离,即使我们的项目被误删,也可以快速找回</p>
</li>
<li><p>当我们需要重复进行某些步骤的时候</p>
</li>
<li><p>直接在线编辑文件，立即生效</p>
</li>
<li><p>自动部署，同时部署到多个地方</p>
</li>
<li><p>发生错误,邮箱自动提醒</p>
</li>
</ol>
</blockquote>
<a id="more"></a>
<h3 id="What-is-Travis-CI"><a href="#What-is-Travis-CI" class="headerlink" title="What is Travis CI?"></a>What is Travis CI?</h3><p>Travis CI</p>
<p>CI(Continuous Integration)翻译为持续集成。Travis CI是一个提供持续集成功能的平台，在Github上，可以添加Travis CI，当有code push时候，会推送通知到Travis，根据设置的脚本运行指定任务。</p>
<p>目前有两个站点:</p>
<p>Travis.org 对于所有public项目完全免费</p>
<p>Travics.com 只针对private项目，提供更多一些额外功能，如cache，并行build个数</p>
<p>两个站点只能看到各自的项目，不能通用。</p>
<h3 id="Why-we-need-Travis-CI"><a href="#Why-we-need-Travis-CI" class="headerlink" title="Why we need Travis CI?"></a>Why we need Travis CI?</h3><p>有人可能会有疑问: 在本地写完博客，直接一个命令hexo d，不就搞定了么， 为啥要费力搞CI？</p>
<p>的确, 想用TravisCI来自动部署Hexo博客程序，需要不少设置（瞎折腾），为了给大伙信心，列举一些优点：</p>
<h4 id="优点1：直接在线编辑文件，立即生效"><a href="#优点1：直接在线编辑文件，立即生效" class="headerlink" title="优点1：直接在线编辑文件，立即生效"></a>优点1：直接在线编辑文件，立即生效</h4><p>假设你已经发表了一篇文章，过了几天你在朋友机器上浏览发现有几个明显的错别字，对于有强迫症的，这是不能容忍的。 但你手头又没有完整的hexo+nodejs+git的开发环境，重新下载git，node，hexo配置会花费不少时间，特别不划算。</p>
<p>如果按照这篇完整折腾完，你可以直接用浏览器访问github个人项目仓库，直接编辑那篇post的原md文件，前后2分钟改完。 稍等片刻，你的博客就自动更新了。</p>
<h4 id="优点2：自动部署，同时部署到多个地方"><a href="#优点2：自动部署，同时部署到多个地方" class="headerlink" title="优点2：自动部署，同时部署到多个地方"></a>优点2：自动部署，同时部署到多个地方</h4><p>在gitcafe是被收购之前，很多同学（包括我）都是托管在上面的，国内访问速度比Github快很多。<br>配合DNS根据IP位置可以自动选择导到gitcafe, 还是github，甚至你还可以部署到七牛云的静态网站。<br>利用Travis CI可同时更新多个仓库。</p>
<p>比如我的博客现在有两个站：一个部署在码云，一个部署在github。都需要我自己手动部署。</p>
<p>注：最后发现码云并不支持。emmmmm</p>
<h4 id="优点3：部署快捷方便"><a href="#优点3：部署快捷方便" class="headerlink" title="优点3：部署快捷方便"></a>优点3：部署快捷方便</h4><p>手动deploy需要推送public整个folder到github上，当后期网站文章、图片较多时候，对于天朝的网络，有时候连接github 就是不顺畅，经常要傻等不少上传时间。<br>有了CI，你可以只提交post文件里单独的md文件即可，很快很爽，谁用谁知道。</p>
<h4 id="优点4：bigger-than-bigger"><a href="#优点4：bigger-than-bigger" class="headerlink" title="优点4：bigger than bigger"></a>优点4：bigger than bigger</h4><p>你的项目Readme里面可以显示CI build图标，很酷有没有？<br>另外通过设置，可以在当build失败时自动发邮件提醒你。<br>上面的图标，如果登陆后你在Github项目里，直接点击图标，会跳转到你当前项目build的log界面，很方便。</p>
<p>当然有了CI，你可以做很多事情，如自动运行单元测试，成功后再deploy等等。很多项目里的持续集成基本也是这个道理。</p>
<h3 id="开始使用"><a href="#开始使用" class="headerlink" title="开始使用"></a>开始使用</h3><h4 id="准备Travis-CI账号"><a href="#准备Travis-CI账号" class="headerlink" title="准备Travis CI账号"></a>准备Travis CI账号</h4><blockquote>
<p>注册登录,<a href="https://travis-ci.org/" target="_blank" rel="noopener">travis-ci</a>,就会自动显示我们的github下面的所有仓库,点击左上角</p>
</blockquote>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-29-13.png" />
</fancybox>
<blockquote>
<p>选择开启持续更新哪个仓库</p>
</blockquote>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-32-22.png" />
</fancybox>
<h4 id="准备github的Token"><a href="#准备github的Token" class="headerlink" title="准备github的Token"></a>准备github的Token</h4><blockquote>
<p>登录你的github账号,选择setting->Personal access tokens</p>
</blockquote>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-34-43.png" />
</fancybox>
<blockquote>
<p>注意,这里面生成token之后,在勾选的时候,除了删库,全都勾选上,<font color="red">注意生成之后的文件一定要保存起来,token之后就不可见了</font></p>
</blockquote>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-37-34.png" />
</fancybox>
<h4 id="在travis-ci中添加我们的token"><a href="#在travis-ci中添加我们的token" class="headerlink" title="在travis ci中添加我们的token"></a>在travis ci中添加我们的token</h4><fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-40-57.png" />
</fancybox>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-41-53.png" />
</fancybox>
<blockquote>
<p>在hexo的根目录下面添加.travis.yml,并且开始编写</p>
</blockquote>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">anguage:</span> <span class="string">node_js</span></span><br><span class="line"></span><br><span class="line"><span class="attr">node_js:</span> <span class="string">stable</span></span><br><span class="line"></span><br><span class="line"><span class="attr">cache:</span></span><br><span class="line"> <span class="attr">directories:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">node_modules</span></span><br><span class="line"><span class="attr">before_install:</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="string">npm</span> <span class="string">install</span> <span class="string">-g</span> <span class="string">hexo-cli</span></span><br><span class="line"></span><br><span class="line"><span class="attr">install:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">npm</span> <span class="string">install</span></span><br><span class="line"></span><br><span class="line"><span class="attr">script:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">hexo</span> <span class="string">g</span> </span><br><span class="line"></span><br><span class="line"><span class="attr">after_script:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">cd</span> <span class="string">./public</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">git</span> <span class="string">init</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">git</span> <span class="string">config</span> <span class="string">user.name</span> <span class="string">"sh"</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">git</span> <span class="string">config</span> <span class="string">user.email</span> <span class="string">"2662419405@qq.com"</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">git</span> <span class="string">add</span> <span class="string">.</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">git</span> <span class="string">commit</span> <span class="string">-m</span> <span class="string">"TravisCI 自动部署"</span></span><br><span class="line"> <span class="comment"># Github Pages</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">git</span> <span class="string">push</span> <span class="string">--force</span> <span class="string">--quiet</span> <span class="string">"https://${githubblog}@${GH_REF}"</span> <span class="string">master:master</span></span><br><span class="line"></span><br><span class="line"><span class="attr">env:</span></span><br><span class="line"> <span class="attr">global:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">GH_REF:</span> <span class="string">github.com/2662419405/2662419405.github.io.git</span></span><br><span class="line"> </span><br><span class="line"><span class="attr">notifications:</span></span><br><span class="line"> <span class="attr">email:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="number">2662419405</span><span class="string">@qq.com</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">qq2662419405@163.com</span></span><br><span class="line"> <span class="attr">on_success:</span> <span class="string">change</span></span><br><span class="line"> <span class="attr">on_failure:</span> <span class="string">always</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>上面的邮箱和用户名改成自己的,GH_REF改为自己的github地址,注意格式和我的相符,${githubblog}改为刚刚token的key</p>
</blockquote>
<h4 id="测试一下"><a href="#测试一下" class="headerlink" title="测试一下"></a>测试一下</h4><p>当你弄完这些之后,在hexo根目录</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git init</span><br><span class="line">git add .</span><br><span class="line">git commit -m '测试Travis ci持续化集成'</span><br><span class="line">git remote add origin xxx //这个地方是你的源码地址</span><br><span class="line">git push origin master</span><br></pre></td></tr></table></figure>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-20_10-49-50.png" />
</fancybox>
<p>我们的测试就大功告成!!!!</p>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>BLOG</tag>
<tag>Hexo</tag>
<tag>学习之旅</tag>
<tag>Github</tag>
<tag>Travis CI</tag>
<tag>持续集成自动部署</tag>
<tag>Token</tag>
</tags>
</entry>
<entry>
<title>性能优化大合集,必备!</title>
<url>/2019/12/10/xnyh/</url>
<content><![CDATA[<blockquote>
<p>重定向 → 拉取缓存 →DNS 查询 → 建立 TCP 链接 → 发起请求 → 接收响应 → 处理 HTML 元素 → 元素加载完成</p>
<p>重要性: 一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。这是改版自网络上的一句流行语，但却把网站性能这件事说的十分透彻，特别是在网站这样的项目中，如果一个用户需要超过5s才能看见页面，他会毫不犹豫地关闭它。</p>
</blockquote>
<a id="more"></a>
<h2 id="1-网络传输层加速"><a href="#1-网络传输层加速" class="headerlink" title="1. 网络传输层加速"></a>1. 网络传输层加速</h2><blockquote>
<p>缓存一般分为强缓存和协商缓存，主要区别是：使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。</p>
</blockquote>
<h3 id="浏览器缓存"><a href="#浏览器缓存" class="headerlink" title="浏览器缓存"></a>浏览器缓存</h3><h4 id="强缓存"><a href="#强缓存" class="headerlink" title="强缓存"></a>强缓存</h4><p>主要通过 http 请求头中的 Cache-Control 和 Expire 两个字段控制</p>
<p>一般，我们会设置 Cache-Control 的值为“public, max-age=xxx”，表示在 xxx 秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。</p>
<h4 id="协商缓存"><a href="#协商缓存" class="headerlink" title="协商缓存"></a>协商缓存</h4><p>每次都向服务器验证一下缓存的有效性</p>
<h4 id="前端缓存方案"><a href="#前端缓存方案" class="headerlink" title="前端缓存方案"></a>前端缓存方案</h4><ul>
<li>HTML：使用协商缓存</li>
<li>CSS JS Image：使用强缓存，文件名带上 hash 值</li>
</ul>
<p>浏览器默认的缓存是放在内存内的，但我们知道，内存里的缓存会因为进程的结束或者说浏览器的关闭而被清除，而存在硬盘里的缓存才能够被长期保留下去。很多时候，我们在 network 面板中各请求的 size 项里，会看到两种不同的状态：from memory cache 和 from disk cache，前者指缓存来自内存，后者指缓存来自硬盘。而控制缓存存放位置的，不是别人，就是我们在服务器上设置的 Etag 字段。在浏览器接收到服务器响应后，会检测响应头部（Header），如果有 Etag 字段，那么浏览器就会将本次缓存写入硬盘中。</p>
<h3 id="资源打包压缩"><a href="#资源打包压缩" class="headerlink" title="资源打包压缩"></a>资源打包压缩</h3><blockquote>
<p>网络性能优化措施归结为三大方面：减少请求数、减小请求资源体积、提升网络传输速率</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp grunt webpack parcel</span><br></pre></td></tr></table></figure>
<h3 id="图片资源优化"><a href="#图片资源优化" class="headerlink" title="图片资源优化"></a>图片资源优化</h3><blockquote>
<p>用过ngxin的人都知道,ngxin可以把文件设置为gzip压缩格式,但是图片不要设置gzip压缩!图片不要设置gzip压缩!图片不要设置gzip压缩!</p>
</blockquote>
<ul>
<li>不要在 HTML 里缩放图像</li>
<li>使用雪碧图（CSS Sprite）- webpack-spritesmith</li>
<li>使用字体图标（iconfont）- icomoon</li>
<li>使用 WebP - 图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间</li>
</ul>
<h3 id="网络传输性能检测工具"><a href="#网络传输性能检测工具" class="headerlink" title="网络传输性能检测工具"></a>网络传输性能检测工具</h3><p>Page Speed | PageSpeed Insights</p>
<h3 id="使用-CDN"><a href="#使用-CDN" class="headerlink" title="使用 CDN"></a>使用 CDN</h3><p>再好的性能优化实例，也必须在CDN的支撑下才能到达极致。</p>
<p>如果我们在Linux下使用命令$ traceroute targetIp 或者在Windows下使用批处理 > tracert targetIp，都可以定位用户与目标计算机之间经过的所有路由器，不言而喻，用户和服务器之间距离越远，经过的路由器越多，延迟也就越高。使用CDN的目的之一便是解决这一问题</p>
<h2 id="2-页面渲染性能优化"><a href="#2-页面渲染性能优化" class="headerlink" title="2.页面渲染性能优化"></a>2.页面渲染性能优化</h2><h3 id="浏览器渲染过程-webkit"><a href="#浏览器渲染过程-webkit" class="headerlink" title="浏览器渲染过程 webkit"></a>浏览器渲染过程 webkit</h3><blockquote>
<p>浏览器的解释器，是包括在渲染引擎内的，我们常说的 Chrome（现在使用的是 Blink 引擎）和 Safari 使用的 Webkit 引擎，Firefox 使用的 Gecko 引擎，指的就是渲染引擎。而在渲染引擎内，还包括着我们的 HTML 解释器（渲染时用于构造 DOM 树）、CSS 解释器（渲染时用于合成 CSS 规则）还有我们的 JS 解释器。不过后来，由于 JS 的使用越来越重要，工作越来越繁杂，所以 JS 解释器也渐渐独立出来，成为了单独的 JS 引擎，就像众所周知的 V8 引擎，我们经常接触的 Node.js 也是用的它。</p>
</blockquote>
<h3 id="重排和重绘"><a href="#重排和重绘" class="headerlink" title="重排和重绘"></a>重排和重绘</h3><ul>
<li><p>重排（reflow）：渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化、删除或添加DOM元素，修改了影响元素盒子大小的CSS属性（诸如：width、height、padding）。</p>
</li>
<li><p>②重绘（repaint）：绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。</p>
</li>
</ul>
<h3 id="优化方式"><a href="#优化方式" class="headerlink" title="优化方式"></a>优化方式</h3><ul>
<li><p>CSS 属性读写分离</p>
</li>
<li><p>通过切换 class 或者 style.csstext 属性去批量操作元素样式</p>
</li>
<li><p>DOM 元素离线更新</p>
</li>
<li><p>将没用的元素设为不可见：visibility: hidden，减少重绘的压力</p>
</li>
<li><p>压缩 DOM 的深度：少用 DOM 完成页面样式，多使用伪元素或者 box-shadow 取代。</p>
</li>
<li><p>图片在渲染前指定大小：因为 img 元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流。</p>
</li>
<li><p>对页面中可能发生大量重排重绘的元素单独触发渲染层，使用 GPU 分担 CPU 压力。（慎重）</p>
</li>
</ul>
<h2 id="3-JS阻塞"><a href="#3-JS阻塞" class="headerlink" title="3. JS阻塞"></a>3. JS阻塞</h2><blockquote>
<p>都知道js在加载的时候,会阻塞整个脚本的运行,我们可以把js脚本放到页面的尾部,这样页面会先加载出来,还可以通过让js脚本异步执行</p>
</blockquote>
<h4 id="js脚本异步执行的方式"><a href="#js脚本异步执行的方式" class="headerlink" title="js脚本异步执行的方式"></a>js脚本异步执行的方式</h4><ul>
<li><p>给script标签添加defer 如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；</p>
</li>
<li><p>给script标签添加async 并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。</p>
</li>
<li><p>动态创建Script标签</p>
</li>
</ul>
<h2 id="4-负载均衡"><a href="#4-负载均衡" class="headerlink" title="4. 负载均衡"></a>4. 负载均衡</h2><blockquote>
<p>之所以将负载均衡作为拓展内容，是因为如果是你自己搭建的个人网站，或者中小型网站，其实并不需要考虑多大的并发量，但是如果你搭建的是大型网站，负载均衡便是开发过程不可或缺的步骤。</p>
</blockquote>
<h3 id="Nodejs处理IO密集的请求"><a href="#Nodejs处理IO密集的请求" class="headerlink" title="Nodejs处理IO密集的请求"></a>Nodejs处理IO密集的请求</h3><p>我们都知道node的核心是事件驱动，通过loop去异步处理用户请求，相比于传统的后端服务，它们都是将用户的每个请求分配到异步队列进行处理。事件驱动的最大优势是什么？就是在高并发IO时，不会造成堵塞，对于直播类网站，这点是至关重要的，我们有成功的先例——快手，快手强大的IO高并发究其本质一定能追溯到node。</p>
<ul>
<li>一般现在的企业网站都会做一个中间层,比如淘宝的双十一,可以很大的减轻负担</li>
</ul>
<h3 id="pm2实现Node-js“多线程”"><a href="#pm2实现Node-js“多线程”" class="headerlink" title="pm2实现Node.js“多线程”"></a>pm2实现Node.js“多线程”</h3><p>那些说node不行的都是指着node是单线程这一个软肋开撕，告诉你，我们有解决方案了——pm2,就是能在你的计算机里的每一个内核都启动一个node.js服务，也就是说如果你的电脑或者服务器是多核处理器（现在也少见单核了吧），它就能启动多个node.js服务，并且它能够自动控制负载均衡，会自动将用户的请求分发至压力小的服务进程上处理。</p>
<h3 id="nginx搭建反向代理"><a href="#nginx搭建反向代理" class="headerlink" title="nginx搭建反向代理"></a>nginx搭建反向代理</h3><p>所谓代理就是我们通常所说的中介，网站的反向代理就是指那台介于用户和我们真实服务器之间的服务器，它的作用便是能够将用户的请求分配到压力较小的服务器上，其机制是轮询。听完这句话是不是感觉很耳熟，没错，在我介绍pm2的时候也说过同样的话，反向代理起到的作用同pm2一样也是实现负载均衡，你现在应该也明白了两者之间的差异，反向代理是对服务器实现负载均衡，而pm2是对进程实现负载均衡</p>
]]></content>
<tags>
<tag>Node</tag>
<tag>性能优化</tag>
<tag>CDN</tag>
<tag>Pm2</tag>
<tag>雪碧图</tag>
<tag>Webp</tag>
<tag>反向代理</tag>
<tag>ngxin</tag>
<tag>iconfont</tag>
</tags>
</entry>
<entry>
<title>git开发流程和常见命令</title>
<url>/2019/12/08/gitEasy/</url>
<content><![CDATA[<blockquote>
<p>git,是一种版本控制工具,用于整合项目或者项目回滚有很好的效果,相比于svn,git操作更加灵活,限制更少一些</p>
</blockquote>
<a id="more"></a>
<h1 id="git学习"><a href="#git学习" class="headerlink" title="git学习"></a>git学习</h1><p>工作流程图<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/git多人流程图.png" /><br></fancybox></p>
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>工作区(写代码的地方)</p>
<blockquote>
<p>git add</p>
</blockquote>
<p>暂存区(临时的存储)</p>
<blockquote>
<p>git commit</p>
</blockquote>
<p>本地库(历史版本)</p>
<h4 id="初级操作"><a href="#初级操作" class="headerlink" title="初级操作"></a>初级操作</h4><ul>
<li><p>git status //状态查看</p>
</li>
<li><p>git add //添加到暂存区</p>
</li>
<li><p>git rm –cached //移除暂存区</p>
</li>
<li><p>git commit -m ‘xx’ //提交到本地库</p>
</li>
</ul>
<h3 id="版本操作"><a href="#版本操作" class="headerlink" title="版本操作"></a>版本操作</h3><ul>
<li><p>git log 命令可以显示所有提交过的版本信息</p>
</li>
<li><p>git reflog 可以查看所有分支的所有操作记录（包括已经被删除的 commit 记录和 reset 的操作）</p>
</li>
<li><p>git reset –hard xxx 索引值</p>
</li>
<li><p>git reset –hard HEAD^ 版本回退一次^^^退三步</p>
</li>
<li><p>git reset –hard HEAD~3 版本回退三步</p>
</li>
</ul>
<h4 id="reset命令的三个参数对比"><a href="#reset命令的三个参数对比" class="headerlink" title="reset命令的三个参数对比"></a>reset命令的三个参数对比</h4><ul>
<li>–soft 仅仅在本地库移动一下指针</li>
<li>–mixed 在本地库移动HEAD指针,重置暂存区</li>
<li>–hard 在本地移动HEAD指针,重置暂存区,重置工作区</li>
</ul>
<h4 id="查找删除的文件"><a href="#查找删除的文件" class="headerlink" title="查找删除的文件"></a>查找删除的文件</h4><ul>
<li>查找永久删除的文件<ul>
<li>git reset –hard 版本回退</li>
</ul>
</li>
<li>添加到暂存区的文件找回<ul>
<li>git reset –hard HEAD</li>
</ul>
</li>
<li>前提: 删除前,文件的改动保存在本地库了</li>
<li>操作: git reset –hrad[指针位置]</li>
</ul>
<h4 id="对比文件"><a href="#对比文件" class="headerlink" title="对比文件"></a>对比文件</h4><ul>
<li>diff 是工作区和暂存区比较</li>
<li>diff HEAD 是工作区和本地库比较</li>
</ul>
<h3 id="分支管理"><a href="#分支管理" class="headerlink" title="分支管理"></a>分支管理</h3><ul>
<li>命名一采用<code>feature</code>开头,代表功能</li>
</ul>
<h4 id="分支的具体操作"><a href="#分支的具体操作" class="headerlink" title="分支的具体操作"></a>分支的具体操作</h4><ul>
<li>git branch -v 查看分支版本</li>
<li>git branch xxx 创建分支</li>
<li>git checkout name 选择分支</li>
<li>合并分支<ul>
<li>切换到接受修改的分支上</li>
<li>执行 git merge 被合并的分支上</li>
</ul>
</li>
</ul>
<h4 id="解决冲突"><a href="#解决冲突" class="headerlink" title="解决冲突"></a>解决冲突</h4><ul>
<li>首先产生的原因是: 两个分支的内容发生了冲突</li>
<li>解决方式<ul>
<li>编辑文件,删除特殊符号</li>
<li>把文件修改到满意的程度</li>
<li>git add [filename]</li>
<li>git commit -m ‘提交信息’</li>
<li><strong>git commit 不能写文件名字,必须和上面相符</strong></li>
</ul>
</li>
</ul>
<h3 id="基本原理分析"><a href="#基本原理分析" class="headerlink" title="基本原理分析"></a>基本原理分析</h3><h4 id="哈希"><a href="#哈希" class="headerlink" title="哈希"></a>哈希</h4><ul>
<li>不管输入量多大,他得到的加密结果长度是固定</li>
<li>输入唯一的一个明文,可以得到唯一的密文</li>
<li>输入的明文差异很小,变化很大</li>
<li>不可逆的</li>
</ul>
<h2 id="github使用"><a href="#github使用" class="headerlink" title="github使用"></a><code>github</code>使用</h2><ul>
<li>git remote -v 查看远程库</li>
<li>git remote add origin(别名) <a href="https://xxxxxxxx地址" target="_blank" rel="noopener">https://xxxxxxxx地址</a> 创建连接</li>
</ul>
<h4 id="远程分支操作"><a href="#远程分支操作" class="headerlink" title="远程分支操作"></a>远程分支操作</h4><ul>
<li>git push origin master //推送分支,远程库别名,分支名</li>
</ul>
<h5 id="克隆仓库"><a href="#克隆仓库" class="headerlink" title="克隆仓库"></a>克隆仓库</h5><ul>
<li>下载到本地</li>
<li>创建origin远程地址别名</li>
<li>初始化本地库</li>
</ul>
<h5 id="多人开发"><a href="#多人开发" class="headerlink" title="多人开发"></a>多人开发</h5><ul>
<li>某个项目->setting->Collaborators->选择某个用户</li>
<li>用户就会接收到邀请,同意之后就可以加入到推送中</li>
</ul>
<h5 id="拉取仓库"><a href="#拉取仓库" class="headerlink" title="拉取仓库"></a>拉取仓库</h5><ul>
<li>pull = merge + fetch 拉取,等于下面两个命令<ul>
<li>fetch 远程地址名 远程分支名 只是抓取下来,并没有合并</li>
<li>merge origin/master 合并文件</li>
</ul>
</li>
</ul>
<h3 id="跨团队多人写作"><a href="#跨团队多人写作" class="headerlink" title="跨团队多人写作"></a>跨团队多人写作</h3><fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-13_15-40-37.png" />
</fancybox>
<h3 id="git工作流程"><a href="#git工作流程" class="headerlink" title="git工作流程"></a>git工作流程</h3><h4 id="集中式工作流"><a href="#集中式工作流" class="headerlink" title="集中式工作流"></a>集中式工作流</h4><h4 id="GitFlow-最常用"><a href="#GitFlow-最常用" class="headerlink" title="GitFlow(最常用)"></a><code>GitFlow</code>(最常用)</h4><ul>
<li>通过分支去解决开发</li>
<li>hotfix 一般是解决bug</li>
<li>develop 开发</li>
<li>feature_xxx 功能分支,基于develop开发</li>
<li>release 完成功能前的最终测试</li>
</ul>
]]></content>
<tags>
<tag>学习之旅</tag>
<tag>git</tag>
<tag>多人开发</tag>
<tag>合作流程</tag>
</tags>
</entry>
<entry>
<title>DIY自己的评论表情包</title>
<url>/2019/12/03/csbqb/</url>
<content><![CDATA[<blockquote>
<p>定制属于自己的专属表情包,虽然Voline有自己的一套表情包,但是感觉不是很好看,那么现在就来自己定制一下吧</p>
</blockquote>
<a id="more"></a>
<h2 id="1-下载js文件"><a href="#1-下载js文件" class="headerlink" title="1. 下载js文件"></a>1. 下载js文件</h2><p>这个是建立在valine的基础上修改的文件,所以和valine使用方式一样,就是导入的js改变一下即可<br>先clone一下<a href="https://github.com/2662419405/volantis" target="_blank">仓库</a>到本地,这个我就不说了</p>
<h2 id="2-本地测试"><a href="#2-本地测试" class="headerlink" title="2. 本地测试"></a>2. 本地测试</h2><p>在clone的目录下面,新建一个html文件<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-03_21-19-51.png" /><br></fancybox><br>导入js运行html<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-03_21-20-57.png" /><br></fancybox><br>测试一下js是否生效了<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-03_21-21-19.png" /><br></fancybox></p>
<h2 id="3-加入自己想要的表情包"><a href="#3-加入自己想要的表情包" class="headerlink" title="3. 加入自己想要的表情包"></a>3. 加入自己想要的表情包</h2><fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-03_21-27-34.png" />
</fancybox>
<p>重新打开html页面,发现表情包添加了,但是变成了下面这样</p>
<fancybox>
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-03_21-27-54.png" />
</fancybox>
<p>微调css文件,加入下面的css文件调整,当然可以根据自己的个人爱好添加</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.l_main</span> <span class="selector-id">#comments</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">i</span> <span class="selector-class">.emoji</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">24px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">background</span>: transparent;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.l_main</span> <span class="selector-id">#comments</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">i</span> {</span><br><span class="line"> <span class="attribute">width</span>: auto;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">36px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">8px</span> <span class="number">8px</span> <span class="number">0</span> <span class="number">8px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="4-修改Hexo"><a href="#4-修改Hexo" class="headerlink" title="4. 修改Hexo"></a>4. 修改Hexo</h2><p>这个表情包本身就是valine的表情包的扩展,所以直接修改hexo中导入的js文件即可<br>把修改好的文件上传到自己的服务器上面,如果没有可以参考<a href="https://github.com/2662419405/CDN" target="_blank" rel="noopener">Github+jsDelivr</a>上传到CDN<br>我的是在<code>themes\material-x\layout\_partial\script.ejs</code>文件中,然后直接<code>Ctrl+F</code>搜索找到替换成自己的文件即可,我的js文件是<code>https://cdn.jsdelivr.net/gh/2662419405/CDN/volantisPlus.js</code></p>
<ul>
<li>最好把这个volantisPlus压缩一下,本人太懒了,就没弄,经过上面的配置,你也拥有了自己的DIY表情包,美滋滋啊</li>
</ul>
]]></content>
<tags>
<tag>表情包</tag>
<tag>DIY</tag>
<tag>volantis</tag>
<tag>Hexo</tag>
</tags>
</entry>
<entry>
<title>加速自己的hexo，使用GitHub+Coding实现国内外网站加速</title>
<url>/2019/11/30/github-coding/</url>
<content><![CDATA[<blockquote>
<p>基于Github+Coding实现国内外网站加速，让你的用户访问飞起来</p>
</blockquote>
<a id="more"></a>
<blockquote>
<p>在配置好hexo之后，我们发现访问网站很慢，但又不是我们使用的主题的问题，那么就是网络环境的影响，即使我们使用了CDN加速，但还是没有我们国内的网站访问起来快速，（听说去美国的服务器要经过太平洋下面的区域,那访问起来也算是挺快了啊）,那我们就可以让我们的网站在国内和国外各备份一份,然后国内的用户访问国内的,国外的用户访问国外的网站</p>
</blockquote>
<h2 id="1-创建项目"><a href="#1-创建项目" class="headerlink" title="1. 创建项目"></a>1. 创建项目</h2><p>进入 <a href="https://coding.net/" target="_blank">Coding 官网</a>点击个人版登陆，没有账号就注册一个并登录，由于 Coding 已经被腾讯收购了，所以登录就会来到腾讯云开发者平台，点击创建项目<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-39-57.png" /><br></fancybox></p>
<p>项目名称建议和你的用户名一致，这样做的好处是：到时候可以直接通过 <code>user_name.coding.me</code> 访问你的博客，如果项目名与用户名不一致，则需要通过 <code>user_name.coding.me/project_name</code> 才能访问，项目描述可以随便写<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-42-25.png" /><br></fancybox></p>
<h2 id="2-配置公匙"><a href="#2-配置公匙" class="headerlink" title="2. 配置公匙"></a>2. 配置公匙</h2><p>配置 SSH 公钥方法与 GitHub Pages 的方式差不多，点击你的头像，依次选择【个人设置】-【SSH公钥】-【新增公钥】<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-44-44.png" /><br></fancybox></p>
<p>PS：公钥储存位置一般在 C:\Users\用户名.ssh 目录下的 id_rsa.pub 文件里，用记事本打开复制其内容即可</p>
<h2 id="3-配置-config-yml"><a href="#3-配置-config-yml" class="headerlink" title="3.配置 _config.yml"></a>3.配置 _config.yml</h2><p>进入你的项目，在右下角有选择连接方式，选择 SSH 方式（HTTPS 方式也可以，但是这种方式有时候可能连接不上，SSH 连接不容易出问题），一键复制，然后打开你本地博客根目录的 <code>_config.yml</code> 文件，找到 <code>deploy</code> 关键字，添加 coding 地址：coding: <code>git@git.dev.tencent.com:user_name/user_name.git</code>，也就是刚刚复制的 SSH 地址<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-46-33.png" /><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-47-51.png" /><br></fancybox></p>
<p>添加完成后先执行命令 <code>hexo clean</code> 清理一下缓存，然后执行命令 <code>hexo g -d</code> 将博客双线部署到 Coding Pages 和 GitHub Pages，如下图所示表示部署成功：</p>
<h2 id="4-开启-Coding-Pages"><a href="#4-开启-Coding-Pages" class="headerlink" title="4.开启 Coding Pages"></a>4.开启 Coding Pages</h2><p>进入你的项目，在代码栏下选择 Pages 服务，一键开启 Coding Pages，等待几秒后刷新网页即可看到已经开启的 Coding Pages，<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-49-56.png" /><br></fancybox></p>
<h2 id="5-绑定域名并开启-HPPTS"><a href="#5-绑定域名并开启-HPPTS" class="headerlink" title="5.绑定域名并开启 HPPTS"></a>5.绑定域名并开启 HPPTS</h2><p>首先在你的域名 DNS 设置中添加一条 CNAME 记录指向 Coding给的地址，解析路线选择默认，将 GitHub 的解析路线改为境外，这样境外访问就会走 GitHub，境内就会走 Coding，也有人说阿里云是智能解析，自动分配路线，如果解析路线都是默认，境外访问同样会智能选择走 GitHub，境内走 Coding，我没有验证过，有兴趣的可以自己试试，我的解析如下图所示：<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-52-33.png" /><br></fancybox></p>
<p>然后点击静态 Pages 应用右上角的设置，进入设置页面，这里要注意，如果你之前已经部署到了 GitHub Pages 并开启了 HTTPS，那么直接在设置页面绑定你自己的域名，SSL/TLS 安全证书就会显示申请错误，如下图所示，没有申请到 SSL 证书，当你访问你的网站时，浏览器就会提示不是安全连接</p>
<p>申请错误原因是：在验证域名所有权时会定位到 Github Pages 的主机上导致 SSL 证书申请失败</p>
<p>正确的做法是：<font color=red>先去域名 DNS 把 GitHub 的解析暂停掉，然后再重新申请 SSL 证书</font>，大约十秒左右就能申请成功，然后开启强制 HTTPS 访问<br><fancybox><br><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-11-30_13-58-18.png" /><br></fancybox></p>
<p><a href="https://www.itrhx.com/2019/09/16/A47-hexo-deployed-to-github-and-coding/" target="_blank" rel="noopener">参考</a></p>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>BLOG</tag>
<tag>Hexo</tag>
<tag>学习之旅</tag>
<tag>Github</tag>
<tag>Coding</tag>
</tags>
</entry>
<entry>
<title>史上最详细配置HTTPS</title>
<url>/2019/11/27/sszxxpz/</url>
<content><![CDATA[<blockquote>
<p>给自己的博客(或者自己的服务器)配置一个免费的ssl证书,通过https访问</p>
<p>参考文档: <a href="https://support.huaweicloud.com/scm_faq/scm_01_0023.html" target="_blank" rel="noopener">https://support.huaweicloud.com/scm_faq/scm_01_0023.html</a></p>
<p>当然还是有很多的坑</p>
<p>让自己的服务器也加上锁吧!</p>
</blockquote>
<a id="more"></a>
<blockquote>
<p>HTTP（超文本传输协议），是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议，所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。</p>
</blockquote>
<blockquote>
<p>HTTPS（超文本传输安全协议），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。</p>
</blockquote>
<h3 id="预览三种网站的效果"><a href="#预览三种网站的效果" class="headerlink" title="预览三种网站的效果"></a>预览三种网站的效果</h3><ul>
<li><p>普通的http网站 <fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-41-53.png" /></fancybox></p>
</li>
<li><p>https的网站 <fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-43-02.png"></fancybox></p>
</li>
<li><p>https+ssl证书的网站(也就是本网站) <fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-43-45.png"></fancybox></p>
</li>
</ul>
<h3 id="获得SSL证书"><a href="#获得SSL证书" class="headerlink" title="获得SSL证书"></a>获得SSL证书</h3><ul>
<li><p>我选择的华为云的ssl证书</p>
</li>
<li><p>证书一般是收费的,当然现在有很多网站推出了白嫖的ssl证书,虽然没有正常的ssl证书那样有很多安全,但是可以证明网站备案等</p>
</li>
<li><p>在华为云头部搜索”免费证书”</p>
</li>
<li><p><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-47-52.png" /></fancybox></p>
</li>
<li><p>这里我们直接购买ssl证书,价格为0,购买之后,我们会收到一个qq邮箱提醒</p>
</li>
<li><p><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-51-18.png"></fancybox></p>
</li>
<li><p>我们点击下方的链接,用邮箱给我们的账号密码选择登录</p>
</li>
<li><p><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-52-43.png"></fancybox></p>
</li>
<li><p>如果是第一次访问,需要写一下东西,配置完之后如上图</p>
</li>
<li><p><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/img/Snipaste_2019-11-27_21-54-16.png"></fancybox></p>
</li>
<li><p>我们下载之后,按照<a href="https://support.huaweicloud.com/scm_faq/scm_01_0023.html" target="_blank" rel="noopener">这个文档进行配置</p>
</li>
</ul>
<h3 id="如果你没有遇到问题-那么你很强-就不需要继续往下看了"><a href="#如果你没有遇到问题-那么你很强-就不需要继续往下看了" class="headerlink" title="如果你没有遇到问题,那么你很强,就不需要继续往下看了"></a>如果你没有遇到问题,那么你很强,就不需要继续往下看了</h3><h3 id="开始踩坑"><a href="#开始踩坑" class="headerlink" title="开始踩坑"></a>开始踩坑</h3><blockquote>
<p>第一个遇到的坑就是 <code>./Nginx -s reload</code> 重启Nginx的时候,会出现一个ssl模板没有找到的错误</p>
<h2 id="解决方式"><a href="#解决方式" class="headerlink" title="解决方式"></a>解决方式</h2><figure class="highlight"><table><tr><td class="code"><pre><span class="line"># 进入到/usr/local/nginx-1.14.2（注：是nginx的源码包的目录），执行以下命令</span><br><span class="line">./configure --<span class="keyword">with</span>-http_ssl_module</span><br><span class="line"> </span><br><span class="line"># 注意这里只能用make 而不要用make install，因为执行make install是覆盖安装的意思</span><br><span class="line">make</span><br><span class="line"></span><br><span class="line">先备份旧的nginx</span><br><span class="line">cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx_bak</span><br><span class="line"></span><br><span class="line">复制新生成的文件到安装路径：</span><br><span class="line">cp ./objs/nginx /usr/local/nginx/sbin/</span><br><span class="line">./nginx -s reload #进行重启</span><br></pre></td></tr></table></figure>
</blockquote>
<blockquote>
<p>继续采坑中配置完之后发现,有了ssl证书,但是没有那个绿色的小锁头,很奇怪了</p>
<p>主要是由于页面使用了非<code>https</code>协议的文件,比如说<code><img src="http:xxxx" /></code>,就会产生这个原因,那么我们把页面的<code>http</code>全部改写为<code>https</code>就发现我们的网站恢复了</p>
</blockquote>
]]></content>
<categories>
<category>网络安全</category>
</categories>
<tags>
<tag>HTTPS</tag>
<tag>SSL</tag>
<tag>网络安全</tag>
<tag>CDN</tag>
<tag>服务器</tag>
<tag>域名</tag>
</tags>
</entry>
<entry>
<title>ES6学习中</title>
<url>/2019/11/26/es6study/</url>
<content><![CDATA[<blockquote>
<p>ES6的常见语法</p>
</blockquote>
<a id="more"></a>
<h1 id="ES6-常用的、重点的"><a href="#ES6-常用的、重点的" class="headerlink" title="ES6(常用的、重点的)"></a>ES6(常用的、重点的)</h1><h2 id="数组API、正则API、字符串API都不讲"><a href="#数组API、正则API、字符串API都不讲" class="headerlink" title="数组API、正则API、字符串API都不讲"></a>数组API、正则API、字符串API都不讲</h2><h2 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h2><ul>
<li>模板字符串的基本用法<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> s1 = <span class="string">`abc`</span></span><br></pre></td></tr></table></figure></li>
<li>模板字符串的优势：<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> obj={ <span class="attr">name</span>:<span class="string">""</span>,<span class="attr">age</span>:<span class="number">5</span> };</span><br><span class="line"><span class="keyword">var</span> s1 =<span class="string">"我叫："</span>+obj.name+<span class="string">"，今年："</span>+obj.age+<span class="string">"岁。"</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h2><ul>
<li><p>对象的解构赋值</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> obj={<span class="attr">name</span>:<span class="string">"张三"</span>,<span class="attr">age</span>:<span class="number">18</span>}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> {name,age}=obj; </span><br><span class="line"><span class="comment">//生成2个变量，</span></span><br><span class="line"><span class="comment">// name值来自于obj.name、</span></span><br><span class="line"><span class="comment">// age值来自于obj.age</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> {<span class="attr">name</span>:title}=obj;</span><br><span class="line"><span class="comment">//生成一个变量：title，值来自于obj.name</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>函数参数的解构赋值</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(obj.age);</span><br><span class="line"> <span class="built_in">console</span>.log(obj.height)</span><br><span class="line">}</span><br><span class="line"><span class="comment">//等价于</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params">{ age,height }</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(age);</span><br><span class="line"> <span class="built_in">console</span>.log(height)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">f1({<span class="attr">age</span>:<span class="number">5</span>,<span class="attr">height</span>:<span class="number">180</span>})</span><br></pre></td></tr></table></figure>
</li>
<li><p>补充：属性的简写</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">3</span> ; </span><br><span class="line"><span class="keyword">var</span> c = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> b = { a,c } ; </span><br><span class="line"><span class="comment">//b对象有一个a属性，a属性的值，来自于a变量 ，</span></span><br><span class="line"><span class="comment">//还有一个c属性，c属性的值来自于c变量</span></span><br><span class="line"><span class="built_in">console</span>.log(b)</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="函数的扩展"><a href="#函数的扩展" class="headerlink" title="函数的扩展"></a>函数的扩展</h2><h3 id="rest参数"><a href="#rest参数" class="headerlink" title="rest参数"></a>rest参数</h3><ul>
<li><p>使用背景：es6的</p>
</li>
<li><p>优点：arguments是伪数组，而rest参数是真数组</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">...args</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(args); <span class="comment">//数组：[1,2,3,4,5]</span></span><br><span class="line">}</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>)</span><br></pre></td></tr></table></figure>
<h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3></li>
<li><p>场景：用于替换匿名函数</p>
</li>
<li><p>基本用法：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//匿名函数</span></span><br><span class="line">div.onclick=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"你好"</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">//箭头函数</span></span><br><span class="line">div.onclick=<span class="function"><span class="params">()</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"你好"</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li>
<li><p>有一个参数的箭头函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> fn=<span class="function">(<span class="params">a</span>)=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"abc"</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">//等价于：</span></span><br><span class="line"><span class="keyword">var</span> fn=<span class="function"><span class="params">a</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"abc"</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li>
<li><p>有2个及更多参数的箭头函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> f=<span class="function">(<span class="params">a,b,c</span>)=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"abc"</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>箭头函数和普通匿名函数有哪些不同？</p>
<ul>
<li>函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。</li>
<li>不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。</li>
<li>不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。</li>
<li>（不常用）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。 <ul>
<li>generator函数现在经常用async替代</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="对象的扩展"><a href="#对象的扩展" class="headerlink" title="对象的扩展"></a>对象的扩展</h2><ul>
<li>Object.assign：实现拷贝继承</li>
<li>对象扩展运算符<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1={ <span class="attr">age</span>:<span class="number">5</span>,<span class="attr">gender</span>:<span class="string">"男"</span> }</span><br><span class="line"><span class="keyword">var</span> obj2={ ...obj1 }</span><br><span class="line"><span class="keyword">var</span> obj3={ ...obj1 , <span class="attr">age</span>:<span class="number">10</span> }</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><h3 id="为什么要有promise：解决（回调地狱）的问题"><a href="#为什么要有promise：解决（回调地狱）的问题" class="headerlink" title="为什么要有promise：解决（回调地狱）的问题"></a>为什么要有promise：解决（回调地狱）的问题</h3><h3 id="回调地狱："><a href="#回调地狱：" class="headerlink" title="回调地狱："></a>回调地狱：</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//跟以前的if条件地狱很像</span></span><br><span class="line"><span class="comment">// if(){</span></span><br><span class="line"><span class="comment">// if(){</span></span><br><span class="line"><span class="comment">// if(){</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"></span><br><span class="line">$.<span class="keyword">get</span>("/getUser",function(res){</span><br><span class="line"> $.<span class="keyword">get</span>("/getUserDetail",function(){</span><br><span class="line"> $.<span class="keyword">get</span>("/getCart",function(){</span><br><span class="line"> $.<span class="keyword">get</span>("/getBooks",function(){</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//node开发：读取文件；开个服务器、接收一个请求、请求路径、访问数据库</span></span><br></pre></td></tr></table></figure>
<h3 id="Promise函数基本用法"><a href="#Promise函数基本用法" class="headerlink" title="Promise函数基本用法"></a>Promise函数基本用法</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> promise=<span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> <span class="comment">//b 把需要执行的异步操作放在这里</span></span><br><span class="line"> $.<span class="keyword">get</span>("/getUser",res=>{</span><br><span class="line"> <span class="comment">//获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了</span></span><br><span class="line"> <span class="comment">//c、</span></span><br><span class="line"> resolve(res)</span><br><span class="line"> <span class="comment">//而执行的下一步操作，其实就是写在then的回调函数中的</span></span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"><span class="comment">//a、</span></span><br><span class="line">promise.then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="comment">//d、执行后续的操作</span></span><br><span class="line"> <span class="built_in">console</span>.log(res);</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 js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> $.<span class="keyword">get</span>("/getUser",res=>{</span><br><span class="line"> resolve(res)</span><br><span class="line"> })</span><br><span class="line">}).then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="comment">//用户基本信息</span></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span>=></span>{</span><br><span class="line"> $.<span class="keyword">get</span>("/getUserDetail",res=>{</span><br><span class="line"> resolve(res)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">}).then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="comment">//用户详情</span></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span>=></span>{</span><br><span class="line"> $.<span class="keyword">get</span>("/getCart",res=>{</span><br><span class="line"> resolve(res)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">}).then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="comment">//购物车信息</span></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><ul>
<li><p>第一种方式</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> $.ajax({</span><br><span class="line"> url:<span class="string">"/getUser"</span>,</span><br><span class="line"> type:<span class="string">"GET"</span>,</span><br><span class="line"> success:<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> resolve(res);</span><br><span class="line"> },</span><br><span class="line"> error:<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> reject(res)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}).then(<span class="function"><span class="params">resSuccess</span>=></span>{</span><br><span class="line"> <span class="comment">//成功的返回值</span></span><br><span class="line">},resError=>{</span><br><span class="line"> <span class="comment">//失败的返回值</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</li>
<li><p>第二种方式</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> $.ajax({</span><br><span class="line"> url:<span class="string">"/getUser"</span>,</span><br><span class="line"> type:<span class="string">"GET"</span>,</span><br><span class="line"> success:<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> resolve(res);</span><br><span class="line"> },</span><br><span class="line"> error:<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> reject(res)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}).then(<span class="function"><span class="params">resSuccess</span>=></span>{</span><br><span class="line"> <span class="comment">//成功的返回值</span></span><br><span class="line">}).catch(<span class="function"><span class="params">resError</span>=></span>{</span><br><span class="line"> <span class="comment">//失败的返回值</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="async"><a href="#async" class="headerlink" title="async"></a>async</h2><ul>
<li><p>async其实是一个promise的语法糖</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">get</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'开始执行'</span>);</span><br><span class="line"> <span class="keyword">var</span> res = <span class="keyword">await</span> timer()</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'执行结束：'</span>,res);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timer</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span>=></span>{</span><br><span class="line"> resolve(<span class="string">"你好"</span>);</span><br><span class="line"> },<span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"><span class="keyword">get</span>();</span><br></pre></td></tr></table></figure>
</li>
<li><p>await可以执行异步操作，但是await必须在async函数内执行</p>
</li>
<li><p>await操作可以有返回值，这个返回值表示promise操作成功的返回值</p>
</li>
<li><p>如果await里面执行的异步操作发生了reject，或者发生了错误，那么只能使用try…catch语法来进行错误处理</p>
</li>
</ul>
<h2 id="class"><a href="#class" class="headerlink" title="class"></a>class</h2><h3 id="定义一个类"><a href="#定义一个类" class="headerlink" title="定义一个类"></a>定义一个类</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(name) {</span><br><span class="line"> <span class="keyword">this</span>.name=name;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//相当于：</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>)</span>{</span><br><span class="line"> <span class="keyword">this</span>.name=name;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="添加实例方法"><a href="#添加实例方法" class="headerlink" title="添加实例方法"></a>添加实例方法</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(name,age) {</span><br><span class="line"> <span class="keyword">this</span>.name=name;</span><br><span class="line"> <span class="keyword">this</span>.age=age;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//定义方法</span></span><br><span class="line"> say() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"大家好，我叫："</span>+<span class="keyword">this</span>.name+<span class="string">"，今年："</span>+<span class="keyword">this</span>.age+<span class="string">"岁"</span>);</span><br><span class="line"> }</span><br><span class="line"> travel(){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"坐着飞机去巴厘岛"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="添加静态方法"><a href="#添加静态方法" class="headerlink" title="添加静态方法"></a>添加静态方法</h3><ul>
<li>静态成员：静态属性、静态方法</li>
<li>静态属性：通过类本身来访问：Person.maxAge</li>
<li>静态方法：通过类本身来访问的一个方法：Person.born();<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(){</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//这就是一个静态方法了</span></span><br><span class="line"> <span class="keyword">static</span> born(){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"小呆萌出生了"</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//访问静态方法</span></span><br><span class="line">Animal.born();</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="类的继承"><a href="#类的继承" class="headerlink" title="类的继承"></a>类的继承</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//父类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(name){</span><br><span class="line"> <span class="keyword">this</span>.name=name;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//Student类继承自Person类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Student</span> <span class="keyword">extends</span> <span class="title">Person</span> </span>{</span><br><span class="line"> <span class="comment">//构造方法</span></span><br><span class="line"> <span class="keyword">constructor</span>(name,grade){</span><br><span class="line"> <span class="comment">//规定：必须调用父类构造方法，如果不调用就会报错</span></span><br><span class="line"> <span class="keyword">super</span>(name); </span><br><span class="line"> <span class="comment">//调用父类构造方法，从而给子类的实例添加了name属性</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.grade=grade;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>].map(<span class="function"><span class="keyword">function</span>(<span class="params">value,index</span>)</span>{</span><br><span class="line"></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>].map(<span class="function">(<span class="params">value,index</span>)=></span>{</span><br><span class="line"></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//以前变量和字符串拼接，现在用模板字符串</span></span><br></pre></td></tr></table></figure>
<h2 id="es6的新语法"><a href="#es6的新语法" class="headerlink" title="es6的新语法"></a>es6的新语法</h2><ul>
<li>个人建议：不要去试想着一下子全部把之前的代码习惯变成es6的方式<ul>
<li>而是今年学会了模板字符串，把今天项目用到的所有字符串拼接都换成模板字符串</li>
<li>过了几天学会了箭头函数，把当天项目里面的所有用到的匿名函数都换成箭头函数</li>
</ul>
</li>
</ul>
<h2 id="预习作业：通过MDN学习Object-defineProperty-的用法"><a href="#预习作业：通过MDN学习Object-defineProperty-的用法" class="headerlink" title="预习作业：通过MDN学习Object.defineProperty()的用法"></a>预习作业：通过MDN学习Object.defineProperty()的用法</h2><h2 id="module-–-gt-放到后面的模块化课程中讲解"><a href="#module-–-gt-放到后面的模块化课程中讲解" class="headerlink" title="module –>放到后面的模块化课程中讲解"></a>module –>放到后面的模块化课程中讲解</h2><h3 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h3><ul>
<li><p>导出模块：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//common.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> { <span class="attr">name</span>:<span class="string">"abc"</span> }</span><br></pre></td></tr></table></figure>
</li>
<li><p>导入模块：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//b.js</span></span><br><span class="line"><span class="keyword">import</span> common <span class="keyword">from</span> <span class="string">"common.js"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( common.name ) <span class="comment">//"abc"</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="模块有多个导出"><a href="#模块有多个导出" class="headerlink" title="模块有多个导出"></a>模块有多个导出</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//person.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> jim = { <span class="attr">country</span> :<span class="string">"France"</span> }</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> tony = { <span class="attr">color</span>:<span class="string">"gray"</span> }</span><br><span class="line"><span class="comment">//默认的导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> { <span class="attr">name</span>:<span class="string">"abc"</span> }</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//index.js</span></span><br><span class="line"><span class="keyword">import</span> person , { jim , tony } <span class="keyword">from</span> <span class="string">"person.js"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//person：{ name:"abc" }</span></span><br><span class="line"><span class="comment">//jim：{ country :"France" }</span></span><br><span class="line"><span class="comment">//tony：{ color:"gray" }</span></span><br></pre></td></tr></table></figure>
<h3 id="模块导入导出取别名"><a href="#模块导入导出取别名" class="headerlink" title="模块导入导出取别名"></a>模块导入导出取别名</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//person.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> tony = { <span class="attr">color</span>:<span class="string">"gray"</span> }</span><br><span class="line"><span class="keyword">export</span> { tony <span class="keyword">as</span> Tony }</span><br><span class="line"></span><br><span class="line"><span class="comment">//index.js</span></span><br><span class="line"><span class="keyword">import</span> { Tony } <span class="keyword">from</span> <span class="string">"person.js"</span></span><br><span class="line"><span class="keyword">import</span> { Tony <span class="keyword">as</span> man} <span class="keyword">from</span> <span class="string">"person.js"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(man) <span class="comment">//{ color:"gray" }</span></span><br></pre></td></tr></table></figure>
<blockquote>
</blockquote>
]]></content>
<categories>
<category>JavaScript</category>
<category>ES6</category>
</categories>
<tags>
<tag>学习之旅</tag>
<tag>箭头函数</tag>
<tag>ES6</tag>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title>jQuery简单学习</title>
<url>/2019/11/26/jqstudy/</url>
<content><![CDATA[<h2 id="一-jQuery的基本使用"><a href="#一-jQuery的基本使用" class="headerlink" title="一.jQuery的基本使用"></a>一.jQuery的基本使用</h2><ul>
<li>1.0 2.0 3.0 分别支持ie8 部分支持ie8 全部不支持ie8 开发的时候最常用的是1.几版本</li>
<li>分为开发版本和压缩版本 带有min的是压缩版本，一般情况下使用的是开发版本</li>
<li>window.onload=function(){} <=> $(function(){}) 绑定文档加载完成的监听</li>
<li>分为两种使用 使用jQuery核心函数或者jQuery核心对象 核心函数$/jQuery 核心对象 执行$()返回的对象</li>
</ul>
<h2 id="二-jQuert的两把利器"><a href="#二-jQuert的两把利器" class="headerlink" title="二.jQuert的两把利器"></a>二.jQuert的两把利器</h2><ul>
<li>jQuery的核心函数,直接可用</li>
<li>jQuery的核心对象,执行jQuery函数调用他</li>
</ul>
<h2 id="三-jQuery函数的使用"><a href="#三-jQuery函数的使用" class="headerlink" title="三.jQuery函数的使用"></a>三.jQuery函数的使用</h2><p> I.作为一般函数使用:$(param)<br> 1). 参数为函数 : 当DOM加载完成后，执行此回调函数<br> 2). 参数为DOM对象 : 将DOM对象封装成jQuery对象<br> 3). 参数为选择器字符串 : 查找所有匹配的标签，并将他们分装成jQuery对象<br> 4). 参数为html标签字符串 : (用的少)创建标签对象并分装成jQuery对象</p>
<p> II.作为对象使用:$.xxx()<br> 1). $.each() : 隐使遍历数组 回调函数中第一个为key，第二个为value<br> 2). $.trim() : 去除两端空格 </p>
<p> III. 事件回调函数中 this指向的是 #btn DOM对象元素</p>
<h2 id="四-jQuery对象的使用"><a href="#四-jQuery对象的使用" class="headerlink" title="四.jQuery对象的使用"></a>四.jQuery对象的使用</h2><pre><code>I. 理解
1).即执行jQuery核心函数返回的对象
2).jQuery对象内部包含的是dom元素对象的伪数组
3).jQuery对象拥有很多有用的方法和属性
II. 基本行为
1).size()/length : 包含的DOM元素
2).[index]/get(index) : 得到DOM元素对应的下标
3).each() : 遍历DOM元素
4).index() : 得到DOM元素的下标
III. 伪数组
1).伪数组是一个对象
2).伪数组必须有length属性
3).如果这个对象的length不为0，那么必须要有按照下标存储的数据
4).没有数组特别的方法 forEach() push() pop() splice()</code></pre><h2 id="五-jQuery基本选择器"><a href="#五-jQuery基本选择器" class="headerlink" title="五.jQuery基本选择器"></a>五.jQuery基本选择器</h2><pre><code>1).class ".b"代表所有的class属性为b的元素
2).id "#div" 代表id元素
3).标签 "div" 代表标签元素
4).子集 "div.box" 代表class属性为btn中的div元素
5).并集 "#b,#c" 代表id为c和id为b的元素</code></pre><h2 id="六-jQuery层次选择器"><a href="#六-jQuery层次选择器" class="headerlink" title="六.jQuery层次选择器"></a>六.jQuery层次选择器</h2><pre><code>I.查找子元素，后代元素，兄弟元素的选择器
1). > 是指当前这一代的下一代，不包括下下代
2). + 是指当前元素的下一个元素，只包括一个
3). ~ 是指当前元素的后面所有兄弟姐妹元素(就是不能包括上一级的元素)</code></pre><h2 id="七-jQuery过滤选择器"><a href="#七-jQuery过滤选择器" class="headerlink" title="七.jQuery过滤选择器"></a>七.jQuery过滤选择器</h2><pre><code>I. 选择器
1). :first 正序
2). :last 倒叙
3). :not(.box) 选择不包含clss为box的元素
4). :lt(3):gt(0) 小于第三个大于第零个
5). :contains("name") 选择所有标签的innerHTML内容是name的标签
6). :hidden() 选择隐藏的标签
7). [title] 选择所有带有title属性的标签体
8). [title=hello] 选择title属性为hello的标签
II. 多个选择器不是同时执行，而是以此执行</code></pre><h2 id="八-jQuery隔行换色"><a href="#八-jQuery隔行换色" class="headerlink" title="八.jQuery隔行换色"></a>八.jQuery隔行换色</h2><pre><code>1). odd:偶数 even:奇数 nth-child(2n)偶数</code></pre><h2 id="九-jQuery表单选择器"><a href="#九-jQuery表单选择器" class="headerlink" title="九.jQuery表单选择器"></a>九.jQuery表单选择器</h2><pre><code>I.表单的常用选择器
1). text[disabled] :选择text文本的不可用输入框
2). checkbox:checked :选择被选中的复选框按钮
II. :等价于[] 在选择器中等价存在</code></pre><h2 id="十-jQuery-工具方法"><a href="#十-jQuery-工具方法" class="headerlink" title="十.jQuery_$工具方法"></a>十.jQuery_$工具方法</h2><pre><code>I.工具方法
1). $.each() : 遍历数组对象中的数据
2). $.trim() : 去除字符串两遍的空格
3). $.type(obj) : 得到数据类型
4). $.isArray(obj) : 判断是否是数组
5). $.isFunction(obj) : 判断是否是函数
6). $.parseJSON(json) : 解析json字符串转换为js对象
II. JSON
1). '{"name":"Tom" , "Age":12 }' 这是一个json
2). '[{"name":"Tom","Age":12},{"name":"Allen","Age":24}]' 这是一个json数组
3). JSON.parse(jsonString) json字符串---->js对象/数组
4). JSON.stringify(jsObj/jsArr) js对象/数组---->json字符串</code></pre><h2 id="十一-jQuery多tab点击切换"><a href="#十一-jQuery多tab点击切换" class="headerlink" title="十一.jQuery多tab点击切换"></a>十一.jQuery多tab点击切换</h2><pre><code>I. 设计思路 获取全部的DOM元素，然后通过this获取到这个index()，最后通过操作jQuery对象的下标的方式操作
II. 先获取全部的DOM元素，然后定义一个当前显示的元素的下标，先让这个元素隐藏，在显示当前点击的元素，最后更新下标（效率上更高）</code></pre><h2 id="十二-jQuery属性"><a href="#十二-jQuery属性" class="headerlink" title="十二.jQuery属性"></a>十二.jQuery属性</h2><pre><code>I.属性
1).attr() 一个参数代表查看，两个参数代表第二个参数覆盖 但是不能操作布尔值
2).removeAttr() 移除
3).addClass() 添加class
4).html() 标签 有字符串代表->这是标签体
5).prop() 专门操作属性值为boolean的属性值</code></pre><h2 id="十三-jQuery的CSS操作"><a href="#十三-jQuery的CSS操作" class="headerlink" title="十三.jQuery的CSS操作"></a>十三.jQuery的CSS操作</h2><pre><code>I.CSS操作
1).css() 一个参数代表查看，两个参数代表第二个参数覆盖
2).css({'color':'#ff0011'})可以这是多个值</code></pre><h2 id="十四-jQuery位置操作"><a href="#十四-jQuery位置操作" class="headerlink" title="十四.jQuery位置操作"></a>十四.jQuery位置操作</h2><pre><code>I.offset 和 position
1).offset().left 和 offset().top 两个可以获取相对于页面的位置
2).position() 和上面是一样，这个获取的是父元素的位置</code></pre><h2 id="十五-jQuery中的位置滚动"><a href="#十五-jQuery中的位置滚动" class="headerlink" title="十五.jQuery中的位置滚动"></a>十五.jQuery中的位置滚动</h2><pre><code>I.常用方法
1).scrollTop() 可以得到元素的滚动高度
2).scrollLeft() 可以得到x轴滚动距离
3).上面的两个方法(number) 既可设置滚动的距离
II.如何获取窗体滚动 获取页面的html+body两个滚动条的滚动总量</code></pre><h2 id="十六-练习-jQuery回滚到顶部"><a href="#十六-练习-jQuery回滚到顶部" class="headerlink" title="十六.练习 jQuery回滚到顶部"></a>十六.练习 jQuery回滚到顶部</h2><pre><code>I.瞬间回到顶部 $('html,body').scrollTop(0)
II.平滑滚动 计算总时间，时间间隔（定时器的时间）总距离 每次移动的距离（总距离除以需要的时间） 然后用定时器执行</code></pre><h2 id="十七-jQuery元素的尺寸"><a href="#十七-jQuery元素的尺寸" class="headerlink" title="十七.jQuery元素的尺寸"></a>十七.jQuery元素的尺寸</h2><pre><code>I.内容尺寸
1).height() :height
2).width() :width
II.内部尺寸
1).innerHeight() :height+padding
2).innerWidth() :width+padding
III.外部尺寸
1).outerHeight(false/true) :height+padding+border 如果是true，加上margin
1).outerWidth(false/true) :width+padding+border 如果是true，加上margin</code></pre><h2 id="十八-jQuery的筛选"><a href="#十八-jQuery的筛选" class="headerlink" title="十八.jQuery的筛选"></a>十八.jQuery的筛选</h2><pre><code>I.过滤
1).first() 第一个
2).last() 最后一个
3).eq()* 指定某一个 参数为number
4).filter('[title=hello]') 指定title属性为hello的
5).not('[title=hello]') 指定不是hello的(还包括没有title属性)
6).filter('[title][title!=hello]') 交集选择器代表两个条件
7).has('span') 指向内部标签
II.查找
1).children() 子标签
2).find() 后代标签
3).parent() 父标签
4).prevAll() 前面的标签
5).siblings() 兄弟标签</code></pre><h2 id="十九-jQuery文档操作"><a href="#十九-jQuery文档操作" class="headerlink" title="十九.jQuery文档操作 *"></a>十九.jQuery文档操作 *</h2><pre><code>I.增删改
1).append(ELement) 向内部最后添加元素
2).prepend(Element) 向内部最前添加元素
3).before(Element) 向兄弟前面添加元素
4).after(ELement) 向兄弟后面添加元素
5).replaceWith(Element) 替换指定的内部元素
6).remove(DOM_Element) 移除指定的内部元素</code></pre><h2 id="二十-jQuery事件处理"><a href="#二十-jQuery事件处理" class="headerlink" title="二十.jQuery事件处理"></a>二十.jQuery事件处理</h2><pre><code>I.常用事件
1).mouseenter() 鼠标移入
2).mouseleave() 鼠标移出
II.事件处理
1).on(eve,fn) 第一个参数代表事件的处理方式
2).off() 和第一个相对应，取消时间绑定
3).点击时传入ev
->ev.clientX 到客户端左上角的距离
->ev.pageX 到页面顶部左上角的距离
->ev.offsetX 到相对于事件左上角的距离
->ev.stopPropagation() 阻止事件的冒泡
->ev.preventDefault() 阻止事件的默认行为
III.事件切换
1).hover(fn,fn) 是mouseenter,mouseleave两个函数的回调函数
IV.区别mouseover与mouseenter
*mouseover:在移入子元素时也会触发,对应mouseout
*mouseenter:只在移入当前元素时触发,对应mouseleave
V.事件委托
1).将多个子元素(li)的事件监听委托给父元素(ul)处理
2).监听回调是加在了父元素上
3).当操作任何一个子元素(li)时，事件会冒泡到父元素(ul)上
4).父辈元素不会直接处理，而是根据event.target得到发生事件的子元素(li)，通过这个子元素调用事件回调函数
5).委托方 ： 业主 li
6).被委托方 : 中介 ul
7).添加新的子元素，自动由事件响应处理
8).减少事件监听的数量: n==>1
9).设置事件委托API: $(parentSelector).delegate(childrenSelector,eventName,callback)
10).取消事件的委托API:$(parentSelector).undelegate(eventName)</code></pre><h2 id="二十一-jQuery动画"><a href="#二十一-jQuery动画" class="headerlink" title="二十一.jQuery动画"></a>二十一.jQuery动画</h2><pre><code>I.内置动画
1).fadeOut() 淡入 param--->number 代表存在秒数
2).fadeIn() 淡出 参数和上面一样
3).fadeToggle() 淡入淡出切换 可以传一个回调函数，当切换结束的时候触发
4).不断改变元素opacity来实现
5).slideDown() 带动画的展开
6).sildeUp() 带动画的收缩
7).sildeToggle() 带动画的切换展开/收缩
8).不断改变元素height实现
9).show() 显示
10).hide() 隐藏
11).toggle() 切换
12).不断改变opacity和height和width实现
II.自定义动画
1).animate() 指定自定义动画 参数可以传一个json 分别指定值
2).animate() 不需要带有单位，还可以进行字符串的加减
3).stop() 可以阻止动画的继续进行</code></pre><h2 id="二十二-jQuery多库共存"><a href="#二十二-jQuery多库共存" class="headerlink" title="二十二.jQuery多库共存"></a>二十二.jQuery多库共存</h2><pre><code>I.当多个$库同时存在时,需要使用
II.调用jQuery.noConflict()释放$使用权
III.下文需要调用的$时，只能使用jQuery</code></pre><h2 id="二十三-区别onload与ready"><a href="#二十三-区别onload与ready" class="headerlink" title="二十三.区别onload与ready"></a>二十三.区别onload与ready</h2><pre><code>I.window.onload
1).包括页面的图片加载完后才会调用(晚)
2).只能有一个监听回调
II.$(document).ready()
1).等同于$(function(){})
2).页面加载完就回调(早)
3).可以有多个监听回调</code></pre><h2 id="二十四-jQuery扩展工具"><a href="#二十四-jQuery扩展工具" class="headerlink" title="二十四.jQuery扩展工具"></a>二十四.jQuery扩展工具</h2><pre><code>I.$扩展本身, 使用方式---->$.min()
1).定义
$.extend({
xx:function(){
...
},
yy:function(){
...
}
})
II.$添加新的方法,使用方式----->$.checkAll()
1).定义
$.fn.extend({
xx:function(){
...
},
yy:function(){
...
}
})</code></pre>]]></content>
<categories>