-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
522 lines (266 loc) · 265 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>伊娃的琴话 - 前端之恋</title>
<subtitle>Eva的技术博客笔记,学习心得</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://eva1314kawayi.com/"/>
<updated>2020-03-31T14:29:37.960Z</updated>
<id>http://eva1314kawayi.com/</id>
<author>
<name>Eva</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>vscode snippets</title>
<link href="http://eva1314kawayi.com/2020/03/31/vscode-snippets/"/>
<id>http://eva1314kawayi.com/2020/03/31/vscode-snippets/</id>
<published>2020-03-31T14:23:24.000Z</published>
<updated>2020-03-31T14:29:37.960Z</updated>
<content type="html"><![CDATA[<p>首先找到user snippets设置的地方，如下图<br><img src="/img/user_snippets.jpg" alt="user snippets"></p>]]></content>
<summary type="html">
<p>首先找到user snippets设置的地方，如下图<br><img src="/img/user_snippets.jpg" alt="user snippets"></p>
</summary>
<category term="vscode" scheme="http://eva1314kawayi.com/tags/vscode/"/>
</entry>
<entry>
<title>mac操作快捷方式</title>
<link href="http://eva1314kawayi.com/2020/03/29/mac-shortcut/"/>
<id>http://eva1314kawayi.com/2020/03/29/mac-shortcut/</id>
<published>2020-03-29T13:51:50.000Z</published>
<updated>2020-03-31T14:24:29.560Z</updated>
<content type="html"><![CDATA[<h2 id="Finder中通过输入路径进入目录"><a href="#Finder中通过输入路径进入目录" class="headerlink" title="Finder中通过输入路径进入目录"></a>Finder中通过输入路径进入目录</h2><p>「CMD + Shift + G」：无论是Finder本身，还是一些IDE的打开文件，都可用</p>]]></content>
<summary type="html">
<h2 id="Finder中通过输入路径进入目录"><a href="#Finder中通过输入路径进入目录" class="headerlink" title="Finder中通过输入路径进入目录"></a>Finder中通过输入路径进入目录</h2><p>「CMD + Shi
</summary>
<category term="mac" scheme="http://eva1314kawayi.com/tags/mac/"/>
</entry>
<entry>
<title>node基础入门相关</title>
<link href="http://eva1314kawayi.com/2020/03/09/node-base/"/>
<id>http://eva1314kawayi.com/2020/03/09/node-base/</id>
<published>2020-03-09T03:38:44.000Z</published>
<updated>2020-03-15T14:58:17.960Z</updated>
<content type="html"><![CDATA[<h2 id="nodejs是什么"><a href="#nodejs是什么" class="headerlink" title="nodejs是什么"></a>nodejs是什么</h2><h3 id="node安装"><a href="#node安装" class="headerlink" title="node安装"></a>node安装</h3><p><a href="http://nodejs.org/" target="_blank" rel="noopener">node官网</a><br><a href="http://nodejs.org/download/" target="_blank" rel="noopener">node下载</a></p><h2 id="nodejs-vs-js"><a href="#nodejs-vs-js" class="headerlink" title="nodejs vs js"></a>nodejs <strong>vs</strong> js</h2><p>js<br>基于ecmascript，操作DOM、BOM<br>nodejs<br>基于ecmascript，操作os file net database</p><h2 id="模块"><a href="#模块" class="headerlink" title="模块"></a>模块</h2><ul><li>在nodejs中一个文件就是一个模块</li><li>每个模块都有自己的作用域</li><li>使用var声明的变量，不是全局的，只属于当前模块<br><strong>filename:对应模块文件解析后的绝对路径，该属性属于模块，不属于global</strong>dirname:对应模块文件所在目录解析后的绝对路径，该属性属于模块，不属于global<h3 id="加载机制"><a href="#加载机制" class="headerlink" title="加载机制"></a>加载机制</h3>require(‘./2.js’) //相对路径 require(“2.js”) // 会加载nde中的核心模块，或者是node_modules<br>require(‘D:/eva/2.js’) //绝对路径</li></ul><p>require(“./2”)会怎么加载呢？<br>1.首先按照加载的模块的文件名进行查找<br>2.如果没有找到，则会在模块文件名称后加上.js的后缀，进行查找<br>3.如果没有找到，则添加.json后缀查找<br>4。如果还没找到，则添加.node 后缀查找</p><h2 id="module和exports"><a href="#module和exports" class="headerlink" title="module和exports"></a>module和exports</h2><p>module：保存提供和当前模块有关的一些信息<br>exports：module的一个子对象，可以暴露模块中的局部变量和对象，可供外来访问<br><figure class="highlight javascript"><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> a = <span class="number">100</span>;</span><br><span class="line"><span class="built_in">module</span>.exports.a = a;</span><br><span class="line"><span class="keyword">var</span> mo = <span class="built_in">require</span>(<span class="string">".5"</span>);<span class="comment">//mo就得到了被加载模块中的module.exports的对象的值</span></span><br></pre></td></tr></table></figure></p><h3 id="export和module-exports"><a href="#export和module-exports" class="headerlink" title="export和module.exports"></a>export和module.exports</h3><p>在模块作用域，还有一个内置模块对象，exports其实就是module.exports,使用时尽量不要去破坏他们的引用关系 比如 不能module.exports = [1,2,3],这样导致export和 module.exports之间的引用断开了 exports != module.exports了</p><h2 id="global"><a href="#global" class="headerlink" title="global"></a>global</h2><p>1.Date<br>2.Array<br>…</p><h2 id="process"><a href="#process" class="headerlink" title="process"></a>process</h2><p>process对象是一个全局对象，可以在任何地方都能访问到他，通过这个对象提供的属性和方法，使我们可以对当前运行的程序的进程进行访问和控制</p><ul><li>argv(Array) 一组包含命令行参数的数组:第一个元素会是node，第二个元素将是js文件的名称，接下来的元素依次是命令行传入的参数</li><li>execPath 开启当前进程的绝对路径</li><li>env 返回用户环境信息</li></ul><p>process对象属性很多，包括</p><ul><li>version:返回node版本信息</li><li>versions：返回node以及node依赖包版本信息</li><li>pid：当前进程的pid</li><li>title：当前进程的显示名称(Getter/Setter)</li><li>arch：返回当前CPU处理器架构 arm/ia32/x64</li><li>platform:返回当前操作系统平台</li><li>cwd：返回当前进程的工作目录</li><li>chdir(directory)：改变当前进程的工作目录</li><li>exit(code)：退出</li><li>kill(pid)：向进程发送信息<h3 id="标准输入输出流"><a href="#标准输入输出流" class="headerlink" title="标准输入输出流"></a>标准输入输出流</h3>stdin、stdout：标准输入输出流（IO）<br>、、、javascript<br>process.stdout.write(“hello”);<br>//默认情况下，输入流是关闭的，要监听处理输入流数据，首先要开启输入流<br>process.stdin.resume();<br>//监听用户输入数据<br>process.stdin.on(“data”,function(chunk){<br> console.log(“用户输入了：”+chunk);//按enter键触发该事件<br>});<br>、、、</li></ul><figure class="highlight javascript"><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"><span class="keyword">var</span> a;</span><br><span class="line"><span class="keyword">var</span> b;</span><br><span class="line">process.stdout.write(<span class="string">"请输入a的值："</span>);</span><br><span class="line">process.stdin.on(<span class="string">"data"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">chunk</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(!a){</span><br><span class="line"> a = <span class="built_in">Number</span>(chunk);</span><br><span class="line"> process.stdout.write(<span class="string">"请输入b的值："</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> b = <span class="built_in">Number</span>(chunk);</span><br><span class="line"> process.stdout.write(<span class="string">"结果是："</span>+(a+b));</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="buffer"><a href="#buffer" class="headerlink" title="buffer"></a>buffer</h2><p>一个用于更好的操作二进制数据的类：我们在操作文件或者网络数据的时候，其实操作的就是二进制数据流，Node为我们提供了一个更加方便的去操作这种数据流的类Buffer，他是一个全局的类</p><ul><li>new Buffer(size);//创建一个buffer对象，并为这个对象分配一个大小，分配空间大小后，其长度是固定的，不能更改<figure class="highlight javascript"><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="keyword">var</span> bf = <span class="keyword">new</span> Buffer(<span class="number">5</span>);</span><br><span class="line">bf[<span class="number">6</span>] = <span class="string">"a"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br><span class="line">bf[<span class="number">1</span>] = <span class="string">"g"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br></pre></td></tr></table></figure></li><li>new Buffer(array);<figure class="highlight javascript"><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> bf = <span class="keyword">new</span> Buffer(<span class="string">"miaov"</span>,<span class="string">"utf-8"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br></pre></td></tr></table></figure></li><li>new Buffer(string,[encoding]);<figure class="highlight javascript"><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> bf = <span class="keyword">new</span> Buffer(<span class="string">"miaov"</span>,<span class="string">"uft-8"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i < bf.length; i++){</span><br><span class="line"> <span class="comment">//console.log(bf[i].toString(16));</span></span><br><span class="line"> <span class="built_in">console</span>.log(string.fromCharCode(bf[i]));</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"miaov"</span>;</span><br><span class="line"><span class="keyword">var</span> bf1 = <span class="keyword">new</span> Buffer(str1);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str1.length);</span><br><span class="line"><span class="built_in">console</span>.log(bf1.length);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">"秒味"</span>;</span><br><span class="line"><span class="keyword">var</span> bf2 = <span class="keyword">new</span> Buffer(str2);</span><br><span class="line"><span class="built_in">console</span>.log(str2.length);</span><br><span class="line"><span class="built_in">console</span>.log(bf2.length);</span><br></pre></td></tr></table></figure>buf.write(要写入的字符串，从buffer对象中的几位开始写入，写入的字符串的长度，写入字符串的编码)<figure class="highlight javascript"><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="keyword">var</span> str = <span class="string">"miaov"</span>;</span><br><span class="line"><span class="built_in">console</span>.log( <span class="keyword">new</span> Buffer(str) );</span><br><span class="line"><span class="keyword">var</span> bf = <span class="keyword">new</span> Buffer(<span class="number">5</span>);</span><br><span class="line">bf.write(str);</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br><span class="line">bf.write(str, <span class="number">1</span>);</span><br><span class="line">bf.write(str, <span class="number">1</span>, <span class="number">3</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br></pre></td></tr></table></figure>buf.toString\toJSON<figure class="highlight javascript"><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="keyword">var</span> bf = <span class="keyword">new</span> Buffer(<span class="string">"miaov"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bf.toString());</span><br><span class="line"><span class="built_in">console</span>.log(bf.toString(<span class="string">"utf-8"</span>, <span class="number">1</span>, <span class="number">3</span>));</span><br><span class="line"><span class="keyword">var</span> bf2 = <span class="keyword">new</span> Buffer(<span class="string">"秒味"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bf2);</span><br><span class="line"><span class="built_in">console</span>.log(bf2.toString(<span class="string">"utf-8"</span>,<span class="number">1</span>));</span><br><span class="line"><span class="built_in">console</span>.log(bf.toJSON());</span><br><span class="line"><span class="comment">//{type:"Buffer",data:[109,105,97,111,118]}</span></span><br></pre></td></tr></table></figure></li></ul><p>slice cope<br><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bf = <span class="keyword">new</span> Buffer(<span class="string">"miaov"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bf2 = bf.slice();</span><br><span class="line"><span class="keyword">var</span> bf3 = bf.slice(<span class="number">2</span>,<span class="number">4</span>);</span><br><span class="line"> bf3 bf2 和bf指定相同的内存地址</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> bf4 = <span class="keyword">new</span> Buffer(<span class="number">10</span>);</span><br><span class="line"> bf.copy(bf4);</span><br><span class="line"> <span class="built_in">console</span>.log(bf4);</span><br><span class="line"> bf[<span class="number">4</span>] = <span class="number">2</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(bf4);</span><br><span class="line"> <span class="built_in">console</span>.log(bf);</span><br><span class="line"> bf4的改变不影响bf</span><br></pre></td></tr></table></figure></p><h2 id="Buffer类"><a href="#Buffer类" class="headerlink" title="Buffer类"></a>Buffer类</h2><ul><li>Buffer.isEncoding(“utf-8”)//检查buffer支持编码</li><li>Buffer.isBuffer(buf)//检查对象是不是buffer</li><li>Buffer.byteLength(str) Buffer.byteLength(st，”asii”) //检查字符的字节长度，后一个参数指定编码</li><li>Buffer.concat<figure class="highlight javascript"><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> str1 = <span class="string">"miaov"</span>;</span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">"秒味"</span>;</span><br><span class="line"><span class="keyword">var</span> list = [<span class="keyword">new</span> Buffer(str1), <span class="keyword">new</span> Buffer(str2)];</span><br><span class="line"><span class="built_in">console</span>.log(list);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bf = Buffer.concat(list);</span><br><span class="line"><span class="built_in">console</span>.log(bf);</span><br></pre></td></tr></table></figure></li></ul><h2 id="文件系统中open方法的使用"><a href="#文件系统中open方法的使用" class="headerlink" title="文件系统中open方法的使用"></a>文件系统中open方法的使用</h2><p>var fs = require(“fs”);<br><figure class="highlight javascript"><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">### open vs openSync(同步) read readSync</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*fs.open(path,flags,[mode],callback)</span></span><br><span class="line"><span class="comment">* path:要打开的文件的路径</span></span><br><span class="line"><span class="comment">* flags:打开文件的方式 读/写</span></span><br><span class="line"><span class="comment">* mode:设置文件的模式 读/写/执行 4/2/1</span></span><br><span class="line"><span class="comment">* callback:回调</span></span><br><span class="line"><span class="comment">* err:文件打开失败的错误保存在err里面，如果成功err为null</span></span><br><span class="line"><span class="comment">* fd:被打开文件的标识</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">fs.open(<span class="string">"1.txt"</span>,<span class="string">"r"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err, fd</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(err);</span><br><span class="line"> <span class="built_in">console</span>.log(fd);</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fd = fs.openSync(<span class="string">"1.txt"</span>,<span class="string">"r"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(fd);</span><br></pre></td></tr></table></figure></p><figure class="highlight javascript"><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="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line">fs.open(<span class="string">"1.txt"</span>,<span class="string">"r"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err, fd</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(err){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"文件打开失败"</span>)</span><br><span class="line"> }<span class="keyword">else</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"> *fs.read(fd,buffer,offset,length,position,callback);</span></span><br><span class="line"><span class="comment"> *fd:数字，通过open方法成功打开一个文件返回的编号</span></span><br><span class="line"><span class="comment"> *buffer：buffer对象</span></span><br><span class="line"><span class="comment"> *offset:新的内容添加到buffer的起始位置</span></span><br><span class="line"><span class="comment"> *length：添加到buffer中内容的长度</span></span><br><span class="line"><span class="comment"> *position：读取文件中的其实位置</span></span><br><span class="line"><span class="comment"> *callback：回调</span></span><br><span class="line"><span class="comment"> * err</span></span><br><span class="line"><span class="comment"> * length</span></span><br><span class="line"><span class="comment"> * buffer</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="comment">//var bf1 = new Buffer("1234566789");</span></span><br><span class="line"> <span class="keyword">var</span> bf1 = <span class="keyword">new</span> Buffer(<span class="number">10</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(bf1);</span><br><span class="line"> fs.read(fd,bf1,<span class="number">0</span>,<span class="number">4</span>,<span class="literal">null</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err,len,bf</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(bf1);</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="文件系统中write方法"><a href="#文件系统中write方法" class="headerlink" title="文件系统中write方法"></a>文件系统中write方法</h2><figure class="highlight javascript"><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="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line">fs.open(<span class="string">"1.txt"</span>,<span class="string">"r+"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> *当我们要对打开的文件近些写操作时，open的模式应该是读写方式</span></span><br><span class="line"><span class="comment"> *fs.write(fd,buffer,offset,length[,position],callback)</span></span><br><span class="line"><span class="comment"> *fd:打开的文件</span></span><br><span class="line"><span class="comment"> *buffer：要写入的数据</span></span><br><span class="line"><span class="comment"> *offset：buffer对象中要写入的数据的起始位置</span></span><br><span class="line"><span class="comment"> *length：要写入的buffer数据的长度</span></span><br><span class="line"><span class="comment"> *postiion：fd中的起始位置</span></span><br><span class="line"><span class="comment"> *callback：回调</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="keyword">if</span>(err){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"打开文件失败"</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//var bf = new Buffer("123");</span></span><br><span class="line"> <span class="comment">//fs.write(fd,bf,0,3,0,function(){</span></span><br><span class="line"> <span class="comment">//</span></span><br><span class="line"> <span class="comment">// console.log(arguments);</span></span><br><span class="line"> <span class="comment">//});</span></span><br><span class="line"> fs.write(fd,<span class="string">'1234'</span>,<span class="number">5</span>,<span class="string">"utf-8"</span>);</span><br><span class="line"> <span class="comment">//关闭一个文件</span></span><br><span class="line"> fs.close(fs,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"></span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="append向文件追加内容"><a href="#append向文件追加内容" class="headerlink" title="append向文件追加内容"></a>append向文件追加内容</h2><p>writeFile writeFileSync appendFile appendFileSync readFile readFileSync exits unlink rename stat<br><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line"><span class="keyword">var</span> filename = <span class="string">"2.txt"</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">fs.writeFile(filename,<span class="string">"hello"</span>,<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="built_in">arguments</span>);</span><br><span class="line">});</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">fs.appendFile(filename,<span class="string">"hello"</span>,<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="built_in">arguments</span>);</span><br><span class="line">});</span><br><span class="line"><span class="comment">//也可查看文件夹是否存在</span></span><br><span class="line">fs.exits(filename,<span class="function"><span class="keyword">function</span>(<span class="params">bool</span>)</span>{<span class="comment">//booll是否存在</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(!bool){</span><br><span class="line"> fs.writeFile(filename,<span class="string">"miaov"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(err){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"出错了"</span>);</span><br><span class="line"> }<span class="keyword">else</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><br><span class="line"></span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//appendFile本身有检测文件是否存在的功能</span></span><br><span class="line"> fs.appendFile(filename,<span class="string">"-leo"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>{</span><br><span class="line"></span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="comment">/*同步模式*/</span></span><br><span class="line"><span class="keyword">if</span>(!fs.exitsSync(filename)){</span><br><span class="line"> fs.writeFileSync(filename,<span class="string">"miaov"</span>);</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"> fs.appendFileSync(filename,<span class="string">"-leo"</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*删除文件 unlinkSync*/</span></span><br><span class="line">fs.unlink(<span class="string">"2.txt"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(err){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"删除失败"</span>);</span><br><span class="line"> }<span class="keyword">else</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><br><span class="line"><span class="comment">/*文件重命名 renameSync*/</span></span><br><span class="line">fs.rename(<span class="string">"2.txt"</span>,<span class="string">"2.new.txt"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"></span><br><span class="line">});</span><br><span class="line"><span class="comment">/*读取文件信息 statSync*/</span></span><br><span class="line">fs.stat(<span class="string">"2.new.txt"</span>,<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="built_in">arguments</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><h2 id="文件watch来监控变化-在不同的操作系统要做兼容"><a href="#文件watch来监控变化-在不同的操作系统要做兼容" class="headerlink" title="文件watch来监控变化,在不同的操作系统要做兼容"></a>文件watch来监控变化,在不同的操作系统要做兼容</h2><figure class="highlight javascript"><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> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line"><span class="keyword">var</span> filename = <span class="string">"2.new.txt"</span>;</span><br><span class="line">fs.watch(filename,<span class="function"><span class="keyword">function</span>(<span class="params">ev,fn</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(fn){</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><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*fs.mkdir(path,[mode],callback)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">fs.mkdir(<span class="string">"./"</span>,<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="built_in">arguments</span>);</span><br><span class="line">});</span><br><span class="line">fs.rmdir(<span class="string">"./"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"></span><br><span class="line">});</span><br><span class="line">fs.readdir(<span class="string">"./"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err,filelist</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(filelist);</span><br><span class="line"> filelist.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">f</span>)</span>{</span><br><span class="line"></span><br><span class="line"> fs.stat(f,<span class="function"><span class="keyword">function</span>(<span class="params">err,info</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">arguments</span>);</span><br><span class="line"> <span class="keyword">switch</span>(info.name){</span><br><span class="line"> <span class="keyword">case</span> <span class="number">16882</span>:</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'[文件夹]'</span>+f);</span><br><span class="line"> <span class="keyword">break</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></pre></td></tr></table></figure><h2 id="前端项目自动化-项目构建"><a href="#前端项目自动化-项目构建" class="headerlink" title="前端项目自动化-项目构建"></a>前端项目自动化-项目构建</h2><h2 id="使用node进行web开发"><a href="#使用node进行web开发" class="headerlink" title="使用node进行web开发"></a>使用node进行web开发</h2><p>当浏览器访问一个网址时，例<a href="http://www.baidu.com" target="_blank" rel="noopener">http://www.baidu.com</a><br>1.用户通过浏览器发送一个http请求到指定的主机<br>2.服务器收到该请求，对该请求进行分析和处理<br>3.服务器处理完成以后，返回对应的数据到用户机器<br>4.浏览器接收服务器返回的数据，并根据接收到的内容进行分析和处理<br>结：客户端发送一个http请求->指定的服务端->服务端接收并处理请求->返回数据到客户端</p><h3 id="http模块-require-“http”"><a href="#http模块-require-“http”" class="headerlink" title="http模块 require(“http”)"></a>http模块 require(“http”)</h3><figure class="highlight javascript"><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="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">"http"</span>);</span><br><span class="line"><span class="keyword">var</span> server = http.createServer([requestListener]);<span class="comment">//创建并返回一个web服务器对象</span></span><br><span class="line">server.listen(port,[hostname],[backlog],[callback]);<span class="comment">//port:监听的端口 hostname：主机名(IP域名) backlog：链接等待队列的最大长达 callback：调用listen方法并成功开启监听以后，会触发一个listening事件，callback将作为该事件的执行函数</span></span><br><span class="line">server.listen() 不填参数时将自动分配 <span class="number">1</span><span class="number">-1024</span>是给系统的</span><br><span class="line"><span class="built_in">console</span>.log(server.address());</span><br><span class="line">{<span class="attr">address</span>:<span class="string">'::'</span>,<span class="attr">family</span>:<span class="string">'IPv6'</span>,<span class="attr">port</span>:<span class="number">52346</span>}<span class="comment">//地址模式是0.0.0.1 监听所有端口，多个端口，监听所有网口过来的数据</span></span><br><span class="line">server.listen(<span class="number">80</span>,<span class="string">'localhost'</span>)<span class="comment">//假如80端口被占用，就会报错</span></span><br><span class="line">server.on(<span class="string">"error"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(err);</span><br><span class="line">});</span><br><span class="line"><span class="comment">//监听调用后触发listening事件</span></span><br><span class="line">server.on(<span class="string">"listening"</span>,<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">"listening"</span>);</span><br><span class="line">});</span><br><span class="line"><span class="comment">//当有客户端发送请求到该主机和端口时触发request事件</span></span><br><span class="line"><span class="comment">//参数request:http.IncomingMessage的一个实例，通过他我们可以获取到这次请求的一些信息，比如头信息，数据等</span></span><br><span class="line"><span class="comment">//参数response：http.ServerResponse的一个实例，通过他我们可以向该次请求的客户端输出返回响应</span></span><br><span class="line"><span class="comment">//对应createSever中的参数requestListener</span></span><br><span class="line">server.on(<span class="string">"request"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">request,response</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><br><span class="line"><span class="keyword">var</span> server = http.createServer(<span class="function"><span class="keyword">function</span>(<span class="params">request,response</span>)</span>{</span><br><span class="line"></span><br><span class="line"> res.writeHead(<span class="number">200</span>,<span class="string">'miaov'</span>,{</span><br><span class="line"> <span class="string">'content-type'</span>:<span class="string">'text/html;charset=utf-8'</span><span class="comment">//text/plain</span></span><br><span class="line"> });</span><br><span class="line"> res.write(<span class="string">'<h1>hello</h1>'</span>);<span class="comment">//浏览器解析这段内容由浏览器自己决定，一般浏览器会根据header设置来解析内容</span></span><br><span class="line"> res.end();</span><br><span class="line"></span><br><span class="line"> 以上等同于</span><br><span class="line"> res.end(<span class="string">"<h1>hello</h1>"</span>)</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="request对象"><a href="#request对象" class="headerlink" title="request对象"></a>request对象</h2><p>参数request对象-http.IncomingMessage</p><ul><li>httpVersion:使用的http协议的版本</li><li>headers:请求头信息中的数据</li><li>url:请求的地址 指代主机名端口号后面部分，即路径部分</li><li>method：请求的方式<h2 id="response对象"><a href="#response对象" class="headerlink" title="response对象"></a>response对象</h2>server.timeout 超时时间<br>参数response对象-http.ServerResponse</li><li>write(chunk,[encoding]):发送一个数据块到响应正文中 可调用多次</li><li><strong>end([chunk],[encoding])</strong>:当所有的正文和头信息发送完成以后调用该方法告诉服务器数据已经全部发送完成了，这个方法在每次完成信息发送以后必须调用，并且是最后调用</li><li>statusCode：该属性来设置返回的状态码</li><li>setHeader(name,value):设置返回头信息 res.setHeader(“miavo”,”666”) //头信息中会增加这样一条记录 可调用多次</li><li>writeHead(statusCode,[reasonPhrase],[headers])<br>》这个方法只能在当前请求中使用一次，并且必须在response.end()之前调用 最好写在正文之前<h2 id="url处理"><a href="#url处理" class="headerlink" title="url处理"></a>url处理</h2><figure class="highlight javascript"><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="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">"http"</span>);</span><br><span class="line"><span class="keyword">var</span> url = <span class="built_in">require</span>(<span class="string">"url"</span>);</span><br><span class="line"><span class="keyword">var</span> server = htttp.createServer();</span><br><span class="line">server.on(<span class="string">"request"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> <span class="comment">//console.log(req);</span></span><br><span class="line"> <span class="comment">//? 后面的部分 query string</span></span><br><span class="line"> <span class="comment">//req.url req.query</span></span><br><span class="line"> <span class="keyword">var</span> urlStr.url.parse(req.url);</span><br><span class="line"> <span class="built_in">console</span>.log(url.parse(<span class="string">"http://www.baidu.com/a/index.html?b=2#p=1"</span>));</span><br><span class="line"> <span class="built_in">console</span>.log(urlStr);</span><br><span class="line"> <span class="keyword">switch</span>(urlStr.pathname){</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"/"</span>:</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"/user"</span>:</span><br><span class="line"> <span class="comment">//用户首页</span></span><br><span class="line"> res.writeHead(<span class="number">200</span>,{</span><br><span class="line"> <span class="string">"content-type"</span> : <span class="string">"text/html;charset=utf-8"</span></span><br><span class="line"> });</span><br><span class="line"> res.end(<span class="string">"<h1>个人中心</h1>"</span>);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> <span class="comment">//处理其他情况</span></span><br><span class="line"> res.writeHead(<span class="number">404</span>,{</span><br><span class="line"> <span class="string">"content-type"</span> : <span class="string">"text/html;charset=utf-8"</span></span><br><span class="line"> });</span><br><span class="line"> res.end(<span class="string">"页面跑到外星去了"</span>);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="使用fs模块实现行为表现分离"><a href="#使用fs模块实现行为表现分离" class="headerlink" title="使用fs模块实现行为表现分离"></a>使用fs模块实现行为表现分离</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">"http"</span>);</span><br><span class="line"><span class="keyword">var</span> url = <span class="built_in">require</span>(<span class="string">"url"</span>);</span><br><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">"fs"</span>);</span><br><span class="line"><span class="keyword">var</span> querystring = <span class="built_in">require</span>(<span class="string">"querystring"</span>);</span><br><span class="line"><span class="keyword">var</span> server = http.createServer();</span><br><span class="line"><span class="keyword">var</span> htmlDir = __dirname + <span class="string">"/html/"</span></span><br><span class="line">server.on(<span class="string">"request"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">req,res</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> urlStr.url.parse(req.url);</span><br><span class="line"> <span class="keyword">switch</span>(urlStr.pathname){</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"/"</span>:</span><br><span class="line"> sendData(HtmlDir + <span class="string">"index.html"</span>,req,res);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"/user"</span>:</span><br><span class="line"> sendData(HtmlDir + <span class="string">"user.html"</span>,req,res);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"/login"</span>:</span><br><span class="line"> sendData(HtmlDir + <span class="string">"login.html"</span>,req,res);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">"/login/check/"</span>:</span><br><span class="line"> <span class="built_in">console</span>.log(req.method);</span><br><span class="line"> <span class="built_in">console</span>.log(urlStr);</span><br><span class="line"> <span class="built_in">console</span>.log(querystring.parse(urlStr.query));</span><br><span class="line"> <span class="keyword">if</span>(req.method == <span class="string">"post"</span>){</span><br><span class="line"> <span class="keyword">var</span> str = <span class="string">""</span>;</span><br><span class="line"> req.on(<span class="string">"data"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">chunk</span>)</span>{</span><br><span class="line"> str += chunk</span><br><span class="line"> });</span><br><span class="line"> req.on(<span class="string">"end"</span>,<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(str);</span><br><span class="line"> <span class="built_in">console</span>.log(querystring.parse(str));</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line">server.listen(<span class="number">8000</span>,<span class="string">"localhost"</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sendData</span>(<span class="params">file,req,res</span>)</span>{</span><br><span class="line"> fs.readFile(file, <span class="function"><span class="keyword">function</span>(<span class="params">err, data</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(err){</span><br><span class="line"> <span class="comment">//处理其他情况</span></span><br><span class="line"> res.writeHead(<span class="number">404</span>,{</span><br><span class="line"> <span class="string">"content-type"</span> : <span class="string">"text/html;charset=utf-8"</span></span><br><span class="line"> });</span><br><span class="line"> res.end(<span class="string">"页面跑到外星去了"</span>);</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> res.writeHead(<span class="number">200</span>,{</span><br><span class="line"> <span class="string">"content-type"</span> : <span class="string">"text/html;charset=utf-8"</span></span><br><span class="line"> });</span><br><span class="line"> res.end(data);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="使用querystring模块方法"><a href="#使用querystring模块方法" class="headerlink" title="使用querystring模块方法"></a>使用querystring模块方法</h2>基于上面代码<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span><span 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">form</span> <span class="attr">action</span>=<span class="string">"/login/check"</span> <span class="attr">method</span>=<span class="string">"get"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"password"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span>/></span></span><br><span class="line"> <span class="tag"></<span class="name">form</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></li></ul>]]></content>
<summary type="html">
<h2 id="nodejs是什么"><a href="#nodejs是什么" class="headerlink" title="nodejs是什么"></a>nodejs是什么</h2><h3 id="node安装"><a href="#node安装" class="head
</summary>
</entry>
<entry>
<title>浏览器兼容问题</title>
<link href="http://eva1314kawayi.com/2020/03/06/browser-compatility/"/>
<id>http://eva1314kawayi.com/2020/03/06/browser-compatility/</id>
<published>2020-03-06T09:17:22.000Z</published>
<updated>2020-03-06T10:46:42.650Z</updated>
<content type="html"><![CDATA[<h2 id="不同浏览器的标签默认的margin和padding不一样"><a href="#不同浏览器的标签默认的margin和padding不一样" class="headerlink" title="不同浏览器的标签默认的margin和padding不一样"></a>不同浏览器的标签默认的margin和padding不一样</h2><p>通过把页面中用到的元素 margin padding初始设置成0来解决</p><h2 id="IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的要大。hack：display-inline-将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用9这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用-将IE8-IE7-IE6分离开来，这样IE已经独立识别。"><a href="#IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的要大。hack：display-inline-将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用9这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用-将IE8-IE7-IE6分离开来，这样IE已经独立识别。" class="headerlink" title="IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的要大。hack：display:inline;将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用9这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用+将IE8 IE7 IE6分离开来，这样IE已经独立识别。"></a>IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的要大。hack：display:inline;将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用9这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用+将IE8 IE7 IE6分离开来，这样IE已经独立识别。</h2><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attribute">background-color</span>:<span class="number">#f1ee18</span>;<span class="comment">/*所有识别*/</span></span><br><span class="line"> <span class="attribute">background-color</span>:<span class="number">#00deff</span>\<span class="number">9</span>;<span class="comment">/*IE6、7、8识别*/</span></span><br><span class="line"> +background-color:#a200ff;/*IE6、7识别*/</span><br><span class="line"> _<span class="selector-tag">background-color</span>:<span class="selector-id">#1e0bd1</span>;<span class="comment">/*IE6识别*/</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="getAttribute"><a href="#getAttribute" class="headerlink" title="getAttribute"></a>getAttribute</h2><p>IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。</p><h2 id="chrome中小于12px的文本"><a href="#chrome中小于12px的文本" class="headerlink" title="chrome中小于12px的文本"></a>chrome中小于12px的文本</h2><p>Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。</p><h2 id="超链接访问过后hover样式不再出现"><a href="#超链接访问过后hover样式不再出现" class="headerlink" title="超链接访问过后hover样式不再出现"></a>超链接访问过后hover样式不再出现</h2><p>因为被被点击访问过的超链接样式不再具有hover和active了。解决办法是改变css属性的排列顺序：L-V-H-A<br><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></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span>{}</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span>{}</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>{}</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span>{}</span><br></pre></td></tr></table></figure></p><h2 id="event对象"><a href="#event对象" class="headerlink" title="event对象"></a>event对象</h2><p>IE下，event对象有x、y属性，但是没有pageX、pageY属性；Firefox下，event对象有pageX，pageY属性，但是没有x，y属性<br>解决办法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数</p><h2 id="png24"><a href="#png24" class="headerlink" title="png24"></a>png24</h2><p>png24位的图片在IE6浏览器上出现背景，解决方案是做成PNG8</p><h2 id="IE6几种bug解决办法"><a href="#IE6几种bug解决办法" class="headerlink" title="IE6几种bug解决办法"></a>IE6几种bug解决办法</h2><p>1.双边距BUGfloat引起的 使用display<br>2.3像素问题 使用float引起的 使用display：inline -3px<br>3.超链接hover点击后失效 使用正确的书写顺序link visited hover active<br>4.le z-index问题 给父级添加position:relative<br>5.png透明，使用js代码改<br>6.min-height最小高度 !!important解决<br>7.select在ie6下遮盖，使用iframe嵌套<br>8.为什么没有办法定义1px左右的宽度容器(IE)<br>9.ie6不支持!important</p><h2 id="visibility和collapse"><a href="#visibility和collapse" class="headerlink" title="visibility和collapse"></a>visibility和collapse</h2><p>当一个元素的visibility属性被设置成collapse值后，对一般的元素，它的表现跟hidden一样的，但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放。<br>在谷歌浏览器里，使用collapse和使用hidden没有什么区别。<br>在火狐浏览器、opera和ie11里，使用collapse值的效果就如它的字面意思：table的行会小时，它的下面一行会补充它的位置</p><h2 id="css的定位机制"><a href="#css的定位机制" class="headerlink" title="css的定位机制"></a>css的定位机制</h2><p>普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。</p><h2 id="浮动带来的问题"><a href="#浮动带来的问题" class="headerlink" title="浮动带来的问题"></a>浮动带来的问题</h2><ul><li>父元素的高度无法被撑开，影响与父元素同级的元素</li><li>与浮动元素同级的非浮动元素（内联元素）会跟随其后</li><li>若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。</li></ul><h2 id="清除浮动的方式"><a href="#清除浮动的方式" class="headerlink" title="清除浮动的方式"></a>清除浮动的方式</h2><ul><li>父级div定义height</li><li>最后一个浮动元素后加空 div 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）</li><li>包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。</li><li>父级 div 定义 zoom（空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom:1用于兼容IE）</li><li>用after伪元素清除浮动（用于非IE浏览器）<br>原理如下<br>1、父级div定义height<blockquote><p>原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题<br>优点：简单，代码少，容易掌握<br>缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题<br>建议：不推荐使用，只建议高度固定的布局时使用<br>2、结尾处加空 div 标签 clear:both<br>原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度<br>优点：简单，代码少，浏览器支持好，不容易出现怪问题<br>缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽<br>建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法</p></blockquote></li></ul><p>3.父级 div 定义 overflow:hidden<br>原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度<br>优点：简单，代码少，浏览器支持好<br>缺点：不能和position配合使用，因为超出的尺寸的会被隐藏<br>建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用</p><p>4.父级div定义伪类 :after 和 zoom<br>原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题<br>优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）<br>缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持<br>建议：推荐使用，建议定义公共类，以减少CSS代码</p><p>(1) 在子元素后添加一个空div div{clear:both;}<br>(2) 在父元素中{overflow:hidden|auto;zoom:1}<br>(3) :after伪选择符，在父容器的尾部自动创建一个子元素<br><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">"\0020"</span>;<span class="attribute">display</span>: block;<span class="attribute">height</span>: <span class="number">0</span>;<span class="attribute">clear</span>: both;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span> {</span><br><span class="line"> <span class="attribute">zoom</span>: <span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>“clearfix”是父容器的class名称，”content:”020”;”是在父容器的结尾处放一个空白符，<br>“height:0;”是让这个这个空白字符不显示出来，”display:block; clear: both;”是确保这个空白字符是非浮动的独立区块。:after选择符IE 6不支持,添加一条IE 6的独有命令”zoom:1;”就行了.</p><h2 id="上下margin重合的问题"><a href="#上下margin重合的问题" class="headerlink" title="上下margin重合的问题"></a>上下margin重合的问题</h2><p>在重合元素外包裹一层容易，并出发该容易生成一个BFC<br><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></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">"aside"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"text"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"main"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!--下面是css代码--></span></span><br><span class="line"> .aside {</span><br><span class="line"> margin-bottom: 100px;</span><br><span class="line"> width: 100px;</span><br><span class="line"> height: 150px;</span><br><span class="line"> background: #f66;</span><br><span class="line"> }</span><br><span class="line"> .main {</span><br><span class="line"> margin-top: 100px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background: #fcc;</span><br><span class="line"> }</span><br><span class="line"> .text{</span><br><span class="line">/*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/</span><br><span class="line"> overflow: hidden; //此时已经触发了BFC属性。</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p><h2 id="什么是CSS-预处理器-后处理器"><a href="#什么是CSS-预处理器-后处理器" class="headerlink" title="什么是CSS 预处理器 / 后处理器"></a>什么是CSS 预处理器 / 后处理器</h2><p>预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。</p><p>后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。</p><p>CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。</p><p>其它 CSS 预处理器语言：</p><ul><li>Sass（SCSS）</li><li>LESS</li><li>Stylus</li><li>Turbine</li><li>Swithch CSS</li><li>CSS Cacheer</li><li>DT CSS</li></ul><p>结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。</p><h2 id="CSS优化、提高性能的方法有哪些"><a href="#CSS优化、提高性能的方法有哪些" class="headerlink" title="CSS优化、提高性能的方法有哪些"></a>CSS优化、提高性能的方法有哪些</h2><p>避免过度约束<br>避免后代选择符<br>避免链式选择符使用紧凑的语法<br>避免不必要的命名空间<br>避免不必要的重复<br>最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么<br>避免！important，可以选择其他选择器<br>尽可能的精简规则，你可以合并不同类里的重复规则<br>修复解析错误<br>避免使用多类选择符<br>移除空的css规则。<br>正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。</p><blockquote><p>display:inline后不应该再使用width、height、margin、padding以及float。<br>display:inline-block后不应该再使用float。<br>display:block后不应该再使用vertical-align。<br>display:table-*后不应该再使用margin或者float。<br>不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。<br>不滥用web字体,对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。<br>不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。<br>不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。<br>不给h1~h6元素定义过多的样式<br>全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。<br>不重复定义h1~h6元素<br>值为0时不需要任何单位<br>标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：<br><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.foo</span>{</span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>使用CSS渐变等高级特性，需指定所有浏览器的前缀<br>避免让选择符看起来像正则表达式<br>CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。<br>遵守盒模型规则（Beware of broken box models）</p></blockquote><h2 id="浏览器是怎样解析CSS选择器的"><a href="#浏览器是怎样解析CSS选择器的" class="headerlink" title="浏览器是怎样解析CSS选择器的"></a>浏览器是怎样解析CSS选择器的</h2><p>CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。</p><h2 id="在网页中的应该使用奇数还是偶数的字体？"><a href="#在网页中的应该使用奇数还是偶数的字体？" class="headerlink" title="在网页中的应该使用奇数还是偶数的字体？"></a>在网页中的应该使用奇数还是偶数的字体？</h2><p>使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。</p><h2 id="元素竖向的百分比设定是相对于容器的高度吗"><a href="#元素竖向的百分比设定是相对于容器的高度吗" class="headerlink" title="元素竖向的百分比设定是相对于容器的高度吗"></a>元素竖向的百分比设定是相对于容器的高度吗</h2><p>当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。</p><h2 id="怎么让Chrome支持小于12px-的文字"><a href="#怎么让Chrome支持小于12px-的文字" class="headerlink" title="怎么让Chrome支持小于12px 的文字"></a>怎么让Chrome支持小于12px 的文字</h2><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></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span>{</span><br><span class="line"> <span class="attribute">font-size</span>:<span class="number">10px</span>;</span><br><span class="line"> -webkit-transform:scale(0.8);//0.8是缩放比例</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="让页面里的字体变清晰，变细用CSS怎么做"><a href="#让页面里的字体变清晰，变细用CSS怎么做" class="headerlink" title="让页面里的字体变清晰，变细用CSS怎么做"></a>让页面里的字体变清晰，变细用CSS怎么做</h2><p>-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。</p><h2 id="position-fixed-在-android-下无效怎么处理"><a href="#position-fixed-在-android-下无效怎么处理" class="headerlink" title="position:fixed; 在 android 下无效怎么处理"></a>position:fixed; 在 android 下无效怎么处理</h2><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/><h2 id="如果需要手动写动画，你认为最小时间间隔是多久，为什么"><a href="#如果需要手动写动画，你认为最小时间间隔是多久，为什么" class="headerlink" title="如果需要手动写动画，你认为最小时间间隔是多久，为什么"></a>如果需要手动写动画，你认为最小时间间隔是多久，为什么</h2><p>多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。</p><h2 id="li-与-li-之间有看不见的空白间隔是什么原因引起的？有什么解决办法"><a href="#li-与-li-之间有看不见的空白间隔是什么原因引起的？有什么解决办法" class="headerlink" title="li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法"></a>li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法</h2><p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。<br>解决办法</p><blockquote><p>可以将<li>代码全部写在一排<br>浮动li中float：left<br>在ul中用font-size：0（谷歌不支持）；<br>可以将 ul{letter-spacing: -4px;};li{letter-spacing: normal;}</p></blockquote><h2 id="display-inline-block-什么时候会显示间隙"><a href="#display-inline-block-什么时候会显示间隙" class="headerlink" title="display:inline-block 什么时候会显示间隙"></a>display:inline-block 什么时候会显示间隙</h2><p>有空格时候会有间隙 解决：s除空格<br>margin正值的时候 解决：margin使用负值<br>使用font-size时候 解决：font-size:0、letter-spacing、word-spacing</p><h2 id="png、jpg、gif"><a href="#png、jpg、gif" class="headerlink" title="png、jpg、gif"></a>png、jpg、gif</h2><p>png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。<br>jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。<br>gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.<br>webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。</p><h2 id="style-标签写在-body-后与-body前有什么区别"><a href="#style-标签写在-body-后与-body前有什么区别" class="headerlink" title="style 标签写在 body 后与 body前有什么区别"></a>style 标签写在 body 后与 body前有什么区别</h2><p>页面加载自上而下 当然是先加载样式。写在 body 标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）</p><h2 id="CSS-Sprites"><a href="#CSS-Sprites" class="headerlink" title="CSS Sprites"></a>CSS Sprites</h2><p>CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。<br>优势：<br>1.很好的减少网页的请求，大大提高页面的性能；<br>2.减少图片的字节；<br>3.解决了网页设计师在图片命名上的困扰；<br>4.更换风格方便，维护方便。<br>劣势：<br>1.图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；<br>2.开发较麻烦，测量繁琐；（可使用样式生成器）<br>3.维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。</p><h2 id="CSS-伪类和伪元素"><a href="#CSS-伪类和伪元素" class="headerlink" title="CSS 伪类和伪元素"></a>CSS 伪类和伪元素</h2><p>伪类： :focus、:hover、:active伪元素：:before、:after伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；CSS3中伪类和伪元素的语法不同；可以同时使用多个伪类，而只能同时使用一个伪元素；</p><h2 id="前端页面有哪三层构成"><a href="#前端页面有哪三层构成" class="headerlink" title="前端页面有哪三层构成"></a>前端页面有哪三层构成</h2><p>结构层 Html 表示层 CSS 行为层 js</p><h2 id="CSS引入的方式有哪些？使用Link和-import有什么区别"><a href="#CSS引入的方式有哪些？使用Link和-import有什么区别" class="headerlink" title="CSS引入的方式有哪些？使用Link和@import有什么区别"></a>CSS引入的方式有哪些？使用Link和@import有什么区别</h2><p>答：内联，内嵌，外链，导入<br>（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；<br>（2）页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；（3）import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。</p><h2 id="浏览器内核的理解"><a href="#浏览器内核的理解" class="headerlink" title="浏览器内核的理解"></a>浏览器内核的理解</h2><p>渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。<br>（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核<br>(2）JS引擎则：解析和执行JavaScript 来实现网页的动态效果；</p><h2 id="常见的浏览器内核"><a href="#常见的浏览器内核" class="headerlink" title="常见的浏览器内核"></a>常见的浏览器内核</h2><p>Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]<br>Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。<br>Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]<br>Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]<br>EdgeHTML内核：Microsoft Edge。[此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]</p>]]></content>
<summary type="html">
<h2 id="不同浏览器的标签默认的margin和padding不一样"><a href="#不同浏览器的标签默认的margin和padding不一样" class="headerlink" title="不同浏览器的标签默认的margin和padding不一样"></a>不同
</summary>
<category term="前端面试" scheme="http://eva1314kawayi.com/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/"/>
<category term="前端兼容性" scheme="http://eva1314kawayi.com/tags/%E5%89%8D%E7%AB%AF%E5%85%BC%E5%AE%B9%E6%80%A7/"/>
</entry>
<entry>
<title>css面试题收集</title>
<link href="http://eva1314kawayi.com/2020/03/06/interview-css/"/>
<id>http://eva1314kawayi.com/2020/03/06/interview-css/</id>
<published>2020-03-06T07:27:26.000Z</published>
<updated>2020-03-06T07:50:12.020Z</updated>
<content type="html"><![CDATA[<h2 id="介绍一下标准的css盒子模型？与低版本IE的盒子模型有什么不同？"><a href="#介绍一下标准的css盒子模型？与低版本IE的盒子模型有什么不同？" class="headerlink" title="介绍一下标准的css盒子模型？与低版本IE的盒子模型有什么不同？"></a>介绍一下标准的css盒子模型？与低版本IE的盒子模型有什么不同？</h2><p>盒子模型就是元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型<br>标准（W3C）盒子模型：内容content+填充padding+边框border+边界margin<br> 宽高指的是content的高度<br>低版本IE盒子模型：内容(content+padding+border)+边界margin<br> 宽高指的是content+padding+border部分的宽高</p><h3 id="css如何设置这两种模型？"><a href="#css如何设置这两种模型？" class="headerlink" title="css如何设置这两种模型？"></a>css如何设置这两种模型？</h3><figure class="highlight css"><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="selector-tag">box-sizing</span><span class="selector-pseudo">:content-box</span></span><br><span class="line"><span class="selector-tag">box-sizing</span><span class="selector-pseudo">:border-box</span></span><br></pre></td></tr></table></figure><h3 id="js如何设置获取盒模型对应的宽和高？"><a href="#js如何设置获取盒模型对应的宽和高？" class="headerlink" title="js如何设置获取盒模型对应的宽和高？"></a>js如何设置获取盒模型对应的宽和高？</h3><blockquote><p>dom.style.width/height;//设置获取的是內联样式<br>dom.currentStyle.width/height;//只有IE支持<br>window.getComputedStyle(dom).width/height;//兼容性好<br>dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置</p></blockquote><h2 id="对BFC-block-formatting-context-规范的理解"><a href="#对BFC-block-formatting-context-规范的理解" class="headerlink" title="对BFC(block formatting context)规范的理解"></a>对BFC(block formatting context)规范的理解</h2><p>概念：它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用<br>一个页面是由很多个box组成的，元素的类型和display属性，决定了这个box的类型<br>不同类型的box，会参与不同的formatting context，因此box內的元素会以不同的方式渲染，也就是说BFC的元素和外部的元素不会互相影响。</p><p>BFC规定了内部的block box如何布局<br>定位方案：<br>内部的 Box 会在垂直方向上一个接一个放置。<br>Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。<br>每个元素的 margin box 的左边，与包含块 border box 的左边相接触。<br>BFC 的区域不会与 float box 重叠。<br>BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。<br>计算 BFC 的高度时，浮动元素也会参与计算。<br>满足下列条件之一就可触发 BFC<br>根元素，即 html<br>float 的值不为none（默认）<br>overflow 的值不为 visible（默认）<br>display 的值为 inline-block、table-cell、table-caption<br>position 的值为 absolute 或 fixed</p>]]></content>
<summary type="html">
<h2 id="介绍一下标准的css盒子模型？与低版本IE的盒子模型有什么不同？"><a href="#介绍一下标准的css盒子模型？与低版本IE的盒子模型有什么不同？" class="headerlink" title="介绍一下标准的css盒子模型？与低版本IE的盒子模型有什
</summary>
<category term="前端面试" scheme="http://eva1314kawayi.com/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/"/>
</entry>
<entry>
<title>正则表达式枚举</title>
<link href="http://eva1314kawayi.com/2020/03/06/reg-exp/"/>
<id>http://eva1314kawayi.com/2020/03/06/reg-exp/</id>
<published>2020-03-05T16:09:19.000Z</published>
<updated>2020-03-05T16:30:03.210Z</updated>
<content type="html"><![CDATA[<h2 id="一、校验数字的表达式"><a href="#一、校验数字的表达式" class="headerlink" title="一、校验数字的表达式"></a>一、校验数字的表达式</h2><p>数字：^[0-9]<em>$<br>n位的数字：^\d{n}$<br>至少n位的数字：^\d{n,}$<br>m-n位的数字：^\d{m,n}$<br>零和非零开头的数字：^(0|[1-9][0-9]</em>)$<br>非零开头的最多带两位小数的数字：^([1-9][0-9]<em>)+(.[0-9]{1,2})?$<br>带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$<br>正数、负数、和小数：^(-|+)?\d+(.\d+)?$<br>有两位小数的正实数：^[0-9]+(.[0-9]{2})?$<br>有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$<br>非零的正整数：^[1-9]\d</em>$ 或 ^([1-9][0-9]<em>){1,3}$ 或 ^+?[1-9][0-9]</em>$<br>非零的负整数：^-[1-9][]0-9″<em>$ 或 ^-[1-9]\d</em>$<br>非负整数：^\d+$ 或 ^[1-9]\d<em>|0$<br>非正整数：^-[1-9]\d</em>|0$ 或 ^((-\d+)|(0+))$<br>非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d<em>.\d</em>|0.\d<em>[1-9]\d</em>|0?.0+|0$<br>非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d<em>.\d</em>|0.\d<em>[1-9]\d</em>))|0?.0+|0$<br>正浮点数：^[1-9]\d<em>.\d</em>|0.\d<em>[1-9]\d</em>$ 或 ^(([0-9]+.[0-9]<em>[1-9][0-9]</em>)|([0-9]<em>[1-9][0-9]</em>.[0-9]+)|([0-9]<em>[1-9][0-9]</em>))$<br>负浮点数：^-([1-9]\d<em>.\d</em>|0.\d<em>[1-9]\d</em>)$ 或 ^(-(([0-9]+.[0-9]<em>[1-9][0-9]</em>)|([0-9]<em>[1-9][0-9]</em>.[0-9]+)|([0-9]<em>[1-9][0-9]</em>)))$<br>浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d<em>.\d</em>|0.\d<em>[1-9]\d</em>|0?.0+|0)$</p><h2 id="二、校验字符的表达式"><a href="#二、校验字符的表达式" class="headerlink" title="二、校验字符的表达式"></a>二、校验字符的表达式</h2><p>汉字：^[\u4e00-\u9fa5]{0,}$<br>英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$<br>长度为3-20的所有字符：^.{3,20}$<br>由26个英文字母组成的字符串：^[A-Za-z]+$<br>由26个大写英文字母组成的字符串：^[A-Z]+$<br>由26个小写英文字母组成的字符串：^[a-z]+$<br>由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$<br>由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$<br>中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$<br>中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$<br>可以输入含有^%&’,;=?$\”等字符：[^%&’,;=?$\x22]+<br>禁止输入含有~的字符：[^~\x22]+</p><h2 id="三、特殊需求表达式"><a href="#三、特殊需求表达式" class="headerlink" title="三、特殊需求表达式"></a>三、特殊需求表达式</h2><p>Email地址：^\w+([-+.]\w+)<em>@\w+([-.]\w+)</em>.\w+([-.]\w+)<em>$<br>域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?<br>InternetURL：[a-zA-z]+://[^\s]</em> 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]<em>)?$<br>手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$<br>电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^($$\d{3,4}-)|\d{3.4}-)?\d{7,8}$<br>国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}<br>身份证号(15位、18位数字)：^\d{15}|\d{18}$<br>短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$<br>帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$<br>密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$<br>强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.</em>\d)(?=.<em>[a-z])(?=.</em>[A-Z]).{8,10}$<br>日期格式：^\d{4}-\d{1,2}-\d{1,2}<br>一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$<br>一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$</p><h2 id="钱的输入格式："><a href="#钱的输入格式：" class="headerlink" title="钱的输入格式："></a>钱的输入格式：</h2><p>有四种钱的表示形式我们可以接受:”10000.00″ 和 “10,000.00″, 和没有 “分” 的 “10000″ 和 “10,000″：^[1-9][0-9]<em>$<br>这表示任意一个不以0开头的数字，但是，这也意味着一个字符”0″不通过，所以我们采用下面的形式：^(0|[1-9][0-9]</em>)$<br>一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]<em>)$<br>这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉，因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$<br>必须说明的是，小数点后面至少应该有1位数，所以”10.”是不通过的，但是 “10″ 和 “10.2″ 是通过的：^[0-9]+(.[0-9]{2})?$<br>这样我们规定小数点后面必须有两位，如果你认为太苛刻了，可以这样：^[0-9]+(.[0-9]{1,2})?$<br>这样就允许用户只写一位小数。下面我们该考虑数字中的逗号了，我们可以这样：^[0-9]{1,3}(,[0-9]{3})</em>(.[0-9]{1,2})?$<br>1到3个数字，后面跟着任意个 逗号+3个数字，逗号成为可选，而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})<em>)(.[0-9]{1,2})?$<br>备注：这就是最终结果了，别忘了”+”可以用”</em>”替代。如果你觉得空字符串也可以接受的话(奇怪，为什么?)最后，别忘了在用函数时去掉去掉那个反斜杠，一般的错误都在这里<br>xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$<br>中文字符的正则表达式：[\u4e00-\u9fa5]<br>双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))<br>空白行的正则表达式：\n\s<em>\r (可以用来删除空白行)<br>HTML标记的正则表达式：<(\S</em>?)[^>]<em>>.</em>?</\1>|<.<em>? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)<br>首尾空白字符的正则表达式：^\s</em>|\s<em>$或(^\s</em>)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)<br>腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)<br>中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)<br>IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)<br>IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))</p>]]></content>
<summary type="html">
<h2 id="一、校验数字的表达式"><a href="#一、校验数字的表达式" class="headerlink" title="一、校验数字的表达式"></a>一、校验数字的表达式</h2><p>数字：^[0-9]<em>$<br>n位的数字：^\d{n}$<br>至少n
</summary>
</entry>
<entry>
<title>前端面试系列(一)</title>
<link href="http://eva1314kawayi.com/2020/03/05/frontend-interview/"/>
<id>http://eva1314kawayi.com/2020/03/05/frontend-interview/</id>
<published>2020-03-05T14:49:04.000Z</published>
<updated>2020-03-05T15:45:23.430Z</updated>
<content type="html"><![CDATA[<h2 id="什么情况下会碰到跨域问题？有哪些解决方案"><a href="#什么情况下会碰到跨域问题？有哪些解决方案" class="headerlink" title="什么情况下会碰到跨域问题？有哪些解决方案"></a>什么情况下会碰到跨域问题？有哪些解决方案</h2><ul><li>跨域问题是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。</li><li>script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cores。<h2 id="如何判断一个变量是对象还是数组"><a href="#如何判断一个变量是对象还是数组" class="headerlink" title="如何判断一个变量是对象还是数组"></a>如何判断一个变量是对象还是数组</h2>判断数组和对象分别都有好几种方法，其中用prototype.toString.call()兼容性最好。<figure class="highlight javascript"><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="function"><span class="keyword">function</span> <span class="title">is</span> <span class="title">ObjArr</span>(<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">Object</span>.prototype.toString.call(value) === <span class="string">"[Object Array]"</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"value是数组"</span>);</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span>(<span class="built_in">Object</span>.prototype.toString.call(value) === <span class="string">"[Object Object]"</span>){ <span class="comment">// 这个方法兼容性好一点</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"value是对象"</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"value不是对象也不是数组"</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="定时器的执行顺序或机制"><a href="#定时器的执行顺序或机制" class="headerlink" title="定时器的执行顺序或机制"></a>定时器的执行顺序或机制</h2>因为js是单线程的，浏览器遇到setTimeout或者setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的待执行事件队列里面，等到浏览器执行完当前代码之后会看一下事件队列里面有没有任务，有的话才会执行定时器的代码。</li></ul><h2 id="html中title属性和alt属性的区别："><a href="#html中title属性和alt属性的区别：" class="headerlink" title="html中title属性和alt属性的区别："></a>html中title属性和alt属性的区别：</h2><blockquote><ol><li><img src="#" alt="alt信息" /><br>// 1. 当图片不输出信息的时候，会显示alt信息，鼠标放上去没有信息，当图片正常读取，不会出现alt信息</li><li><img src="#" alt="alt信息" title="title信息" /><br>// 2. 当图片不输出信息的时候，会显示alt信息，鼠标放上去会出现title信息<br>// 当图片正常输出的时候，不会出现alt信息，鼠标放上去会出现title信息。<br>title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签<br>title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长<br>title属性有一个很好的用途，即为连接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。</li></ol></blockquote><h2 id="ES5的继承和ES6的继承有什么区别？"><a href="#ES5的继承和ES6的继承有什么区别？" class="headerlink" title="ES5的继承和ES6的继承有什么区别？"></a>ES5的继承和ES6的继承有什么区别？</h2><p>ES5的继承是通过prototype或构造函数机制来实现。ES5的继承实质上试先创建子类的实例对象，然后再将父类的方法添加到this上(Parent.apply(this))。<br>ES6的继承机制完全不同，实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法)，然后再用子类的构造函数修改this。<br>具体的：ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。<br>ps：super关键字指代父类的实例，即父亲的this对象。在子类构造函数中，调用super后，才可以使用this关键字，否则报错。</p><h2 id="CSS3有哪些新增的属性？"><a href="#CSS3有哪些新增的属性？" class="headerlink" title="CSS3有哪些新增的属性？"></a>CSS3有哪些新增的属性？</h2><p>这里可以分为边框、背景，渐变，阴影，2D转换，3D转换等。</p><h2 id="你知道哪些http状态码？"><a href="#你知道哪些http状态码？" class="headerlink" title="你知道哪些http状态码？"></a>你知道哪些http状态码？</h2><p>1xx: 1开头的是信息状态码<br>2xx: 2开头的是请求成功<br>3xx: 3开头的是重定向<br>4xx: 4开头的是客户端错误</p><blockquote><p>400：请求无效<br>产生原因：<br>前端提交数据的字段名和字段类型与后台的实体没有保持一致<br>前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。<br>401: 当前请求需要用户验证<br>403：服务器已经得到请求，但是拒绝执行。<br>5xx: 5开头的是服务器错误</p></blockquote><h2 id="如何对一个数组去重？"><a href="#如何对一个数组去重？" class="headerlink" title="如何对一个数组去重？"></a>如何对一个数组去重？</h2><p>1.Set解构去重。这是ES6提供了新的数据结构Set。它类似于数组，但是会自动去重。<br><figure class="highlight javascript"><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">let</span> unique = [... new <span class="built_in">Set</span>(array)];</span><br><span class="line"><span class="comment">// Set内部使用===来判断是否相等，'1'和1都会保存，NaN和NaN只会保存一个</span></span><br></pre></td></tr></table></figure><br>2.遍历，将值添加到新数组，用indexOf()判断值是否存在，已存在就不添加，达到去重效果<br><figure class="highlight javascript"><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"><span class="keyword">let</span> a = [<span class="string">'1'</span>,<span class="string">'2'</span>,<span class="string">'3'</span>,<span class="number">1</span>,<span class="literal">NaN</span>,<span class="literal">NaN</span>,<span class="literal">undefined</span>,<span class="literal">undefined</span>,<span class="literal">null</span>,<span class="literal">null</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'b'</span>];</span><br><span class="line"><span class="keyword">let</span> unique = <span class="function"><span class="params">arr</span> =></span> {</span><br><span class="line"> <span class="keyword">let</span> newA = [];</span><br><span class="line"> arr.forEach(<span class="function"><span class="params">key</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (newA.indexOf(key) < <span class="number">0</span>){</span><br><span class="line"> newA.push(key);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> newA;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(unique(a));<span class="comment">//['1','2','3',1,NaN,NaN,undefined,null,'a','b']</span></span><br><span class="line"><span class="comment">// ps:这个方法不能分辨NaN，会出现两个NaN。是有问题的，下面的好一点。</span></span><br></pre></td></tr></table></figure><br>3.通过对象key值唯一的方法<br><figure class="highlight javascript"><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">let</span> a = [<span class="string">'1'</span>,<span class="string">'2'</span>,<span class="string">'3'</span>,<span class="number">1</span>,<span class="literal">NaN</span>,<span class="literal">NaN</span>,<span class="literal">undefined</span>,<span class="literal">undefined</span>,<span class="literal">null</span>,<span class="literal">null</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'b'</span>];</span><br><span class="line"><span class="keyword">let</span> o = {};</span><br><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line">a.forEach(<span class="function"><span class="params">key</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span>(!o[key]){</span><br><span class="line"> arr.push(key);</span><br><span class="line"> o[key] = <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br><span class="line"><span class="comment">//这个可以达到去重效果</span></span><br></pre></td></tr></table></figure></p><h2 id="垂直居中有哪些方法？"><a href="#垂直居中有哪些方法？" class="headerlink" title="垂直居中有哪些方法？"></a>垂直居中有哪些方法？</h2><ul><li>单行文本的话可以使用height和line-height设置同一高度。</li><li>position+margin(定高)：设置父元素：position:relative;，子元素height: 100px;position:absolute;top:50%;margin:-50px 0 0 0;</li><li>position+transform(不定高): 设置父元素position:relatice，子元素：position:absolute;top:50%;transform: translate(0,-50%);</li><li>百搭flex布局(ie10+)(不定高)：设置父元素display:flex;align-items:center</li></ul><h2 id="翻转一个字符串"><a href="#翻转一个字符串" class="headerlink" title="翻转一个字符串"></a>翻转一个字符串</h2><p>思路是先将字符串转成一个数组，然后用数组的reverse()+join()方法。<br><figure class="highlight javascript"><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">let</span> str = <span class="string">"hello word"</span>;</span><br><span class="line"><span class="keyword">let</span> b = [...str].reverse().join(<span class="string">""</span>);<span class="comment">// drow olleh</span></span><br></pre></td></tr></table></figure></p><h2 id="了解ES6的let和const变量声明吗？跟ES5的var有哪些区别？"><a href="#了解ES6的let和const变量声明吗？跟ES5的var有哪些区别？" class="headerlink" title="了解ES6的let和const变量声明吗？跟ES5的var有哪些区别？"></a>了解ES6的let和const变量声明吗？跟ES5的var有哪些区别？</h2><ul><li><p>let</p><p> 在同一个作用域里面： var可以重复声明变量，let不能重复声明同一变量。<br>ES5是函数作用域，即一个函数里面才是一个作用域。ES6是块级作用域，花括号里面就是一个作用域。<br> var有变量提升，可以在变量声明之前使用，let不存在变量提升，在变量之前使用会报错。<br> let有暂时性死区，即父作用域中有var定义，在块作用域里又定义了let，那在块let之前使用，就是死区。</p></li><li><p>const</p><p> const的很多特性跟let的特性一样，都有：不可重复声明，不存在变量提升，有暂时性死区，都是块级作用域。<br> 和let不一样的地方：const必须在声明的时候赋值，不然会报错。const声明的常量不能更改。值引用是完全不能更改，引用类型，const只能保证指针是固定的。</p></li></ul><h2 id="通过reduce函数来实现简单的数组求和，示例数组-3-4-8-0-9"><a href="#通过reduce函数来实现简单的数组求和，示例数组-3-4-8-0-9" class="headerlink" title="通过reduce函数来实现简单的数组求和，示例数组[3, 4, 8, 0, 9]"></a>通过reduce函数来实现简单的数组求和，示例数组[3, 4, 8, 0, 9]</h2><p>三种方法，一种是常见的遍历方法，另一种是eval()方法，还有一种是reduce()函数<br><figure class="highlight javascript"><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="comment">// 第一种常规遍历</span></span><br><span class="line"><span class="keyword">let</span> reduce = <span class="function">(<span class="params">arr</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> num = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> [index, value] <span class="keyword">of</span> arr.entries()){</span><br><span class="line"> num += value;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> num;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 第二种</span></span><br><span class="line"><span class="keyword">let</span> reduce = <span class="function">(<span class="params">arr</span>) =></span> <span class="built_in">eval</span>(arr.join(<span class="string">"+"</span>));</span><br><span class="line"><span class="comment">// 第三种</span></span><br><span class="line"><span class="keyword">let</span> result = [<span class="number">3</span>, <span class="number">4</span>, <span class="number">8</span>, <span class="number">0</span>, <span class="number">9</span>].reduce(<span class="function">(<span class="params">total, value</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> total + value</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><h2 id="call-和apply-有什么区别？"><a href="#call-和apply-有什么区别？" class="headerlink" title="call()和apply()有什么区别？"></a>call()和apply()有什么区别？</h2><p>call()和apply()第一个参数将用作函数内this的值，用于改变函数的this执行。区别在于，call()方法接收逗号分隔的参数作为后面的参数，apply()接收一个参数数组作为后面的参数，可以从apply联想到array。</p><h2 id="position有哪些值？有什么作用？"><a href="#position有哪些值？有什么作用？" class="headerlink" title="position有哪些值？有什么作用？"></a>position有哪些值？有什么作用？</h2><blockquote><p>static：默认值，不脱离文档流，top，right，bottom，left等属性不生效。<br>relative：不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。<br>absolute：脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。<br>fixed：通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。</p></blockquote><h2 id="如何实现一个闭包？闭包的作用有哪些？"><a href="#如何实现一个闭包？闭包的作用有哪些？" class="headerlink" title="如何实现一个闭包？闭包的作用有哪些？"></a>如何实现一个闭包？闭包的作用有哪些？</h2><p>在一个函数里面嵌套另一个函数，被嵌套的那个函数的作用域是一个闭包。</p><p>作用： 创建私有变量，减少全局变量，防止变量名污染。可以操作外部作用域的变量，变量不会被浏览器回收，保存变量的值。</p><h2 id="2018-11-16T15-13Europe-Paris提取出结果-‘2018’-’11’-’16’-’15’-’13’"><a href="#2018-11-16T15-13Europe-Paris提取出结果-‘2018’-’11’-’16’-’15’-’13’" class="headerlink" title="2018-11-16T15:13Europe/Paris提取出结果[‘2018’,’11’,’16’,’15’,’13’]"></a>2018-11-16T15:13Europe/Paris提取出结果[‘2018’,’11’,’16’,’15’,’13’]</h2><figure class="highlight javascript"><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="keyword">let</span> str = <span class="string">'2018-11-16T15:13Europe/Paris'</span>;</span><br><span class="line"><span class="keyword">let</span> arr = str.match( <span class="regexp">/d{1,}/g</span> );</span><br><span class="line"><span class="comment">// d 查找数字</span></span><br><span class="line"><span class="comment">// {1,}表示至少重复几次</span></span><br><span class="line"><span class="comment">// /g表示全局搜索</span></span><br></pre></td></tr></table></figure><h2 id="请描述一下promise的使用场景，它所解决的问题以及现在对于异步操作的解决方案。"><a href="#请描述一下promise的使用场景，它所解决的问题以及现在对于异步操作的解决方案。" class="headerlink" title="请描述一下promise的使用场景，它所解决的问题以及现在对于异步操作的解决方案。"></a>请描述一下promise的使用场景，它所解决的问题以及现在对于异步操作的解决方案。</h2><p>promise的使用场景：ajax请求、回调函数、复杂操作判断。<br>promise是ES6为了解决异步编程所诞生。<br>异步操作的解决方案：promise、generator、ES7的async。</p><h2 id="Vuex的工作流程，以及它的作用，使用场景"><a href="#Vuex的工作流程，以及它的作用，使用场景" class="headerlink" title="Vuex的工作流程，以及它的作用，使用场景"></a>Vuex的工作流程，以及它的作用，使用场景</h2><p>Vuex工作流程：</p><ul><li>在vue组件里面，通过dispatch来触发actions，提交修改数据的操作。</li><li>然后在通过actions的commit来触发mutations，修改数据。</li><li>mutations接收到commit的请求，就会自动通过Mutate来修改state里面的数据。</li><li>最后store触发每一个调用它的组件的更新<br>Vuex的作用：项目数据状态的集中管理，复杂组件（如兄弟组件、远方亲戚组件）的数据通信问题。</li></ul>]]></content>
<summary type="html">
<h2 id="什么情况下会碰到跨域问题？有哪些解决方案"><a href="#什么情况下会碰到跨域问题？有哪些解决方案" class="headerlink" title="什么情况下会碰到跨域问题？有哪些解决方案"></a>什么情况下会碰到跨域问题？有哪些解决方案</h2><
</summary>
<category term="前端面试" scheme="http://eva1314kawayi.com/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/"/>
</entry>
<entry>
<title>curry函数(柯里化)</title>
<link href="http://eva1314kawayi.com/2020/03/05/curry/"/>
<id>http://eva1314kawayi.com/2020/03/05/curry/</id>
<published>2020-03-05T06:32:27.000Z</published>
<updated>2020-03-05T06:40:44.000Z</updated>
<content type="html"><![CDATA[<h2 id="解释"><a href="#解释" class="headerlink" title="解释"></a>解释</h2><ul><li>curry化是一切的基础，curry化是为了解决函数式编程时遇到的状态转换时需要的单参数需求。不过现在很多时候也用于延时执行，和插件编写。</li><li>柯里化实际上是这样的一个转换过程：把接受多个参数的函数变换成接受一个单一参数(译注：最初函数的第一个参数)的函数，如果其他的参数是必要的，返回接受余下的参数且返回结果的新函数。<h2 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h2>示例：<figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//curry函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curry</span>(<span class="params">fn</span>)</span>{</span><br><span class="line"> <span class="comment">//固定参数</span></span><br><span class="line"> <span class="keyword">let</span> fixed_args = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>,<span class="number">1</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">let</span> args = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>)||[];</span><br><span class="line"> args = fixed_args.concat(args);</span><br><span class="line"> <span class="keyword">return</span> fn.apply(<span class="keyword">this</span>,args);</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="comment">*curry函数使用场景</span></span><br><span class="line"><span class="comment">*使用场景1：url组合，很多时候我们需要拼接protocal domain 和 path,</span></span><br><span class="line"><span class="comment">*大多数时候protocal和domain是不变的，但是如果</span></span><br><span class="line"><span class="comment">*使用字符串拼接会出现很多的废代码，写死会出现无法修改的情况，这个时候curry函数就有用武之地了，</span></span><br><span class="line"><span class="comment">*所以curry在这个场景下的意义是灵活性</span></span><br><span class="line"><span class="comment">*************************************************************************************/</span></span><br><span class="line"><span class="keyword">let</span> $baiduCurry = curry(<span class="function"><span class="keyword">function</span>(<span class="params">protocal,domain,path</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`<span class="subst">${protocal}</span>://<span class="subst">${domain}</span><span class="subst">${path}</span>`</span>;</span><br><span class="line">},<span class="string">"https"</span>,<span class="string">"www.baidu.com"</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log( $baiduCurry(<span class="string">"/images"</span>) );</span><br><span class="line"><span class="built_in">console</span>.log( $baiduCurry(<span class="string">"/books"</span>) );</span><br><span class="line"><span class="comment">//https://www.baidu.com/images</span></span><br><span class="line"><span class="comment">//https://www.baidu.com/books</span></span><br><span class="line"><span class="comment">/*******************************************************</span></span><br><span class="line"><span class="comment">*使用场景2：将柯里化后的callback参数传递给map, filter等函数。</span></span><br><span class="line"><span class="comment">*虽然看起来有点多余，但是这里person_curry的方法是可以反复使用</span></span><br><span class="line"><span class="comment">*的,如果下次你想写一个所有age字段的集合函数，就节省下来了大堆</span></span><br><span class="line"><span class="comment">*的代码，所以curry在这个场景下的意义是代码复用性</span></span><br><span class="line"><span class="comment">********************************************************/</span></span><br><span class="line"><span class="keyword">let</span> persons = [{<span class="attr">name</span>:<span class="string">"hcj1"</span>,<span class="attr">age</span>:<span class="number">18</span>},{<span class="attr">name</span>:<span class="string">"hcj2"</span>,<span class="attr">age</span>:<span class="number">19</span>},{<span class="attr">name</span>:<span class="string">"hcj3"</span>,<span class="attr">age</span>:<span class="number">20</span>}];</span><br><span class="line"><span class="keyword">let</span> person_curry = curry(<span class="function"><span class="keyword">function</span>(<span class="params">key</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> obj[key];</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="keyword">let</span> names = persons.map(person_curry(<span class="string">"name"</span>));</span><br><span class="line"><span class="built_in">console</span>.log(names);</span><br><span class="line"><span class="comment">// ["hcj1", "hcj2", "hcj3"]</span></span><br></pre></td></tr></table></figure>原文：<a href="https://blog.csdn.net/huangssssx/article/details/86698256" target="_blank" rel="noopener">柯里化</a></li></ul>]]></content>
<summary type="html">
<h2 id="解释"><a href="#解释" class="headerlink" title="解释"></a>解释</h2><ul>
<li>curry化是一切的基础，curry化是为了解决函数式编程时遇到的状态转换时需要的单参数需求。不过现在很多时候也用于延时执行，和
</summary>
<category term="javascript" scheme="http://eva1314kawayi.com/categories/javascript/"/>
<category term="javascript" scheme="http://eva1314kawayi.com/tags/javascript/"/>
</entry>
<entry>
<title>一些javascript小技巧</title>
<link href="http://eva1314kawayi.com/2020/03/05/javascript-tips/"/>
<id>http://eva1314kawayi.com/2020/03/05/javascript-tips/</id>
<published>2020-03-05T05:28:55.000Z</published>
<updated>2020-03-05T07:19:26.000Z</updated>
<content type="html"><![CDATA[<h2 id="vs"><a href="#vs" class="headerlink" title="=== vs =="></a>=== vs ==</h2><p>==（或者!=）做对比的时候会将进行对比的两者转换到同一类型再比较。===（或者!==）则不会，他会将进行对比的两者做类型对比和值对比，相对于 == ，=== 的对比会更加严谨。</p><blockquote><p>[10] == 10 // true<br>[10] === 10 // false<br>“10” == 10 // true<br>“10” === 10 // false<br>[] == 0 // true<br>[] === 0 // false<br>“” == false // true 但是 true == “a” 是false<br>“” === false // false</p></blockquote><h2 id="字符串转换成数值的方法"><a href="#字符串转换成数值的方法" class="headerlink" title="字符串转换成数值的方法"></a>字符串转换成数值的方法</h2><p>示例 +”1” // 1 +”-2” //-2 -“1” //-1</p><h2 id="清空一个数组"><a href="#清空一个数组" class="headerlink" title="清空一个数组"></a>清空一个数组</h2><figure class="highlight javascript"><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> list = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">empty</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//清空数组</span></span><br><span class="line"> list = [];</span><br><span class="line">}</span><br><span class="line">empty();</span><br></pre></td></tr></table></figure><p>下面这种性能更高：<br><figure class="highlight javascript"><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> list = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">empty</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//清空数组</span></span><br><span class="line"> list.length = <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line">empty();</span><br></pre></td></tr></table></figure><br>· list =[] 将一个变量指定个引用到那个数组，而其他引用都不受影响。这意味着，对于先前数组的内容的引用仍然保留在内存中，从而导致内存泄漏。<br>· list.length = 0 删除数组内的所有东西，这不需要引用任何其他的东西</p><h2 id="对数组排序进行”洗牌”-随机排序"><a href="#对数组排序进行”洗牌”-随机排序" class="headerlink" title="对数组排序进行”洗牌”(随机排序)"></a>对数组排序进行”洗牌”(随机排序)</h2><figure class="highlight javascript"><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"><span class="function"><span class="keyword">function</span> <span class="title">shuffle</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> i,</span><br><span class="line"> j,</span><br><span class="line"> temp;</span><br><span class="line"> <span class="keyword">for</span> (i = arr.length - <span class="number">1</span>; i > <span class="number">0</span>; i--) {</span><br><span class="line"> j = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (i + <span class="number">1</span>));</span><br><span class="line"> temp = arr[i];</span><br><span class="line"> arr[i] = arr[j];</span><br><span class="line"> arr[j] = temp;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr; </span><br><span class="line">};</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><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="keyword">var</span> a = [<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 class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>];</span><br><span class="line"><span class="keyword">var</span> b = shuffle(a);</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="comment">// [2, 7, 8, 6, 5, 3, 1, 4]</span></span><br></pre></td></tr></table></figure><h2 id="返回对象的函数能够用于链式操作"><a href="#返回对象的函数能够用于链式操作" class="headerlink" title="返回对象的函数能够用于链式操作"></a>返回对象的函数能够用于链式操作</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><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 class="keyword">this</span>.sayName = <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">"Hello my name is: "</span>, <span class="keyword">this</span>.name);</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">this</span>.changeName = <span class="function"><span class="keyword">function</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 class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line"> };</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> Person(<span class="string">"John"</span>);</span><br><span class="line">person.sayName().changeName(<span class="string">"Timmy"</span>).sayName();</span><br><span class="line"><span class="comment">//Hello my name is: John</span></span><br><span class="line"><span class="comment">//Hello my name is: Timmy</span></span><br></pre></td></tr></table></figure><h2 id="字符串安全连接"><a href="#字符串安全连接" class="headerlink" title="字符串安全连接"></a>字符串安全连接</h2><p>假设你有一些类型未知的变量，你想将它们连接起来。可以肯定的是，算法操作不会在级联时应用:<br><figure class="highlight javascript"><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="keyword">var</span> one = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> two = <span class="number">2</span>;</span><br><span class="line"><span class="keyword">var</span> three = <span class="string">'3'</span>;</span><br><span class="line"><span class="keyword">var</span> result = <span class="string">''</span>.concat(one, two, three); <span class="comment">//"123"</span></span><br></pre></td></tr></table></figure><br>对join和concat进行比较，他们的执行速度是几乎一样的。</p><h2 id="更快的四舍五入"><a href="#更快的四舍五入" class="headerlink" title="更快的四舍五入"></a>更快的四舍五入</h2><p><del>，也叫double NOT运算符。你可以更快的使用它来作为Math.floor()替代品。<br>单位移~将32位转换输入-(输入+1)，因此双位移将输入转换为-(-(输入+1))，这是个趋于0的伟大的工具。对于输入的数字，它将模仿Math.ceil()取负值和Math.floor()取正值。如果执行失败，则返回0，这可能在用来代替Math.floor()失败时返回一个NaN的时候发挥作用。<br><figure class="highlight javascript"><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="comment">// 单位移</span></span><br><span class="line"><span class="built_in">console</span>.log(~<span class="number">1337</span>) <span class="comment">// -1338</span></span><br><span class="line"><span class="comment">// 双位移</span></span><br><span class="line"><span class="built_in">console</span>.log(~~<span class="number">47.11</span>) <span class="comment">// -> 47</span></span><br><span class="line"><span class="built_in">console</span>.log(~~<span class="number">-12.88</span>) <span class="comment">// -> -12</span></span><br><span class="line"><span class="built_in">console</span>.log(~~<span class="number">1.9999</span>) <span class="comment">// -> 1</span></span><br><span class="line"><span class="built_in">console</span>.log(~~<span class="number">3</span>) <span class="comment">// -> 3</span></span><br><span class="line"><span class="comment">//失败的情况</span></span><br><span class="line"><span class="built_in">console</span>.log(~~[]) <span class="comment">// -> 0 </span></span><br><span class="line"><span class="built_in">console</span>.log(~~<span class="literal">NaN</span>) <span class="comment">// -> 0</span></span><br><span class="line"><span class="built_in">console</span>.log(~~<span class="literal">null</span>) <span class="comment">// -> 0</span></span><br><span class="line"><span class="comment">//大于32位整数则失败</span></span><br><span class="line"><span class="built_in">console</span>.log(~~(<span class="number">2147483647</span> + <span class="number">1</span>) === (<span class="number">2147483647</span> + <span class="number">1</span>)) <span class="comment">// -> 0</span></span><br></pre></td></tr></table></figure><br>虽然</del>可能有更好的表现，为了可读性，请使用Math.floor()。</p><h2 id="给回调函数传递参数"><a href="#给回调函数传递参数" class="headerlink" title="给回调函数传递参数"></a>给回调函数传递参数</h2><p>在默认情况下，你无法将参数传给回调函数，如下：<br><figure class="highlight javascript"><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">callback</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'Hi human'</span>);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'someelem'</span>).addEventListener(<span class="string">'click'</span>, callback);</span><br></pre></td></tr></table></figure><br>可以采取JavaScript闭包的优点来给回调函数传参（curry function）,如下：<br><figure class="highlight javascript"><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="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">a, b</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <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">'sum = '</span>, (a+b));</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>, y = <span class="number">2</span>;</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'someelem'</span>).addEventListener(<span class="string">'click'</span>, callback(x, y));</span><br></pre></td></tr></table></figure><br><figure class="highlight javascript"><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="keyword">var</span> alertText = <span class="function"><span class="keyword">function</span>(<span class="params">text</span>) </span>{</span><br><span class="line"> alert(text);</span><br><span class="line">};</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'someelem'</span>).addEventListener(<span class="string">'click'</span>, alertText.bind(<span class="keyword">this</span>, <span class="string">'hello'</span>));</span><br></pre></td></tr></table></figure></p><blockquote><p>bind:<br>javascript1.8.5版本中原生实现了此方法，目前IE9+，ff4+，chrome7+支持此方法，opera和safari不支持（MDN上的说明）。<br>bind的作用和apply，call类似都是改变函数的execute context，也就是 runtime 时 this 关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。<br>bind 方法实现原理：绑定this 和 Currying：<br><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getConfig</span>(<span class="params">colors,size,otherOptions</span>)</span>{</span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(colors,size,otherOptions)</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> defaultConfig = getConfig.bind(<span class="literal">null</span>,<span class="string">"#f00"</span>,<span class="string">"1024*768"</span>);</span><br><span class="line"></span><br><span class="line">defaultConfig(<span class="string">"123"</span>); <span class="comment">//#f00 1024*768 123</span></span><br><span class="line"></span><br><span class="line">defaultConfig(<span class="string">"345"</span>); <span class="comment">//#f00 1024*768 345</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//因为bind 方法是EMS5 以后提出的方法，对于老的浏览器，可以使用手写一个bind 方法</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(!<span class="built_in">Function</span>.prototype.bind){</span><br><span class="line"></span><br><span class="line"> <span class="built_in">Function</span>.prototype.bind = <span class="function"><span class="keyword">function</span>(<span class="params">oThis</span>)</span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(typeOf <span class="keyword">this</span> !== <span class="string">'function'</span>){</span><br><span class="line"></span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">'What is trying to be bound is not callable'</span>)</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> aArgs = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>,<span class="number">1</span>),</span><br><span class="line"></span><br><span class="line"> fToBind = <span class="keyword">this</span>,</span><br><span class="line"></span><br><span class="line"> fNOP = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</span><br><span class="line"></span><br><span class="line"> fBound = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> fToBind.apply(<span class="keyword">this</span> <span class="keyword">instanceof</span> fNOP?<span class="keyword">this</span>:oThis,</span><br><span class="line"></span><br><span class="line"> aArgs.concat(<span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>)))</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> fNOP.prototype = <span class="keyword">this</span>.prototype;</span><br><span class="line"></span><br><span class="line"> fBound.prototype = <span class="keyword">new</span> fNOP();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> fBound;</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p></blockquote><h2 id="在数组插入一个项"><a href="#在数组插入一个项" class="headerlink" title="在数组插入一个项"></a>在数组插入一个项</h2><p>使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。<br>push:<br><figure class="highlight javascript"><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> arr = [<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><span class="line">arr.push(<span class="number">6</span>);</span><br><span class="line">arr[arr.length] = <span class="number">6</span>; <span class="comment">//在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度</span></span><br></pre></td></tr></table></figure><br>unshift:<br><figure class="highlight javascript"><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">ar arr = [<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><span class="line">arr.unshift(<span class="number">0</span>);</span><br><span class="line">[<span class="number">0</span>].concat(arr); <span class="comment">//在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度`</span></span><br></pre></td></tr></table></figure><br>unshift编辑原有的数组，concat返回一个新数组</p><h2 id="改善嵌套条件"><a href="#改善嵌套条件" class="headerlink" title="改善嵌套条件"></a>改善嵌套条件</h2><p>if语句嵌套。<br><figure class="highlight javascript"><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">if</span> (color) {</span><br><span class="line"> <span class="keyword">if</span> (color === <span class="string">'black'</span>) {</span><br><span class="line"> printBlackBackground();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (color === <span class="string">'red'</span>) {</span><br><span class="line"> printRedBackground();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (color === <span class="string">'blue'</span>) {</span><br><span class="line"> printBlueBackground();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (color === <span class="string">'green'</span>) {</span><br><span class="line"> printGreenBackground();</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> printYellowBackground();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>一个改善的办法是用switch语句代替嵌套的if语句。虽然它是更加简洁，更加有序，但不推荐这样做，因为很难debug。这里指出原因。<br><figure class="highlight javascript"><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">switch</span>(color) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'black'</span>:</span><br><span class="line"> printBlackBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'red'</span>:</span><br><span class="line"> printRedBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'blue'</span>:</span><br><span class="line"> printBlueBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'green'</span>:</span><br><span class="line"> printGreenBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> printYellowBackground();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>但是，当我们有多个判断条件的情况下呢？在这种情况下，如果我们想让它更加简洁，更加有序，我们可以使用switch。如果我们将true的作为一个参数传递给该switch语句，它可以让我们在每一个情况下放置一个条件。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">case</span> (<span class="keyword">typeof</span> color === <span class="string">'string'</span> && color === <span class="string">'black'</span>):</span><br><span class="line"> printBlackBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> (<span class="keyword">typeof</span> color === <span class="string">'string'</span> && color === <span class="string">'red'</span>):</span><br><span class="line"> printRedBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> (<span class="keyword">typeof</span> color === <span class="string">'string'</span> && color === <span class="string">'blue'</span>):</span><br><span class="line"> printBlueBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> (<span class="keyword">typeof</span> color === <span class="string">'string'</span> && color === <span class="string">'green'</span>):</span><br><span class="line"> printGreenBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> (<span class="keyword">typeof</span> color === <span class="string">'string'</span> && color === <span class="string">'yellow'</span>):</span><br><span class="line"> printYellowBackground();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>但我们必须避免在每一个条件下进行多次检查，尽量避免使用switch。我们也必须考虑到最有效的方法是通过一个object。<br><figure class="highlight javascript"><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> colorObj = {</span><br><span class="line"> <span class="string">'black'</span>: printBlackBackground,</span><br><span class="line"> <span class="string">'red'</span>: printRedBackground,</span><br><span class="line"> <span class="string">'blue'</span>: printBlueBackground,</span><br><span class="line"> <span class="string">'green'</span>: printGreenBackground,</span><br><span class="line"> <span class="string">'yellow'</span>: printYellowBackground</span><br><span class="line">};</span><br><span class="line"> </span><br><span class="line"><span class="keyword">if</span> (color <span class="keyword">in</span> colorObj) {</span><br><span class="line"> colorObj[color]();</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h2 id="以非ASCII字符形式来排序字符串"><a href="#以非ASCII字符形式来排序字符串" class="headerlink" title="以非ASCII字符形式来排序字符串"></a>以非ASCII字符形式来排序字符串</h2><p>JavaScript有个原生的方法对字符串格式的数组进行排序，做一个简单的array.sort()将会把字符串们按首字母的数序排列。当然，也可以提供自定义排序功能。<br><figure class="highlight javascript"><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="string">'Shanghai'</span>, <span class="string">'New York'</span>, <span class="string">'Mumbai'</span>, <span class="string">'Buenos Aires'</span>].sort();</span><br><span class="line"><span class="comment">// ["Buenos Aires", "Mumbai", "New York", "Shanghai"]</span></span><br></pre></td></tr></table></figure><br>当你试图用非ASCII字符，如 [‘é’, ‘a’, ‘ú’, ‘c’]这样的进行排序，你会得到一个奇怪的结果[‘c’, ‘e’, ‘á’, ‘ú’]，因为只有用英语的语言才能排序，所以发生这种情况。<br>看一个简单的例子：<br><figure class="highlight javascript"><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">// Spanish</span></span><br><span class="line">[<span class="string">'único'</span>,<span class="string">'árbol'</span>, <span class="string">'cosas'</span>, <span class="string">'fútbol'</span>].sort();</span><br><span class="line"><span class="comment">// ["cosas", "fútbol", "árbol", "único"] // 错误的排序</span></span><br><span class="line"><span class="comment">// German</span></span><br><span class="line">[<span class="string">'Woche'</span>, <span class="string">'wöchentlich'</span>, <span class="string">'wäre'</span>, <span class="string">'Wann'</span>].sort();</span><br><span class="line"><span class="comment">// ["Wann", "Woche", "wäre", "wöchentlich"] // 错误的排序</span></span><br></pre></td></tr></table></figure><br>幸运的是，有两种方法来避免这种行为，ECMAScript国际化的API提供了localecompare和and Intl.Collator。<br>这两种方法都有自己的自定义参数，以便将其配置来充分的完成功能。<br>使用 localeCompare()<br><figure class="highlight javascript"><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="string">'único'</span>,<span class="string">'árbol'</span>, <span class="string">'cosas'</span>, <span class="string">'fútbol'</span>].sort(<span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> a.localeCompare(b);</span><br><span class="line">});</span><br><span class="line"><span class="comment">// ["árbol", "cosas", "fútbol", "único"]</span></span><br><span class="line">[<span class="string">'Woche'</span>, <span class="string">'wöchentlich'</span>, <span class="string">'wäre'</span>, <span class="string">'Wann'</span>].sort(<span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>{</span><br><span class="line"><span class="keyword">return</span> a.localeCompare(b);</span><br><span class="line">});</span><br><span class="line"><span class="comment">// ["Wann", "wäre", "Woche", "wöchentlich"]</span></span><br></pre></td></tr></table></figure><br>使用 intl.collator()<br><figure class="highlight javascript"><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="string">'único'</span>,<span class="string">'árbol'</span>, <span class="string">'cosas'</span>, <span class="string">'fútbol'</span>].sort(<span class="built_in">Intl</span>.Collator().compare);</span><br><span class="line"><span class="comment">// ["árbol", "cosas", "fútbol", "único"]</span></span><br><span class="line">[<span class="string">'Woche'</span>, <span class="string">'wöchentlich'</span>, <span class="string">'wäre'</span>, <span class="string">'Wann'</span>].sort(<span class="built_in">Intl</span>.Collator().compare);</span><br><span class="line"><span class="comment">// ["Wann", "wäre", "Woche", "wöchentlich"]</span></span><br></pre></td></tr></table></figure></p><h2 id="检查一个对象是否有属性"><a href="#检查一个对象是否有属性" class="headerlink" title="检查一个对象是否有属性"></a>检查一个对象是否有属性</h2><ul><li>第一种<figure class="highlight javascript"><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="keyword">var</span> myObject = {</span><br><span class="line"> name: <span class="string">'@tips_js'</span></span><br><span class="line">};</span><br><span class="line"><span class="keyword">if</span> (myObject.name) { ... }</span><br></pre></td></tr></table></figure></li><li>第二种<figure class="highlight javascript"><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> myObject = {</span><br><span class="line"> name: <span class="string">'@tips_js'</span></span><br><span class="line">};</span><br><span class="line">myObject.hasOwnProperty(<span class="string">'name'</span>); <span class="comment">// true</span></span><br><span class="line"><span class="string">'name'</span> <span class="keyword">in</span> myObject; <span class="comment">// true</span></span><br><span class="line">myObject.hasOwnProperty(<span class="string">'valueOf'</span>); <span class="comment">// false, valueOf 是从原型链继承的</span></span><br><span class="line"><span class="string">'valueOf'</span> <span class="keyword">in</span> myObject; <span class="comment">// true</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><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> myFunc = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.name = <span class="string">'@tips_js'</span>;</span><br><span class="line">};</span><br><span class="line">myFunc.prototype.age = <span class="string">'10 days'</span>;</span><br><span class="line"><span class="keyword">var</span> user = <span class="keyword">new</span> myFunc();</span><br><span class="line">user.hasOwnProperty(<span class="string">'name'</span>); <span class="comment">// true</span></span><br><span class="line">user.hasOwnProperty(<span class="string">'age'</span>); <span class="comment">// false, 因为age是原型链上的</span></span><br></pre></td></tr></table></figure><h2 id="提升"><a href="#提升" class="headerlink" title="提升"></a>提升</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doTheThing</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 错误: notDeclared is not defined</span></span><br><span class="line"> <span class="built_in">console</span>.log(notDeclared);</span><br><span class="line"> <span class="comment">// 输出: undefined</span></span><br><span class="line"> <span class="built_in">console</span>.log(definedLater);</span><br><span class="line"> <span class="keyword">var</span> definedLater;</span><br><span class="line"> definedLater = <span class="string">'I am defined!'</span></span><br><span class="line"> <span class="comment">// 输出: 'I am defined!'</span></span><br><span class="line"> <span class="built_in">console</span>.log(definedLater)</span><br><span class="line"> <span class="comment">// Outputs: undefined</span></span><br><span class="line"> <span class="built_in">console</span>.log(definedSimulateneously);</span><br><span class="line"> <span class="keyword">var</span> definedSimulateneously = <span class="string">'I am defined!'</span></span><br><span class="line"> <span class="comment">// 输出: 'I am defined!'</span></span><br><span class="line"> <span class="built_in">console</span>.log(definedSimulateneously)</span><br><span class="line"> <span class="comment">// 输出: 'I did it!'</span></span><br><span class="line"> doSomethingElse();</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">doSomethingElse</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'I did it!'</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 错误: undefined is not a function</span></span><br><span class="line"> functionVar();</span><br><span class="line"> <span class="keyword">var</span> functionVar = <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">'I did it!'</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h2 id="apply将数组转换成参数列表"><a href="#apply将数组转换成参数列表" class="headerlink" title="apply将数组转换成参数列表"></a>apply将数组转换成参数列表</h2><p>apply可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) 这个如果让我们用程序来实现将数组的每一个项,来转换为参数的列表。</p><h3 id="Math-max-得到数组中最大的一项"><a href="#Math-max-得到数组中最大的一项" class="headerlink" title="Math.max 得到数组中最大的一项"></a>Math.max 得到数组中最大的一项</h3><p>因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组 </p><p>但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项 </p><p>(apply会将一个数组转换为一个参数接一个参数的传递给方法) </p><p> 注意：这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去<br> <figure class="highlight javascript"><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="built_in">Math</span>.max.apply(<span class="literal">null</span>,[<span class="number">19</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">100</span>,<span class="number">2</span>,<span class="number">5</span>,<span class="number">8</span>])</span><br><span class="line"><span class="number">100</span></span><br></pre></td></tr></table></figure></p><h3 id="Math-min-可以实现得到数组中最小的一项"><a href="#Math-min-可以实现得到数组中最小的一项" class="headerlink" title="Math.min 可以实现得到数组中最小的一项"></a>Math.min 可以实现得到数组中最小的一项</h3><p> 同Math.max思想 : var min=Math.min.apply(null,array);<br> <figure class="highlight javascript"><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="built_in">Math</span>.min.apply(<span class="literal">null</span>,[<span class="number">19</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">100</span>,<span class="number">2</span>,<span class="number">5</span>,<span class="number">8</span>])</span><br><span class="line"><span class="number">2</span></span><br></pre></td></tr></table></figure></p><h3 id="Array-prototype-push-可以实现两个数组合并"><a href="#Array-prototype-push-可以实现两个数组合并" class="headerlink" title="Array.prototype.push 可以实现两个数组合并"></a>Array.prototype.push 可以实现两个数组合并</h3><p> push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:<br><figure class="highlight javascript"><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> arr1=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"1"</span>,<span class="string">"2"</span>,<span class="string">"3"</span>); </span><br><span class="line"><span class="keyword">var</span> arr2=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"4"</span>,<span class="string">"5"</span>,<span class="string">"6"</span>); </span><br><span class="line"><span class="built_in">Array</span>.prototype.push.apply(arr1,arr2);</span><br></pre></td></tr></table></figure><br>上面的例子中arr1调用了push方法,参数是通过apply将数组转换为参数列表的集合</p>]]></content>
<summary type="html">
<h2 id="vs"><a href="#vs" class="headerlink" title="=== vs =="></a>=== vs ==</h2><p>==（或者!=）做对比的时候会将进行对比的两者转换到同一类型再比较。===（或者!==）则不会，他会将进行对比的
</summary>
<category term="javascript" scheme="http://eva1314kawayi.com/categories/javascript/"/>
<category term="javascript" scheme="http://eva1314kawayi.com/tags/javascript/"/>
</entry>
<entry>
<title>谈谈eval</title>
<link href="http://eva1314kawayi.com/2020/03/05/analyze-eval/"/>
<id>http://eva1314kawayi.com/2020/03/05/analyze-eval/</id>
<published>2020-03-05T03:22:09.000Z</published>
<updated>2020-03-05T05:12:40.000Z</updated>
<content type="html"><![CDATA[<p>原文来自:<a href="https://www.oschina.net/translate/global-eval-what-are-the-options?lang=chs&p=2" target="_blank" rel="noopener">eval 的一些不为人知道的用法</a></p><h2 id="eval是如何运转的"><a href="#eval是如何运转的" class="headerlink" title="eval是如何运转的"></a>eval是如何运转的</h2><p>在全局作用域下eval代码：<strong>原生的eval函数在调用的作用域中运行代码</strong><br>eval函数的行为由两个因素决定：(1) 直接调用还是间接调用(译者注：使用call或apply函数)；（2）是否在strict模式下运行</p><h3 id="在全局范围Eval"><a href="#在全局范围Eval" class="headerlink" title="在全局范围Eval"></a>在全局范围Eval</h3><p>本地的eval不允许执行全局的代码。</p><h3 id="间接-eval-调用理论"><a href="#间接-eval-调用理论" class="headerlink" title="间接 eval 调用理论"></a>间接 eval 调用理论</h3><p>直接eval调用的定义：</p><blockquote><p>对eval函数的直接调用，就是表示为一个调用表达式，它满足以下两个条件:<br>1.引用是调用表达式中的成员表达式的计算结果，它具有一个环境记录作为它的基础数值，它的引用名是”eval”。<br>2.以该引用为参数调用抽象操作GetValue的结果，是15.1.2.1中定义的标准的原生函数<br>比如eval(‘1+1’)是一个直接调用，但(1,eval)(‘1+1’)不是直接调用而是间接调用<br>eval ( ‘1+1’ )<br> |<strong>__</strong>|<br> Identifier</p></blockquote><blockquote><p> |<strong>__</strong>| |<strong>____</strong>|<br> MemberExpression Arguments</p></blockquote><blockquote><p> |<strong><strong><strong><strong><strong><strong>__</strong></strong></strong></strong></strong></strong>|<br> CallExpression<br>ES3定义<br>任何非直接调用 (<strong>除了显式地使用它的名字作为一个标识符，而这个标识符就是调用表达式中的成员表达式</strong>)<br>对于(1,eval)(‘1+1’)<br>( 1 , eval ) ( ‘1+1’ )<br> |<strong><strong>| |_</strong></strong>| |<strong>_</strong>|<br> 常量 操作符 标识符</p></blockquote><blockquote><pre><code>|_________________________| 表达式</code></pre></blockquote><blockquote><p> |<strong><strong><strong><strong><strong><strong><strong>__</strong></strong></strong></strong></strong></strong></strong>|<br> 主要表达式</p></blockquote><blockquote><p> |<strong><strong><strong><strong><strong><strong><strong>__</strong></strong></strong></strong></strong></strong></strong>| |<strong>____</strong>|<br> 成员表达式 参数</p></blockquote><blockquote><p> |<strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>____</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong>|<br> 调用表达式<br>参数（调用括号）之前的部分不只是由“eval”标识符组成。这是一个完整的其他类型的表达式，由逗号操作符，数字常量，然后才是”eval”标识符组成。1,eval - 基于逗号操作符运行的方式-仍然执行一个标准的内置的eval函数，不过整个表达式不再是直接调用了。因此它是 间接eval调用。更多间接调用示例：</p><ul><li>(1, eval)(‘…’)</li><li>(eval, eval)(‘…’)</li><li>(1 ? eval : 0)(‘…’)</li><li>(__ = eval)(‘…’)</li><li>var e = eval; e(‘…’)</li><li>(function(e) { e(‘…’) })(eval)</li><li>(function(e) { return e })(eval)(‘…’)</li><li>(function() { arguments<a href="'...'">0</a> })(eval)</li><li>this.eval(‘…’)</li><li>this<a href="'...'">‘eval’</a></li><li>[eval]<a href="'...'">0</a></li><li>eval.call(this, ‘…’)</li><li>eval(‘eval’)(‘…’)<br>直接调用示例</li><li>eval(‘…’)</li><li>(eval)(‘…’) 调用表达式里的 “eval”应当是引用，而不是值</li><li>(((eval)))(‘…’) 调用表达式里的 “eval”应当是引用，而不是值</li><li>(function() { return eval(‘…’) })()</li><li>eval(‘eval(“…”)’)</li><li>(function(eval) { return eval(‘…’); })(eval)</li><li>with({ eval: eval }) eval(‘…’)</li><li>with(window) eval(‘…’)</li></ul></blockquote><p>对部分作出解析如下：</p><ul><li>eval(); // <– 调用括号左边的表达式 — “eval” — 计算出一个引用</li><li>(eval)(); // <– 调用括号左边的表达式 — “(eval)” — 计算出一个引用</li><li>(((eval)))(); // <– 调用括号左边的表达式 — “(((eval)))” — 计算出一个引用</li><li>(1,eval)(); // <– 调用括号左边的表达式 — “(1, eval)” — 计算出一个值</li><li>(eval = eval)(); // <– 调用括号左边的表达式 — “(eval = eval)” — 计算出一个值</li></ul><p>总结：ES5的完全一致性没有到来，各浏览器对间接eval的识别存在差异，使得间接eval调用（自身）不是跨浏览器”全局eval”解决方案的了好候选者</p><h2 id="window-execScript"><a href="#window-execScript" class="headerlink" title="window.execScript"></a>window.execScript</h2><p>IE浏览器中有一个window.execScript功能。它的定义是”在所提供的语言中执行指定的脚本”，同时在全局范围内允许执行Javascript代码。Chrome浏览器也有这个功能，最大可能是由于兼容性的原因。截至今天，window.execScriptis仍然在Chrome 9中存在。<br>调用window.execScript的方式不同于直接eval调用 ，它 不会 返回一个值。事实上，它在Chrome中的确返回值，但该值总是空</p><h2 id="window-eval"><a href="#window-eval" class="headerlink" title="window.eval"></a>window.eval</h2><p>window.eval(‘…’)只不过是间接eval调用，而且在计算的时候与(1,eval)(‘…’),this.eval(‘…’)或者(eval=eval)(‘…’)没有什么不同。</p><h2 id="webkit里的eval上下文"><a href="#webkit里的eval上下文" class="headerlink" title="webkit里的eval上下文"></a>webkit里的eval上下文</h2><ul><li>window.eval(‘1+1’); //正常运行</li><li>eval.call(window, ‘1+1’); //正常运行</li><li>eval.call(null, ‘1+1’); //正常运行，因为eval是被引用全局对象的”this”所调用。</li><li>eval.call({ }, ‘1+1’); //EvalError(错误的”this”对象）</li><li>[eval]<a href="'1+1'">0</a>; //EvalError(错误的”this”对象）)</li><li>with({ eval: eval }) eval(‘1+1’); //EvalError(错误的”this”对象）</li></ul><h2 id="新函数"><a href="#新函数" class="headerlink" title="新函数"></a>新函数</h2><blockquote><p>Function(‘return 1+1’)(); // 2<br>function globalEval(expression) {<br> return Function(expression)();<br>}</p></blockquote><blockquote><p>var x = ‘outer’;<br>(function() {<br> var x = ‘inner’;<br> globalEval(‘alert(x)’); //警告:”outer”<br>})();</p></blockquote><blockquote><p>//然而!</p></blockquote><blockquote><p>globalEval(‘var foo = 1’);<br>typeof foo; //“未定义”（”foo”是在由”Function”创建的函数内声明的，不是全局范围的。）<br>eval(‘alert(arguments)’); //引用错误<br>Function(‘alert(arguments)’)(); //告警显示“arguments”对象。<br>Function执行代码是一个很好的解决办法，不过它也不是全局性地执行代码的。</p></blockquote><h2 id="setTimeout"><a href="#setTimeout" class="headerlink" title="setTimeout"></a>setTimeout</h2><p>setTimeout是全局性地执行代码的另一个方法-在给出的代码是字符串而不是函数的时候最适合,etTimeout的问题在于它是异步的，而且它-类似于window.execScript-不返回计算的结果。整个HTML5规格说明没有提及到setTimeout应当在全局范围内执行代码。</p><h2 id="插入脚本"><a href="#插入脚本" class="headerlink" title="插入脚本"></a>插入脚本</h2><p>在浏览器环境里，还有一个方法是向文档里注入脚本元素。然后解析这个脚本元素的内容，接着在全局范围内就像执行程序那样执行这个脚本：</p><blockquote><p>var el = document.createElement(‘script’);<br>el.appendChild(document.createTextNode(‘1+1’));<br>document.body.appendChild(el);<br>就像window.execScript和setTimeout那样，这种方法也不允许获得一个有意义的返回值（除非使用了某种类型的变通方案）。在目前的jQuery(1.4.4)的jQuery.globalEval里，插入脚本得到了使用。它虽然不能提供返回值，但是与”间接eval+window.execScript”组合方式相比，它更能够在跨浏览器情况下正常运行。例如，它可在Safari 3.2及以前版本的Safari里和更早的Opera里正常运行，而在这样的浏览器里间接的eval调用则无法运行。</p></blockquote><h2 id="window-execScript-eval的问题"><a href="#window-execScript-eval的问题" class="headerlink" title="window.execScript || eval的问题"></a>window.execScript || eval的问题</h2><p>两个主要的缺点概括如下：</p><blockquote><p>间接地eval是不足以跨浏览器的；缺乏功能测试<br>非标准的execScript优先于标准的eval<br>正像你前面所看到的，间接的eval调用在一些正在使用的浏览器里表现的仍然是稀奇古怪的。还有些环境没有进行过测试-移动浏览器，非标准平台，稀少的或者未知的浏览器等。认为间接eval就应全局性地执行代码这个事实是相当草率的- 因为这种情况只是出现在一些较新的、流行的浏览器里。非常完整的策略是在试图使用间接eval之前请真正地测试它的行为。</p></blockquote><p>浏览器不完全遵从ES5这个事实使一切变得更糟。例如，Chrom9认为with(widonw) eval(‘…’)是间接调用，即使按照ES5来判定的话，它都确实是一个直接调用-由于”eval”标识符是在调用表达式的成员表达式里；现在它是引用，然后它被解析为一个标准的、内置的eval函数。</p><p>功能测试法</p><p>创建更强大的全局eval版本是不难的。</p><p>想法非常相似-使用间接调用，把window.execScript做为备用。然而重大的区别是间接调用是要进行功能测试的，而且在可以安全地使用的时候才使用。这儿可能的一个问题是windows.execScript没有经过测试，而且假设它全局性地执行代码。如果你发现这个假设不可靠，那么对window.execScript增加功能测试就显得无关紧要了。<br><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> globalEval = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> isIndirectEvalGlobal = (<span class="function"><span class="keyword">function</span>(<span class="params">original, Object</span>) </span>{</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="comment">//我们做为第一个参数传递给的“Object”是不是解析为本地变量，</span></span><br><span class="line"> <span class="comment">// 或者全局的、内置的“Object" ,引用?</span></span><br><span class="line"> <span class="keyword">return</span> (<span class="number">1</span>,<span class="built_in">eval</span>)(<span class="string">'Object'</span>) === original;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">catch</span>(err) {</span><br><span class="line"> <span class="comment">// 如果间接eval有错误抛出（依据ES3，这是允许的, 那么就返回"false"跳出</span></span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> })(<span class="built_in">Object</span>, <span class="number">123</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (isIndirectEvalGlobal) {</span><br><span class="line"></span><br><span class="line"> <span class="comment">//如果间接eval全局性地执行了代码, 那么使用它</span></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">expression</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> (<span class="number">1</span>,<span class="built_in">eval</span>)(expression);</span><br><span class="line"> };</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">window</span>.execScript !== <span class="string">'undefined'</span>) {</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 如果”window.execScript“存在,那么使用它</span></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">expression</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">window</span>.execScript(expression);</span><br><span class="line"> };</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">//否则, 由于没有返回任何东西，那么globalEval是“未定义的”</span></span><br><span class="line">})();</span><br></pre></td></tr></table></figure><br>这种实现的好处是它启用了优雅的降级。你可以很容易地发现在当前的环境里glbalEval是否可用（因为当以上两种方案都不可用时，globalEval就是未定义的）:<br><figure class="highlight javascript"><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">if</span> (globalEval) {</span><br><span class="line"> <span class="comment">/* 在全局范围内执行的代码 */</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">/* 使用后备方法的地方 */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>注意-与任何间接eval/window.execScript方法相比-globalEval的不同在于返回值的能力，返回值由所选择的方法来确定。</p><p>几种库里的全局eval</p><p>一些流行的Javascript库都做了些什么？它们选择是哪一种全局eval方案？</p><p>正如我们先前看到的，jQuery为了满足更广泛的浏览器支持而不返回值，而且是在它的jQuery.globalEval方法里使用了脚本插入技术。</p><p>Prototype.js实际上不想在全局范围内执行脚本-它使用了很旧的、直接eval调用。Prototype.js对文档里的本地执行结果给出了告警。</p><p>Dojo选择的是不出名的window.eval变种，不过实际上是把事情搞得一团糟-如果全局对象有eval方法（在所有ES3兼容的浏览器里都是这样的），那么它就使用间接eval调用，而在无法使用情况下才使用一般的eval调用。很明显，这种后备方法将使得代码在本地执行，而且还应当是隐性执行的。Dojo的eval行为随着环境在恣意地变化，而且还可能无法捕捉错误。在一段与此相关的可笑的评论里，我被<br>其中David Mark有关dojo.eval的评论搞得晕头转向。</p><p>Mootools在window.execScript可用时使用window.execScript，而且以脚本插入做为备用方案（类似于jQuery)。然而jQuery的脚本插入比Mootools强大多了，因为jQuery的确测试它是否执行了代码。</p><p>Fuse.js选择了一个非常详尽和仔细的策略。它测试间接eval调用是否按照所期望的那样（如果存在错误，就捕捉）工作，如果是，使用它；如果间接eval调用不存在，Fuse将使用备用的脚本注入。不像jQuery或者Mootools,实际上它想通过脚本注入使执行的代码返回一个值。它使用eval封装代码内容做到了这些。使用eval全局性地执行代码产生的另一个有趣的结果是函数和变量的声明创建了可被删除的绑定（这最有可能是一个无关紧要的细枝末节）。</p><p>总结</p><p>想想我们可以从这一切中学到什么?</p><p>希望你现在对为什么eval有时在全局范围执行代码有一个真正的理解。window.eval(…)不是很特别,只是另一种形式的间接eval。该间接eval的行为在ES3和ES5中的指定不同。在实际实现中的间接eval的这种行为仍然经常零星发生，部分原因是由于从ES3过渡到ES5产生的,部分是因为未捕获到的错误。您已经看到,盲目地依赖间接eval是不安全的。依靠间接eval实现的“全局eval”应采用功能测试,而且在跨浏览器的脚本中还有很多其他的事情。最后,替代的技术是通过脚本库来使用,比如脚本注入。</p>]]></content>
<summary type="html">
<p>原文来自:<a href="https://www.oschina.net/translate/global-eval-what-are-the-options?lang=chs&amp;p=2" target="_blank" rel="noopener">eval 的一
</summary>
<category term="javascript" scheme="http://eva1314kawayi.com/categories/javascript/"/>
<category term="javascript" scheme="http://eva1314kawayi.com/tags/javascript/"/>
</entry>
<entry>
<title>Windows命令</title>
<link href="http://eva1314kawayi.com/2020/03/04/windows-system-command/"/>
<id>http://eva1314kawayi.com/2020/03/04/windows-system-command/</id>
<published>2020-03-04T04:39:32.000Z</published>
<updated>2020-03-04T05:30:02.000Z</updated>
<content type="html"><![CDATA[<h2 id="CMD相关基本命令"><a href="#CMD相关基本命令" class="headerlink" title="CMD相关基本命令"></a>CMD相关基本命令</h2><ul><li>cmd——CMD命令提示符</li><li>MSConfig——系统配置实用程序</li><li>regedit——注册表编辑器</li><li>notepad——打开记事本</li><li>calc——启动计算器</li><li>mstsc——远程桌面连接</li><li>services.msc——系统服务</li><li>gpedit.msc——组策略</li><li>shutdown——60秒倒计时关机命令</li><li>Nslookup——-IP地址侦测器</li><li>explorer——打开资源管理器</li><li>chkdsk.exe——Chkdsk磁盘检查</li><li>dcomcnfg——打开系统组件服务</li><li>devmgmt.msc——设备管理器</li><li>cleanmgr——垃圾整理</li><li>compmgmt.msc——计算机管理</li><li>secpol.msc——本地安全策略</li><li>netstat -an——(TC)命令检查接口</li><li>taskmgr——任务管理器</li><li>mmc——打开控制台</li><li>logoff——注销命令</li><li>lusrmgr.msc——本机用户和组</li><li>dvdplay——DVD播放器</li><li>diskmgmt.msc——磁盘管理实用程序</li><li>dxdiag——检查DirectX信息</li><li>perfmon.msc——计算机性能检测程序</li><li>winver——检测Windows版本</li><li>write——写字板</li><li>wiaacmgr——扫描仪和照相机向导</li><li>mspaint——画图板</li><li>magnify——放大镜实用程序</li><li>utilman——辅助工具管理器</li><li>osk——打开屏幕键盘</li><li>odbcad32——ODBC数据源管理器</li><li>Sndvol32或Sndvol——音量控制程序</li><li>sfc.exe——系统文件检查器</li><li>sfc /scannow——Windows文件保护</li><li>eventvwr——事件查看器</li><li>cliconfg——SQL Server客户端网络实用程序</li><li>certmgr.msc——证书管理实用程序</li></ul><hr><h2 id="Win键相关按键"><a href="#Win键相关按键" class="headerlink" title="Win键相关按键"></a>Win键相关按键</h2><ul><li>Win键：打开“开始”菜单</li><li>Win键+E：打开我的电脑</li><li>Win键+R：打开运行对话框</li><li>Win键+D：显示桌面</li><li>Win键+M：最小化所有窗口</li><li>Win键+X：Windows移动中心，调节音量，屏幕亮度</li><li>Win键+Home：除了正在选择的窗口，其他窗口最小化</li><li>Win键+PAUSE BREAK：打开“系统属性”对话框</li><li>Win键+【+/-】：打开Windows放大、缩小功能</li><li>Win键+Pause：显示系统属性对话框</li><li>Win键+TAB：Aero三维效果切换程序</li><li>Win键+数字键：让位于任务栏上的程序打开（数字为序号）</li><li>Win键+P：选择一个演示文稿显示模式，可以用来关闭屏幕</li><li>Win键+L：锁定计算机，需要输入密码或者选择其他用户</li><li>Win键+T：多次按可以在多个程序间顺序切换</li><li>Win键+F：计算机搜索，可以搜索计算机里面所有文件</li><li>Win键+【←/→】：在屏幕左/右半个屏幕最大化</li><li>Win键+【↑/↓】：最大化/最小化</li></ul><hr><h2 id="DOS命令"><a href="#DOS命令" class="headerlink" title="DOS命令"></a>DOS命令</h2><h3 id="常用"><a href="#常用" class="headerlink" title="常用"></a>常用</h3><ul><li>dir 列文件名</li><li>deltree 删除目录树 </li><li>cls 清屏 </li><li>cd 改变当前目录。</li><li>copy 拷贝文件 </li><li>diskcopy 复制磁盘 </li><li>del 删除文件 </li><li>format 格式化磁盘。</li><li>edit 文本编辑 </li><li>mem 查看内存状况 </li><li>md 建立子目录 </li><li>move 移动文件、改目录名。</li><li>more 分屏显示 </li><li>type 显示文件内容 </li><li>rd 删除目录</li><li>sys 制作DOS系统盘。</li><li>ren 改变文件名 </li><li>xcopy 拷贝目录与文件 </li><li>chkdsk 检查磁盘 </li><li>attrib 设置文件属性。</li><li>fdisk 硬盘分区</li><li>date 显示及修改日期 </li><li>label 设置卷标号</li><li>defrag 磁盘碎片整理。</li><li>msd 系统检测 </li><li>path 设置搜寻目录 </li><li>share 文件共享</li><li>memmaker 内存优化管理。</li><li>help 帮助</li><li>restore 恢复备份文件 </li><li>set 设置环境变量</li><li>time 显示及修改时间。</li><li>tree 列目录树</li><li>debug 随机调试程序 </li><li>doskey 重新调用DOS命令</li><li>prempt 设置提示符</li><li>undelete 恢复被删的文件 </li><li>scandisk 检测、修理磁盘。</li></ul><hr><h3 id="不常用"><a href="#不常用" class="headerlink" title="不常用"></a>不常用</h3><ul><li>diskcomp 磁盘比较 </li><li>append 设置非执行文件路径</li><li>expand 还原DOS文件 </li><li>fasthelp 快速显示帮助信息</li><li>fc 文件比较</li><li>interink 启动服务器</li><li>setver 设置版本</li><li>intersvr 启动客户机</li><li>subst 路径替换</li><li>qbasic Basic集成环境</li><li>vsafe 防病毒</li><li>unformat 恢复已格式化的磁盘</li><li>ver 显示DOS版本号</li><li>smartdrv 设置磁盘加速器</li><li>vol 显示磁盘卷标号</li><li>lh 将程序装入高端内存</li><li>ctty 改变控制设备</li><li>emm386 扩展内存管理</li></ul><hr><h3 id="常用命令介绍"><a href="#常用命令介绍" class="headerlink" title="常用命令介绍"></a>常用命令介绍</h3><p>一、Dir<br> 显示目录文件和子目录列表<br> 可以使用通配符（? 和 <em>），？表通配一个字符，</em>表通配任意字符<br> <em>.后缀<br> 指定要查看后缀的文件。 上面其实也可以为“ . 后缀”,例如dir </em>.exe 等于dir .exe<br> /p<br> 每次显示一个列表屏幕。要查看下一屏，请按键盘上的任意键。<br> /w<br> 以宽格式显示列表，在每一行上最多显示 5 个文件名或目录名。<br> /s<br> 列出指定目录及所有子目录中出现的每个指定的文件名。比win环境下的查找快多了<br> dir <em>.</em> -> a.txt 把当前目录文件列表写入a.txt<br> dir <em>.</em> /s -> a.txt 把当前目录文件列表写入a.txt，包括子目录下文件。<br>二、Attrib<br> 显示、设置或删除指派给文件或目录的只读、存档、系统以及隐藏属性。如果在不含参数的情况下使用，则 attrib 会显示当前目录中所有文件的属性。<br> +r 设置只读属性。<br> -r 清除只读属性。<br> +a 设置存档文件属性。<br> -a 清除存档文件属性。<br> +s 设置系统属性。<br> -s 清除系统属性。<br> +h 设置隐藏属性。<br> -h 清除隐藏属性。<br>三、Cls<br> 清除显示在命令提示符窗口中的所有信息，并返回空窗口，即“清屏”<br>四、Exit<br> 退出当前命令解释程序并返回到系统。<br>五、format<br> 格式化<br> /q 执行快速格式化。删除以前已格式化卷的文件表和根目录，但不在扇区之间扫描损坏区域。使用 /q 命令行选项应该仅格式化以前已格式化的完好的卷。<br>六、Ipconfig<br> 显示所有当前的 TCP/IP 网络配置值、刷新动态主机配置协议 (DHCP) 和域名系统 (DNS) 设置。使用不带参数的 ipconfig 可以显示所有适配器的 IP 地址、子网掩码、默认网关。<br> /all 显示所有适配器的完整 TCP/IP 配置信息。<br> ipconfig 等价于 winipcfg，后者在ME、98 和 95 上可用。尽管 Windows XP 没有提供象 winipcfg 命令一样的图形化界面，但可以使用“网络连接”查看和更新 IP 地址。要做到这一点，请打开 网络连接，右键单击某一网络连接，单击“状态”，然后单击“支持”选项卡。<br> 该命令最适用于配置为自动获取 IP 地址的计算机。它使用户可以确定哪些 TCP/IP 配置值是由 DHCP、自动专用 IP 地址 (APIPA) 和其他配置配置的。<br>七、md 创建目录或子目录<br>八、Move 将一个或多个文件从一个目录移动到指定的目录。<br>九、Nbtstat<br> 显示本地计算机和远程计算机的基于 TCP/IP (NetBT) 协议的 NetBIOS 统计资料、NetBIOS 名称表和 NetBIOS 名称缓存。Nbtstat 可以刷新 NetBIOS 名称缓存和注册的 Windows Internet 名称服务 (WINS) 名称。使用不带参数的 nbtstat 显示帮助。Nbtstat 命令行参数区分大小写。<br> -a remotename<br> 显示远程计算机的 NetBIOS 名称表，其中，RemoteName 是远程计算机的 NetBIOS 计算机名称。<br> -A IPAddress 显示远程计算机的 NetBIOS 名称表，其名称由远程计算机的 IP 地址指定（以小数点分隔）。<br>十、Netstat 显示活动的 TCP 连接、计算机侦听的端口、以太网统计信息、IP 路由表、IPv4 统计信息（对于 IP、ICMP、TCP 和 UDP 协议）以及 IPv6 统计信息（对于 IPv6、ICMPv6、通过 IPv6 的 TCP 以及通过 IPv6 的 UDP 协议）。使用时如果不带参数，netstat 显示活动的 TCP 连接。<br> -a 显示所有活动的 TCP 连接以及计算机侦听的 TCP 和 UDP 端口。<br>十一、Ping 通过发送“网际消息控制协议 (ICMP)”回响请求消息来验证与另一台 TCP/IP 计算机的 IP 级连接。回响应答消息的接收情况将和往返过程的次数一起显示出来。Ping 是用于检测网络连接性、可到达性和名称解析的疑难问题的主要 TCP/IP 命令。如果不带参数，ping 将显示帮助。名称和Ip地址解析是它的最简单应用也是用的最多的。<br> -t 指定在中断前 ping 可以持续发送回响请求信息到目的地。要中断并显示统计信息，请按 CTRL-BREAK。要中断并退出 ping，请按 CTRL-C。<br> -lSize<br> 指定发送的回响请求消息中“数据”字段的长度（以字节表示）。默认值为 32。size 的最大值是 65,527。<br>十二、Rename (Ren)<br> 更改文件的名称。 例如 ren <em>.abc </em>.cba<br>十三、Set 显示、设置或删除环境变量。如果没有任何参数，set 命令将显示当前环境设置。<br>十四、Shutdown 允许您关闭或重新启动本地或远程计算机。如果没有使用参数，shutdown 将注销当前用户。<br> -m ComputerName 指定要关闭的计算机。<br> -t xx 将用于系统关闭的定时器设置为 xx 秒。默认值是 20 秒。<br> -l 注销当前用户，这是默认设置。-m ComputerName 优先。<br> -s 关闭本地计算机。<br> -r 关闭之后重新启动。<br> -a 中止关闭。除了 -l 和 ComputerName 外，系统将忽略其它参数。在超时期间，您只可以使用 -a。<br>十五、System File Checker (sfc)<br> win下才有，在重新启动计算机后扫描和验证所有受保护的系统文件。<br> /scannow 立即扫描所有受保护的系统文件。<br> /scanonce 一次扫描所有受保护的系统文件。<br> /purgecache 立即清除“Windows 文件保护”文件高速缓存，并扫描所有受保护的系统文件。<br> /cachesize=x 设置“Windows 文件保护”文件高速缓存的大小，以 MB 为单位。<br>十六、type 显示文本文件的内容。使用 type 命令查看文本文件或者是bat文件而不修改文件<br>十七、Tree 图像化显示路径或驱动器中磁盘的目录结构。<br>十八、Xcopy 复制文件和目录，包括子目录。<br> /s 复制非空的目录和子目录。如果省略 /s，xcopy 将在一个目录中工作。<br> /e 复制所有子目录，包括空目录。<br>十九、copy 将一个或多个文件从一个位置复制到其他位置<br>二十、del 删除指定文件。</p>]]></content>
<summary type="html">
<h2 id="CMD相关基本命令"><a href="#CMD相关基本命令" class="headerlink" title="CMD相关基本命令"></a>CMD相关基本命令</h2><ul>
<li>cmd——CMD命令提示符</li>
<li>MSConfig——系统配
</summary>
<category term="其他" scheme="http://eva1314kawayi.com/categories/%E5%85%B6%E4%BB%96/"/>
<category term="windows" scheme="http://eva1314kawayi.com/tags/windows/"/>
</entry>
<entry>
<title>前端性能优化</title>
<link href="http://eva1314kawayi.com/2020/03/02/front-end-performance/"/>
<id>http://eva1314kawayi.com/2020/03/02/front-end-performance/</id>
<published>2020-03-02T15:32:07.000Z</published>
<updated>2020-03-03T01:36:24.000Z</updated>
<content type="html"><![CDATA[<h2 id="HTML-的优化"><a href="#HTML-的优化" class="headerlink" title="HTML 的优化"></a>HTML 的优化</h2><h3 id="使用相对-URL"><a href="#使用相对-URL" class="headerlink" title="使用相对 URL"></a>使用相对 URL</h3><p>某些 href、src 属性如果与当前页面处于同一域名下，则使用相对 URL 能够节省至少一个域名的长度。</p><h3 id="删除-HTTP-或者-HTTPS"><a href="#删除-HTTP-或者-HTTPS" class="headerlink" title="删除 HTTP 或者 HTTPS"></a>删除 HTTP 或者 HTTPS</h3><p>绝对 URL 都以 HTTP 或 HTTPS 等协议头开始，如果能确定 URL 的协议与当前页面 URL 的协议是一致的，或者说该 URL 在多种协议下均是可用的，则可以考虑删除这个协议头。</p><h3 id="删除注释"><a href="#删除注释" class="headerlink" title="删除注释"></a>删除注释</h3><p>考虑不必要的 IE 条件注释和 CDATA 注释及自定义注释。</p><h3 id="压缩空白符"><a href="#压缩空白符" class="headerlink" title="压缩空白符"></a>压缩空白符</h3><p>对于多数标签，可以通过删除多余的空白符来减少 HTML 体积，但是对于 pre 等是例外。</p><h3 id="压缩-inline-css-amp-Javascript"><a href="#压缩-inline-css-amp-Javascript" class="headerlink" title="压缩 inline css & Javascript"></a>压缩 inline css & Javascript</h3><p>不管 inline 还是 external，都需要压缩，这是减小体积的最直接的方式。</p><h3 id="CSS-amp-Javascript-尽量外链"><a href="#CSS-amp-Javascript-尽量外链" class="headerlink" title="CSS & Javascript 尽量外链"></a>CSS & Javascript 尽量外链</h3><p>不仅可以减少体积，还能够充分利用浏览器的缓存机制。</p><h3 id="删除元素默认属性"><a href="#删除元素默认属性" class="headerlink" title="删除元素默认属性"></a>删除元素默认属性</h3><p>在 HTML 规范中，很多 HTML 元素的属性是有默认值的，对于这些默认值可以抹去不写。</p><h3 id="避免使用-Iframe"><a href="#避免使用-Iframe" class="headerlink" title="避免使用 Iframe"></a>避免使用 Iframe</h3><p>创建 iframe 元素的开销要比创建其他类型的 DOM 元素高 1~2 个数量级</p><h3 id="避免空链接属性"><a href="#避免空链接属性" class="headerlink" title="避免空链接属性"></a>避免空链接属性</h3><p>可以看做是上面“删除元素默认属性”的特例，即使图片的地址为空，浏览器依旧会以默认的规则去请求空地址</p><h3 id="避免节点深层级嵌套"><a href="#避免节点深层级嵌套" class="headerlink" title="避免节点深层级嵌套"></a>避免节点深层级嵌套</h3><p>由于浏览器构建 DOM 文档的机制，深层级嵌套的节点在初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些</p><h3 id="避免-Table-布局"><a href="#避免-Table-布局" class="headerlink" title="避免 Table 布局"></a>避免 Table 布局</h3><p>构建 table 的开销也很大</p><h3 id="显示指定文档字符集"><a href="#显示指定文档字符集" class="headerlink" title="显示指定文档字符集"></a>显示指定文档字符集</h3><p>如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。为了避免浏览器把时间花费在搜寻合适的字符集来进行解码，所以最好在文档中总是显式的指定页面字符集。</p><h2 id="CSS-的优化"><a href="#CSS-的优化" class="headerlink" title="CSS 的优化"></a>CSS 的优化</h2><h3 id="把-CSS-放到代码页上端"><a href="#把-CSS-放到代码页上端" class="headerlink" title="把 CSS 放到代码页上端"></a>把 CSS 放到代码页上端</h3><p>加快渲染</p><h3 id="避免-CSS-表达式"><a href="#避免-CSS-表达式" class="headerlink" title="避免 CSS 表达式"></a>避免 CSS 表达式</h3><p>表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给 CSS 表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量。</p><h3 id="使用-而不是-import"><a href="#使用-而不是-import" class="headerlink" title="使用 而不是 @import"></a>使用 <link> 而不是 @import</h3><p>在外部的 CSS 文档中使用 @import 会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用 @import 来导入其它的 CSS，但浏览器不能并行下载样式，就会导致页面增添了额外的往返耗时。比如，第一个 CSS 文档 first.css 包含了以下内容：@import url(“second.css”)。那么浏览器就必须先把 first.css 下载、解析和执行后，才发现及处理第二个文档 second.css。</p><h3 id="避免通配选择器"><a href="#避免通配选择器" class="headerlink" title="避免通配选择器"></a>避免通配选择器</h3><p>CSS 选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器。比如这种反例：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.selected</span> * {<span class="attribute">color</span>: red;}</span><br></pre></td></tr></table></figure><p>由于 CSS 选择器从右到左匹配的机制，浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 selected 的元素，直到文档的根节点，因此其匹配开销是非常大的，通常比开销最小的 ID 选择器高出 1~3 个数量级，所以应避免使用关键选择器是通配选择器的规则。</p><h3 id="避免单规则的属性选择器"><a href="#避免单规则的属性选择器" class="headerlink" title="避免单规则的属性选择器"></a>避免单规则的属性选择器</h3><p>属性选择器根据元素的属性是否存在或其属性值进行匹配，如下例规则会把 herf 属性值等于 ”#index” 的链接元素设置为红色：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.selected</span> <span class="selector-attr">[href=”#index”]</span> {<span class="attribute">color</span>: red;}</span><br></pre></td></tr></table></figure><p>但其匹配开销是非常大的，浏览器先匹配所有的元素，检查其是否有 href 属性并且 herf 属性值等于 ”#index”， 然后分别向上逐级匹配 class 为 selected 的元素，直到文档的根节点。所以应避免使用关键选择器是单规则属性选择器的规则。</p><h3 id="避免类正则的属性选择器"><a href="#避免类正则的属性选择器" class="headerlink" title="避免类正则的属性选择器"></a>避免类正则的属性选择器</h3><p>CSS3 添加了复杂的属性选择器，可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的，正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=， |=， ^=， $=，和 ~= 语法的属性选择器。</p><h2 id="JavaScript-的优化"><a href="#JavaScript-的优化" class="headerlink" title="JavaScript 的优化"></a>JavaScript 的优化</h2><h3 id="脚本放到-HTML-代码页底部"><a href="#脚本放到-HTML-代码页底部" class="headerlink" title="脚本放到 HTML 代码页底部"></a>脚本放到 HTML 代码页底部</h3><p>加快渲染，当然如果你的 js 会影响 dom 建立，那放在哪都是一样的了</p><h3 id="移除重复脚本"><a href="#移除重复脚本" class="headerlink" title="移除重复脚本"></a>移除重复脚本</h3><p>封装方法是一个前端开发人员最基本的技能</p><h3 id="减少-DOM-访问"><a href="#减少-DOM-访问" class="headerlink" title="减少 DOM 访问"></a>减少 DOM 访问</h3><p>使用 JavaScript 访问 DOM 元素是比较慢的，因此为了提升性能，应该做到：</p><pre><code>缓存已经查询过的元素；线下更新完节点之后再将它们添加到文档树中；避免使用 JavaScript 来修改页面布局；</code></pre><h3 id="使用事件代理"><a href="#使用事件代理" class="headerlink" title="使用事件代理"></a>使用事件代理</h3><p>有时候我们会感觉到页面反应迟钝，这是因为 DOM 树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个 div 中有 10 个按钮，你只需要在 div 上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。</p><h3 id="缓存选择器查询结果"><a href="#缓存选择器查询结果" class="headerlink" title="缓存选择器查询结果"></a>缓存选择器查询结果</h3><p>选择器查询是开销很大的方法。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。 不要使用：</p><figure class="highlight"><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">jQuery('#top').find('p.classA');</span><br><span class="line">jQuery('#top').find('p.classB');</span><br></pre></td></tr></table></figure><p>而是使用：</p><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></pre></td><td class="code"><pre><span class="line">var cached = jQuery('#top');</span><br><span class="line">cached.find('p.classA');</span><br><span class="line">cached.find('p.classB');</span><br></pre></td></tr></table></figure><h3 id="使用微类库"><a href="#使用微类库" class="headerlink" title="使用微类库"></a>使用微类库</h3><p>通常开发者都会使用 JavaScript 类库，如 jQuery、Mootools、YUI、Dojo 等，但是开发者往往只是使用 JavaScript 类库中的部分功能。为了更大的提升性能，应尽量避免使用这类大而全的类库，而是按需使用微类库来辅助开发。</p>]]></content>
<summary type="html">
<h2 id="HTML-的优化"><a href="#HTML-的优化" class="headerlink" title="HTML 的优化"></a>HTML 的优化</h2><h3 id="使用相对-URL"><a href="#使用相对-URL" class="head
</summary>
<category term="其他" scheme="http://eva1314kawayi.com/categories/%E5%85%B6%E4%BB%96/"/>
</entry>
<entry>
<title>Mac下查看和生成ssh密钥</title>
<link href="http://eva1314kawayi.com/2020/03/02/mac-ssh/"/>
<id>http://eva1314kawayi.com/2020/03/02/mac-ssh/</id>
<published>2020-03-02T14:44:41.000Z</published>
<updated>2020-03-02T15:10:27.390Z</updated>
<content type="html"><![CDATA[<h2 id="查看本地是否存在ssh密钥"><a href="#查看本地是否存在ssh密钥" class="headerlink" title="查看本地是否存在ssh密钥"></a>查看本地是否存在ssh密钥</h2><blockquote><p>命令：ls -al ~/.ssh<br>如果在输出的文件列表中发现id_rsa和id_rsa.pub的存在，证明本地已经存在SSH密钥，请执行第3步</p></blockquote><h2 id="生成ssh密钥"><a href="#生成ssh密钥" class="headerlink" title="生成ssh密钥"></a>生成ssh密钥</h2><blockquote><p>命令：ssh-keygen -t rsa -C “自己的Email地址”<br>注意：执行完成后会有一些列提示输入密码的指令，直接回车即可</p></blockquote><h2 id="查看ssh公钥"><a href="#查看ssh公钥" class="headerlink" title="查看ssh公钥"></a>查看ssh公钥</h2><blockquote><p>命令：cat /Users/电脑用户名/.ssh/id_rsa.pub</p></blockquote><blockquote><p>复制打印出来的信息，在GitLab或者GitHub的SSH Keys中进行相应设置即可</p></blockquote>]]></content>
<summary type="html">
<h2 id="查看本地是否存在ssh密钥"><a href="#查看本地是否存在ssh密钥" class="headerlink" title="查看本地是否存在ssh密钥"></a>查看本地是否存在ssh密钥</h2><blockquote>
<p>命令：ls -al ~/.
</summary>
<category term="其他" scheme="http://eva1314kawayi.com/categories/%E5%85%B6%E4%BB%96/"/>
</entry>
<entry>
<title>Mac终端常用命令</title>
<link href="http://eva1314kawayi.com/2020/03/02/mac-command/"/>
<id>http://eva1314kawayi.com/2020/03/02/mac-command/</id>
<published>2020-03-02T13:25:29.000Z</published>
<updated>2020-03-02T14:34:34.660Z</updated>
<content type="html"><![CDATA[<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">touch /zhaopan.pages</span><br></pre></td></tr></table></figure><h3 id="创建一个文件"><a href="#创建一个文件" class="headerlink" title="创建一个文件"></a>创建一个文件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pwd</span><br></pre></td></tr></table></figure><h3 id="输出当前路径名"><a href="#输出当前路径名" class="headerlink" title="输出当前路径名"></a>输出当前路径名</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ls</span><br></pre></td></tr></table></figure><h3 id="输出当前路径下的所有文件"><a href="#输出当前路径下的所有文件" class="headerlink" title="输出当前路径下的所有文件"></a>输出当前路径下的所有文件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ls -l</span><br></pre></td></tr></table></figure><h3 id="输出当前文件下的所有文件-详细信息"><a href="#输出当前文件下的所有文件-详细信息" class="headerlink" title="输出当前文件下的所有文件 详细信息"></a>输出当前文件下的所有文件 详细信息</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">open ./</span><br></pre></td></tr></table></figure><h3 id="打开当前文件或文件夹"><a href="#打开当前文件或文件夹" class="headerlink" title="打开当前文件或文件夹"></a>打开当前文件或文件夹</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">who</span><br></pre></td></tr></table></figure><h3 id="显示当前用户名"><a href="#显示当前用户名" class="headerlink" title="显示当前用户名"></a>显示当前用户名</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clear</span><br></pre></td></tr></table></figure><h3 id="清空屏幕的内容"><a href="#清空屏幕的内容" class="headerlink" title="清空屏幕的内容"></a>清空屏幕的内容</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rm -rf <span class="number">456</span>/</span><br></pre></td></tr></table></figure><h3 id="删除当前目录下456名字的文件夹，删除文件的同时，里面的文件统统删除"><a href="#删除当前目录下456名字的文件夹，删除文件的同时，里面的文件统统删除" class="headerlink" title="删除当前目录下456名字的文件夹，删除文件的同时，里面的文件统统删除"></a>删除当前目录下456名字的文件夹，删除文件的同时，里面的文件统统删除</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mv <span class="number">1.</span>txt <span class="number">2.</span>txt</span><br></pre></td></tr></table></figure><h3 id="移动-改名，将当前目录的1-txt移动到当前目录，并改名为123-txt"><a href="#移动-改名，将当前目录的1-txt移动到当前目录，并改名为123-txt" class="headerlink" title="移动+改名，将当前目录的1.txt移动到当前目录，并改名为123.txt"></a>移动+改名，将当前目录的1.txt移动到当前目录，并改名为123.txt</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp <span class="number">1.</span>txt <span class="number">2.</span>txt</span><br></pre></td></tr></table></figure><h3 id="将当前目录下的1-txt拷贝一份-并放到当前目录下，并命名为2-txt"><a href="#将当前目录下的1-txt拷贝一份-并放到当前目录下，并命名为2-txt" class="headerlink" title="将当前目录下的1.txt拷贝一份,并放到当前目录下，并命名为2.txt"></a>将当前目录下的1.txt拷贝一份,并放到当前目录下，并命名为2.txt</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vi <span class="number">1.</span>c</span><br></pre></td></tr></table></figure><h3 id="如果文件存在，则打开这个文件，如果不存在，先创建，再打开"><a href="#如果文件存在，则打开这个文件，如果不存在，先创建，再打开" class="headerlink" title="如果文件存在，则打开这个文件，如果不存在，先创建，再打开"></a>如果文件存在，则打开这个文件，如果不存在，先创建，再打开</h3><h3 id="命令模式"><a href="#命令模式" class="headerlink" title="命令模式"></a>命令模式</h3><p>:q 退出，如果文件已经被编辑了，而没有保存的话，是无法退出的<br>:w 保存<br>:wq 保存退出<br>:q! 不保存退出<br>:set nu 显示行号<br>:set nonu 隐藏行号<br><strong>由编辑模式进入一般模式，按Esc键</strong></p><p>一般模式（一般命令）<br>由一般模式进入编辑模式<br>a,i,o shift+a，shift+i,shift+o键</p><p>dd 删除一行（光标所在的哪一行）（剪切）<br>5dd 删除光标下的5行</p><p>p 粘贴<br>yy 复制<br>5yy 复制5行</p><p>u 撤销上一次操作（undo）<br>ctrl+r 恢复操作 （redo）</p><p>gg 将光标定位在第一行<br>shift+g 将光标定位到最后一行<br>num shift+g 将光标定位在第num行</p><p>ls 查看当前目录下的内容<br>ls / 查看根目录下的内容<br>ls ./ 产看当前目录下的内容<br>ls ~ 查看用户目录的内容（打开终端默认在用户目录下）</p>]]></content>
<summary type="html">
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><spa
</summary>
<category term="其他" scheme="http://eva1314kawayi.com/categories/%E5%85%B6%E4%BB%96/"/>
</entry>
<entry>
<title>解决Chrome浏览器强制http重定向到https的问题</title>
<link href="http://eva1314kawayi.com/2020/03/02/modify-chrome-browser-redirection/"/>
<id>http://eva1314kawayi.com/2020/03/02/modify-chrome-browser-redirection/</id>
<published>2020-03-02T10:03:28.000Z</published>
<updated>2020-03-02T10:11:22.000Z</updated>
<content type="html"><![CDATA[<p>在chrome地址栏中输入<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">chrome:<span class="comment">//net-internals/</span></span><br></pre></td></tr></table></figure><br>选择<strong>Domain Security Policy</strong>，在 <strong>Delete domain security policies</strong>标签里输入要删除的域名，如下图：<br><img src="http://eva1314kawayi.com/img/domain_security_policy.png" alt="Domain Security Policy 界面截图" title="Domain Security Policy"></p>]]></content>
<summary type="html">
<p>在chrome地址栏中输入<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td cl
</summary>
<category term="其他" scheme="http://eva1314kawayi.com/categories/%E5%85%B6%E4%BB%96/"/>
</entry>
<entry>
<title>图表mermaid sequence flow</title>
<link href="http://eva1314kawayi.com/2020/02/29/hexo-mermaid/"/>
<id>http://eva1314kawayi.com/2020/02/29/hexo-mermaid/</id>
<published>2020-02-29T06:11:10.000Z</published>
<updated>2020-03-07T12:38:09.260Z</updated>
<content type="html"><![CDATA[<h2 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-filter-mermaid-diagrams</span><br></pre></td></tr></table></figure><h2 id="配置-主题下-config-yml"><a href="#配置-主题下-config-yml" class="headerlink" title="配置(主题下_config.yml)"></a>配置(主题下_config.yml)</h2><figure class="highlight javascript"><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"># Mermaid 支持</span><br><span class="line">mermaid:</span><br><span class="line">on: <span class="literal">true</span></span><br><span class="line">cdn: <span class="comment">//cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js</span></span><br><span class="line">#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js</span><br><span class="line">options: # 更多配置信息可以参考 https://mermaidjs.github.io/#/mermaidAPI</span><br><span class="line"> theme: <span class="string">'default'</span></span><br><span class="line"> startOnLoad: <span class="literal">true</span></span><br><span class="line"> flowchart:</span><br><span class="line"> useMaxWidth: <span class="literal">false</span></span><br><span class="line"> htmlLabels: <span class="literal">true</span></span><br></pre></td></tr></table></figure><h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><h3 id="flow"><a href="#flow" class="headerlink" title="flow"></a>flow</h3><figure class="highlight javascript"><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">graph TD;</span><br><span class="line"> A-->B;</span><br><span class="line"> A-->C;</span><br><span class="line"> B-->D;</span><br><span class="line"> C-->D;</span><br></pre></td></tr></table></figure><p>得到：</p><pre class="mermaid">graph TD; A-->B; A-->C; B-->D; C-->D;</pre><figure class="highlight javascript"><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">graph TB</span><br><span class="line"> c1-->a2</span><br><span class="line"> subgraph one</span><br><span class="line"> a1-->a2</span><br><span class="line"> end</span><br><span class="line"> subgraph two</span><br><span class="line"> b1-->b2</span><br><span class="line"> end</span><br><span class="line"> subgraph three</span><br><span class="line"> c1-->c2</span><br><span class="line"> end</span><br></pre></td></tr></table></figure>得到：<pre class="mermaid">graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end</pre>### sequence<pre class="mermaid">sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!</pre><h3 id="class"><a href="#class" class="headerlink" title="class"></a>class</h3><pre class="mermaid">classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }</pre><h3 id="state"><a href="#state" class="headerlink" title="state"></a>state</h3><pre class="mermaid">stateDiagram [*] --> Active state Active { [*] --> NumLockOff NumLockOff --> NumLockOn : EvNumLockPressed NumLockOn --> NumLockOff : EvNumLockPressed -- [*] --> CapsLockOff CapsLockOff --> CapsLockOn : EvCapsLockPressed CapsLockOn --> CapsLockOff : EvCapsLockPressed -- [*] --> ScrollLockOff ScrollLockOff --> ScrollLockOn : EvCapsLockPressed ScrollLockOn --> ScrollLockOff : EvCapsLockPressed }</pre><h3 id="gantt"><a href="#gantt" class="headerlink" title="gantt"></a>gantt</h3><pre class="mermaid">gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h</pre><h3 id="pie"><a href="#pie" class="headerlink" title="pie"></a>pie</h3><pre class="mermaid">pie "Dogs" : 386 "Cats" : 85 "Rats" : 15</pre>]]></content>
<summary type="html">
<h2 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h2><figure class="highlight javascript"><table><tr><td class="gutter
</summary>
<category term="hexo" scheme="http://eva1314kawayi.com/categories/hexo/"/>
<category term="hexo" scheme="http://eva1314kawayi.com/tags/hexo/"/>
</entry>
<entry>
<title>HTML特殊字符编码对照表</title>
<link href="http://eva1314kawayi.com/2020/02/28/asii-table/"/>
<id>http://eva1314kawayi.com/2020/02/28/asii-table/</id>
<published>2020-02-28T05:42:03.000Z</published>
<updated>2020-02-28T07:51:44.000Z</updated>
<content type="html"><![CDATA[<table width="100%" align="center" cellspacing="1" bordercolordark="#FFFFFF" cellpadding="2" border="1" style="color:#666666;font-size:12px"><br><style style="display:none;">.article-entry{margin-top:1rem;}.article-entry br{display:none;}</style><br> <tr height="26"><td bgcolor="#F6F6F6" align="center">特殊符号</td><br> <td bgcolor="#F6F6F6">命名实体</td><br> <td bgcolor="#F6F6F6">十进制编码</td><br> <td bgcolor="#F6F6F6" align="center">特殊符号</td><br> <td bgcolor="#F6F6F6">命名实体</td><br> <td bgcolor="#F6F6F6">十进制编码</td><br> <td bgcolor="#F6F6F6" align="center">特殊符号</td><br> <td bgcolor="#F6F6F6">命名实体</td><br> <td bgcolor="#F6F6F6">十进制编码</td><br> </tr><br> <tr><br> <td bgcolor="#F6F6F6" align="center">Α</td><br> <td>&Alpha;</td><br> <td>&#913;</td><br> <td bgcolor="#F6F6F6" align="center">Β</td><br> <td>&Beta;</td><br> <td>&#914;</td><br> <td bgcolor="#F6F6F6" align="center">Γ</td><br> <td>&Gamma;</td><br> <td>&#915;</td><br> </tr><br> <tr><br> <td bgcolor="#F6F6F6" align="center">Δ</td><br> <td>&Delta;</td><br> <td>&#916;</td><br> <td bgcolor="#F6F6F6" align="center">Ε</td><br> <td>&Epsilon;</td><br> <td>&#917;</td><br> <td bgcolor="#F6F6F6" align="center">Ζ</td><br> <td>&Zeta;</td><br> <td>&#918;</td><br> </tr><br><tr><td bgcolor="#F6F6F6" align="center">Η</td><td>&Eta;</td><br><td>&#919;</td><br><td bgcolor="#F6F6F6" align="center">Θ</td><br><td>&Theta;</td><br><td>&#920;</td><br><td bgcolor="#F6F6F6" align="center">Ι</td><br><td>&Iota;</td><br><td>&#921;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">Κ</td><br><td>&Kappa;</td><br><td>&#922;</td><br><td bgcolor="#F6F6F6" align="center">Λ</td><br><td>&Lambda;</td><br><td>&#923;</td><br><td bgcolor="#F6F6F6" align="center">Μ</td><br><td>&Mu;</td><br><td>&#924;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">Ν</td><br><td>&Nu;</td><br><td>&#925;</td><br><td bgcolor="#F6F6F6" align="center">Ξ</td><br><td>&Xi;</td><br><td>&#926;</td><br><td bgcolor="#F6F6F6" align="center">Ο</td><br><td>&Omicron;</td><br><td>&#927;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">Π</td><br><td>&Pi;</td><br><td>&#928;</td><br><td bgcolor="#F6F6F6" align="center">Ρ</td><br><td>&Rho;</td><br><td>&#929;</td><br><td bgcolor="#F6F6F6" align="center">Σ</td><br><td>&Sigma;</td><br><td>&#931;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">Τ</td><br><td>&Tau;</td><br><td>&#932;</td><br><td bgcolor="#F6F6F6" align="center">Υ</td><br><td>&Upsilon;</td><br><td>&#933;</td><br><td bgcolor="#F6F6F6" align="center">Φ</td><br><td>&Phi;</td><br><td>&#934;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">Χ</td><br><td>&Chi;</td><br><td>&#935;</td><br><td bgcolor="#F6F6F6" align="center">Ψ</td><br><td>&Psi;</td><br><td>&#936;</td><br><td bgcolor="#F6F6F6" align="center">Ω</td><br><td>&Omega;</td><br><td>&#937;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">α</td><br><td>&alpha;</td><br><td>&#945;</td><br><td bgcolor="#F6F6F6" align="center">β</td><br><td>&beta;</td><br><td>&#946;</td><br><td bgcolor="#F6F6F6" align="center">γ</td><br><td>&gamma;</td><br><td>&#947;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">δ</td><br><td>&delta;</td><br><td>&#948;</td><br><td bgcolor="#F6F6F6" align="center">ε</td><br><td>&epsilon;</td><br><td>&#949;</td><br><td bgcolor="#F6F6F6" align="center">ζ</td><br><td>&zeta;</td><br><td>&#950;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">η</td><br><td>&eta;</td><br><td>&#951;</td><br><td bgcolor="#F6F6F6" align="center">θ</td><br><td>&theta;</td><br><td>&#952;</td><br><td bgcolor="#F6F6F6" align="center">ι</td><br><td>&iota;</td><br><td>&#953;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">κ</td><br><td>&kappa;</td><br><td>&#954;</td><br><td bgcolor="#F6F6F6" align="center">λ</td><br><td>&lambda;</td><br><td>&#955;</td><br><td bgcolor="#F6F6F6" align="center">μ</td><br><td>&mu;</td><br><td>&#956;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">ν</td><br><td>&nu;</td><br><td>&#957;</td><br><td bgcolor="#F6F6F6" align="center">ξ</td><br><td>&xi;</td><br><td>&#958;</td><br><td bgcolor="#F6F6F6" align="center">ο</td><br><td>&omicron;</td><br><td>&#959;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">π</td><br><td>&pi;</td><br><td>&#960;</td><br><td bgcolor="#F6F6F6" align="center">ρ</td><br><td>&rho;</td><br><td>&#961;</td><br><td bgcolor="#F6F6F6" align="center">ς</td><br><td>&sigmaf;</td><br><td>&#962;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">σ</td><br><td>&sigma;</td><br><td>&#963;</td><br><td bgcolor="#F6F6F6" align="center">τ</td><br><td>&tau;</td><br><td>&#964;</td><br><td bgcolor="#F6F6F6" align="center">υ</td><br><td>&upsilon;</td><br><td>&#965;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">φ</td><br><td>&phi;</td><br><td>&#966;</td><br><td bgcolor="#F6F6F6" align="center">χ</td><br><td>&chi;</td><br><td>&#967;</td><br><td bgcolor="#F6F6F6" align="center">ψ</td><br><td>&psi;</td><br><td>&#968;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">ω</td><br><td>&omega;</td><br><td>&#969;</td><br><td bgcolor="#F6F6F6" align="center">ϑ</td><br><td>&thetasym;</td><br><td>&#977;</td><br><td bgcolor="#F6F6F6" align="center">ϒ</td><br><td>&upsih;</td><br><td>&#978;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">ϖ</td><br><td>&piv;</td><br><td>&#982;</td><br><td bgcolor="#F6F6F6" align="center">•</td><br><td>&bull;</td><br><td>&#8226;</td><br><td bgcolor="#F6F6F6" align="center">…</td><br><td>&hellip;</td><br><td>&#8230;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">′</td><br><td>&prime;</td><br><td>&#8242;</td><br><td bgcolor="#F6F6F6" align="center">″</td><br><td>&Prime;</td><br><td>&#8243;</td><br><td bgcolor="#F6F6F6" align="center">‾</td><br><td>&oline;</td><br><td>&#8254;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⁄</td><br><td>&frasl;</td><br><td>&#8260;</td><br><td bgcolor="#F6F6F6" align="center">℘</td><br><td>&weierp;</td><br><td>&#8472;</td><br><td bgcolor="#F6F6F6" align="center">ℑ</td><br><td>&image;</td><br><td>&#8465;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">ℜ</td><br><td>&real;</td><br><td>&#8476;</td><br><td bgcolor="#F6F6F6" align="center">™</td><br><td>&trade;</td><br><td>&#8482;</td><br><td bgcolor="#F6F6F6" align="center">ℵ</td><br><td>&alefsym;</td><br><td>&#8501;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">←</td><br><td>&larr;</td><br><td>&#8592;</td><br><td bgcolor="#F6F6F6" align="center">↑</td><br><td>&uarr;</td><br><td>&#8593;</td><br><td bgcolor="#F6F6F6" align="center">→</td><br><td>&rarr;</td><br><td>&#8594;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">↓</td><br><td>&darr;</td><br><td>&#8595;</td><br><td bgcolor="#F6F6F6" align="center">↔</td><br><td>&harr;</td><br><td>&#8596;</td><br><td bgcolor="#F6F6F6" align="center">↵</td><br><td>&crarr;</td><br><td>&#8629;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⇐</td><br><td>&lArr;</td><br><td>&#8656;</td><br><td bgcolor="#F6F6F6" align="center">⇑</td><br><td>&uArr;</td><br><td>&#8657;</td><br><td bgcolor="#F6F6F6" align="center">⇒</td><br><td>&rArr;</td><br><td>&#8658;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⇓</td><br><td>&dArr;</td><br><td>&#8659;</td><br><td bgcolor="#F6F6F6" align="center">⇔</td><br><td>&hArr;</td><br><td>&#8660;</td><br><td bgcolor="#F6F6F6" align="center">∀</td><br><td>&forall;</td><br><td>&#8704;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∂</td><br><td>&part;</td><br><td>&#8706;</td><br><td bgcolor="#F6F6F6" align="center">∃</td><br><td>&exist;</td><br><td>&#8707;</td><br><td bgcolor="#F6F6F6" align="center">∅</td><br><td>&empty;</td><br><td>&#8709;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∇</td><br><td>&nabla;</td><br><td>&#8711;</td><br><td bgcolor="#F6F6F6" align="center">∈</td><br><td>&isin;</td><br><td>&#8712;</td><br><td bgcolor="#F6F6F6" align="center">∉</td><br><td>&notin;</td><br><td>&#8713;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∋</td><br><td>&ni;</td><br><td>&#8715;</td><br><td bgcolor="#F6F6F6" align="center">∏</td><br><td>&prod;</td><br><td>&#8719;</td><br><td bgcolor="#F6F6F6" align="center">∑</td><br><td>&sum;</td><br><td>&#8722;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">−</td><br><td>&minus;</td><br><td>&#8722;</td><br><td bgcolor="#F6F6F6" align="center">∗</td><br><td>&lowast;</td><br><td>&#8727;</td><br><td bgcolor="#F6F6F6" align="center">√</td><br><td>&radic;</td><br><td>&#8730;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∝</td><br><td>&prop;</td><br><td>&#8733;</td><br><td bgcolor="#F6F6F6" align="center">∞</td><br><td>&infin;</td><br><td>&#8734;</td><br><td bgcolor="#F6F6F6" align="center">∠</td><br><td>&ang;</td><br><td>&#8736;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∧</td><br><td>&and;</td><br><td>&#8869;</td><br><td bgcolor="#F6F6F6" align="center">∨</td><br><td>&or;</td><br><td>&#8870;</td><br><td bgcolor="#F6F6F6" align="center">∩</td><br><td>&cap;</td><br><td>&#8745;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∪</td><br><td>&cup;</td><br><td>&#8746;</td><br><td bgcolor="#F6F6F6" align="center">∫</td><br><td>&int;</td><br><td>&#8747;</td><br><td bgcolor="#F6F6F6" align="center">∴</td><br><td>&there4;</td><br><td>&#8756;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">∼</td><br><td>&sim;</td><br><td>&#8764;</td><br><td bgcolor="#F6F6F6" align="center">≅</td><br><td>&cong;</td><br><td>&#8773;</td><br><td bgcolor="#F6F6F6" align="center">≈</td><br><td>&asymp;</td><br><td>&#8773;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">≠</td><br><td>&ne;</td><br><td>&#8800;</td><br><td bgcolor="#F6F6F6" align="center">≡</td><br><td>&equiv;</td><br><td>&#8801;</td><br><td bgcolor="#F6F6F6" align="center">≤</td><br><td>&le;</td><br><td>&#8804;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">≥</td><br><td>&ge;</td><br><td>&#8805;</td><br><td bgcolor="#F6F6F6" align="center">⊂</td><br><td>&sub;</td><br><td>&#8834;</td><br><td bgcolor="#F6F6F6" align="center">⊃</td><br><td>&sup;</td><br><td>&#8835;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⊄</td><br><td>&nsub;</td><br><td>&#8836;</td><br><td bgcolor="#F6F6F6" align="center">⊆</td><br><td>&sube;</td><br><td>&#8838;</td><br><td bgcolor="#F6F6F6" align="center">⊇</td><br><td>&supe;</td><br><td>&#8839;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⊕</td><br><td>&oplus;</td><br><td>&#8853;</td><br><td bgcolor="#F6F6F6" align="center">⊗</td><br><td>&otimes;</td><br><td>&#8855;</td><br><td bgcolor="#F6F6F6" align="center">⊥</td><br><td>&perp;</td><br><td>&#8869;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⋅</td><br><td>&sdot;</td><br><td>&#8901;</td><br><td bgcolor="#F6F6F6" align="center">⌈</td><br><td>&lceil;</td><br><td>&#8968;</td><br><td bgcolor="#F6F6F6" align="center">⌉</td><br><td>&rceil;</td><br><td>&#8969;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">⌊</td><br><td>&lfloor;</td><br><td>&#8970;</td><br><td bgcolor="#F6F6F6" align="center">⌋</td><br><td>&rfloor;</td><br><td>&#8971;</td><br><td bgcolor="#F6F6F6" align="center">◊</td><br><td>&loz;</td><br><td>&#9674;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">♠</td><br><td>&spades;</td><br><td>&#9824;</td><br><td bgcolor="#F6F6F6" align="center">♣</td><br><td>&clubs;</td><br><td>&#9827;</td><br><td bgcolor="#F6F6F6" align="center">♥</td><br><td>&hearts;</td><br><td>&#9829;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">♦</td><br><td>&diams;</td><br><td>&#9830;</td><br><td bgcolor="#F6F6F6" align="center"> </td><br><td>&nbsp;</td><br><td>&#160;</td><br><td bgcolor="#F6F6F6" align="center">¡</td><br><td>&iexcl;</td><br><td>&#161;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">¢</td><br><td>&cent;</td><br><td>&#162;</td><br><td bgcolor="#F6F6F6" align="center">£</td><br><td>&pound;</td><br><td>&#163;</td><br><td bgcolor="#F6F6F6" align="center">¤</td><br><td>&curren;</td><br><td>&#164;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">¥</td><br><td>&yen;</td><br><td>&#165;</td><br><td bgcolor="#F6F6F6" align="center">¦</td><br><td>&brvbar;</td><br><td>&#166;</td><br><td bgcolor="#F6F6F6" align="center">§</td><br><td>&sect;</td><br><td>&#167;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">¨</td><br><td>&uml;</td><br><td>&#168;</td><br><td bgcolor="#F6F6F6" align="center">©</td><br><td>&copy;</td><br><td>&#169;</td><br><td bgcolor="#F6F6F6" align="center">ª</td><br><td>&ordf;</td><br><td>&#170;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">«</td><br><td>&laquo;</td><br><td>&#171;</td><br><td bgcolor="#F6F6F6" align="center">¬</td><br><td>&not;</td><br><td>&#172;</td><br><td bgcolor="#F6F6F6" align="center">­</td><br><td>&shy;</td><br><td>&#173;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">®</td><br><td>&reg;</td><br><td>&#174;</td><br><td bgcolor="#F6F6F6" align="center">¯</td><br><td>&macr;</td><br><td>&#175;</td><br><td bgcolor="#F6F6F6" align="center">°</td><br><td>&deg;</td><br><td>&#176;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">±</td><br><td>&plusmn;</td><br><td>&#177;</td><br><td bgcolor="#F6F6F6" align="center">²</td><br><td>&sup2;</td><br><td>&#178;</td><br><td bgcolor="#F6F6F6" align="center">³</td><br><td>&sup3;</td><br><td>&#179;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center">´</td><br><td>&acute;</td><br><td>&#180;</td><br><td bgcolor="#F6F6F6" align="center">µ</td><br><td>&micro;</td><br><td>&#181</td><br><td bgcolor="#F6F6F6" align="center">"</td><br><td>&quot;</td><br><td>&#34;</td><br></tr><br><tr><br><td bgcolor="#F6F6F6" align="center"><</td><br><td>&lt;</td><br><td>&#60;</td><br><td bgcolor="#F6F6F6" align="center">></td><br><td>&gt;</td><br><td>&#62;</td><br><td bgcolor="#F6F6F6" align="center">'</td><br><td> </td><br><td>&#39;</td><br></tr><br></table>]]></content>
<summary type="html">
<table width="100%" align="center" cellspacing="1" bordercolordark="#FFFFFF" cellpadding="2" border="1" style="color:#666666;font-size:12px"
</summary>
<category term="其他" scheme="http://eva1314kawayi.com/categories/%E5%85%B6%E4%BB%96/"/>
<category term="htmlchar" scheme="http://eva1314kawayi.com/tags/htmlchar/"/>
</entry>
<entry>
<title>一些css常识</title>
<link href="http://eva1314kawayi.com/2020/02/28/css-sense/"/>
<id>http://eva1314kawayi.com/2020/02/28/css-sense/</id>
<published>2020-02-28T05:06:58.000Z</published>
<updated>2020-02-28T05:39:04.000Z</updated>
<content type="html"><![CDATA[<h2 id="常识"><a href="#常识" class="headerlink" title="常识"></a>常识</h2><ul><li>不要使用过小的图片做背景平铺，宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。</li><li>无边框。推荐的写法是 border:none;border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源</li><li>慎用 <em> 通配符， CSS 中的所有标签，不管用的不用的，过时的先进的，一视同仁被cue到，大大的占用资源。比如初始化时切忌用</em>，而是有选择的初始化标签</li><li>样式放头上，脚本放脚下。不内嵌，只外链</li><li>坚决不用 CSS 表达式</li><li>CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考</li><li>使用 引用样式表，而不是通过@import 导入</li><li>一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化</li><li>千万不要在 HTML 中缩放图片，一者不好看，二者占资源</li><li>正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。</li></ul><hr><p>文章原链接 <a href="http://www.nowamagic.net/csszone/css_15CssCommon.php" target="_blank" rel="noopener">css的15个常识</a></p>]]></content>
<summary type="html">
<h2 id="常识"><a href="#常识" class="headerlink" title="常识"></a>常识</h2><ul>
<li>不要使用过小的图片做背景平铺，宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，
</summary>
<category term="html/css" scheme="http://eva1314kawayi.com/categories/html-css/"/>
<category term="html/css" scheme="http://eva1314kawayi.com/tags/html-css/"/>
</entry>
<entry>
<title>前端基础 - CSS选择器的权重与优先规则</title>
<link href="http://eva1314kawayi.com/2020/02/28/css-priority/"/>
<id>http://eva1314kawayi.com/2020/02/28/css-priority/</id>
<published>2020-02-28T03:19:06.000Z</published>
<updated>2020-02-28T05:39:54.000Z</updated>
<content type="html"><![CDATA[<p>计算选择器的特殊性，首先把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的的选择器的个数乘以这一等级的权重，最后把所有等级的值相加得出选择器的特殊值，4个等级的定义如下[^注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0]：</p><ul><li>内联样式，如：style=””,权值为1000;</li><li>ID选择器，如：#content，权值为100;</li><li>类，伪类和属性选择器，如：.content，权值为10;</li><li>类型选择器和伪元素选择器，如：div p，权值为1;<br>举个板栗</li><li>ul#nav li.active a 权重值 = 113 = 1<em>100 + 1</em>10 + 3*1</li><li>#header #left ul li.first a = 213 = 1<em>100 + 1</em>100 + 1<em>1 + 1</em>1 + 1<em>10 + 1</em>1</li><li>#sidebar dl#code dd:first-letter = 212 = 2<em>100 + 2</em>1 + 1*10；</li><li><ul><li>= 0<br>具体例子如下：<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><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="selector-id">#content</span> <span class="selector-tag">div</span><span class="selector-id">#main-content</span> <span class="selector-tag">h2</span>{</span><br><span class="line"> <span class="attribute">color</span>:red;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#content</span> <span class="selector-id">#main-content</span>><span class="selector-tag">h2</span>{</span><br><span class="line"> <span class="attribute">color</span>:blue</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">body</span> <span class="selector-id">#content</span> <span class="selector-tag">div</span><span class="selector-attr">[id=<span class="string">"main-content"</span>]</span> <span class="selector-tag">h2</span>{</span><br><span class="line"> <span class="attribute">color</span>:green;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#main-content</span> <span class="selector-tag">div</span><span class="selector-class">.paragraph</span> <span class="selector-tag">h2</span>{</span><br><span class="line"> <span class="attribute">color</span>:orange;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#main-content</span> <span class="selector-attr">[class=<span class="string">"paragraph"</span>]</span> <span class="selector-tag">h2</span>{</span><br><span class="line"> <span class="attribute">color</span>:yellow;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#main-content</span> <span class="selector-tag">div</span><span class="selector-class">.paragraph</span> <span class="selector-tag">h2</span><span class="selector-class">.first</span>{</span><br><span class="line"> <span class="attribute">color</span>:pink;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul></li><li>第一个特殊性的值=2<em>100+2</em>1=202</li><li>第二个特殊性的值=2*100+1=201</li><li>第三个特殊性的值=1<em>100+1</em>10+3*1=113</li><li>第四个特殊性的值=1<em>100+1</em>10+2*1=112</li><li>第五个特殊性的值=1<em>100+1</em>10+1*1=111</li><li>第六个特殊性的值=1<em>100+2</em>10+3*1=123</li></ul><hr><p>原文链接<a href="http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php" target="_blank" rel="noopener">css选择器权重</a></p>]]></content>
<summary type="html">
<p>计算选择器的特殊性，首先把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的的选择器的个数乘以这一等级的权重，最后把所有等级的值相加得出选择器的特殊值，4个等级的定义如下[^注意：通用选择器（*），子选择器（&gt;）和相邻同胞选择器（+）并不在这四个等级
</summary>
<category term="html/css" scheme="http://eva1314kawayi.com/categories/html-css/"/>
<category term="html/css" scheme="http://eva1314kawayi.com/tags/html-css/"/>
</entry>
<entry>
<title>关于emmet</title>
<link href="http://eva1314kawayi.com/2020/02/28/emmet-base/"/>
<id>http://eva1314kawayi.com/2020/02/28/emmet-base/</id>
<published>2020-02-28T03:09:51.000Z</published>
<updated>2020-02-28T03:19:22.000Z</updated>
<content type="html"><![CDATA[<p>Emmet (前身为 Zen Coding)</p>]]></content>
<summary type="html">
<p>Emmet (前身为 Zen Coding)</p>
</summary>
<category term="emmet" scheme="http://eva1314kawayi.com/tags/emmet/"/>
<category term="前端小技巧" scheme="http://eva1314kawayi.com/tags/%E5%89%8D%E7%AB%AF%E5%B0%8F%E6%8A%80%E5%B7%A7/"/>
</entry>
</feed>