-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathatom.xml
More file actions
578 lines (346 loc) · 225 KB
/
atom.xml
File metadata and controls
578 lines (346 loc) · 225 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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>SH'S BLOG</title>
<subtitle>残梦学习路</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://2662419405.github.io/"/>
<updated>2019-12-31T07:18:26.252Z</updated>
<id>https://2662419405.github.io/</id>
<author>
<name>SH'S BLOG</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>node 常用工具大整合</title>
<link href="https://2662419405.github.io/2019/12/31/nodegongju/"/>
<id>https://2662419405.github.io/2019/12/31/nodegongju/</id>
<published>2019-12-31T06:25:37.000Z</published>
<updated>2019-12-31T07:18:26.252Z</updated>
<content type="html"><![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>
<summary type="html">
<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>
</summary>
<category term="Node" scheme="https://2662419405.github.io/categories/Node/"/>
<category term="nvm" scheme="https://2662419405.github.io/tags/nvm/"/>
<category term="nrm" scheme="https://2662419405.github.io/tags/nrm/"/>
<category term="node" scheme="https://2662419405.github.io/tags/node/"/>
<category term="pm2" scheme="https://2662419405.github.io/tags/pm2/"/>
<category term="nodemon" scheme="https://2662419405.github.io/tags/nodemon/"/>
<category term="工具大合集" scheme="https://2662419405.github.io/tags/%E5%B7%A5%E5%85%B7%E5%A4%A7%E5%90%88%E9%9B%86/"/>
</entry>
<entry>
<title>用pjax让你的页面加载飞起来!</title>
<link href="https://2662419405.github.io/2019/12/20/pjax/"/>
<id>https://2662419405.github.io/2019/12/20/pjax/</id>
<published>2019-12-20T12:25:48.000Z</published>
<updated>2019-12-20T12:29:23.135Z</updated>
<content type="html"><![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="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="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="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="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="gutter"><pre><span class="line">1</span><br></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="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="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></pre></td><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="gutter"><pre><span class="line">1</span><br></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="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>
<summary type="html">
<blockquote>
<p>什么是pjax?</p>
<p>pjax = ajax + pushState</p>
<p>目的!</p>
<p>让页面加载飞起来</p>
</blockquote>
</summary>
<category term="Hexo" scheme="https://2662419405.github.io/categories/Hexo/"/>
<category term="性能优化" scheme="https://2662419405.github.io/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
<category term="pjax" scheme="https://2662419405.github.io/tags/pjax/"/>
<category term="ajax" scheme="https://2662419405.github.io/tags/ajax/"/>
<category term="html5" scheme="https://2662419405.github.io/tags/html5/"/>
<category term="nprogress" scheme="https://2662419405.github.io/tags/nprogress/"/>
<category term="github" scheme="https://2662419405.github.io/tags/github/"/>
<category term="loading" scheme="https://2662419405.github.io/tags/loading/"/>
</entry>
<entry>
<title>使用 Travis-CI 持续集成部署 HEXO 博客项目</title>
<link href="https://2662419405.github.io/2019/12/20/kcxhjc/"/>
<id>https://2662419405.github.io/2019/12/20/kcxhjc/</id>
<published>2019-12-20T01:24:00.000Z</published>
<updated>2019-12-20T07:40:33.225Z</updated>
<content type="html"><![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="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></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">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>
<summary type="html">
<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>
</summary>
<category term="Hexo" scheme="https://2662419405.github.io/categories/Hexo/"/>
<category term="BLOG" scheme="https://2662419405.github.io/tags/BLOG/"/>
<category term="Hexo" scheme="https://2662419405.github.io/tags/Hexo/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="Github" scheme="https://2662419405.github.io/tags/Github/"/>
<category term="Travis CI" scheme="https://2662419405.github.io/tags/Travis-CI/"/>
<category term="持续集成自动部署" scheme="https://2662419405.github.io/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/"/>
<category term="Token" scheme="https://2662419405.github.io/tags/Token/"/>
</entry>
<entry>
<title>性能优化大合集,必备!</title>
<link href="https://2662419405.github.io/2019/12/10/xnyh/"/>
<id>https://2662419405.github.io/2019/12/10/xnyh/</id>
<published>2019-12-10T13:26:02.000Z</published>
<updated>2019-12-10T14:38:00.945Z</updated>
<content type="html"><![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="gutter"><pre><span class="line">1</span><br></pre></td><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>
<summary type="html">
<blockquote>
<p>重定向 → 拉取缓存 →DNS 查询 → 建立 TCP 链接 → 发起请求 → 接收响应 → 处理 HTML 元素 → 元素加载完成</p>
<p>重要性: 一个网站的体验，决定了用户是否愿意去了解网站的功能；而网站的功能，决定了用户是否会一票否决网站的体验。这是改版自网络上的一句流行语，但却把网站性能这件事说的十分透彻，特别是在网站这样的项目中，如果一个用户需要超过5s才能看见页面，他会毫不犹豫地关闭它。</p>
</blockquote>
</summary>
<category term="Node" scheme="https://2662419405.github.io/tags/Node/"/>
<category term="性能优化" scheme="https://2662419405.github.io/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
<category term="CDN" scheme="https://2662419405.github.io/tags/CDN/"/>
<category term="Pm2" scheme="https://2662419405.github.io/tags/Pm2/"/>
<category term="雪碧图" scheme="https://2662419405.github.io/tags/%E9%9B%AA%E7%A2%A7%E5%9B%BE/"/>
<category term="Webp" scheme="https://2662419405.github.io/tags/Webp/"/>
<category term="反向代理" scheme="https://2662419405.github.io/tags/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86/"/>
<category term="ngxin" scheme="https://2662419405.github.io/tags/ngxin/"/>
<category term="iconfont" scheme="https://2662419405.github.io/tags/iconfont/"/>
</entry>
<entry>
<title>git开发流程和常见命令</title>
<link href="https://2662419405.github.io/2019/12/08/gitEasy/"/>
<id>https://2662419405.github.io/2019/12/08/gitEasy/</id>
<published>2019-12-08T10:35:37.000Z</published>
<updated>2019-12-08T10:42:41.067Z</updated>
<content type="html"><![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>
<summary type="html">
<blockquote>
<p>git,是一种版本控制工具,用于整合项目或者项目回滚有很好的效果,相比于svn,git操作更加灵活,限制更少一些</p>
</blockquote>
</summary>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="git" scheme="https://2662419405.github.io/tags/git/"/>
<category term="多人开发" scheme="https://2662419405.github.io/tags/%E5%A4%9A%E4%BA%BA%E5%BC%80%E5%8F%91/"/>
<category term="合作流程" scheme="https://2662419405.github.io/tags/%E5%90%88%E4%BD%9C%E6%B5%81%E7%A8%8B/"/>
</entry>
<entry>
<title>DIY自己的评论表情包</title>
<link href="https://2662419405.github.io/2019/12/03/csbqb/"/>
<id>https://2662419405.github.io/2019/12/03/csbqb/</id>
<published>2019-12-03T12:55:45.000Z</published>
<updated>2019-12-03T13:37:20.419Z</updated>
<content type="html"><![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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="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>
<summary type="html">
<blockquote>
<p>定制属于自己的专属表情包,虽然Voline有自己的一套表情包,但是感觉不是很好看,那么现在就来自己定制一下吧</p>
</blockquote>
</summary>
<category term="表情包" scheme="https://2662419405.github.io/tags/%E8%A1%A8%E6%83%85%E5%8C%85/"/>
<category term="DIY" scheme="https://2662419405.github.io/tags/DIY/"/>
<category term="volantis" scheme="https://2662419405.github.io/tags/volantis/"/>
<category term="Hexo" scheme="https://2662419405.github.io/tags/Hexo/"/>
</entry>
<entry>
<title>加速自己的hexo，使用GitHub+Coding实现国内外网站加速</title>
<link href="https://2662419405.github.io/2019/11/30/github-coding/"/>
<id>https://2662419405.github.io/2019/11/30/github-coding/</id>
<published>2019-11-30T05:19:28.000Z</published>
<updated>2019-12-03T13:06:52.123Z</updated>
<content type="html"><![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>
<summary type="html">
<blockquote>
<p>基于Github+Coding实现国内外网站加速，让你的用户访问飞起来</p>
</blockquote>
</summary>
<category term="Hexo" scheme="https://2662419405.github.io/categories/Hexo/"/>
<category term="BLOG" scheme="https://2662419405.github.io/tags/BLOG/"/>
<category term="Hexo" scheme="https://2662419405.github.io/tags/Hexo/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="Github" scheme="https://2662419405.github.io/tags/Github/"/>
<category term="Coding" scheme="https://2662419405.github.io/tags/Coding/"/>
</entry>
<entry>
<title>史上最详细配置HTTPS</title>
<link href="https://2662419405.github.io/2019/11/27/sszxxpz/"/>
<id>https://2662419405.github.io/2019/11/27/sszxxpz/</id>
<published>2019-11-27T13:21:44.000Z</published>
<updated>2019-12-03T13:07:04.063Z</updated>
<content type="html"><![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="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></pre></td><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>
<summary type="html">
<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>
</summary>
<category term="网络安全" scheme="https://2662419405.github.io/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/"/>
<category term="HTTPS" scheme="https://2662419405.github.io/tags/HTTPS/"/>
<category term="SSL" scheme="https://2662419405.github.io/tags/SSL/"/>
<category term="网络安全" scheme="https://2662419405.github.io/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/"/>
<category term="CDN" scheme="https://2662419405.github.io/tags/CDN/"/>
<category term="服务器" scheme="https://2662419405.github.io/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/"/>
<category term="域名" scheme="https://2662419405.github.io/tags/%E5%9F%9F%E5%90%8D/"/>
</entry>
<entry>
<title>ES6学习中</title>
<link href="https://2662419405.github.io/2019/11/26/es6study/"/>
<id>https://2662419405.github.io/2019/11/26/es6study/</id>
<published>2019-11-26T05:53:00.000Z</published>
<updated>2019-11-28T04:49:22.136Z</updated>
<content type="html"><![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="gutter"><pre><span class="line">1</span><br></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span 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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span 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="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></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span 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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><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="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 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="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="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="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></pre></td><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="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></pre></td><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="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></pre></td><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="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></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="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="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></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="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="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="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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">[<span class="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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span 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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span 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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span 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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="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>
<summary type="html">
<blockquote>
<p>ES6的常见语法</p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://2662419405.github.io/categories/JavaScript/"/>
<category term="ES6" scheme="https://2662419405.github.io/categories/JavaScript/ES6/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="箭头函数" scheme="https://2662419405.github.io/tags/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/"/>
<category term="ES6" scheme="https://2662419405.github.io/tags/ES6/"/>
<category term="JavaScript" scheme="https://2662419405.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>jQuery简单学习</title>
<link href="https://2662419405.github.io/2019/11/26/jqstudy/"/>
<id>https://2662419405.github.io/2019/11/26/jqstudy/</id>
<published>2019-11-26T05:28:39.000Z</published>
<updated>2019-11-28T04:49:34.700Z</updated>
<content type="html"><![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. JSON1). '{"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 和 position1).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() :height2).width() :widthII.内部尺寸1).innerHeight() :height+padding2).innerWidth() :width+paddingIII.外部尺寸1).outerHeight(false/true) :height+padding+border 如果是true，加上margin1).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:只在移入当前元素时触发,对应mouseleaveV.事件委托1).将多个子元素(li)的事件监听委托给父元素(ul)处理2).监听回调是加在了父元素上3).当操作任何一个子元素(li)时，事件会冒泡到父元素(ul)上4).父辈元素不会直接处理，而是根据event.target得到发生事件的子元素(li)，通过这个子元素调用事件回调函数5).委托方 ： 业主 li6).被委托方 : 中介 ul7).添加新的子元素，自动由事件响应处理8).减少事件监听的数量: n==>19).设置事件委托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.onload1).包括页面的图片加载完后才会调用(晚)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>
<summary type="html">
<h2 id="一-jQuery的基本使用"><a href="#一-jQuery的基本使用" class="headerlink" title="一.jQuery的基本使用"></a>一.jQuery的基本使用</h2><ul>
<li>1.0 2.0 3.0 分别支持
</summary>
<category term="jQuery" scheme="https://2662419405.github.io/categories/jQuery/"/>
<category term="前端" scheme="https://2662419405.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="jQuery" scheme="https://2662419405.github.io/tags/jQuery/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="前端" scheme="https://2662419405.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
</entry>
<entry>
<title>npm简单使用</title>
<link href="https://2662419405.github.io/2019/11/25/npmstudy/"/>
<id>https://2662419405.github.io/2019/11/25/npmstudy/</id>
<published>2019-11-25T14:15:42.000Z</published>
<updated>2019-11-28T04:49:31.378Z</updated>
<content type="html"><![CDATA[<blockquote><p>简单概括npm常用命令</p></blockquote><a id="more"></a><h2 id="npm包管理工具"><a href="#npm包管理工具" class="headerlink" title="npm包管理工具"></a><code>npm</code>包管理工具</h2><ul><li>npm可以理解为前端的maven,一个包的管理工具</li></ul><h3 id="1-查看npm和node版本"><a href="#1-查看npm和node版本" class="headerlink" title="1. 查看npm和node版本"></a>1. 查看npm和node版本</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">node -v </span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure><h3 id="2-初始化项目"><a href="#2-初始化项目" class="headerlink" title="2. 初始化项目"></a>2. 初始化项目</h3><p><code>npm init</code></p><ul><li>默认配置初始化项目</li></ul><p><code>npm init -y</code></p><h3 id="3-安装"><a href="#3-安装" class="headerlink" title="3. 安装"></a>3. 安装</h3><h4 id="本地安装"><a href="#本地安装" class="headerlink" title="本地安装"></a>本地安装</h4><p><code>npm install <Module Name>@版本号</code></p><h4 id="全局安装"><a href="#全局安装" class="headerlink" title="全局安装"></a>全局安装</h4><p><code>npm install <Module Name>@版本号 -g</code></p><h4 id="指定版本"><a href="#指定版本" class="headerlink" title="指定版本"></a>指定版本</h4><ul><li>^ 插入号 + 指定版本号：比如 ^3.5.2 ，安装<code>3.x.x</code>的最新版本（不低于 3.5.2），但是不安装 <code>4.x.x</code><strong>提升版本,不提升大版本</strong></li><li>指定版本号：比如 3.5.2 ，只安装指定版本</li><li>~ 波浪号 + 指定版本号：比如 ~3.5.2 ，安装 <code>3.5.x</code> 的最新版本（不低于 3.5.2），但是不安装 <code>3.6.x</code><strong>提升版本,不提升小版本</strong></li></ul><h4 id="全局安装-1"><a href="#全局安装-1" class="headerlink" title="全局安装"></a>全局安装</h4><ul><li>如果你不知道<code>npm</code>的全局目录在哪,可以运行下面的命令</li></ul><p><code>npm root -g</code></p><ul><li>修改默认全局目录</li></ul><p><code>npm config set prefix "D:/npm"</code></p><ul><li>全局安装<code>vue</code>模板</li></ul><p><code>npm install vue -g</code></p><ul><li>查看全局安装的模板</li></ul><p><code>npm list -g</code></p><h4 id="生产环境模块开发"><a href="#生产环境模块开发" class="headerlink" title="生产环境模块开发"></a>生产环境模块开发</h4><ul><li>生产环境依赖安装 (默认)</li></ul><p><code>npm install <Module Name></code>[–save|S]</p><h4 id="开发环境模块开发"><a href="#开发环境模块开发" class="headerlink" title="开发环境模块开发"></a>开发环境模块开发</h4><ul><li>开发模块依赖安装</li></ul><p><code>npm install <Module Name>[--save-dev|D]</code></p><h4 id="批量安装"><a href="#批量安装" class="headerlink" title="批量安装"></a>批量安装</h4><p><code>npm install</code></p><p>or</p><p><code>npm i</code></p><h3 id="4-模板"><a href="#4-模板" class="headerlink" title="4. 模板"></a>4. 模板</h3><h4 id="本地模板"><a href="#本地模板" class="headerlink" title="本地模板"></a>本地模板</h4><ul><li>查看所有模板</li></ul><p><code>npm list</code></p><ul><li>查看全局所有模板</li></ul><p><code>npm list -g</code></p><ul><li>查看指定模板</li></ul><p><code>npm list <Module Name></code></p><h4 id="远程模板"><a href="#远程模板" class="headerlink" title="远程模板"></a>远程模板</h4><ul><li>查看<code>jquery</code>的最新版本</li></ul><p><code>npm view jquery version</code></p><ul><li>查看<code>jquery</code>的全部版本</li></ul><p><code>npm view jquery versions</code></p><h4 id="卸载模块"><a href="#卸载模块" class="headerlink" title="卸载模块"></a>卸载模块</h4><ul><li>布局卸载</li></ul><p><code>npm install <Module Name></code></p><ul><li>全局卸载</li></ul><p><code>npm install -g <Module Name></code></p><h3 id="5-修改淘宝镜像"><a href="#5-修改淘宝镜像" class="headerlink" title="5.修改淘宝镜像"></a>5.修改淘宝镜像</h3><ul><li>查看当前镜像地址</li></ul><p><code>npm get registory</code></p><ul><li>配置淘宝镜像</li></ul><p><code>npm config set registry https://registry.npm.taobao.org</code></p><ul><li>安装下载模块</li></ul><p><code>npm install <Module Name></code></p><ul><li>还原默认镜像地址</li></ul><p><code>npm config set registry https://registry.npmjs.org/</code></p>]]></content>
<summary type="html">
<blockquote>
<p>简单概括npm常用命令</p>
</blockquote>
</summary>
<category term="npm" scheme="https://2662419405.github.io/tags/npm/"/>
<category term="包管理工具" scheme="https://2662419405.github.io/tags/%E5%8C%85%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/"/>
</entry>
<entry>
<title>博客园样式</title>
<link href="https://2662419405.github.io/2019/11/24/bkyys/"/>
<id>https://2662419405.github.io/2019/11/24/bkyys/</id>
<published>2019-11-24T06:48:34.000Z</published>
<updated>2019-12-13T01:13:24.746Z</updated>
<content type="html"><![CDATA[<blockquote><p>测试网址: <a href="https://www.cnblogs.com/sunhang32/" target="_blank" rel="noopener">https://www.cnblogs.com/sunhang32/</a></p><p>实现目标: 学习更多的知识,了解更广的世界</p><p>简述原理: 自己整合并且简单修改</p><p>目前: 长期活跃的论坛之一,还在不断完善中</p></blockquote><a id="more"></a><h1 id="欢迎来到残梦博客园"><a href="#欢迎来到残梦博客园" class="headerlink" title="欢迎来到残梦博客园"></a>欢迎来到残梦博客园</h1><p><font color="#999">首先声明一点: 样式并不全是本人所写,是我个人整合(感觉每个人的博客都喜欢一点,所以自己整合了一下)</font></p><p><font color=red size=5>由于每次更新博客,都需要重新更新此文档很麻烦,所以此博客只会定期更新,如果想要使用最新版本博客园样式,请前往本人<a href="https://github.com/2662419405/cnblogs" target="_blank" rel="noopener">github</a></font></p><h2 id="如果喜欢的小伙伴可以自己配置"><a href="#如果喜欢的小伙伴可以自己配置" class="headerlink" title="如果喜欢的小伙伴可以自己配置"></a>如果喜欢的小伙伴可以自己配置</h2><h3 id="首先你要有一个博客园-这个我估计我说的有点废话了"><a href="#首先你要有一个博客园-这个我估计我说的有点废话了" class="headerlink" title="首先你要有一个博客园(这个我估计我说的有点废话了)"></a>首先你要有一个博客园(这个我估计我说的有点废话了)</h3><h3 id="在博客园的官网左上角开通博客园"><a href="#在博客园的官网左上角开通博客园" class="headerlink" title="在博客园的官网左上角开通博客园"></a>在<a href="https://www.cnblogs.com" target="_blank" rel="noopener">博客园</a>的官网左上角开通博客园</h3><h3 id="博客园的个人配置页面-gt-先申请js权限"><a href="#博客园的个人配置页面-gt-先申请js权限" class="headerlink" title="博客园的个人配置页面->先申请js权限"></a>博客园的个人配置页面->先申请js权限</h3><fancybox><img src="https://img2018.cnblogs.com/blog/1860563/201911/1860563-20191113210840922-512269453.png" /></fancybox><h3 id="禁用页面的css样式"><a href="#禁用页面的css样式" class="headerlink" title="禁用页面的css样式"></a>禁用页面的css样式</h3><fancybox><img src="https://img2018.cnblogs.com/blog/1860563/201911/1860563-20191113210905600-717115239.png" /></fancybox><h3 id="选择页面的主题"><a href="#选择页面的主题" class="headerlink" title="选择页面的主题"></a>选择页面的主题</h3><fancybox><img src="https://img2018.cnblogs.com/blog/1860563/201911/1860563-20191113211243480-623230909.png" /></fancybox><h3 id="粘贴一下代码到定制页面css代码中-由于css文件较大-所以这里提供了超链接"><a href="#粘贴一下代码到定制页面css代码中-由于css文件较大-所以这里提供了超链接" class="headerlink" title="粘贴一下代码到定制页面css代码中,由于css文件较大,所以这里提供了超链接"></a>粘贴一下代码到定制页面css代码中,由于css文件较大,所以这里提供了超链接</h3><p><a href="https://blog-static.cnblogs.com/files/sunhang32/canmeng.css" target="_blank" rel="noopener">css</a></p><h3 id="粘贴博客侧面公告代码"><a href="#粘贴博客侧面公告代码" class="headerlink" title="粘贴博客侧面公告代码"></a>粘贴博客侧面公告代码</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span></span><br><span class="line"><span class="javascript"> <span class="built_in">window</span>.cnblogsConfig = {</span></span><br><span class="line"><span class="actionscript"> GhVersions : <span class="string">'v1.2.0'</span>, <span class="comment">// 版本</span></span></span><br><span class="line"><span class="actionscript"> blogUser : <span class="string">"残梦"</span>, <span class="comment">// 用户名</span></span></span><br><span class="line"><span class="actionscript"> essayCodeHighlightingType: <span class="string">"highlightjs"</span>,</span></span><br><span class="line"><span class="actionscript"> essayCodeHighlighting: <span class="string">"a11y-dark"</span>,</span></span><br><span class="line"> homeTopImg: [</span><br><span class="line"><span class="actionscript"> <span class="string">"https://cdn.jsdelivr.net/gh/2662419405/imgPlus/o_o_wallhaven-698904.jpg"</span></span></span><br><span class="line"> ],</span><br><span class="line"><span class="actionscript"> menuUserInfoBgImg: <span class="string">'https://bndong.github.io/images/menu_bg.gif'</span>,</span></span><br><span class="line"><span class="actionscript"> menuNavList: [ <span class="comment">// 列表数据 ['导航名称', '链接']</span></span></span><br><span class="line"><span class="actionscript"> [<span class="string">'github'</span>, <span class="string">'https://github.com/2662419405'</span>],</span></span><br><span class="line"><span class="actionscript"> [<span class="string">'CSDN'</span>, <span class="string">'https://blog.csdn.net/qq_43268396'</span>],</span></span><br><span class="line"><span class="actionscript"> [<span class="string">'技能树'</span>, <span class="string">'https://shtodream.cn/about/'</span>],</span></span><br><span class="line"><span class="actionscript"> [<span class="string">'留言板'</span>, <span class="string">'https://shtodream.cn/message/'</span>],</span></span><br><span class="line"> ],</span><br><span class="line"><span class="actionscript"> fontIconExtend: <span class="string">"//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css"</span>, <span class="comment">//字体图标扩展</span></span></span><br><span class="line"><span class="actionscript"> webpageTitleOnblur : <span class="string">"(◍´꒳`◍)你为何狠心离去 "</span>, <span class="comment">// 当前页失去焦点，页面title显示文字</span></span></span><br><span class="line"><span class="actionscript"> webpageTitleOnblurTimeOut : <span class="number">500</span>, <span class="comment">// 当前页失去焦点，页面title变化，延时时间，单位毫秒</span></span></span><br><span class="line"><span class="actionscript"> webpageTitleFocus : <span class="string">"(*´∇｀*) 帅的人回来了！"</span>, <span class="comment">// 当前页获取焦点，页面title显示文字，显示后延时恢复原title</span></span></span><br><span class="line"><span class="actionscript"> webpageTitleFocusTimeOut : <span class="number">2000</span>, <span class="comment">// 当前页获取焦点，页面title变化，延时时间，单位毫秒</span></span></span><br><span class="line"><span class="actionscript"> blogAvatar : <span class="string">"https://cdn.jsdelivr.net/gh/2662419405/CDN@1.0/sh.jpg"</span>, <span class="comment">// 用户头像</span></span></span><br><span class="line"><span class="actionscript"> blogStartDate : <span class="string">"2019-11-07"</span>, <span class="comment">// 入园时间，年-月-日。入园时间查看方法,鼠标停留园龄时间上，会显示入园时间</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">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.2.0/src/script/simpleMemory.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><ul><li><p>粘贴页首代码 </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">// 此处为空</span><br></pre></td></tr></table></figure></li><li><p>粘贴页脚代码 </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 滚动进度 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"bottomProgressBar"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- 音乐菜单 --></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"player"</span> <span class="attr">class</span>=<span class="string">"aplayer aplayer-withlist aplayer-fixed"</span> <span class="attr">data-id</span>=<span class="string">"3025663508"</span> <span class="attr">data-server</span>=<span class="string">"netease"</span> <span class="attr">data-type</span>=<span class="string">"playlist"</span> <span class="attr">data-order</span>=<span class="string">"random"</span> <span class="attr">data-fixed</span>=<span class="string">"true"</span> <span class="attr">data-listfolded</span>=<span class="string">"true"</span> <span class="attr">data-theme</span>=<span class="string">"#2D8CF0"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="comment"><!-- 网站运行时间 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">style</span>=<span class="string">"text-align:center;"</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"timeDate"</span>></span>载入天数...<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"times"</span>></span>载入时分秒...<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>(); </span></span><br><span class="line"><span class="actionscript"> <span class="function"><span class="keyword">function</span> <span class="title">createtime</span><span class="params">()</span> </span>{ </span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> grt= <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"11/06/2019 17:38:00"</span>);<span class="comment">//在此处修改你的建站时间</span></span></span><br><span class="line"> now.setTime(now.getTime()+250); </span><br><span class="line"><span class="javascript"> days = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>; dnum = <span class="built_in">Math</span>.floor(days); </span></span><br><span class="line"><span class="javascript"> hours = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> - (<span class="number">24</span> * dnum); hnum = <span class="built_in">Math</span>.floor(hours); </span></span><br><span class="line"><span class="javascript"> <span class="keyword">if</span>(<span class="built_in">String</span>(hnum).length ==<span class="number">1</span> ){hnum = <span class="string">"0"</span> + hnum;} minutes = (now - grt ) / <span class="number">1000</span> /<span class="number">60</span> - (<span class="number">24</span> * <span class="number">60</span> * dnum) - (<span class="number">60</span> * hnum); </span></span><br><span class="line"><span class="javascript"> mnum = <span class="built_in">Math</span>.floor(minutes); <span class="keyword">if</span>(<span class="built_in">String</span>(mnum).length ==<span class="number">1</span> ){mnum = <span class="string">"0"</span> + mnum;} </span></span><br><span class="line"> seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); </span><br><span class="line"><span class="javascript"> snum = <span class="built_in">Math</span>.round(seconds); <span class="keyword">if</span>(<span class="built_in">String</span>(snum).length ==<span class="number">1</span> ){snum = <span class="string">"0"</span> + snum;} </span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"timeDate"</span>).innerHTML = <span class="string">"本站勉强运行 "</span>+dnum+<span class="string">" 天 "</span>; </span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.getElementById(<span class="string">"times"</span>).innerHTML = hnum + <span class="string">" 小时 "</span> + mnum + <span class="string">" 分 "</span> + snum + <span class="string">" 秒"</span>; </span></span><br><span class="line"> } </span><br><span class="line"><span class="actionscript">setInterval(<span class="string">"createtime()"</span>,<span class="number">250</span>);</span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="comment"><!-- 右下角菜单 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"rightMenu"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!--看板娘 - 猫--></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"> L2Dwidget.init({</span><br><span class="line"><span class="actionscript"> <span class="string">"model"</span>: {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",<span class="comment"><!--这里改模型，前面后面都要改--></span></span></span></span><br><span class="line"><span class="actionscript"> <span class="string">"scale"</span>: <span class="number">1</span></span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> <span class="string">"display"</span>: {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> "position": "left",<span class="comment"><!--设置看板娘的上下左右位置--></span></span></span></span><br><span class="line"><span class="actionscript"> <span class="string">"width"</span>: <span class="number">100</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="string">"height"</span>: <span class="number">200</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="string">"hOffset"</span>: <span class="number">70</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="string">"vOffset"</span>: <span class="number">0</span></span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> <span class="string">"mobile"</span>: {</span></span><br><span class="line"><span class="actionscript"> <span class="string">"show"</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="string">"scale"</span>: <span class="number">0.4</span></span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> <span class="string">"react"</span>: {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> "opacityDefault": 0.5,<span class="comment"><!--设置透明度--></span></span></span></span><br><span class="line"><span class="actionscript"> <span class="string">"opacityOnHover"</span>: <span class="number">0.2</span></span></span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"><span class="javascript"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span></span><br><span class="line"><span class="javascript"> $(<span class="string">"#live2dcanvas"</span>).attr(<span class="string">"style"</span>,<span class="string">"display:block;position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;"</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="comment"><!-- 线条效果 --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span></span></span><br><span class="line"><span class="tag"><span class="attr">color</span>=<span class="string">"220,220,220"</span> <span class="attr">opacity</span>=<span class="string">'0.9'</span> <span class="attr">zIndex</span>=<span class="string">"-2"</span> <span class="attr">count</span>=<span class="string">"500"</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"</span>></span></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">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://blog-static.cnblogs.com/files/sunhang32/myconsole.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="comment"><!-- 文字显示 --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://files.cnblogs.com/files/sunhang32/myText.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></li></ul><p><em>————–如果你对你的代码不满意的话,可以接下来自定义设置—————-</em></p><p><font color=red size=4>此处请前往<a href="https://github.com/2662419405/cnblogs" target="_blank" rel="noopener">github</font></p>]]></content>
<summary type="html">
<blockquote>
<p>测试网址: <a href="https://www.cnblogs.com/sunhang32/" target="_blank" rel="noopener">https://www.cnblogs.com/sunhang32/</a></p>
<p>实现目标: 学习更多的知识,了解更广的世界</p>
<p>简述原理: 自己整合并且简单修改</p>
<p>目前: 长期活跃的论坛之一,还在不断完善中</p>
</blockquote>
</summary>
<category term="jQuery" scheme="https://2662419405.github.io/categories/jQuery/"/>
<category term="博客园" scheme="https://2662419405.github.io/tags/%E5%8D%9A%E5%AE%A2%E5%9B%AD/"/>
<category term="样式自定义" scheme="https://2662419405.github.io/tags/%E6%A0%B7%E5%BC%8F%E8%87%AA%E5%AE%9A%E4%B9%89/"/>
<category term="BLOG" scheme="https://2662419405.github.io/tags/BLOG/"/>
<category term="jQuery" scheme="https://2662419405.github.io/tags/jQuery/"/>
</entry>
<entry>
<title>第一个接触的前端项目</title>
<link href="https://2662419405.github.io/2019/11/20/dycjcqd/"/>
<id>https://2662419405.github.io/2019/11/20/dycjcqd/</id>
<published>2019-11-20T00:16:04.000Z</published>
<updated>2019-12-13T01:23:07.781Z</updated>
<content type="html"><![CDATA[<blockquote><p>测试网址: <a href="https://studyit.club" target="_blank" rel="noopener">https://studyit.club</a></p><p>实现目标: 简易版社团,学习资源分享,富文本论坛,空间,美图秀秀等</p><p>简述原理: 常见前端框架混合使用</p><p>目前: 由于精力有限,目前暂停维护和开发 </p></blockquote><a id="more"></a><h1 id="Study-IT-club"><a href="#Study-IT-club" class="headerlink" title="Study IT .club"></a>Study IT .club</h1><h3 id="萌新报道"><a href="#萌新报道" class="headerlink" title="萌新报道"></a>萌新报道</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Hello Everybody</span><br></pre></td></tr></table></figure><p> 第一次尝试分享一个自己写的非常简单的自己社团的官网 </p><p> 有兴趣的小伙伴可以去开一下 ——-> <a href="https://studyit.club" target="_blank" rel="noopener">网站地址</a></p><h4 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h4><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/index.png" /></fancybox><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/main.png" /></fancybox><h3 id="语言和框架"><a href="#语言和框架" class="headerlink" title="语言和框架"></a>语言和框架</h3><ul><li>数据库方面使用<code>Mysql</code> 数据库 没有事务处理 存储引擎为<code>MyISAM</code></li><li>后台语言为<code>PHP</code></li><li>讨论专区的框架为<code>BootStrap</code></li><li>首页框架为 <code>jQuery</code></li><li>谈论专区发帖的模块使用了 富文本编辑器<code>UEditor</code></li><li>在个人空间主要<code>AJAX</code>滚动局部刷新</li><li>个人空间方面用了<code>QQ</code>表情包</li><li>个人设置用了美图秀秀的PC插件<code>crossdomain.xml</code></li><li>个人空间使用 <code>Highslide.js</code>图片预览插件和多图片上传插件</li></ul><hr><h3 id="安装和使用"><a href="#安装和使用" class="headerlink" title="安装和使用"></a>安装和使用</h3><ul><li><p>需要挂载在本地的<code>PHP</code>服务器之上</p></li><li><p>推荐使用<code>PHPstudy</code>或者warm等集成开发环境</p></li><li><p>数据库方面配置在<code>connect/config.php</code>中,端口和数据库配置在这里面</p></li><li><p>所有的数据库模型都在主目录的 <code>数据库.txt</code>目录下面</p></li><li><p>美图秀秀插件配置:把主目录的 <code>crossdomain.xml</code>放在服务器的根目录</p></li></ul><p><a href="https://github.com/2662419405/Studyit-club" target="_blank" rel="noopener">项目源码</a>—->地址</p>]]></content>
<summary type="html">
<blockquote>
<p>测试网址: <a href="https://studyit.club" target="_blank" rel="noopener">https://studyit.club</a></p>
<p>实现目标: 简易版社团,学习资源分享,富文本论坛,空间,美图秀秀等</p>
<p>简述原理: 常见前端框架混合使用</p>
<p>目前: 由于精力有限,目前暂停维护和开发 </p>
</blockquote>
</summary>
<category term="PHP" scheme="https://2662419405.github.io/categories/PHP/"/>
<category term="Mysql" scheme="https://2662419405.github.io/categories/Mysql/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="我的项目" scheme="https://2662419405.github.io/tags/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/"/>
</entry>
<entry>
<title>我的第一个React项目</title>
<link href="https://2662419405.github.io/2019/11/18/dygReactxm/"/>
<id>https://2662419405.github.io/2019/11/18/dygReactxm/</id>
<published>2019-11-18T07:59:02.000Z</published>
<updated>2019-12-13T01:15:36.545Z</updated>
<content type="html"><![CDATA[<blockquote><p>测试网址: <a href="https://github.com/2662419405/sh" target="_blank" rel="noopener">https://github.com/2662419405/sh</a></p><p>实现目标: 双向聊天</p><p>简述原理: socketio全双工通信</p><p>目前bug: 注册之后再次登录才可以聊天</p></blockquote><a id="more"></a><h1 id="简招-React-Node-MongoDB"><a href="#简招-React-Node-MongoDB" class="headerlink" title="简招 (React+Node+MongoDB)"></a>简招 (React+Node+MongoDB)</h1><blockquote><p>开始制作的时间是从 2019-10-10 起至今</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/2662419405/CDN@1.0/sh.jpg" alt="sh"></p><p>自己也发布过几个小型的demo,虽然没人看(๑•ૅૄ•๑), 但还是喜欢与大家共同学习进步</p><p>测试网址 ———> <a href="https://github.com/2662419405/sh" target="_blank" rel="noopener">网址</a></p><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>校园招聘<code>APP</code>,是一款手机端的求职网站,招聘者可以注册为BOSS,求职者可以注册为牛人,牛人和BOSS可以聊天,并且可以互相查看到对方的基本信息和简介薪资等方面</p><p>计划制作:</p><ul><li>使用React的<code>Antd-mobile</code>支持手机端端制作</li><li><code>ReactNative</code>独立开发<code>App</code>端和<code>IOS</code></li><li>有人肯定会很好奇,PC和手机为何要制作两次,主要是本人很萌新,想要学习更多的框架</li></ul><blockquote><p>只有学习更多的框架,并且锻炼更好的自学能力,才能更上一层楼</p></blockquote><h3 id="关于我"><a href="#关于我" class="headerlink" title="关于我"></a>关于我</h3><p>我是一个<strong>热门计算机</strong>并且<strong>对计算机充满兴趣</strong>的程序员</p><p>学过<code>Java</code>,<code>.net</code>,<code>PHP</code>,曾经一度认为<code>PHP</code>是最牛逼的语言</p><p>后来正式的接触前端,学习过</p><ul><li><code>ES6</code></li><li><code>Node</code></li><li><code>React</code></li><li><code>Vue</code></li><li><code>ReactNative</code></li><li><code>Angular</code></li><li>微信一系列开发</li><li><code>jq</code>,<code>bootstarp</code>等一些简单库</li></ul><p>发现前端很神奇,比后台和数据方面更加的有意思,想要称为一名前端工程师</p><h3 id="项目简述"><a href="#项目简述" class="headerlink" title="项目简述"></a>项目简述</h3><blockquote><p>这是一个React项目,你的电脑要具备Node(8.0)以上</p></blockquote><h4 id="所使用的node包技术阐述"><a href="#所使用的node包技术阐述" class="headerlink" title="所使用的node包技术阐述"></a>所使用的node包技术阐述</h4><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-10-24_11-25-04.png" /></fancybox><blockquote><p>前端主要采用了React全家桶，没什么多说的，脚手架构建项目，react-router控制路由，axios进行前后端交互。后端是基于node搭的服务，用的是express。我为什么不用koa呢，纯粹是图方便，因为koa不熟（捂脸）。聊天最重要的当然是通信，项目用<a href="https://www.w3cschool.cn/socket/socket-1olq2egc.html" target="_blank" rel="noopener">socket.io</a>来进行前后端通信。</p></blockquote><p><em>=============分割线 下面是每个包的详细解释===============</em></p><ul><li><p><strong>(按需加载问题)</strong> 使用<code>babel-plugin-import</code>包</p></li><li><p><strong>(由于跨域问题)</strong> 在<code>package.json</code>中使用<code>proxy</code>配置</p><ul><li><p>需要详细说明一下,安装完这个包,需要在<code>package.json</code>文件中配置</p></li><li><pre><code class="js"><span class="string">"proxy"</span>: <span class="string">"localhost:9093"</span><!--<span class="number">0</span>--></code></pre></li></ul></li><li><p><strong>(配置服务端渲染)</strong> 使用<code>babel-cli</code>包</p><ul><li><p>安装</p></li><li><pre><code class="js">npm install babel-cli --save <!--<span class="number">1</span>--></code></pre></li></ul></li></ul><ul><li>目录结构</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 项目结构</span></span><br><span class="line">├─build</span><br><span class="line">├─config</span><br><span class="line">├─data</span><br><span class="line">│ ├─MongoDB <span class="comment">// 数据库解释 </span></span><br><span class="line">├─server <span class="comment">// 后台</span></span><br><span class="line">│ ├─model <span class="comment">// 数据库原型 </span></span><br><span class="line">│ ├─main <span class="comment">// 后台文件入口 </span></span><br><span class="line">│ ├─user <span class="comment">// 后台接口api </span></span><br><span class="line">├─src</span><br><span class="line">│ ├─components <span class="comment">// 全局组件</span></span><br><span class="line">│ │ ├─autoRouter</span><br><span class="line">│ │ ├─avatar-select</span><br><span class="line">│ │ ├─boss</span><br><span class="line">│ │ ├─chat</span><br><span class="line">│ │ ├─Dashboard</span><br><span class="line">│ │ ├─genius</span><br><span class="line">│ │ ├─img</span><br><span class="line">│ │ ├─logo</span><br><span class="line">│ │ ├─msg</span><br><span class="line">│ │ ├─navlink</span><br><span class="line">│ │ ├─shForm</span><br><span class="line">│ │ ├─user</span><br><span class="line">│ │ └─chatCard</span><br><span class="line">│ ├─router <span class="comment">// 路由</span></span><br><span class="line">│ ├─index <span class="comment">// 入口</span></span><br><span class="line">│ ├─util <span class="comment">// 方法</span></span><br><span class="line">│ ├─config <span class="comment">// 请求拦截</span></span><br><span class="line">│ └─container</span><br><span class="line">│ ├─bossinfo <span class="comment">// boss</span></span><br><span class="line">│ ├─login <span class="comment">// 登录</span></span><br><span class="line">│ ├─register <span class="comment">// 注册</span></span><br><span class="line">│ └─genuisinfo <span class="comment">// 牛人</span></span><br></pre></td></tr></table></figure><blockquote><p>注册时, 进行密码MD5加密</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// md5加密</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">md5pwd</span>(<span class="params">pwd</span>)</span>{</span><br><span class="line"> <span class="keyword">const</span> salt = <span class="string">'qwe123~~-!@#$%^&&*()sunhang'</span></span><br><span class="line"> <span class="keyword">return</span> utility.md5(utility.md5(salt+pwd))</span><br><span class="line">}</span><br></pre></td></tr></table></figure><blockquote><p>进行登录以及cookie的存储</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//进行注册</span></span><br><span class="line">Router.post(<span class="string">'/register'</span>,(req,res)=>{</span><br><span class="line"> <span class="keyword">const</span> { user,pwd,type } = req.body</span><br><span class="line"> User.findOne({user},(err,doc)=>{</span><br><span class="line"> <span class="keyword">if</span>(doc){</span><br><span class="line"> <span class="keyword">return</span> res.json({<span class="attr">code</span>:<span class="number">1</span>,<span class="attr">msg</span>:<span class="string">'用户名存在'</span>})</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> userModel = <span class="keyword">new</span> User({user,type,<span class="attr">pwd</span>:md5pwd(pwd)})</span><br><span class="line"> userModel.save(<span class="function"><span class="keyword">function</span>(<span class="params">e,d</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(err){</span><br><span class="line"> <span class="keyword">return</span> res.json({<span class="attr">code</span>:<span class="number">2</span>,<span class="attr">msg</span>:<span class="string">'后端出错了'</span>})</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> {user,type,_id} = d</span><br><span class="line"> res.cookie(<span class="string">'userid'</span>,_id)</span><br><span class="line"> <span class="keyword">return</span> res.json({<span class="attr">code</span>:<span class="number">3</span>,<span class="attr">msg</span>:<span class="string">'注册成功'</span>,<span class="attr">data</span>:{user,type,_id}})</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">})</span><br></pre></td></tr></table></figure><blockquote><p>axios拦截器的制作</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">import</span> { Toast } <span class="keyword">from</span> <span class="string">'antd-mobile'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//拦截请求</span></span><br><span class="line">axios.interceptors.request.use(<span class="function"><span class="keyword">function</span>(<span class="params">config</span>)</span>{</span><br><span class="line"> Toast.loading(<span class="string">'加载中'</span>,<span class="number">0</span>);</span><br><span class="line"> <span class="keyword">return</span> config;</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//拦截响应</span></span><br><span class="line">axios.interceptors.response.use(<span class="function"><span class="keyword">function</span>(<span class="params">config</span>)</span>{</span><br><span class="line"> Toast.hide();</span><br><span class="line"> <span class="keyword">return</span> config;</span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li>登录和注册效果展示</li></ul><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/register.gif"></fancybox><ul><li>双方聊天展示</li></ul><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/chat.gif"></fancybox><ul><li>消息的更新和排序</li></ul><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/clear.gif"></fancybox><ul><li>手机端表情包展示</li></ul><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Screenshot_2019-10-24-14-14-39-53_cb819d8fa60af39.jpg"></fancybox><blockquote><p>手机端的表情包就是可以用的,现在的表情包都可以直接使用了,不同代码了,很神奇</p></blockquote><h3 id="后台方向"><a href="#后台方向" class="headerlink" title="后台方向"></a>后台方向</h3><ul><li>由于本人主要是面向前端,数据库就是<code>MongoDB</code></li><li>数据库的使用请参照<code>data</code>目录下面的<code>mongodb.md</code></li></ul><ul><li>数据库方面使用 <strong>(mongoose)</strong></li></ul><ul><li>后台主要使用<code>node</code>的<code>express</code></li></ul><ul><li>后台文件在<code>server</code></li></ul><h1 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h1><ul><li><p>需要电脑有 mongo 和 react 还有node环境</p></li><li><p>首先:下载本项目</p></li><li><pre><code class="js"><span class="comment">// 第一种方式</span>npm install <span class="comment">//安装包依赖</span>npm run build <span class="comment">//打包项目</span>npm run server <span class="comment">//启动 打开浏览器输入localhost:9093</span><!--<span class="number">6</span>--></code></pre></li></ul><p>如果还有bug和建议,欢迎告诉我 (͏ ˉ ꈊ ˉ)✧˖°</p><fancybox><img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/qq.jpg" /></fancybox><blockquote><p> 一开始还是遇到了很多的坑,第一次使用antd-mobile这个库,最主要的坑,还是对于项目的上线运行,毕竟个人不太擅长服务器的使用,在配置Nginx的时候卡了很久,为了性能优化,SSR渲染也是花了很大的心血,感觉里面的坑太多了,总的来说收获还是很大的,后期我还会画时间进行界面上的美化</p><p>感觉支持 喜欢的朋友记得给个star </p></blockquote>]]></content>
<summary type="html">
<blockquote>
<p>测试网址: <a href="https://github.com/2662419405/sh" target="_blank" rel="noopener">https://github.com/2662419405/sh</a></p>
<p>实现目标: 双向聊天</p>
<p>简述原理: socketio全双工通信</p>
<p>目前bug: 注册之后再次登录才可以聊天</p>
</blockquote>
</summary>
<category term="Node" scheme="https://2662419405.github.io/categories/Node/"/>
<category term="MongoDB" scheme="https://2662419405.github.io/categories/MongoDB/"/>
<category term="React" scheme="https://2662419405.github.io/categories/React/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="我的项目" scheme="https://2662419405.github.io/tags/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/"/>
<category term="React" scheme="https://2662419405.github.io/tags/React/"/>
<category term="MongoDB" scheme="https://2662419405.github.io/tags/MongoDB/"/>
<category term="Node" scheme="https://2662419405.github.io/tags/Node/"/>
</entry>
<entry>
<title>前端常见面试题(一)</title>
<link href="https://2662419405.github.io/2019/11/10/qdmst1/"/>
<id>https://2662419405.github.io/2019/11/10/qdmst1/</id>
<published>2019-11-10T02:33:19.000Z</published>
<updated>2019-12-10T02:36:09.800Z</updated>
<content type="html"><![CDATA[<h3 id="Web前段面试题"><a href="#Web前段面试题" class="headerlink" title="Web前段面试题"></a>Web前段面试题</h3><h4 id="1-doctype在严格模式下和混杂模式有什么区别"><a href="#1-doctype在严格模式下和混杂模式有什么区别" class="headerlink" title="1.doctype在严格模式下和混杂模式有什么区别?"></a>1.doctype在严格模式下和混杂模式有什么区别?</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.<!DOCTYPE>声名位于文档的最前面，在<HTML> 标签的前面，告知浏览器以何种模式来渲染文档。</span><br><span class="line">2.严格模式的排版和JS运作模式都是以浏览器支持的最高的标准运行。按照W3C的标准来解析代码。</span><br><span class="line">3.混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码，模拟老式浏览器的行为以防止网站停止工作。</span><br><span class="line">4.若DOCTYPE为声名或格式不正确，页面将会以怪异模式的方式解析。</span><br><span class="line">5.Doctype标签可声明三种DLD类型，分别是严格型，过渡型，框架型。</span><br></pre></td></tr></table></figure><h4 id="2-行内元素和块级元素和空元素"><a href="#2-行内元素和块级元素和空元素" class="headerlink" title="2.行内元素和块级元素和空元素?"></a>2.行内元素和块级元素和空元素?</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">内联元素（行内元素）内联元素(inline element)</span><br><span class="line">a、 abbr 、acronym、 b 、bdo、big 、br、code、dfn 、emfont、i、img、input、kbd 、label、q、s、samp、select、small、span、strike、strong 、sub、sup、textarea、 u、<span class="keyword">var</span></span><br><span class="line"></span><br><span class="line">块元素(block element)</span><br><span class="line">address、blockquote、center 、dir 、div 、dl 、 fieldset、form、h1 - h6 、hr 、menu 、noframes、、ol 、p、pre 、table 、ul</span><br><span class="line"></span><br><span class="line">空元素:</span><br><span class="line">br、meta、hr、link、input、img</span><br></pre></td></tr></table></figure><h4 id="3-页面导入时-使用link和-important的区别"><a href="#3-页面导入时-使用link和-important的区别" class="headerlink" title="3.页面导入时,使用link和@important的区别"></a>3.页面导入时,使用link和@important的区别</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span>有兼容性问题,而css属于标签,会产生兼容性问题</span><br><span class="line">页面被加载的时候,link会同时被加载,而<span class="keyword">import</span>会等到页面加载完在进行加载</span><br></pre></td></tr></table></figure><h4 id="4-常见的浏览器内核有哪些-怎么样理解"><a href="#4-常见的浏览器内核有哪些-怎么样理解" class="headerlink" title="4.常见的浏览器内核有哪些? 怎么样理解"></a>4.常见的浏览器内核有哪些? 怎么样理解</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Trident内核：IE,MaxThon,TT,The World,<span class="number">360</span>,搜狗浏览器等。[又称MSHTML]</span><br><span class="line">Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等</span><br><span class="line">Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]</span><br><span class="line">Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]</span><br></pre></td></tr></table></figure><h4 id="5-H5新增的特性-移出了-移出了哪些属性"><a href="#5-H5新增的特性-移出了-移出了哪些属性" class="headerlink" title="5.H5新增的特性,移出了,移出了哪些属性"></a>5.H5新增的特性,移出了,移出了哪些属性</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">增加: </span><br><span class="line">canvas 画布</span><br><span class="line">localStorage 本地离线缓存</span><br><span class="line">window.addEventListener 事件监听</span><br><span class="line">audio video 媒体标签</span><br><span class="line">sessionStorage 浏览器关闭自动删除sessionStorage</span><br><span class="line">footer,nav 语义化标签</span><br><span class="line">Geolocation 地理定位</span><br><span class="line">websocket 通信</span><br><span class="line">date,time,url 表单组件</span><br><span class="line">webworker 专用线程</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"><basefont> 默认字体，不设置字体，以此渲染</span><br><span class="line"><font> 字体标签</span><br><span class="line"><center> 水平居中</span><br><span class="line"><u> 下划线</span><br><span class="line"><big> 大字体</span><br><span class="line"><strike> 中横线</span><br><span class="line"><tt> 文本等宽</span><br><span class="line">(框架集)</span><br><span class="line"><frameset></span><br><span class="line"><frame></span><br><span class="line"><noframes></span><br><span class="line"></span><br><span class="line">把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。</span><br></pre></td></tr></table></figure><h4 id="6-如何处理H5语义化标签的兼容性处理？"><a href="#6-如何处理H5语义化标签的兼容性处理？" class="headerlink" title="6. 如何处理H5语义化标签的兼容性处理？"></a>6. 如何处理H5语义化标签的兼容性处理？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">利于SEO搜索引擎</span><br><span class="line">方便开发者理解模块</span><br><span class="line"></span><br><span class="line">IE8一下有兼容性问题</span><br><span class="line"></span><br><span class="line">使用document.createElement()创建元素 并且设置为块级元素</span><br></pre></td></tr></table></figure><h4 id="7-浏览器怎么对H5的离线存储和资源的管理和加载？"><a href="#7-浏览器怎么对H5的离线存储和资源的管理和加载？" class="headerlink" title="7. 浏览器怎么对H5的离线存储和资源的管理和加载？"></a>7. 浏览器怎么对H5的离线存储和资源的管理和加载？</h4> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。</span><br><span class="line"></span><br><span class="line">离线的情况下，浏览器就直接使用离线存储的资源。</span><br></pre></td></tr></table></figure><h4 id="8-H5的离线存储原理和使用？"><a href="#8-H5的离线存储原理和使用？" class="headerlink" title="8. H5的离线存储原理和使用？"></a>8. H5的离线存储原理和使用？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">1.在当前页面定义manifest</span><br><span class="line">例如</span><br><span class="line"><!DOCTYPE HTML></span><br><span class="line"><html manifest="cache.manifest" ></span><br><span class="line"></html></span><br><span class="line">2.写一个cache.manifest文件</span><br><span class="line">CACHE MANIFEST</span><br><span class="line">#v0.11</span><br><span class="line"></span><br><span class="line">CACHE: 这里写的文件会自动的缓存起来</span><br><span class="line">js/app.js</span><br><span class="line">css/style.css</span><br><span class="line"></span><br><span class="line">NETWORK: 这里的文件不会被缓存,但是如果CACHE里面有的话,就会被缓存,代表CACHE的优先级会更高</span><br><span class="line">./img/logo.png</span><br><span class="line"></span><br><span class="line">FALLBACL: 如果第一个文件失败,则访问第二个文件</span><br><span class="line">/ /fail.html 如果访问根目录失败,则访问fail.html文件</span><br></pre></td></tr></table></figure><h4 id="9-cookie和localstorage-sessionstorage有什么区别？"><a href="#9-cookie和localstorage-sessionstorage有什么区别？" class="headerlink" title="9. cookie和localstorage,sessionstorage有什么区别？"></a>9. cookie和localstorage,sessionstorage有什么区别？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">相同点</span><br><span class="line">都存储在客户端。</span><br><span class="line"></span><br><span class="line">不同点</span><br><span class="line">1.存储大小</span><br><span class="line"></span><br><span class="line">cookie数据大小不能超过4k。</span><br><span class="line"></span><br><span class="line">sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。</span><br><span class="line"></span><br><span class="line">2.有效时间</span><br><span class="line"></span><br><span class="line">localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。</span><br><span class="line"></span><br><span class="line">sessionStorage：数据在当前浏览器窗口关闭后自动删除。</span><br><span class="line"></span><br><span class="line">cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。</span><br><span class="line"></span><br><span class="line">3. 数据与服务器之间的交互方式</span><br><span class="line"></span><br><span class="line">cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端</span><br><span class="line"></span><br><span class="line">sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。</span><br></pre></td></tr></table></figure><h4 id="10-iframe的缺点"><a href="#10-iframe的缺点" class="headerlink" title="10. iframe的缺点"></a>10. iframe的缺点</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">产生很多个页面,不容易管理</span><br><span class="line">不利于SEO搜索引擎</span><br><span class="line">设备兼容性差</span><br><span class="line">产生滚动条,用于体验差</span><br><span class="line">现在都是用AJAX来替代了frame框架</span><br></pre></td></tr></table></figure><h4 id="11-如何实现的浏览器内多个标签页之间的通信？"><a href="#11-如何实现的浏览器内多个标签页之间的通信？" class="headerlink" title="11. 如何实现的浏览器内多个标签页之间的通信？"></a>11. 如何实现的浏览器内多个标签页之间的通信？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">方法一:</span><br><span class="line">localstorage被修改添加等都会触发一个storage事件,通过监听这个事件可以实现通信</span><br><span class="line">方法二:</span><br><span class="line">cookie+setintveral 将数据存储在cookie当中,每隔一段事件读取一次cookie</span><br></pre></td></tr></table></figure><h4 id="12-css盒子模型"><a href="#12-css盒子模型" class="headerlink" title="12. css盒子模型"></a>12. css盒子模型</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">padding+margin+content+border</span><br><span class="line">独占一行,有宽高</span><br><span class="line">w3c和低版本IE有区别</span><br></pre></td></tr></table></figure><h4 id="13-css的选择符有哪些？哪些属性可以继承？"><a href="#13-css的选择符有哪些？哪些属性可以继承？" class="headerlink" title="13. css的选择符有哪些？哪些属性可以继承？"></a>13. css的选择符有哪些？哪些属性可以继承？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">ID</span><br><span class="line">class</span><br><span class="line">标签</span><br><span class="line">相邻+</span><br><span class="line">子></span><br><span class="line">后台li a</span><br><span class="line">通配符*</span><br><span class="line">属性a[ref="extral"]</span><br><span class="line">伪类a:hover,li:nth-child</span><br><span class="line"></span><br><span class="line">可继承 font-size font-family color,</span><br><span class="line">不可继承 border padding margin width height ;</span><br></pre></td></tr></table></figure><h4 id="14-css优先级如何计算"><a href="#14-css优先级如何计算" class="headerlink" title="14. css优先级如何计算"></a>14. css优先级如何计算</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">important>行内>内嵌>导入(链入)</span><br><span class="line">具体计算</span><br><span class="line">important无限大</span><br><span class="line">id 100</span><br><span class="line">class 10</span><br><span class="line">标签 1</span><br><span class="line">* 0</span><br><span class="line">注意: 最小的权重是继承的样式,比如父元素的权重为!important 但是继承的元素的权重还没有*高</span><br></pre></td></tr></table></figure><h4 id="15-css新增的伪类有哪些"><a href="#15-css新增的伪类有哪些" class="headerlink" title="15. css新增的伪类有哪些"></a>15. css新增的伪类有哪些</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">p:nth-child(x)</span><br><span class="line">p:frist-of-type</span><br><span class="line">p:last-of-type</span><br><span class="line">p:only-type</span><br><span class="line">p:only-of-type</span><br><span class="line">:checked 被选中</span><br><span class="line">:enabled, :disabled 禁用状态</span><br></pre></td></tr></table></figure><h4 id="16-position-absolute和relative的区别？"><a href="#16-position-absolute和relative的区别？" class="headerlink" title="16. position absolute和relative的区别？"></a>16. position absolute和relative的区别？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">区别一:</span><br><span class="line">relative会保留原先的位置,absolute不会</span><br><span class="line">区别二:</span><br><span class="line">absolute会相对于有定位的父元素进行定位,relative会相对于该元素的原先的位置进行定位</span><br></pre></td></tr></table></figure><h4 id="17-css弹性盒适用于哪些场景"><a href="#17-css弹性盒适用于哪些场景" class="headerlink" title="17. css弹性盒适用于哪些场景"></a>17. css弹性盒适用于哪些场景</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">多列盒子浮动时可以采用弹性盒</span><br><span class="line">适用于移动端操作</span><br></pre></td></tr></table></figure><h4 id="18-经常遇见的浏览器问题有哪些-常用的hack的技巧有哪些"><a href="#18-经常遇见的浏览器问题有哪些-常用的hack的技巧有哪些" class="headerlink" title="18. 经常遇见的浏览器问题有哪些,常用的hack的技巧有哪些"></a>18. 经常遇见的浏览器问题有哪些,常用的hack的技巧有哪些</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">图片下有一个块级元素 //会产生一个3px的缝隙</span><br><span class="line">给父元素设置浮动,子元素也设置浮动,低版本ie会双边距问题 //给父元素设置块级元素</span><br><span class="line">如果一个元素没有内容,最低高度为19px //font-size:0</span><br><span class="line">超链接的文字展示 //a:link->a:visited->a:hover->a:active</span><br><span class="line">ie低版本,当li最后一个标记设置浮动的时候,每个li之间会产生3px的像素 //vertical-top:top;</span><br><span class="line">ie低版本,png的图片无法展示 //导入js脚本补丁</span><br><span class="line"></span><br><span class="line">ie条件注释法</span><br><span class="line">css属性前缀法</span><br><span class="line">样式前缀法</span><br></pre></td></tr></table></figure><h4 id="19-为什么初始化css的样式"><a href="#19-为什么初始化css的样式" class="headerlink" title="19. 为什么初始化css的样式"></a>19. 为什么初始化css的样式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">每个浏览器的默认样式不一样,存在差异</span><br><span class="line">提高编码的质量</span><br></pre></td></tr></table></figure><h4 id="20-如何理解BFC"><a href="#20-如何理解BFC" class="headerlink" title="20. 如何理解BFC"></a>20. 如何理解BFC</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">不能从定义的角度去解释,bfc又叫做块级格式化上下文</span><br><span class="line">功能</span><br><span class="line">1. 内部元素清楚浮动</span><br><span class="line">2. 相邻的兄弟之间划清界限,可以用float+div配合制作自适应布局</span><br><span class="line">产生 </span><br><span class="line">float不为none</span><br><span class="line">position:absolute</span><br><span class="line">overflow设置除了auto</span><br><span class="line">一般脱离了文档流,都会产生bfc</span><br></pre></td></tr></table></figure><h4 id="21-解释下浮动和它的工作原理？清除浮动的技巧"><a href="#21-解释下浮动和它的工作原理？清除浮动的技巧" class="headerlink" title="21. 解释下浮动和它的工作原理？清除浮动的技巧"></a>21. 解释下浮动和它的工作原理？清除浮动的技巧</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">浮动的元素脱离了文档流,不占据空间,浮动元素碰到包含它的边框或者浮动元素的边框停留</span><br><span class="line"></span><br><span class="line">解决方式:</span><br><span class="line">1. 父元素设置一个高度,强制撑起来,不推荐,内容增多的时候,父元素的高度也会改变,而且也没有彻底清除掉浮动</span><br><span class="line">2. 设置一个常用的div,他的class为clear,设置为块级元素,清楚浮动,隐藏显示等</span><br><span class="line">3. 通过after设置一个伪类 a::after{content:"",display:none,visibity:hidden,clear:both}</span><br><span class="line">4. 给父元素设置overflow,原理是父元素变为bfc,那么他就会管住子元素,让子元素不对外面的元素造成影响</span><br></pre></td></tr></table></figure><h4 id="22-DOM对于节点的常见操作"><a href="#22-DOM对于节点的常见操作" class="headerlink" title="22. DOM对于节点的常见操作"></a>22. DOM对于节点的常见操作</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">创建节点</span><br><span class="line">createElement()</span><br><span class="line">createTextNode()</span><br><span class="line">createDocumentFragment() 常用于性能优化,给节点做一个缓冲</span><br><span class="line">增加,删除,替换,插入,克隆</span><br><span class="line">parentNode.appendChild(newNode)</span><br><span class="line">parentNode.insertBefore(PrevNode,newNode)</span><br><span class="line">replaceChild()</span><br><span class="line">removeChild()</span><br><span class="line">cloneNode()</span><br><span class="line">查找</span><br><span class="line">document.getElementById()</span><br><span class="line">document.getElementsByTagName()</span><br><span class="line">document.getElementsByClassName()</span><br><span class="line">document.form.</span><br><span class="line">document.getElementsByName()</span><br></pre></td></tr></table></figure><h4 id="23-webSocket如何解决兼容性问题"><a href="#23-webSocket如何解决兼容性问题" class="headerlink" title="23. webSocket如何解决兼容性问题"></a>23. webSocket如何解决兼容性问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">介绍一下websocket</span><br><span class="line">websocket是一种全双工通信,采用的是ws和wss协议,和http不同,他是一种有状态的协议,可以有服务端主动发起请求,而http不行,在发送的信息上面也有区别,websocket可以发送二进制文件,但是通常情况下我们会选择发送json数据,可以有效的解决ajax长轮询带来的问题</span><br><span class="line">解决兼容性</span><br><span class="line">1. 虽然websocket在使用上面比ajax更加的有效,但是ajax长轮询有更好的兼容性</span><br><span class="line">2. 使用flash</span><br></pre></td></tr></table></figure><h4 id="24-你如何对网站的文件和资源进行优化"><a href="#24-你如何对网站的文件和资源进行优化" class="headerlink" title="24.你如何对网站的文件和资源进行优化"></a>24.你如何对网站的文件和资源进行优化</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">使用CDN加速</span><br><span class="line">图片使用一些高校的图床</span><br><span class="line">服务器采用gzip压缩</span><br><span class="line">css和js文件都压缩(去掉空格和换行)</span><br><span class="line">采用多个域名进行缓存</span><br><span class="line">文件尽量合并,减少发出的http请求数量</span><br></pre></td></tr></table></figure><h4 id="25-线程于进程的区别"><a href="#25-线程于进程的区别" class="headerlink" title="25.线程于进程的区别"></a>25.线程于进程的区别</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">每个程序都有一个进程,每个进程都有一个线程</span><br></pre></td></tr></table></figure><h4 id="26-JS兼容性问题FF与IE"><a href="#26-JS兼容性问题FF与IE" class="headerlink" title="26.JS兼容性问题FF与IE"></a>26.JS兼容性问题FF与IE</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//IE下（两种）</span></span><br><span class="line"><span class="built_in">document</span>.formName.item(<span class="string">"itemName"</span>);</span><br><span class="line"><span class="built_in">document</span>.formName.elements [<span class="string">"elementName"</span>];</span><br><span class="line"><span class="comment">//Firefox下</span></span><br><span class="line"><span class="built_in">document</span>.formName.elements[<span class="string">"elementName"</span>];</span><br><span class="line"><span class="comment">//解决方法：</span></span><br><span class="line"><span class="built_in">document</span>.formName.elements[<span class="string">"elementName"</span>]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.event只能在IE下运行,而不能在Firefox下运行</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">IE下,可以使用<span class="built_in">eval</span>(<span class="string">"idName"</span>)或getElementById(<span class="string">"idName"</span>)来取得id为idName的HTML对象;</span><br><span class="line">Firefox下只能使用getElementById(<span class="string">"idName"</span>)来取得id为idName的HTML对象；</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">事件对象的属性</span><br><span class="line">用IE下,even对象有x,y属性,但是没有pageX,pageY属性;</span><br><span class="line">Firefox下,even对象有pageX,pageY属性,但是没有x,y属性；</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">IE提供了attachEvent和detachEvent两个接口；</span><br><span class="line">而Firefox提供 的是 addEventListener和removeEventListener两个接口；</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">getElementsByClassName不能兼容IE9之前的浏览器</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">IE中支持使用parentElement和parentNode获取父节点。而 Firefox只可以使用parentNode。</span><br></pre></td></tr></table></figure><h4 id="27-常见的css兼容问题-主要针对于IE6-7"><a href="#27-常见的css兼容问题-主要针对于IE6-7" class="headerlink" title="27.常见的css兼容问题(主要针对于IE6,7)"></a>27.常见的css兼容问题(主要针对于IE6,7)</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> png的图片不加载</span><br><span class="line">解决: 换一种图片格式或者在晚上找插件去解决</span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> ie6的margin不能设置为负数</span><br><span class="line">解决: 可以通过相对定位设置</span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> 在ie6下,固定定位是无效的</span><br><span class="line">解决: 通过js去控制</span><br><span class="line"></span><br><span class="line"><span class="number">4.</span> ie6,<span class="number">7</span>中,输入类型的表单控件会有<span class="number">1</span>px的间隙</span><br><span class="line">解决: 通过定位去设置</span><br><span class="line"></span><br><span class="line"><span class="number">5.</span> ie6下面,绝对定位的父元素宽高设置为奇数的时候,会出现偏差</span><br><span class="line">解决: 在页面设计的时候,尽量去使用偶像素</span><br><span class="line"></span><br><span class="line"><span class="number">6.</span>在ie6情况下,如果高度小于<span class="number">19</span>px,会被当成<span class="number">19</span>像素去处理</span><br><span class="line">解决: 添加overflow:hidden</span><br></pre></td></tr></table></figure><h4 id="28-字体为何设置为偶数"><a href="#28-字体为何设置为偶数" class="headerlink" title="28.字体为何设置为偶数"></a>28.字体为何设置为偶数</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. 考虑UI设计师的角度,一般设计师设计的时候使用的像素都是偶数</span><br><span class="line">2. 考虑兼容性问题,在ie6等低版本情况下的时候,如果像素设置为奇数,可能会造成汉子扁宽的效果</span><br><span class="line">3. 有时候会通过字体大小去设置页面的margin像素等问题,如果像素为14那么margin可以是14*1.5=21 如果是奇数的话,乘机就会出现小数问题</span><br></pre></td></tr></table></figure><h4 id="29-什么是AJAX-如何解决AJAX兼容性问题"><a href="#29-什么是AJAX-如何解决AJAX兼容性问题" class="headerlink" title="29.什么是AJAX,如何解决AJAX兼容性问题"></a>29.什么是AJAX,如何解决AJAX兼容性问题</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">定义: AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。</span><br><span class="line"></span><br><span class="line">解决</span><br><span class="line">1. 通过jsonp的回调函数callback解决</span><br><span class="line">2. 通过CORS跨域资源共享,设置响应头</span><br><span class="line">3. 通过ngxin做一个代理</span><br></pre></td></tr></table></figure><h4 id="30-call和apply的区别和作用"><a href="#30-call和apply的区别和作用" class="headerlink" title="30.call和apply的区别和作用"></a>30.call和apply的区别和作用</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">作用: 修改js里面的this指向问题</span><br><span class="line"></span><br><span class="line">区别: call接收多个参数,第一个参数为this指向的对象,后面的参数为传递的参数,apply接收两个参数,第一个参数为this指向的对象,第二个参数是一个数组,数组的内容是传递的参数</span><br><span class="line"></span><br><span class="line">总结：call和apply接收的参数不一样,但是实现的功能是一样的</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h3 id="Web前段面试题"><a href="#Web前段面试题" class="headerlink" title="Web前段面试题"></a>Web前段面试题</h3><h4 id="1-doctype在严格模式下和混杂模式有什么区别"><a href="#1-do
</summary>
<category term="JavaScript" scheme="https://2662419405.github.io/categories/JavaScript/"/>
<category term="学习之旅" scheme="https://2662419405.github.io/tags/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/"/>
<category term="前端" scheme="https://2662419405.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
<category term="面试题" scheme="https://2662419405.github.io/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/"/>
<category term="兼容性" scheme="https://2662419405.github.io/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/"/>
<category term="bug" scheme="https://2662419405.github.io/tags/bug/"/>
</entry>
<entry>
<title>❤Thanksgiving❤</title>
<link href="https://2662419405.github.io/2019/11/05/welcome/"/>
<id>https://2662419405.github.io/2019/11/05/welcome/</id>
<published>2019-11-05T13:05:34.000Z</published>
<updated>2019-12-03T13:08:17.492Z</updated>
<content type="html"><![CDATA[<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/2ba4e2431c8f59fa8fdcf10f0348f6ff7f0d5b.png" /><a id="more"></a>]]></content>
<summary type="html">
<img src="https://cdn.jsdelivr.net/gh/2662419405/imgPlus/2ba4e2431c8f59fa8fdcf10f0348f6ff7f0d5b.png" />
</summary>
<category term="感谢相遇" scheme="https://2662419405.github.io/tags/%E6%84%9F%E8%B0%A2%E7%9B%B8%E9%81%87/"/>
<category term="码农" scheme="https://2662419405.github.io/tags/%E7%A0%81%E5%86%9C/"/>
<category term="苦逼程序员" scheme="https://2662419405.github.io/tags/%E8%8B%A6%E9%80%BC%E7%A8%8B%E5%BA%8F%E5%91%98/"/>
</entry>
</feed>