-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
565 lines (348 loc) · 508 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
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>xin</title>
<subtitle>修身！正心！诚意！</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://www.xin666.cc/"/>
<updated>2021-09-14T14:49:43.196Z</updated>
<id>https://www.xin666.cc/</id>
<author>
<name>zhixin</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>正则表达教程</title>
<link href="https://www.xin666.cc/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E6%95%99%E7%A8%8B/"/>
<id>https://www.xin666.cc/正则表达教程/</id>
<published>2021-09-14T14:23:00.000Z</published>
<updated>2021-09-14T14:49:43.196Z</updated>
<content type="html"><![CDATA[<h2 id="第一章-正则表达式字符匹配攻略"><a href="#第一章-正则表达式字符匹配攻略" class="headerlink" title="第一章 正则表达式字符匹配攻略"></a>第一章 正则表达式字符匹配攻略</h2><p>正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。<br>然而关于正则如何匹配字符的学习，大部分人都觉得这块比较杂乱。<br>毕竟元字符太多了，看起来没有系统性，不好记。本章就解决这个问题。 </p><p>内容包括：</p><ol><li>两种模糊匹配</li><li>字符组</li><li>量词</li><li>分支结构</li><li>案例分析</li></ol><h3 id="1-两种模糊匹配"><a href="#1-两种模糊匹配" class="headerlink" title="1.两种模糊匹配"></a>1.两种模糊匹配</h3><p>如果正则只有精确匹配是没多大意义的，比如/hello/，也只能匹配字符串中的<code>/hello/</code>这个子串。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> regex = <span class="regexp">/hello/</span>;</span><br><span class="line"><span class="built_in">console</span>.log( regex.test(<span class="string">"hello"</span>) ); </span><br><span class="line"><span class="comment">// => true</span></span><br></pre></td></tr></table></figure><p>正则表达式之所以强大，是因为其能实现模糊匹配。<br>而模糊匹配，有两个方向上的“模糊”：横向模糊和纵向模糊。</p><h4 id="1-1-横向模糊匹配"><a href="#1-1-横向模糊匹配" class="headerlink" title="1.1 横向模糊匹配"></a>1.1 横向模糊匹配</h4><p>横向模糊指的是，一个正则可匹配的字符串的长度不是固定的，可以是多种情况的。<br>其实现的方式是使用量词。譬如<code>{m,n}</code>，表示连续出现最少m次，最多n次。<br>比如<code>/ab{2,5}c/</code>表示匹配这样一个字符串：第一个字符是“a”，接下来是2到5个字符“b”，最后是字符“c”。测试如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> regex = <span class="regexp">/ab{2,5}c/g</span>;</span><br><span class="line"><span class="keyword">var</span> string = <span class="string">"abc abbc abbbc abbbbc abbbbbc abbbbbbc"</span>;</span><br><span class="line"><span class="built_in">console</span>.log( string.match(regex) ); </span><br><span class="line"><span class="comment">// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：案例中用的正则是/ab{2,5}c/g，后面多了g，它是正则的一个修饰符。表示全局匹配，即在目标字符串中按顺序找到满足匹配模式的所有子串，强调的是“所有”，而不只是“第一个”。g是单词global的首字母。</p></blockquote><h4 id="1-2-纵向模糊匹配"><a href="#1-2-纵向模糊匹配" class="headerlink" title="1.2 纵向模糊匹配"></a>1.2 纵向模糊匹配</h4><p>纵向模糊指的是，一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能。<br>其实现的方式是使用字符组。譬如<code>[abc]</code>，表示该字符是可以字符“a”、“b”、“c”中的任何一个。<br>比如<code>/a[123]b/</code>可以匹配如下三种字符串：”a1b”、”a2b”、”a3b”。测试如下： </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> regex = <span class="regexp">/a[123]b/g</span>;</span><br><span class="line"><span class="keyword">var</span> string = <span class="string">"a0b a1b a2b a3b a4b"</span>;</span><br><span class="line"><span class="built_in">console</span>.log( string.match(regex) ); </span><br><span class="line"><span class="comment">// => ["a1b", "a2b", "a3b"]</span></span><br></pre></td></tr></table></figure><p>以上就是本章讲的主体内容，只要掌握横向和纵向模糊匹配，就能解决很大部分正则匹配问题。<br>接下来的内容就是展开说了，如果对此都比较熟悉的话，可以跳过，直接看本章案例那节。</p><h3 id="2-字符组"><a href="#2-字符组" class="headerlink" title="2.字符组"></a>2.字符组</h3><blockquote><p>需要强调的是，虽叫字符组（字符类），但只是其中一个字符。例如<code>[abc]</code>，表示匹配一个字符，它可以是“a”、“b”、“c”之一。</p></blockquote><h4 id="2-1-范围表示法"><a href="#2-1-范围表示法" class="headerlink" title="2.1 范围表示法"></a>2.1 范围表示法</h4><p>如果字符组里的字符特别多的话，怎么办？可以使用范围表示法。<br>比如<code>[123456abcdefGHIJKLM]</code>，可以写成<code>[1-6a-fG-M]</code>。用连字符-来省略和简写。<br>因为连字符有特殊用途，那么要匹配“a”、“-”、“z”这三者中任意一个字符，该怎么做呢？<br>不能写成<code>[a-z]</code>，因为其表示小写字符中的任何一个字符。可以写成如下的方式：<code>[-az]</code>或<code>[az-]</code>或<code>[a\-z]</code>。即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。</p><h4 id="2-2-排除字符组"><a href="#2-2-排除字符组" class="headerlink" title="2.2 排除字符组"></a>2.2 排除字符组</h4><p>纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是”a”、”b”、”c”。</p><p>此时就是排除字符组（反义字符组）的概念。例如<code>[^abc]</code>，表示是一个除”a”、”b”、”c”之外的任意一个字符。字符组的第一位放^（脱字符），表示求反的概念。 </p><p>当然，也有相应的范围表示法。</p><h4 id="2-3-常见的简写形式"><a href="#2-3-常见的简写形式" class="headerlink" title="2.3 常见的简写形式"></a>2.3 常见的简写形式</h4><p>有了字符组的概念后，一些常见的符号我们也就理解了。因为它们都是系统自带的简写形式。</p><blockquote><p><code>\d</code>就是<code>[0-9]</code>。表示是一位数字。记忆方式：其英文是digit（数字）。<br><code>\D</code>就是<code>[^0-9]</code>。表示除数字外的任意字符。<br><code>\w</code>就是<code>[0-9a-zA-Z_]</code>。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。<br><code>\W</code>是<code>[^0-9a-zA-Z_]</code>。非单词字符。<br><code>\s</code>是<code>[ \t\v\n\r\f]</code>。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。<br><code>\S</code>是<code>[^ \t\v\n\r\f]</code>。 非空白符。<br><code>.</code>就是<code>[^\n\r\u2028\u2029]</code>。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号…中的每个点，都可以理解成占位符，表示任何类似的东西。</p></blockquote><p>如果要匹配任意字符怎么办？可以使用<code>[\d\D]</code>、<code>[\w\W]</code>、<code>[\s\S]</code>和<code>[^]</code>中任何的一个。</p><h3 id="3-量词"><a href="#3-量词" class="headerlink" title="3.量词"></a>3.量词</h3><p>量词也称重复。掌握<code>{m,n}</code>的准确含义后，只需要记住一些简写形式。</p><h4 id="3-1-简写形式"><a href="#3-1-简写形式" class="headerlink" title="3.1 简写形式"></a>3.1 简写形式</h4><blockquote><p><code>{m,}</code> 表示至少出现m次。<br><code>{m}</code> 等价于<code>{m,m}</code>，表示出现m次。<br><code>?</code> 等价于<code>{0,1}</code>，表示出现或者不出现。记忆方式：问号的意思表示，有吗？<br><code>+</code> 等价于<code>{1,}</code>，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。<br><code>*</code> 等价于<code>{0,}</code>，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。</p></blockquote><h4 id="3-2-贪婪匹配和惰性匹配"><a href="#3-2-贪婪匹配和惰性匹配" class="headerlink" title="3.2 贪婪匹配和惰性匹配"></a>3.2 贪婪匹配和惰性匹配</h4><p>看如下的例子：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> regex = <span class="regexp">/\d{2,5}/g</span>;</span><br><span class="line"><span class="keyword">var</span> string = <span class="string">"123 1234 12345 123456"</span>;</span><br><span class="line"><span class="built_in">console</span>.log( string.match(regex) ); </span><br><span class="line"><span class="comment">// => ["123", "1234", "12345", "12345"]</span></span><br></pre></td></tr></table></figure><p>其中正则<code>/\d{2,5}/</code>，表示数字连续出现2到5次。会匹配2位、3位、4位、5位连续数字。</p><p>但是其是贪婪的，它会尽可能多的匹配。你能给我6个，我就要5个。你能给我3个，我就3要个。反正只要在能力范围内，越多越好。 </p><p>我们知道有时贪婪不是一件好事（请看文章最后一个例子）。而惰性匹配，就是尽可能少的匹配：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> regex = <span class="regexp">/\d{2,5}?/g</span>;</span><br><span class="line"><span class="keyword">var</span> string = <span class="string">"123 1234 12345 123456"</span>;</span><br><span class="line"><span class="built_in">console</span>.log( string.match(regex) ); </span><br><span class="line"><span class="comment">// => ["12", "12", "34", "12", "34", "12", "34", "56"]</span></span><br></pre></td></tr></table></figure><p>其中<code>/\d{2,5}?/</code>表示，虽然2到5次都行，当2个就够的时候，就不在往下尝试了。<br>通过在量词后面加个问号就能实现惰性匹配，因此所有惰性匹配情形如下： </p><blockquote></blockquote><p><code>{m,n}?</code><br><code>{m,}?</code><br><code>??</code><br><code>+?</code><br><code>*?</code> </p><p>对惰性匹配的记忆方式是：量词后面加个问号，问一问你知足了吗，你很贪婪吗？</p><h3 id="4-多选分支"><a href="#4-多选分支" class="headerlink" title="4.多选分支"></a>4.多选分支</h3>]]></content>
<summary type="html">
<h2 id="第一章-正则表达式字符匹配攻略"><a href="#第一章-正则表达式字符匹配攻略" class="headerlink" title="第一章 正则表达式字符匹配攻略"></a>第一章 正则表达式字符匹配攻略</h2><p>正则表达式是匹配模式，要么匹配字符，
</summary>
<category term="JavaScript" scheme="https://www.xin666.cc/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="正则表达" scheme="https://www.xin666.cc/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE/"/>
</entry>
<entry>
<title>JavaScript思维导图</title>
<link href="https://www.xin666.cc/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/"/>
<id>https://www.xin666.cc/JavaScript思维导图/</id>
<published>2019-05-04T09:30:49.000Z</published>
<updated>2021-08-11T07:17:58.985Z</updated>
<content type="html"><![CDATA[<h2 id="01-数据类型"><a href="#01-数据类型" class="headerlink" title="01-数据类型"></a>01-数据类型</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/01-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.gif" alt="01-数据类型"></p><h2 id="02-变量"><a href="#02-变量" class="headerlink" title="02-变量"></a>02-变量</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/02-%E5%8F%98%E9%87%8F.gif" alt="02-变量"></p><h2 id="03-运算符"><a href="#03-运算符" class="headerlink" title="03-运算符"></a>03-运算符</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/03-%E8%BF%90%E7%AE%97%E7%AC%A6.gif" alt="03-运算符"></p><h2 id="04-流程语句"><a href="#04-流程语句" class="headerlink" title="04-流程语句"></a>04-流程语句</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/04-%E6%B5%81%E7%A8%8B%E8%AF%AD%E5%8F%A5.gif" alt="04-流程语句"></p><h2 id="05-数组"><a href="#05-数组" class="headerlink" title="05-数组"></a>05-数组</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/05-%E6%95%B0%E7%BB%84.gif" alt="05-数组"></p><h2 id="06-函数基础"><a href="#06-函数基础" class="headerlink" title="06-函数基础"></a>06-函数基础</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/06-%E5%87%BD%E6%95%B0%E5%9F%BA%E7%A1%80.gif" alt="06-函数基础"></p><h2 id="07-字符串函数"><a href="#07-字符串函数" class="headerlink" title="07-字符串函数"></a>07-字符串函数</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/07-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%87%BD%E6%95%B0.gif" alt="07-字符串函数"></p><h2 id="08-DOM操作量"><a href="#08-DOM操作量" class="headerlink" title="08-DOM操作量"></a>08-DOM操作量</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/08-DOM%E6%93%8D%E4%BD%9C.gif" alt="08-DOM操作"></p><h2 id="09-文档对象模型DOM"><a href="#09-文档对象模型DOM" class="headerlink" title="09-文档对象模型DOM"></a>09-文档对象模型DOM</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/09-%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8BDOM.jpg" alt="09-文档对象模型DOM"></p><h2 id="10-BOM浏览器对象量"><a href="#10-BOM浏览器对象量" class="headerlink" title="10-BOM浏览器对象量"></a>10-BOM浏览器对象量</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/10-BOM%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1.jpg" alt="10-BOM浏览器对象"></p><h2 id="11-Window对象"><a href="#11-Window对象" class="headerlink" title="11-Window对象"></a>11-Window对象</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/11-Window%E5%AF%B9%E8%B1%A1.gif" alt="11-Window对象"></p><h2 id="12-正则表达式"><a href="#12-正则表达式" class="headerlink" title="12-正则表达式"></a>12-正则表达式</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/12-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.gif" alt="12-正则表达式"></p><p>===</p><h2 id="13-Vue思维导图"><a href="#13-Vue思维导图" class="headerlink" title="13-Vue思维导图"></a>13-Vue思维导图</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/13-Vue%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE.png" alt="13-Vue思维导图"></p>]]></content>
<summary type="html">
<h2 id="01-数据类型"><a href="#01-数据类型" class="headerlink" title="01-数据类型"></a>01-数据类型</h2><p><img src="/uploads/JavaScript%E6%80%9D%E7%BB%B4%E5
</summary>
<category term="JavaScript" scheme="https://www.xin666.cc/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
</entry>
<entry>
<title>函数节流与函数防抖</title>
<link href="https://www.xin666.cc/%E5%87%BD%E6%95%B0%E8%8A%82%E6%B5%81%E4%B8%8E%E5%87%BD%E6%95%B0%E9%98%B2%E6%8A%96/"/>
<id>https://www.xin666.cc/函数节流与函数防抖/</id>
<published>2019-03-05T06:36:53.000Z</published>
<updated>2021-08-11T07:17:59.005Z</updated>
<content type="html"><![CDATA[<h2 id="什么是函数节流与函数防抖"><a href="#什么是函数节流与函数防抖" class="headerlink" title="什么是函数节流与函数防抖"></a>什么是函数节流与函数防抖</h2><ul><li><strong>函数节流: 指定时间间隔内只会执行一次任务；</strong></li><li><strong>函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。</strong></li></ul><h2 id="函数节流-throttle"><a href="#函数节流-throttle" class="headerlink" title="函数节流(throttle)"></a>函数节流(throttle)</h2><blockquote><p>这里以判断页面是否滚动到底部为例，普通的做法就是监听 window 对象的 scroll 事件，然后再函数体中写入判断是否滚动到底部的逻辑：</p></blockquote><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="built_in">window</span>).on(<span class="string">'scroll'</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="keyword">let</span> pageHeight = $(<span class="string">'body'</span>).height(),</span><br><span class="line"> scrollTop = $(<span class="built_in">window</span>).scrollTop(),</span><br><span class="line"> winHeight = $(<span class="built_in">window</span>).height(),</span><br><span class="line"> thresold = pageHeight - scrollTop - winHeight;</span><br><span class="line"> <span class="keyword">if</span> (thresold > <span class="number">-100</span> && thresold <= <span class="number">20</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'end'</span>);</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>这样做的一个缺点就是比较消耗性能，因为当在滚动的时候，浏览器会无时不刻地在计算判断是否滚动到底部的逻辑，而在实际的场景中是不需要这么做的，在实际场景中可能是这样的：在滚动过程中，每隔一段时间在去计算这个判断逻辑。而函数节流所做的工作就是每隔一段时间去执行一次原本需要无时不刻地在执行的函数，所以在滚动事件中引入函数的节流是一个非常好的实践：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">window</span>).on(<span class="string">'scroll'</span>, throttle(<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="keyword">let</span> pageHeight = $(<span class="string">'body'</span>).height(),</span><br><span class="line"> scrollTop = $(<span class="built_in">window</span>).scrollTop(),</span><br><span class="line"> winHeight = $(<span class="built_in">window</span>).height(),</span><br><span class="line"> thresold = pageHeight - scrollTop - winHeight;</span><br><span class="line"> <span class="keyword">if</span> (thresold > <span class="number">-100</span> && thresold <= <span class="number">20</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'end'</span>);</span><br><span class="line"> }</span><br><span class="line">}));</span><br></pre></td></tr></table></figure><p>加上函数节流之后，当页面再滚动的时候，每隔 300ms 才会去执行一次判断逻辑。<br>简单来说，函数的节流就是通过闭包保存一个标记（canRun = true），在函数的开头判断这个标记是否为 true，如果为 true 的话就继续执行函数，否则则 return 掉，判断完标记后立即把这个标记设为 false，然后把外部传入的函数的执行包在一个 setTimeout 中，最后在 setTimeout 执行完毕后再把标记设置为 true（这里很关键），表示可以执行下一次的循环了。当 setTimeout 还未执行的时候，canRun 这个标记始终为 false，在开头的判断中被 return 掉</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">throttle</span>(<span class="params">fn, interval = <span class="number">300</span></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> canRun = <span class="literal">true</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">if</span> (!canRun) <span class="keyword">return</span>;</span><br><span class="line"> canRun = <span class="literal">false</span>;</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> fn.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line"> canRun = <span class="literal">true</span>;</span><br><span class="line"> }, interval);</span><br><span class="line"> };</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="函数防抖-debounce"><a href="#函数防抖-debounce" class="headerlink" title="函数防抖(debounce)"></a>函数防抖(debounce)</h2><blockquote><p>这里以用户注册时验证用户名是否被占用为例，如今很多网站为了提高用户体验，不会再输入框失去焦点的时候再去判断用户名是否被占用，而是在输入的时候就在判断这个用户名是否已被注册：</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'input.user-name'</span>).on(<span class="string">'input'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> $.ajax({</span><br><span class="line"> url: <span class="string">`https://just.com/check`</span>,</span><br><span class="line"> method: <span class="string">'post'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> username: $(<span class="keyword">this</span>).val(),</span><br><span class="line"> },</span><br><span class="line"> success(data) {</span><br><span class="line"> <span class="keyword">if</span> (data.isRegistered) {</span><br><span class="line"> $(<span class="string">'.tips'</span>).text(<span class="string">'该用户名已被注册！'</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $(<span class="string">'.tips'</span>).text(<span class="string">'恭喜！该用户名还未被注册！'</span>);</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> error(error) {</span><br><span class="line"> <span class="built_in">console</span>.log(error);</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>很明显，这样的做法不好的是当用户输入第一个字符的时候，就开始请求判断了，不仅对服务器的压力增大了，对用户体验也未必比原来的好。而理想的做法应该是这样的，当用户输入第一个字符后的一段时间内如果还有字符输入的话，那就暂时不去请求判断用户名是否被占用。在这里引入函数防抖就能很好地解决这个问题：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'input.user-name'</span>).on(<span class="string">'input'</span>, debounce(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> $.ajax({</span><br><span class="line"> url: <span class="string">`https://just.com/check`</span>,</span><br><span class="line"> method: <span class="string">'post'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> username: $(<span class="keyword">this</span>).val(),</span><br><span class="line"> },</span><br><span class="line"> success(data) {</span><br><span class="line"> <span class="keyword">if</span> (data.isRegistered) {</span><br><span class="line"> $(<span class="string">'.tips'</span>).text(<span class="string">'该用户名已被注册！'</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $(<span class="string">'.tips'</span>).text(<span class="string">'恭喜！该用户名还未被注册！'</span>);</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> error(error) {</span><br><span class="line"> <span class="built_in">console</span>.log(error);</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line">}));</span><br></pre></td></tr></table></figure><p>其实函数防抖的原理也非常地简单，通过闭包保存一个标记来保存 setTimeout 返回的值，每当用户输入的时候把前一个 setTimeout clear 掉，然后又创建一个新的 setTimeout，这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数了。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">fn, interval = <span class="number">300</span></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> timeout = <span class="literal">null</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"> clearTimeout(timeout);</span><br><span class="line"> timeout = setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> fn.apply(<span class="keyword">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line"> }, interval);</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><p>其实函数节流与函数防抖的原理非常简单，巧妙地使用 setTimeout 来存放待执行的函数，<br>这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。</p><p>使用函数节流与函数防抖的目的，在开头的栗子中应该也能看得出来，就是为了节约计算机资源。 </p><p><a href="https://juejin.im/entry/58c0379e44d9040068dc952f" target="_blank" rel="noopener">原文出处</a></p>]]></content>
<summary type="html">
<h2 id="什么是函数节流与函数防抖"><a href="#什么是函数节流与函数防抖" class="headerlink" title="什么是函数节流与函数防抖"></a>什么是函数节流与函数防抖</h2><ul>
<li><strong>函数节流: 指定时间间隔内只会执
</summary>
<category term="JavaScript" scheme="https://www.xin666.cc/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
</entry>
<entry>
<title>懒加载和预加载</title>
<link href="https://www.xin666.cc/%E6%87%92%E5%8A%A0%E8%BD%BD%E5%92%8C%E9%A2%84%E5%8A%A0%E8%BD%BD/"/>
<id>https://www.xin666.cc/懒加载和预加载/</id>
<published>2019-01-25T06:52:46.000Z</published>
<updated>2021-08-11T07:17:59.008Z</updated>
<content type="html"><![CDATA[<h2 id="懒加载"><a href="#懒加载" class="headerlink" title="懒加载"></a>懒加载</h2><h3 id="1-什么是懒加载？"><a href="#1-什么是懒加载？" class="headerlink" title="1. 什么是懒加载？"></a>1. 什么是懒加载？</h3><blockquote><p>懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。</p></blockquote><h3 id="2-为什么要使用懒加载？"><a href="#2-为什么要使用懒加载？" class="headerlink" title="2. 为什么要使用懒加载？"></a>2. 为什么要使用懒加载？</h3><blockquote><p>很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。 影响页面打开速度，用户体验也不好。</p></blockquote><ol><li>能提升用户的体验</li><li>减少无效资源的加载</li><li>防止并发加载的资源过多会阻塞js的加载 </li></ol><h3 id="3-懒加载的原理是什么？"><a href="#3-懒加载的原理是什么？" class="headerlink" title="3. 懒加载的原理是什么？"></a>3. 懒加载的原理是什么？</h3><blockquote><p>页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。 懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置为图片的真实src；</p></blockquote><h3 id="4-懒加载的实现步骤？"><a href="#4-懒加载的实现步骤？" class="headerlink" title="4. 懒加载的实现步骤？"></a>4. 懒加载的实现步骤？</h3><ol><li>首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。</li><li>页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。</li><li>在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。</li></ol><h3 id="5-实现步骤"><a href="#5-实现步骤" class="headerlink" title="5. 实现步骤"></a>5. 实现步骤</h3><ol><li>第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.</li><li>第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。</li><li>第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Lazyload<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"> <span class="selector-class">.image-item</span> {</span></span><br><span class="line"> display: block;</span><br><span class="line"> margin-bottom: 50px;</span><br><span class="line"> height: 200px;//一定记得设置图片高度</span><br><span class="line"> }</span><br><span class="line"> <span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/1.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/2.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/3.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/4.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/5.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/6.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/7.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/8.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/9.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/10.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/11.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">class</span>=<span class="string">"image-item"</span> <span class="attr">lazyload</span>=<span class="string">"true"</span> <span class="attr">data-original</span>=<span class="string">"images/12.png"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> viewHeight =<span class="built_in">document</span>.documentElement.clientHeight<span class="comment">//获取可视区高度</span></span></span><br><span class="line"><span class="actionscript"><span class="function"><span class="keyword">function</span> <span class="title">lazyload</span><span class="params">()</span></span>{</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> eles=<span class="built_in">document</span>.querySelectorAll（<span class="string">'img[data-original][lazyload]'</span>）</span></span><br><span class="line"><span class="javascript"><span class="built_in">Array</span>.prototype.forEach.call(eles,<span class="function"><span class="keyword">function</span>(<span class="params">item,index</span>)</span>{</span></span><br><span class="line"><span class="actionscript"><span class="keyword">var</span> rect</span></span><br><span class="line"><span class="actionscript"><span class="keyword">if</span>(item.dataset.original===<span class="string">""</span>)</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span></span></span><br><span class="line"><span class="actionscript">rect=item.getBoundingClientRect()<span class="comment">// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置</span></span></span><br><span class="line">if(rect.bottom>=0 && rect.top < viewHeight){</span><br><span class="line"><span class="actionscript">!<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> img=<span class="keyword">new</span> Image()</span></span><br><span class="line"> img.src=item.dataset.original</span><br><span class="line"><span class="actionscript"> img.onload=<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</span></span><br><span class="line"> item.src=img.src</span><br><span class="line"> }</span><br><span class="line"><span class="actionscript">item.removeAttribute（<span class="string">"data-original"</span>）<span class="comment">//移除属性，下次不再遍历</span></span></span><br><span class="line"><span class="actionscript">item.removeAttribute（<span class="string">"lazyload"</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="actionscript">lazyload()<span class="comment">//刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.addEventListener（<span class="string">"scroll"</span>，lazyload)</span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><h2 id="预加载"><a href="#预加载" class="headerlink" title="预加载"></a>预加载</h2><h3 id="1-什么是预加载？"><a href="#1-什么是预加载？" class="headerlink" title="1. 什么是预加载？"></a>1. 什么是预加载？</h3><blockquote><p>资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。</p></blockquote><h3 id="2-为什么使用预加载？"><a href="#2-为什么使用预加载？" class="headerlink" title="2. 为什么使用预加载？"></a>2. 为什么使用预加载？</h3><blockquote><p>在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。</p></blockquote><h3 id="3-实现预加载的几种办法"><a href="#3-实现预加载的几种办法" class="headerlink" title="3.实现预加载的几种办法"></a>3.实现预加载的几种办法</h3><p><strong>1. 使用html</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"http://pic26.nipic.com/20121213/6168183 0044449030002.jpg"</span> <span class="attr">style</span>=<span class="string">"display:none"</span>/></span></span><br></pre></td></tr></table></figure><p><strong>2. 使用Image对象</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./myPreload.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span></span><br><span class="line"><span class="actionscript"> <span class="comment">//myPreload.js文件</span></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> image= <span class="keyword">new</span> Image()</span></span><br><span class="line"><span class="actionscript"> image.src=<span class="string">"http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"</span></span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p><strong>3. 使用PreloadJS库</strong><br>PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。</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></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用preload.js</span></span><br><span class="line"><span class="keyword">var</span> queue=<span class="keyword">new</span> createjs.LoadQueue()；<span class="comment">//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域</span></span><br><span class="line">queue.on(<span class="string">"complete"</span>,handleComplete,<span class="keyword">this</span>);</span><br><span class="line">queue.loadManifest([</span><br><span class="line">{<span class="attr">id</span>:<span class="string">"myImage"</span>,<span class="attr">src</span>:<span class="string">"http://pic26.nipic.com/20121213/6168183 0044449030002.jpg"</span>},</span><br><span class="line">{id：<span class="string">"myImage2"</span>，src:<span class="string">"http://pic9.nipic.com/20100814/2839526 1931471581702.jpg"</span>}</span><br><span class="line">])；</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleComplete</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> image=queue.getResuLt(<span class="string">"myImage"</span>);</span><br><span class="line"> <span class="built_in">document</span>.body.appendChild(image);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h2><p>两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力</p>]]></content>
<summary type="html">
<h2 id="懒加载"><a href="#懒加载" class="headerlink" title="懒加载"></a>懒加载</h2><h3 id="1-什么是懒加载？"><a href="#1-什么是懒加载？" class="headerlink" title="1.
</summary>
<category term="html" scheme="https://www.xin666.cc/categories/html/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="html" scheme="https://www.xin666.cc/tags/html/"/>
</entry>
<entry>
<title>小程序文档笔记</title>
<link href="https://www.xin666.cc/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%96%87%E6%A1%A3%E7%AC%94%E8%AE%B0/"/>
<id>https://www.xin666.cc/小程序文档笔记/</id>
<published>2018-10-26T01:28:46.000Z</published>
<updated>2021-08-11T07:17:59.006Z</updated>
<content type="html"><![CDATA[<h2 id="准备"><a href="#准备" class="headerlink" title="准备:"></a>准备:</h2><ol><li>注册和申请appid</li><li>下载开发工具并完成启动</li></ol><p><a href="https://mp.weixin.qq.com/wxopen/waregister?action=step1" target="_blank" rel="noopener">连接</a></p><h2 id="基础："><a href="#基础：" class="headerlink" title="基础："></a>基础：</h2><p><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html" target="_blank" rel="noopener">文档</a></p><ol><li>小程序文件结构(app.json, app.wxss, app.js);</li><li>小程序文件介绍(index.json, index.wxml, index.wxss, index.js);</li><li>小程序的App,page,窗口,tarBar的配置</li><li>小程序语法和生命周期(数据绑定，列表渲染，条件渲染，模版，事件，引用)</li><li>常用组件的使用(view,scroll-view,map,swiper…)</li><li>常用api的使用(wx.request({}),…)</li></ol><blockquote></blockquote><p>小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。<br>app.json文件用来对微信小程序进行全局配置，<br>决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。</p><h2 id="要点："><a href="#要点：" class="headerlink" title="要点："></a>要点：</h2><blockquote></blockquote><p>Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，<br>小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，<br>于是就得到了你看到的小程序的样子。</p><p>一个小程序主体部分由三个文件组成，必须放在项目的根目录<br>Page()函数用来注册一个页面。<br>接受一个 object 参数，其指定页面的</p><ol><li>初始数据</li><li>生命周期函数</li><li>事件处理函数等。</li></ol><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></pre></td><td class="code"><pre><span class="line">Page({</span><br><span class="line"> data: {</span><br><span class="line"> text: <span class="string">"This is page data."</span></span><br><span class="line"> },</span><br><span class="line"> onLoad: <span class="function"><span class="keyword">function</span>(<span class="params">options</span>) </span>{</span><br><span class="line"> <span class="comment">// 生命周期函数--监听页面加载</span></span><br><span class="line"> },</span><br><span class="line"> onReady: <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><br><span class="line"> onShow: <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><br><span class="line"> onHide: <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><br><span class="line"> onUnload: <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><br><span class="line"> onPullDownRefresh: <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><br><span class="line"> onReachBottom: <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><br><span class="line"> onShareAppMessage: <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><br><span class="line"> onPageScroll: <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><br><span class="line"> <span class="comment">// Event handler.</span></span><br><span class="line"> viewTap: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.setData({</span><br><span class="line"> text: <span class="string">'Set some data for updating view.'</span></span><br><span class="line"> }, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// this is setData callback</span></span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> customData: {</span><br><span class="line"> <span class="comment">// 自定义是数据对象</span></span><br><span class="line"> hi: <span class="string">'MINA'</span></span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>wxs：</strong><br>wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。<br>wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。<br>wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。<br>wxs 函数不能作为组件的事件回调。<br>由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--wxml--></span></span><br><span class="line"><span class="tag"><<span class="name">wxs</span> <span class="attr">module</span>=<span class="string">"m1"</span>></span></span><br><span class="line">var msg = "hello world";</span><br><span class="line"></span><br><span class="line">module.exports.message = msg;</span><br><span class="line"><span class="tag"></<span class="name">wxs</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">view</span>></span> {{m1.message}} <span class="tag"></<span class="name">view</span>></span></span><br></pre></td></tr></table></figure><p>bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。<br>采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。</p><p>include 可以将目标文件除了 <template> <wxs> 外的整个代码引入，<br>相当于是拷贝到include 位置。</wxs></template></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- index.wxml --></span></span><br><span class="line"><span class="tag"><<span class="name">include</span> <span class="attr">src</span>=<span class="string">"header.wxml"</span>/></span></span><br></pre></td></tr></table></figure><p>require 引入js文件 module.export 的对象 或wxs文件中引入其它wxs文件。<br>import 可以在该文件中使用目标文件定义的template。<br>import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template</p><figure class="highlight html"><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="tag"><<span class="name">import</span> <span class="attr">src</span>=<span class="string">"item.wxml"</span>/></span></span><br><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">is</span>=<span class="string">"item"</span> <span class="attr">data</span>=<span class="string">"{{text: 'forbar'}}"</span>/></span></span><br></pre></td></tr></table></figure><p>模版使用<br>使用 name 属性，作为模板的名字。然后在<template>内定义代码片段。<br>使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，</template></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">name</span>=<span class="string">"msgItem"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span>></span> {{index}}: {{msg}} <span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">text</span>></span> Time: {{time}} <span class="tag"></<span class="name">text</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">is</span>=<span class="string">"msgItem"</span> <span class="attr">data</span>=<span class="string">"{{...item}}"</span> /></span></span><br></pre></td></tr></table></figure><h2 id="修改数据"><a href="#修改数据" class="headerlink" title="修改数据"></a>修改数据</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">this.data.inx</span><br><span class="line">this.setData({</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><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><view data-idx="{{msg}}"></view></span><br></pre></td></tr></table></figure><h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><ul><li><p>currentTarget 指的是事件绑定的当前组件对象，即被冒泡的事件对象。</p></li><li><p>Target 指的是触发事件的源组件对象,即点击的事件对象。</p></li><li><p>dataset 给添加事件的对象绑定的数据 分别在 currentTarget和Target中</p></li><li><p>wx.navigateTo() 保留当前页面，跳转到应用内的某个页面,跳转过程中，首先会<br>触发onHide()，然后返回页面会触发onShow();相当于切换后台和前台。</p></li><li><p>wx.redirectTo() 关闭当前页面，跳转到应用内的某个页面。跳转过程中，首先会<br>触发onUnload(),不能再返回。</p></li><li><p>wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面</p></li></ul>]]></content>
<summary type="html">
<h2 id="准备"><a href="#准备" class="headerlink" title="准备:"></a>准备:</h2><ol>
<li>注册和申请appid</li>
<li>下载开发工具并完成启动</li>
</ol>
<p><a href="https:/
</summary>
<category term="小程序" scheme="https://www.xin666.cc/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="小程序" scheme="https://www.xin666.cc/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
</entry>
<entry>
<title>jQuery插件开发</title>
<link href="https://www.xin666.cc/jQuery%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/"/>
<id>https://www.xin666.cc/jQuery插件开发/</id>
<published>2018-10-26T01:17:57.000Z</published>
<updated>2021-08-11T07:17:58.996Z</updated>
<content type="html"><![CDATA[<p><strong>译自 <a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">jQuery Plugins / Authoring</a></strong> </p><p>看来 jQuery 你已经用得很爽了，插件和方法来扩展 jQuery 非常强大，把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。</p><h2 id="开始"><a href="#开始" class="headerlink" title="开始"></a>开始</h2><p>要编写一个 jQuery 插件，需要为 jQuery.fn 对象增加一个新的函数属性，属性名就是插件的名字</p><pre><code>jQuery.fn.myPlugin = function() { // 插件的具体内容放在这里};</code></pre><p>等一下！ 我熟悉并钟爱的 $ 哪儿去了？ 它还在，只是为了确保你的插件不与其它使用 $ 的库发生冲突，有一个最佳实践： 把 jQuery 传递给 IIFE（立即调用函数），并通过它映射成 $ ，这样就避免了在执行的作用域里被其它库所覆盖。</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></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"> $ </span>) </span>{</span><br><span class="line"> $.fn.myPlugin = <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="comment">// 插件的具体内容放在这里</span></span><br><span class="line"> </span><br><span class="line"> };</span><br><span class="line">})( jQuery );</span><br></pre></td></tr></table></figure><p>恩，这样好一些。 现在，在此闭包内我们可以随意用 $ 替换 jQuery。</p><h2 id="上下文"><a href="#上下文" class="headerlink" title="上下文"></a>上下文</h2><p>现在，已经有了外壳，可以开始编写真正的插件代码了。但在这之前，关于上下文我有话要说。在插件函数的立即作用域中，关键字 this 指向调用插件的 jQuery 对象。这是个经常出错的地方，因为有些情况下 jQuery 接受一个回调函数，此时 this 指向原生的 DOM 元素。这常常导致开发者在 jQuery 函数中对 this 关键字多作一次无必要的包装。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"> $ </span>)</span>{</span><br><span class="line"> $.fn.myPlugin = <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="comment">// 没有必要再作 $(this) ，因为"this"已经是 jQuery 对象了</span></span><br><span class="line"> <span class="comment">// $(this) 与 $($('#element')) 是相同的</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">this</span>.fadeIn(<span class="string">'normal'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">// 在这里 this 关键字指向 DOM 元素</span></span><br><span class="line"> }); </span><br><span class="line"> }; </span><br><span class="line">})( jQuery );</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">$(<span class="string">'#element'</span>).myPlugin();</span><br></pre></td></tr></table></figure><h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><p>现在理解了 jQuery 插件的上下文以后， 我们来写一个真正能做点儿事儿的插件。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"> $ </span>)</span>{</span><br><span class="line"></span><br><span class="line"> $.fn.maxHeight = <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> max = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> max = <span class="built_in">Math</span>.max( max, $(<span class="keyword">this</span>).height() );</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> max;</span><br><span class="line"> };</span><br><span class="line">})( jQuery );</span><br><span class="line"></span><br><span class="line">--</span><br><span class="line"><span class="keyword">var</span> tallest = $(<span class="string">'div'</span>).maxHeight(); <span class="comment">// 返回最高 div 的高度</span></span><br></pre></td></tr></table></figure><p>这个简单的插件利用 <a href="http://docs.jquery.com/action/edit/Manipulation/height" title="Manipulation/height" target="_blank" rel="noopener">.height()</a> 来返回页面中最高 div 的高度</p><h2 id="保持-chainability"><a href="#保持-chainability" class="headerlink" title="保持 chainability"></a>保持 chainability</h2><p>前面的例子返回了页面上最高 div 的一个整数值，但很多时候插件只是以某种方式修改元素集合，并把它们传给调用链的下一个方法。 这正是 jQuery 设计的漂亮之处，也是它如此流行的原因之一。为保持插件的 chainability ，必须确保插件返回 this 关键字。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"> $ </span>)</span>{</span><br><span class="line"></span><br><span class="line"> $.fn.lockDimensions = <span class="function"><span class="keyword">function</span>(<span class="params"> type </span>) </span>{ </span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.each(<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> $<span class="keyword">this</span> = $(<span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> ( !type || type == <span class="string">'width'</span> ) {</span><br><span class="line"> $<span class="keyword">this</span>.width( $<span class="keyword">this</span>.width() );</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> ( !type || type == <span class="string">'height'</span> ) {</span><br><span class="line"> $<span class="keyword">this</span>.height( $<span class="keyword">this</span>.height() );</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">})( jQuery );</span><br><span class="line"></span><br><span class="line">--</span><br><span class="line">$(<span class="string">'div'</span>).lockDimensions(<span class="string">'width'</span>).css(<span class="string">'color'</span>, <span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><p>插件在立即作用域中返回了 this 关键字，保持了 chainability ，所以 jQuery 集合可以被其它方法操作，例如 <a href="http://docs.jquery.com/CSS/css" title="CSS/css " target="_blank" rel="noopener">.css()</a>。因此，若插件无需真正的返回值，你应该一直在插件函数的立即作用域中返回 this 关键字。同样，如你所想，调用插件时的参数会被传递到插件函数的立即作用域中。在上例中，字符串 “width” 成了插件函数的 type 参数。</p><h2 id="默认设置和选项"><a href="#默认设置和选项" class="headerlink" title="默认设置和选项"></a>默认设置和选项</h2><p>对于那些提供许多选项、更复杂、更可配置的插件，最佳实践是提供一个默认设置，它可在插件调用时（通过 <a href="http://docs.jquery.com/Utilities/jQuery.extend" title="Utilities/jQuery.extend" target="_blank" rel="noopener">$.extend</a>）被扩展。这样调用插件时无需大量参数， 只要一个对象参数，内容为你希望不同于默认值的那部分设置。做法如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"> $ </span>)</span>{</span><br><span class="line"></span><br><span class="line"> $.fn.tooltip = <span class="function"><span class="keyword">function</span>(<span class="params"> options </span>) </span>{ </span><br><span class="line"></span><br><span class="line"> <span class="comment">// Create some defaults, extending them with any options that were provided</span></span><br><span class="line"> <span class="keyword">var</span> settings = $.extend( {</span><br><span class="line"> <span class="string">'location'</span> : <span class="string">'top'</span>,</span><br><span class="line"> <span class="string">'background-color'</span> : <span class="string">'blue'</span></span><br><span class="line"> }, options);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.each(<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="comment">// Tooltip plugin code here</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">})( jQuery );</span><br><span class="line"></span><br><span class="line">--</span><br><span class="line">$(<span class="string">'div'</span>).tooltip({</span><br><span class="line"> <span class="string">'location'</span> : <span class="string">'left'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>在本例中，用给定选项调用 tooltip 插件后， 默认的 location 设置被覆盖为 “left”， 但 bacground-color 设置仍为默认值 “blue”。最终的设置对象看起来这样的：</p><pre><code>{ 'location' : 'left', 'background-color' : 'blue'}</code></pre><p>这是一个非常好的方式， 可以提供一个高度可配置的插件，又不必强制开发者定义所有选项。</p><h2 id="名称空间"><a href="#名称空间" class="headerlink" title="名称空间"></a>名称空间</h2><p>合理地为插件定义名称空间是插件开发中很重要的一部分。 正确的定义名称空间可以确保你的插件很难被其它插件或同一页面中的其它代码所覆盖。名称空间也可以让插件开发者的日子好过一些，因为它能帮你跟踪你的方法、事件和数据。</p><h2 id="插件方法"><a href="#插件方法" class="headerlink" title="插件方法"></a>插件方法</h2><p>单个插件<strong>永远不要</strong>在 jQuery.fn 对象中声明一个以上的名称空间</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"> $ </span>)</span>{</span><br><span class="line"></span><br><span class="line"> $.fn.tooltip = <span class="function"><span class="keyword">function</span>(<span class="params"> options </span>) </span>{ </span><br><span class="line"> <span class="comment">// 这</span></span><br><span class="line"> };</span><br><span class="line"> $.fn.tooltipShow = <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><br><span class="line"> $.fn.tooltipHide = <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><br><span class="line"> $.fn.tooltipUpdate = <span class="function"><span class="keyword">function</span>(<span class="params"> content </span>) </span>{ </span><br><span class="line"> <span class="comment">// !!! </span></span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line">})( jQuery );</span><br></pre></td></tr></table></figure><p>这非常不好，因为它搞乱了 $.fn 名称空间。 要修正这个问题，你应该把所有插件方法收集到一个对象定义当中，并通过传递方法名称字符串调用。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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="params"> $ </span>)</span>{</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> methods = {</span><br><span class="line"> init : <span class="function"><span class="keyword">function</span>(<span class="params"> options </span>) </span>{ </span><br><span class="line"> <span class="comment">// 这 </span></span><br><span class="line"> },</span><br><span class="line"> show : <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><br><span class="line"> hide : <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><br><span class="line"> update : <span class="function"><span class="keyword">function</span>(<span class="params"> content </span>) </span>{ </span><br><span class="line"> <span class="comment">// !!! </span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> $.fn.tooltip = <span class="function"><span class="keyword">function</span>(<span class="params"> method </span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// Method calling logic</span></span><br><span class="line"> <span class="keyword">if</span> ( methods[method] ) {</span><br><span class="line"> <span class="keyword">return</span> methods[ method ].apply( <span class="keyword">this</span>, <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">else</span> <span class="keyword">if</span> ( <span class="keyword">typeof</span> method === <span class="string">'object'</span> || ! method ) {</span><br><span class="line"> <span class="keyword">return</span> methods.init.apply( <span class="keyword">this</span>, <span class="built_in">arguments</span> );</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $.error( <span class="string">'Method '</span> + method + <span class="string">' does not exist on jQuery.tooltip'</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">})( jQuery );</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用 init 方法</span></span><br><span class="line">$(<span class="string">'div'</span>).tooltip(); </span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用 init 方法</span></span><br><span class="line">$(<span class="string">'div'</span>).tooltip({</span><br><span class="line"> foo : <span class="string">'bar'</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">--</span><br><span class="line"><span class="comment">// 调用 hide 方法</span></span><br><span class="line">$(<span class="string">'div'</span>).tooltip(<span class="string">'hide'</span>); </span><br><span class="line"></span><br><span class="line">--</span><br><span class="line"><span class="comment">// 调用 update 方法</span></span><br><span class="line">$(<span class="string">'div'</span>).tooltip(<span class="string">'update'</span>, <span class="string">'This is the new tooltip content!'</span>);</span><br></pre></td></tr></table></figure><p>这种插件架构使你可以在插件的父闭包中封装所有方法，调用时先传方法名称字符串，接下来再把你需要的其它参数传给该方法。这种封装和架构是 jQuery 插件社区的一个标准，已经被无数插件所使用，包括 <a href="http://jqueryui.com/" target="_blank" rel="noopener">jQueryUI</a> 中的插件和小部件。</p><h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><p><a href="http://docs.jquery.com/Events/bind" title="Events/bind" target="_blank" rel="noopener">bind</a> 方法有个鲜为人知的特性：它支持为绑定事件定义名称空间。如果你的插件要绑定事件，最好为其定义名称空间。这样，回头想 <a href="http://docs.jquery.com/Events/unbind" title="Events/unbind" target="_blank" rel="noopener">unbind</a> 的时候就不会影响到相同事件类型上的其它已绑定事件。要为事件定义名称空间，把 “.<namespace>“ 附到要绑定的事件类型后面即可。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br></pre></td><td class="code"><pre><span class="line"> (<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> methods = {</span><br><span class="line"> init : <span class="function"><span class="keyword">function</span>(<span class="params"> options </span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="built_in">window</span>).bind(<span class="string">'resize.tooltip'</span>, methods.reposition);</span><br><span class="line"> });</span><br><span class="line"> </span><br><span class="line"> },</span><br><span class="line"> destroy : <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> <span class="keyword">this</span>.each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="built_in">window</span>).unbind(<span class="string">'.tooltip'</span>);</span><br><span class="line"> })</span><br><span class="line"> </span><br><span class="line"> },</span><br><span class="line"> reposition : <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><br><span class="line"> show : <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><br><span class="line"> hide : <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><br><span class="line"> update : <span class="function"><span class="keyword">function</span>(<span class="params"> content </span>) </span>{ </span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> </span><br><span class="line"> $.fn.tooltip = <span class="function"><span class="keyword">function</span>(<span class="params"> method </span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> ( methods[method] ) {</span><br><span class="line"> <span class="keyword">return</span> methods[method].apply( <span class="keyword">this</span>, <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">else</span> <span class="keyword">if</span> ( <span class="keyword">typeof</span> method === <span class="string">'object'</span> || ! method ) {</span><br><span class="line"> <span class="keyword">return</span> methods.init.apply( <span class="keyword">this</span>, <span class="built_in">arguments</span> );</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $.error( <span class="string">'Method '</span> + method + <span class="string">' does not exist on jQuery.tooltip'</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"> })( jQuery );</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> --</span><br><span class="line"> $(<span class="string">'#fun'</span>).tooltip();</span><br><span class="line"> <span class="comment">// Some time later...</span></span><br><span class="line"> $(<span class="string">'#fun'</span>).tooltip(<span class="string">'destroy'</span>);</span><br><span class="line"><span class="string">``</span><span class="string">`js</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">在本例中，当 tooltip 被 init 方法初始化的时候，它把 reposition 方法绑定到 window 对象的 resize 事件上，名称空间为 "tooltip"。 之后，如果开发者想要销毁对象，可以把插件的名称空间（即 "tooltip"）传给 unbind 方法，以便解除本插件对所有事件的绑定。这使得我们可以安全的地解除本插件的事件绑定，避免意外影响插件之外绑定的事件。</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">## 数据</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">插件开发中，你可能经常需要维护状态，或检查你的插件是否已在给定元素上做过初始化。jQuery [data][] 方法是针对每个元素跟踪变量的好办法。不过最好能用单一对象容纳所有变量并用单一名称空间访问此对象，而不是分别跟踪一堆不同名字的数据。</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">[data]: http://docs.jquery.com/action/edit/Utilities/data "Utilities/data"</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>js</span><br><span class="line"> (<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> methods = {</span><br><span class="line"> init : <span class="function"><span class="keyword">function</span>(<span class="params"> options </span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.each(<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> $<span class="keyword">this</span> = $(<span class="keyword">this</span>),</span><br><span class="line"> data = $<span class="keyword">this</span>.data(<span class="string">'tooltip'</span>),</span><br><span class="line"> tooltip = $(<span class="string">'<div />'</span>, {</span><br><span class="line"> text : $<span class="keyword">this</span>.attr(<span class="string">'title'</span>)</span><br><span class="line"> });</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// If the plugin hasn't been initialized yet</span></span><br><span class="line"> <span class="keyword">if</span> ( ! data ) {</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> Do more setup stuff here</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> </span><br><span class="line"> $(<span class="keyword">this</span>).data(<span class="string">'tooltip'</span>, {</span><br><span class="line"> target : $<span class="keyword">this</span>,</span><br><span class="line"> tooltip : tooltip</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"> destroy : <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> <span class="keyword">this</span>.each(<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> $<span class="keyword">this</span> = $(<span class="keyword">this</span>),</span><br><span class="line"> data = $<span class="keyword">this</span>.data(<span class="string">'tooltip'</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// Namespacing FTW</span></span><br><span class="line"> $(<span class="built_in">window</span>).unbind(<span class="string">'.tooltip'</span>);</span><br><span class="line"> data.tooltip.remove();</span><br><span class="line"> $<span class="keyword">this</span>.removeData(<span class="string">'tooltip'</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"> reposition : <span class="function"><span class="keyword">function</span>(<span class="params"> </span>) </span>{ <span class="comment">// ... },</span></span><br><span class="line"> show : <span class="function"><span class="keyword">function</span>(<span class="params"> </span>) </span>{ <span class="comment">// ... },</span></span><br><span class="line"> hide : <span class="function"><span class="keyword">function</span>(<span class="params"> </span>) </span>{ <span class="comment">// ... },</span></span><br><span class="line"> update : <span class="function"><span class="keyword">function</span>(<span class="params"> content </span>) </span>{ <span class="comment">// ...}</span></span><br><span class="line"> };</span><br><span class="line"> </span><br><span class="line"> $.fn.tooltip = <span class="function"><span class="keyword">function</span>(<span class="params"> method </span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> ( methods[method] ) {</span><br><span class="line"> <span class="keyword">return</span> methods[method].apply( <span class="keyword">this</span>, <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">else</span> <span class="keyword">if</span> ( <span class="keyword">typeof</span> method === <span class="string">'object'</span> || ! method ) {</span><br><span class="line"> <span class="keyword">return</span> methods.init.apply( <span class="keyword">this</span>, <span class="built_in">arguments</span> );</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $.error( <span class="string">'Method '</span> + method + <span class="string">' does not exist on jQuery.tooltip'</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"> })( jQuery );</span><br></pre></td></tr></table></figure><p>data 方法可以帮你在插件的多次方法调用之间跟踪变量和状态。 把数据置于单一对象中，并为其定义名称空间有利于集中访问插件的所有属性，同时也减少了名称空间以便需要时删除。</p><h2 id="总结及最佳实践"><a href="#总结及最佳实践" class="headerlink" title="总结及最佳实践"></a>总结及最佳实践</h2><p>编写 jQuery 插件使库更加高效。把你最聪明、最有用的功能抽象成可重用代码，这将节省你的时间，进一步提高开发效率。下面是本文档的简要总结以及你开发下一个 jQuery 插件时的注意事项：</p><ul><li>总是把插件包装在闭包中 <code>{ /* plugin goes here */ })( jQuery );</code></li><li>不在插件函数的立即作用域中额外包装 this 关键字</li><li>总是让插件函数返回 this 关键字以保持 chainability ，除非插件有真正的返回值。</li><li>不要传给插件大量参数，应该传一个可以覆盖插件默认选项的设置对象。</li><li>在单个插件中，不要让一个以上的名称空间搞乱了 jQuery.fn 对象。</li><li>总是为方法、事件和数据定义名称空间。</li></ul><p>推荐：<br><a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html" target="_blank" rel="noopener">jQuery插件开发精品教程</a> </p>]]></content>
<summary type="html">
<p><strong>译自 <a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">jQuery Plugins / Authoring</a></strong> </p>
</summary>
<category term="Jquery" scheme="https://www.xin666.cc/categories/Jquery/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="Jquery" scheme="https://www.xin666.cc/tags/Jquery/"/>
</entry>
<entry>
<title>浏览器多进程和JS单线程</title>
<link href="https://www.xin666.cc/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A4%9A%E8%BF%9B%E7%A8%8B%E5%92%8CJS%E5%8D%95%E7%BA%BF%E7%A8%8B/"/>
<id>https://www.xin666.cc/浏览器多进程和JS单线程/</id>
<published>2018-10-10T01:50:17.000Z</published>
<updated>2021-08-11T07:17:59.009Z</updated>
<content type="html"><![CDATA[<h2 id="进程和线程"><a href="#进程和线程" class="headerlink" title="进程和线程"></a>进程和线程</h2><p>进程是cpu资源分配的最小单位,系统会给它分配内存,是能拥有资源和独立运行的最小单位。<br>线程是cpu调度的最小单位，线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程。<br>单线程与多线程，都是指在一个进程内的单和多。所以核心还是得属于一个进程才行。</p><p><strong>浏览器是多进程的</strong><br>浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）<br>每打开一个Tab页，就相当于创建了一个独立的浏览器进程。</p><a id="more"></a> <p><strong>浏览器都包含哪些进程</strong> </p><ol><li>Browser进程</li><li>第三方插件进程</li><li>GPU进程</li><li>浏览器渲染进程</li></ol><h2 id="浏览器内核（渲染进程）"><a href="#浏览器内核（渲染进程）" class="headerlink" title="浏览器内核（渲染进程）"></a>浏览器内核（渲染进程）</h2><p>浏览器的渲染进程是多线程的，页面的渲染，JS的执行，事件的循环，都在这个进程内进行。</p><h3 id="GUI进程中有哪些线程？"><a href="#GUI进程中有哪些线程？" class="headerlink" title="GUI进程中有哪些线程？"></a>GUI进程中有哪些线程？</h3><ol><li>GUI渲染线程</li><li>JS引擎线程</li><li>事件触发线程</li><li>定时触发器线程</li><li>异步http请求线程</li></ol><h3 id="浏览器内核中线程之间的关系"><a href="#浏览器内核中线程之间的关系" class="headerlink" title="浏览器内核中线程之间的关系"></a>浏览器内核中线程之间的关系</h3><p><strong>GUI渲染线程与JS引擎线程互斥</strong> </p><ul><li>由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。<br>因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎为互斥的关系，当JS引擎执行时GUI线程会被挂起，</li><li>GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。</li><li><em>JS阻塞页面加载*</em> </li></ul><p>从上述的互斥关系，可以推导出，JS如果执行时间过长就会阻塞页面。<br><strong>WebWorker，JS的多线程？</strong> </p><ul><li>创建Worker时，JS引擎向浏览器申请开一个子线程（子线程是浏览器开的，完全受主线程控制，而且不能操作DOM）</li><li>JS引擎线程与worker线程间通过特定的方式通信（postMessage API，需要通过序列化对象来与线程交互特定的数据）</li></ul><blockquote><p>JS引擎是单线程的，这一点的本质仍然未改变，Worker可以理解是浏览器给JS引擎开的外挂，专门用来解决那些大量计算问题。</p></blockquote><p><strong>WebWorker与SharedWorker</strong> </p><ul><li><p>WebWorker只属于某个页面，不会和其他页面的Render进程（浏览器内核进程）共享</p><ul><li>所以Chrome在Render进程中（每一个Tab页就是一个render进程）创建一个新的线程来运行Worker中的JavaScript程序。</li></ul></li><li><p>SharedWorker是浏览器所有页面共享的，不能采用与Worker同样的方式实现，因为它不隶属于某个Render进程，可以为多个Render进程共享使用</p><ul><li>所以Chrome浏览器为SharedWorker单独创建一个进程来运行JavaScript程序，在浏览器中每个相同的JavaScript只存在一个SharedWorker进程，不管它被创建多少次。</li></ul></li></ul><blockquote><p>本质上就是进程和线程的区别。SharedWorker由独立的进程管理，WebWorker只是属于render进程下的一个线程</p></blockquote><h2 id="浏览器渲染流程"><a href="#浏览器渲染流程" class="headerlink" title="浏览器渲染流程"></a>浏览器渲染流程</h2><h2 id="从Event-Loop谈JS的运行机制"><a href="#从Event-Loop谈JS的运行机制" class="headerlink" title="从Event Loop谈JS的运行机制"></a>从Event Loop谈JS的运行机制</h2><ul><li>主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。</li><li>一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。</li></ul><p><strong>macrotask与microtask</strong><br>JS中分为两种任务类型：macrotask和microtask，在ECMAScript中，microtask称为jobs，macrotask可称为task</p><p><strong>区别</strong> </p><ul><li><p>macrotask（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）</p><ul><li>每一个task会从头到尾将这个任务执行完毕，不会执行其它</li><li>浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 （task->渲染->task->…）</li></ul></li><li><p>microtask（又称为微任务），可以理解是在当前 task 执行结束后立即执行的任务</p><ul><li>也就是说，在当前task任务后，下一个task之前，在渲染之前</li><li>所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染</li><li>也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）</li></ul></li></ul><p>转载：<br><a href="https://juejin.im/post/5a6547d0f265da3e283a1df7" target="_blank" rel="noopener">从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理</a><br>推荐：<br><a href="https://wangdoc.com/javascript/bom/engine.html" target="_blank" rel="noopener">浏览器模型</a></p>]]></content>
<summary type="html">
<h2 id="进程和线程"><a href="#进程和线程" class="headerlink" title="进程和线程"></a>进程和线程</h2><p>进程是cpu资源分配的最小单位,系统会给它分配内存,是能拥有资源和独立运行的最小单位。<br>线程是cpu调度的最小单位，线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程。<br>单线程与多线程，都是指在一个进程内的单和多。所以核心还是得属于一个进程才行。</p>
<p><strong>浏览器是多进程的</strong><br>浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）<br>每打开一个Tab页，就相当于创建了一个独立的浏览器进程。</p>
</summary>
<category term="JavaScript" scheme="https://www.xin666.cc/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
</entry>
<entry>
<title>Ubuntu18安装后要做的事</title>
<link href="https://www.xin666.cc/Ubuntu18%E5%AE%89%E8%A3%85%E5%90%8E%E8%A6%81%E5%81%9A%E7%9A%84%E4%BA%8B/"/>
<id>https://www.xin666.cc/Ubuntu18安装后要做的事/</id>
<published>2018-09-17T02:44:00.000Z</published>
<updated>2021-08-11T07:17:58.989Z</updated>
<content type="html"><![CDATA[<h2 id="安装Ubuntu"><a href="#安装Ubuntu" class="headerlink" title="安装Ubuntu"></a>安装Ubuntu</h2><p><strong>工具</strong> </p><ul><li>U盘一个</li><li><a href="http://rufus.akeo.ie/" target="_blank" rel="noopener">refus</a> 软件一个</li><li>PC一台</li><li><a href="https://www.ubuntu.com" target="_blank" rel="noopener">Ubuntu镜像</a></li></ul><p><strong>写入U盘</strong> </p><p><img src="http://p09g3b06f.bkt.clouddn.com/refus%E4%BD%BF%E7%94%A8.png" alt="refus使用"></p><ol><li><strong><code>boot</code></strong> 引导分区: 300~500M <strong>/boot</strong> </li><li><strong><code>/</code></strong> 根目录分区: 大于20g</li><li><strong><code>/home</code></strong> 用户目录分区: 剩余空间</li><li><strong><code>swap</code></strong> 交换分区: 可以不用分，如果内存低于4g设置为内存的2倍大小</li></ol><blockquote><p> <strong>注意</strong> <code>boot</code>和<code>/</code>分区是必须要有的，其它分区可无。</p></blockquote><a id="more"></a> <h2 id="Ubuntu安装后要做的事"><a href="#Ubuntu安装后要做的事" class="headerlink" title="Ubuntu安装后要做的事"></a>Ubuntu安装后要做的事</h2><h3 id="1-更新源"><a href="#1-更新源" class="headerlink" title="1. 更新源"></a>1. 更新源</h3><ul><li>备份源<code>sudo cp /etc/apt/sources.list ./sources.list.back</code></li><li>找到Software & Updates，将源更新为阿里云的源 </li><li>在Other Software里将Canonical Partners勾上。</li></ul><p>更新： </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 更新源配置</span></span><br><span class="line">sudo apt update</span><br><span class="line"><span class="comment"># 更新软件</span></span><br><span class="line">sudo apt upgrade</span><br></pre></td></tr></table></figure><h3 id="2-安装压缩工具"><a href="#2-安装压缩工具" class="headerlink" title="2. 安装压缩工具"></a>2. 安装压缩工具</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install p7zip-full p7zip-rar rar unzip</span><br></pre></td></tr></table></figure><h3 id="3-重新安装vim"><a href="#3-重新安装vim" class="headerlink" title="3. 重新安装vim"></a>3. 重新安装vim</h3><figure class="highlight bash"><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">sudo apt-get --purge remove vi</span><br><span class="line">sudo apt-get install vim</span><br></pre></td></tr></table></figure><h3 id="4-清理apt包"><a href="#4-清理apt包" class="headerlink" title="4. 清理apt包"></a>4. 清理apt包</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 此命令会将 /var/cache/apt/archives/ 下的 所有 deb 删掉，相当于清理下载的软件安装包。</span></span><br><span class="line">apt-get clean </span><br><span class="line"><span class="comment"># 删除为了满足某些依赖安装的，但现在不再需要的软件包。</span></span><br><span class="line">apt-get autoclean</span><br></pre></td></tr></table></figure><h3 id="5-支持exfat"><a href="#5-支持exfat" class="headerlink" title="5. 支持exfat"></a>5. 支持exfat</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install exfat-fuse exfat-utils</span><br></pre></td></tr></table></figure><h3 id="6-安装pdf阅读器"><a href="#6-安装pdf阅读器" class="headerlink" title="6. 安装pdf阅读器"></a>6. 安装pdf阅读器</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install okular</span><br></pre></td></tr></table></figure><h3 id="7-安装Chrome"><a href="#7-安装Chrome" class="headerlink" title="7. 安装Chrome"></a>7. 安装Chrome</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 1. 将下载源加入到系统的源列表（添加依赖）</span></span><br><span class="line">sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/</span><br><span class="line"><span class="comment"># 2. 导入谷歌软件的公钥，用于对下载软件进行验证。</span></span><br><span class="line">wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -</span><br><span class="line"><span class="comment"># 3. 更新依赖</span></span><br><span class="line">sudo apt-get update</span><br><span class="line"><span class="comment"># 4. 安装谷歌稳定版</span></span><br><span class="line">sudo apt-get install google-chrome-stable</span><br></pre></td></tr></table></figure><h3 id="8-配置vim"><a href="#8-配置vim" class="headerlink" title="8. 配置vim"></a>8. 配置vim</h3><p><a href="https://github.com/wklken/k-vim" target="_blank" rel="noopener">k-vim</a></p><h3 id="9-安装视频"><a href="#9-安装视频" class="headerlink" title="9. 安装视频"></a>9. 安装视频</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 安装解码器</span></span><br><span class="line">sudo apt-get install ubuntu-restricted-extras </span><br><span class="line"><span class="comment"># 安装VLC视频播放器</span></span><br><span class="line">sudo apt-get install vlc browser-plugin-vlc</span><br></pre></td></tr></table></figure><h3 id="10-安装网易云"><a href="#10-安装网易云" class="headerlink" title="10. 安装网易云"></a>10. 安装网易云</h3><p>下载<a href="http://music.163.com/#/download" target="_blank" rel="noopener">网易云</a> </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 安装网易云deb包</span></span><br><span class="line">sudo dpkg -i netease-cloud-music*.deb</span><br><span class="line"><span class="comment"># 启动网易云</span></span><br><span class="line">sudo netease-cloud-music</span><br></pre></td></tr></table></figure><h3 id="11-点击图标小化"><a href="#11-点击图标小化" class="headerlink" title="11. 点击图标小化"></a>11. 点击图标小化</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gsettings <span class="built_in">set</span> org.gnome.shell.extensions.dash-to-dock click-action <span class="string">'minimize'</span></span><br></pre></td></tr></table></figure><h3 id="12-截图软件"><a href="#12-截图软件" class="headerlink" title="12. 截图软件"></a>12. 截图软件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#安装shutter</span></span><br><span class="line">sudo apt-get install shutter</span><br></pre></td></tr></table></figure><h3 id="13-安装WPS"><a href="#13-安装WPS" class="headerlink" title="13. 安装WPS"></a>13. 安装WPS</h3><p>下载<a href="http://www.wps.cn/product/wpslinux/" target="_blank" rel="noopener">WPS Linux</a><br>安装依赖<a href="http://kr.archive.ubuntu.com/ubuntu/pool/main/libp/libpng" target="_blank" rel="noopener">libpng</a></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">sudo dpkg -i libpng.deb</span><br><span class="line">sudo dpkg -i wps*.deb</span><br><span class="line"><span class="comment"># 如果出错 运行</span></span><br><span class="line">sudo apt-get install -f</span><br><span class="line"><span class="comment"># 重新安装</span></span><br><span class="line">sudo dpkg -i wps*.deb</span><br></pre></td></tr></table></figure><p>WPS缺少字体:<br>下载<a href="https://pan.baidu.com/s/1QJbyRDP7yu7F3pryKgdrYQ" target="_blank" rel="noopener">WPS字体</a></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">sudo mkdir /usr/share/fonts/WPS-Fonts <span class="comment">#新建wps字体存储文件夹</span></span><br><span class="line"><span class="built_in">cd</span> ~/Downloads <span class="comment">#进入下载好的字体目录</span></span><br><span class="line">sudo apt-get install unzip <span class="comment">#安装zip解压软件</span></span><br><span class="line">sudo unzip wps_symbol_fonts.zip -d /usr/share/fonts/WPS-Fonts/ <span class="comment">#解压字体到指定文件夹</span></span><br><span class="line">sudo mkfontscale <span class="comment">#生成字体索引</span></span><br><span class="line">sudo mkfontdir <span class="comment">#生成字体索引</span></span><br><span class="line">sudo <span class="built_in">fc</span>-cache <span class="comment">#更新字体缓存</span></span><br></pre></td></tr></table></figure><h3 id="14-安装搜狗输入法"><a href="#14-安装搜狗输入法" class="headerlink" title="14. 安装搜狗输入法"></a>14. 安装搜狗输入法</h3><p>下载: <a href="https://pinyin.sogou.com/linux/" target="_blank" rel="noopener">搜狗输入法linux版</a></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install fcitx-bin <span class="comment">#安装fcitx-bin</span></span><br><span class="line">sudo apt-get update --fix-missing <span class="comment">#修复fcitx-bin安装失败的情况</span></span><br><span class="line">sudo apt-get install fcitx-bin <span class="comment">#重新安装fcitx-bin</span></span><br><span class="line">sudo apt-get install fcitx-table <span class="comment">#安装fcitx-table</span></span><br><span class="line"></span><br><span class="line">sudo dpkg -i sogoupinyin*.deb <span class="comment">#安装搜狗拼音</span></span><br><span class="line">sudo apt-get install -f <span class="comment">#修复搜狗拼音安装的错误</span></span><br><span class="line">sudo dpkg -i sogoupinyin*.deb <span class="comment">#重新安装搜狗拼音</span></span><br></pre></td></tr></table></figure><h3 id="15-使用Tweaks"><a href="#15-使用Tweaks" class="headerlink" title="15. 使用Tweaks"></a>15. 使用Tweaks</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install gnome-tweak-tool <span class="comment">#安装tweak</span></span><br><span class="line">sudo apt-get install gnome-shell-extensions -y <span class="comment">#安装shell扩展</span></span><br><span class="line">sudo apt install chrome-gnome-shell <span class="comment">#为了能在浏览器内安装gnome插件，火狐和谷歌都能用</span></span><br><span class="line">sudo apt-get install gtk2-engines-pixbuf <span class="comment">#防止GTK2错误</span></span><br><span class="line">sudo apt install libxml2-utils</span><br></pre></td></tr></table></figure><h3 id="16-安装最新nodejs"><a href="#16-安装最新nodejs" class="headerlink" title="16. 安装最新nodejs"></a>16. 安装最新nodejs</h3><p><a href="https://github.com/nodesource/distributions" target="_blank" rel="noopener">nodejs</a></p><figure class="highlight bash"><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">curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -</span><br><span class="line">sudo apt-get install -y nodejs</span><br></pre></td></tr></table></figure><h3 id="17-安装typora"><a href="#17-安装typora" class="headerlink" title="17. 安装typora"></a>17. 安装typora</h3><p><a href="https://www.typora.io/#linux" target="_blank" rel="noopener">官网</a> </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">wget -qO - https://typora.io/linux/public-key.asc | sudo apt-key add -</span><br><span class="line">sudo add-apt-repository <span class="string">'deb https://typora.io/linux ./'</span></span><br><span class="line">sudo apt-get update</span><br><span class="line">sudo apt-get install typora</span><br></pre></td></tr></table></figure><h3 id="18-安装sublime-text3"><a href="#18-安装sublime-text3" class="headerlink" title="18. 安装sublime text3"></a>18. 安装sublime text3</h3><p><a href="https://www.sublimetext.com/docs/3/linux_repositories.html#apt" target="_blank" rel="noopener">官网</a> </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 下载key并添加key</span></span><br><span class="line">wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -</span><br><span class="line"><span class="comment"># 确保APT设置为与HTTPS源一起工作</span></span><br><span class="line">sudo apt-get install apt-transport-https</span><br><span class="line"><span class="built_in">echo</span> <span class="string">"deb https://download.sublimetext.com/ apt/stable/"</span> | sudo tee /etc/apt/sources.list.d/sublime-text.list</span><br><span class="line"><span class="comment"># 更新</span></span><br><span class="line">sudo apt-get update</span><br><span class="line"><span class="comment"># 安装</span></span><br><span class="line">sudo apt-get install sublime-text</span><br></pre></td></tr></table></figure><h3 id="19-安装Git"><a href="#19-安装Git" class="headerlink" title="19. 安装Git"></a>19. 安装Git</h3><p><a href="https://www.git-scm.com/download/linux" target="_blank" rel="noopener">官网</a> </p><figure class="highlight bash"><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">sudo add-apt-repository ppa:git-core/ppa </span><br><span class="line">sudo apt update; apt install git</span><br></pre></td></tr></table></figure><h3 id="20-安装tree"><a href="#20-安装tree" class="headerlink" title="20. 安装tree"></a>20. 安装tree</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt install tree</span><br></pre></td></tr></table></figure><h3 id="21-安装golang"><a href="#21-安装golang" class="headerlink" title="21. 安装golang"></a>21. 安装golang</h3><p>下载： <a href="https://studygolang.com/dl" target="_blank" rel="noopener">golang</a> </p><p>将安装文件解压至指定目录: </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo tar -zxvf go1.4.2.linux-amd64.tar.gz -C /usr/<span class="built_in">local</span>/</span><br></pre></td></tr></table></figure><p><code>编辑 /etc/profile 文件添加环境变量</code> </p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">export GOROOT=/usr/local/go</span><br><span class="line">export GOBIN=$GOROOT/bin</span><br><span class="line">export PATH=$PATH:$GOBIN</span><br><span class="line">export GOPATH=$HOME/goproj</span><br></pre></td></tr></table></figure><h3 id="22-安装yarn"><a href="#22-安装yarn" class="headerlink" title="22. 安装yarn"></a>22. 安装yarn</h3><p><a href="https://yarn.bootcss.com/docs/install/#debian-stable" target="_blank" rel="noopener">官网</a> </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -</span><br><span class="line"><span class="built_in">echo</span> <span class="string">"deb https://dl.yarnpkg.com/debian/ stable main"</span> | sudo tee /etc/apt/sources.list.d/yarn.list</span><br><span class="line">sudo apt-get update && sudo apt-get install yarn</span><br></pre></td></tr></table></figure><h3 id="23-安装shadowscoks-qt5"><a href="#23-安装shadowscoks-qt5" class="headerlink" title="23. 安装shadowscoks-qt5"></a>23. 安装shadowscoks-qt5</h3><p><strong>1. 安装ss客户端</strong><br><a href="https://code.launchpad.net/~hzwhuang/+archive/ubuntu/ss-qt5" target="_blank" rel="noopener">ss-qt5源</a></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">sudo add-apt-repository ppa:hzwhuang/ss-qt5</span><br><span class="line"><span class="comment"># 将源中的bionic改成artful</span></span><br><span class="line">sudo apt-get update</span><br><span class="line">sudo apt-get install shadowsocks-qt5</span><br></pre></td></tr></table></figure><p><strong>2. 下载genpac:</strong> </p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo pip install -i https://pypi.douban.com/simple genpac</span><br></pre></td></tr></table></figure><p>生成pac文件(默认生成的文件位于home/用户名下):</p><p><strong>3. 打开ubuntu系统的:设置-网络-网络代理,设置为”自动”,将上面生成的pac文件的路径复制到”配置URL”中</strong> </p><blockquote><p>这里需要说明的是，路径复制到URL时，格式为：file:/+你的路径，例如我的是：<code>file:///home/abc/snap/Shadows/autoproxy.pac</code></p></blockquote><h3 id="24-安装SimpleScreenRecorder视频录制"><a href="#24-安装SimpleScreenRecorder视频录制" class="headerlink" title="24. 安装SimpleScreenRecorder视频录制"></a>24. 安装SimpleScreenRecorder视频录制</h3><figure class="highlight shell"><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">sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder</span><br><span class="line">sudo apt-get update</span><br><span class="line">sudo apt-get install simplescreenrecorder</span><br></pre></td></tr></table></figure><p>如果你需要在 64 位 Ubuntu 上录制 32位 OpenGL 应用程序，请安装 simplescreenrecorder-lib:i386 </p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install simplescreenrecorder-lib:i386</span><br></pre></td></tr></table></figure><h3 id="25-安装-lrzsz文件传送"><a href="#25-安装-lrzsz文件传送" class="headerlink" title="25. 安装 lrzsz文件传送"></a>25. 安装 lrzsz文件传送</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo apt-get install lrzsz</span><br></pre></td></tr></table></figure><h3 id="安装显卡驱动"><a href="#安装显卡驱动" class="headerlink" title="安装显卡驱动"></a>安装显卡驱动</h3><p><a href="https://blog.csdn.net/tjuyanming/article/details/80862290" target="_blank" rel="noopener">教程</a></p><figure class="highlight bash"><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">ubuntu-drivers devices</span><br><span class="line">sudo ubuntu-drivers autoinstall</span><br></pre></td></tr></table></figure><h3 id="修复引导"><a href="#修复引导" class="headerlink" title="修复引导"></a>修复引导</h3><p><a href="https://blog.csdn.net/zero_hzz/article/details/79205422" target="_blank" rel="noopener">修复引导</a><br><a href="https://blog.csdn.net/qq_34562959/article/details/81095716" target="_blank" rel="noopener">修复引导之后出现多余的选项</a></p>]]></content>
<summary type="html">
<h2 id="安装Ubuntu"><a href="#安装Ubuntu" class="headerlink" title="安装Ubuntu"></a>安装Ubuntu</h2><p><strong>工具</strong> </p>
<ul>
<li>U盘一个</li>
<li><a href="http://rufus.akeo.ie/" target="_blank" rel="noopener">refus</a> 软件一个</li>
<li>PC一台</li>
<li><a href="https://www.ubuntu.com" target="_blank" rel="noopener">Ubuntu镜像</a></li>
</ul>
<p><strong>写入U盘</strong> </p>
<p><img src="http://p09g3b06f.bkt.clouddn.com/refus%E4%BD%BF%E7%94%A8.png" alt="refus使用"></p>
<ol>
<li><strong><code>boot</code></strong> 引导分区: 300~500M <strong>/boot</strong> </li>
<li><strong><code>/</code></strong> 根目录分区: 大于20g</li>
<li><strong><code>/home</code></strong> 用户目录分区: 剩余空间</li>
<li><strong><code>swap</code></strong> 交换分区: 可以不用分，如果内存低于4g设置为内存的2倍大小</li>
</ol>
<blockquote>
<p> <strong>注意</strong> <code>boot</code>和<code>/</code>分区是必须要有的，其它分区可无。</p>
</blockquote>
</summary>
<category term="Linux" scheme="https://www.xin666.cc/categories/Linux/"/>
<category term="Linux" scheme="https://www.xin666.cc/tags/Linux/"/>
<category term="Ubuntu" scheme="https://www.xin666.cc/tags/Ubuntu/"/>
</entry>
<entry>
<title>CSS3属性总结</title>
<link href="https://www.xin666.cc/CSS3%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/"/>
<id>https://www.xin666.cc/CSS3属性总结/</id>
<published>2018-09-07T09:39:00.000Z</published>
<updated>2021-08-11T07:17:58.974Z</updated>
<content type="html"><![CDATA[<p>css属性简写总结：<br><code>background,font,transition,animation,margin,padding,border,transform,linear-gradient</code></p><h2 id="background背景"><a href="#background背景" class="headerlink" title="background背景"></a>background背景</h2><p><strong>简写语法： background:bg-color bg-image pos/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;</strong> </p><p>| 属性 | 值 | 说明 |<br>| —— | —— |<br>| 1. background-color| color或transparent | 设置背景颜色 |<br>| 2. background-image | url(path) | 设置背景图片 |<br>| 3. background-position | 10% 50% | 设置背景位置 |<br>| 4. background-size | cover，100% | 设置背景图片大小 |<br>| 5. background-repeat | no-reapeat，reapeat | 设置图片是否重复 |<br>| 6. background-origin | content-box，padding-box，border-box | 指定了背景图像的位置区域。 |<br>| 7. background-clip | content-box，padding-box，border-box | 背景剪裁属性是从指定位置开始绘制。 |<br>| 8. background-attachment | scroll，fixed | 属性设置背景图像是否固定或者随着页面的其余部分滚动 | </p><a id="more"></a><h2 id="margin和padding"><a href="#margin和padding" class="headerlink" title="margin和padding"></a>margin和padding</h2><p><strong>简写语法： margin: top right bottom left;</strong><br><strong>简写语法： padding: top right bottom left;</strong> </p><h2 id="border边框"><a href="#border边框" class="headerlink" title="border边框"></a>border边框</h2><p><strong>简写语法： border: width style color</strong><br><strong>简写语法： outline: width style color</strong><br>border-width 边框宽度<br>border-style 边框样式 solid、dashed、dotted、double…<br>border-color 边框颜色</p><h3 id="border-radius圆角"><a href="#border-radius圆角" class="headerlink" title="border-radius圆角"></a>border-radius圆角</h3><p><strong>简写语法： border-radius: 1-4 length|% / 1-4 length|%</strong> </p><blockquote><p>每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。</p></blockquote><p><strong>简写语法： border-top-left-radius: length|% [length|%];</strong><br>border-top-left<br>border-top-right<br>border-bottom-left<br>border-bottom-right</p><blockquote><p> border-top-left–radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。</p></blockquote><h3 id="border-image"><a href="#border-image" class="headerlink" title="border-image"></a>border-image</h3><p><strong>简写语法： border-image: source slice width outset repeat|initial|inherit;</strong><br>border-image:url(border.png) 30 30 round;设置边框图片</p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>1. border-image-source</td><td>用于指定要用于绘制边框的图像的路径</td></tr><tr><td>2. border-image-slice</td><td>图像边界向内偏移</td></tr><tr><td>3. border-image-width</td><td>图像边界的宽度</td></tr><tr><td>4. border-image-outset</td><td>用于指定在边框外部绘制 border-image-area 的量</td></tr><tr><td>5. border-image-repeat</td><td>用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）</td></tr></tbody></table><h3 id="box-shadow"><a href="#box-shadow" class="headerlink" title="box-shadow"></a>box-shadow</h3><p><strong>简写语法： box-shadow: h-shadow v-shadow blur spread color inset;</strong> </p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>h-shadow</td><td>必需的。水平阴影的位置。允许负值</td></tr><tr><td>v-shadow</td><td>必需的。垂直阴影的位置。允许负值</td></tr><tr><td>blur</td><td>可选。模糊距离</td></tr><tr><td>spread</td><td>可选。阴影的大小</td></tr><tr><td>color</td><td>可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表</td></tr><tr><td>inset</td><td>可选。从外层的阴影（开始时）改变阴影内侧阴影</td></tr></tbody></table><h3 id="box-sizing"><a href="#box-sizing" class="headerlink" title="box-sizing"></a>box-sizing</h3><p><strong>语法： box-sizing: content-box|border-box|inherit:</strong><br>content-box 指定元素的宽度和高度为元素的内容<br>border-box 指定元素的宽度和高度为元素的内容+填充+边框</p><h2 id="font字体"><a href="#font字体" class="headerlink" title="font字体"></a>font字体</h2><p><strong>简写语法： font: font-style font-variant font-weight font-size/line-height font-family</strong> </p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>1. font-style</td><td>规定字体样式</td></tr><tr><td>2. font-variant</td><td>规定字体异体</td></tr><tr><td>3. font-weight</td><td>规定字体粗细</td></tr><tr><td>4. font-size/line-height</td><td>规定字体尺寸和行高</td></tr><tr><td>5. font-family</td><td>规定字体类型系列。</td></tr></tbody></table><h3 id="font-style"><a href="#font-style" class="headerlink" title="font-style:"></a>font-style:</h3><p>normal 默认值。浏览器显示一个标准的字体样式。<br>italic 浏览器会显示一个斜体的字体样式。<br>oblique 浏览器会显示一个倾斜的字体样式。<br>inherit 规定应该从父元素继承字体样式。</p><h3 id="font-variant"><a href="#font-variant" class="headerlink" title="font-variant:"></a>font-variant:</h3><p>normal 默认值。浏览器会显示一个标准的字体。<br>small-caps 浏览器会显示小型大写字母的字体。<br>inherit 规定应该从父元素继承 font-variant 属性的值。 </p><h3 id="font-weight"><a href="#font-weight" class="headerlink" title="font-weight:"></a>font-weight:</h3><p>normal 默认值。定义标准的字符。<br>bold 定义粗体字符。<br>bolder 定义更粗的字符。<br>lighter 定义更细的字符。<br>100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。</p><h2 id="list-style"><a href="#list-style" class="headerlink" title="list-style"></a>list-style</h2><p><strong>简写语法： list-style: list-style-type list-style-position list-style-image</strong><br><code>list-style: square inside url("sqpurple.gif")</code><br>list-style-type 设置列表项标记的类型。inside,outside<br>list-style-position 设置在何处放置列表项标记。<br>list-style-image 使用图像来替换列表项的标记。</p><h2 id="text属性"><a href="#text属性" class="headerlink" title="text属性"></a>text属性</h2><table><thead><tr><th>属性</th><th>值</th><th>说明</th></tr></thead><tbody><tr><td>text-align</td><td>center或left或right或justify</td><td>属性规定文本块中首行文本的缩进</td></tr><tr><td>text-align-last</td><td>center或left或right或justify</td><td>设置如何对齐最后一行或紧挨着强制换行符之前的行。</td></tr><tr><td>text-indent</td><td>2em</td><td>——</td></tr><tr><td>text-decoration</td><td>underline或overline或line-through或blink</td><td>定义文本线</td></tr><tr><td>text-overflow</td><td>clip或ellipsis或string</td><td>修剪文本/显示省略符号来代表被修剪的文本。</td></tr><tr><td>text-shadow</td><td>x y blur color</td><td>属性向文本添加一个或多个阴影</td></tr><tr><td>text-transform</td><td>none或capitalize或uppercase或lowercase或inherit</td><td>修改字体大小写</td></tr><tr><td>word-wrap</td><td>normal或break-word</td><td>默认在长单词或 URL 地址内部进行换行</td></tr><tr><td>word-break</td><td>normal或break-all或keep-all</td><td>默认或允许在单词内换行或只能在半角空格或连字符处换行</td></tr><tr><td>white-space</td><td>normal或nowrap或pre或pre-line或pre-wrap或inherit</td><td>元素内的空白符的处理方式。</td></tr><tr><td>word-spacing</td><td>normal或length或inherit</td><td>增加或减少单词间的间距。</td></tr><tr><td>litter-space</td><td>normal或nowrap或pre或pre-line或pre-wrap或inherit</td><td>属性增加或减少字符间的空白（字符间距）</td></tr></tbody></table><p><strong>word-wrap和word-break的区别：</strong><br><a href="http://imweb.io/topic/59fe82991f0e50753869bf8c" target="_blank" rel="noopener">word-break 和 word-wrap 的区别</a><br><a href="https://bobscript.com/archives/236/" target="_blank" rel="noopener">white-space和word-spacing</a> </p><blockquote><p>word-wrap 强调的是是否允许单词内断句，而word-break强调的则是怎么样来进行单词内的断句。 </p></blockquote><h2 id="伪元素和伪类"><a href="#伪元素和伪类" class="headerlink" title="伪元素和伪类"></a>伪元素和伪类</h2><p>CSS3规范中的要求使用双冒号(::)表示伪元素，使用单冒号(:)以此来区分伪元素和伪类<br><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements" target="_blank" rel="noopener">mdn伪类</a><br><a href="http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/" target="_blank" rel="noopener">伪类和伪元素</a></p><h2 id="transition过度"><a href="#transition过度" class="headerlink" title="transition过度"></a>transition过度</h2><p><strong>简写语法： transition: property duration timing-function delay;</strong><br>transition: width 2s ease, height 2s, transform 2s;</p><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>transition-property</td><td>指定CSS属性的name，transition效果</td></tr><tr><td>transition-duration</td><td>transition效果需要指定多少秒或毫秒才能完成</td></tr><tr><td>transition-timing-function</td><td>指定transition效果的转速曲线,</td></tr><tr><td>transition-delay</td><td>定义transition效果开始的时候</td></tr></tbody></table><p><code>transition-timing-function: linearease|ease-in|ease-out|ease-in-out</code><br>linear 线性，速度不变，规定以相同速度开始至结束的过渡效果<br>ease 减速，与 ease-in-out 基本相同，规定慢速开始，然后变快，然后慢速结束的过渡效果<br>ease-in 加速，低速 ~ 正常，规定以慢速开始的过渡效果<br>ease-out 减速，正常 ~ 低速，规定以慢速结束的过渡效果（<br>ease-in-out 先加速后减速，低速 ~ 正常 ~ 低速，规定以慢速开始和结束的过渡效果</p><h2 id="transform变换属性"><a href="#transform变换属性" class="headerlink" title="transform变换属性"></a>transform变换属性</h2><h3 id="2d"><a href="#2d" class="headerlink" title="2d:"></a>2d:</h3><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>origin(x-axis y-axis z-axis)</td><td>更改转换元素的位置 默认值50% 50% 0</td></tr><tr><td>matrix(n,n,n,n,n,n)</td><td>定义 2D 转换，使用六个值的矩阵。</td></tr><tr><td>translate(x,y)</td><td>定义 2D 转换，沿着 X 和 Y 轴移动元素。</td></tr><tr><td>translateX(n)</td><td>定义 2D 转换，沿着 X 轴移动元素。</td></tr><tr><td>translateY(n)</td><td>定义 2D 转换，沿着 Y 轴移动元素。</td></tr><tr><td>scale(x,y)</td><td>定义 2D 缩放转换，改变元素的宽度和高度。</td></tr><tr><td>scaleX(n)</td><td>定义 2D 缩放转换，改变元素的宽度。</td></tr><tr><td>scaleY(n)</td><td>定义 2D 缩放转换，改变元素的高度。</td></tr><tr><td>rotate(angle)</td><td>定义 2D 旋转，在参数中规定角度。</td></tr><tr><td>skew(x-angle,y-angle)</td><td>定义 2D 倾斜转换，沿着 X 和 Y 轴。</td></tr><tr><td>skewX(angle)</td><td>定义 2D 倾斜转换，沿着 X 轴。</td></tr><tr><td>skewY(angle)</td><td>定义 2D 倾斜转换，沿着 Y 轴。</td></tr></tbody></table><h3 id="3d"><a href="#3d" class="headerlink" title="3d:"></a>3d:</h3><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td><td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td></tr><tr><td>translate3d(x,y,z)</td><td>定义 3D 转化。</td></tr><tr><td>translateX(x)</td><td>定义 3D 转化，仅使用用于 X 轴的值。</td></tr><tr><td>translateY(y)</td><td>定义 3D 转化，仅使用用于 Y 轴的值。</td></tr><tr><td>translateZ(z)</td><td>定义 3D 转化，仅使用用于 Z 轴的值。</td></tr><tr><td>scale3d(x,y,z)</td><td>定义 3D 缩放转换。</td></tr><tr><td>scaleX(x)</td><td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td></tr><tr><td>scaleY(y)</td><td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td></tr><tr><td>scaleZ(z)</td><td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td></tr><tr><td>rotate3d(x,y,z,angle)</td><td>定义 3D 旋转。</td></tr><tr><td>rotateX(angle)</td><td>定义沿 X 轴的 3D 旋转。</td></tr><tr><td>rotateY(angle)</td><td>定义沿 Y 轴的 3D 旋转。</td></tr><tr><td>rotateZ(angle)</td><td>定义沿 Z 轴的 3D 旋转。</td></tr><tr><td>perspective(n)</td><td>定义 3D 转换元素的透视视图。</td></tr></tbody></table><h2 id="animation动画"><a href="#animation动画" class="headerlink" title="animation动画"></a>animation动画</h2><p><strong>简写语法 animation: name duration timing-function delay iteration-count direction fill-mode play-state steps(60);</strong> </p><blockquote><p>除了名字，动画时间，延时有严格顺序要求其它随意。</p></blockquote><table><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>animation-name</td><td>指定要绑定到选择器的关键帧的名称</td></tr><tr><td>animation-duration</td><td>动画指定需要多少秒或毫秒完成</td></tr><tr><td>animation-delay</td><td>设置动画在启动前的延迟间隔。</td></tr><tr><td>animation-timing-function</td><td>设置动画将如何完成一个周期</td></tr><tr><td>animation-iteration-count</td><td>定义动画的播放次数;默认1，infinite无限</td></tr><tr><td>animation-direction</td><td>指定是否应该轮流反向播放动画 normal,reverse,alternate</td></tr><tr><td>animation-fill-mode</td><td>规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。</td></tr><tr><td>animation-play-state</td><td>指定动画是否正在运行或已暂停。running,paused</td></tr><tr><td>steps(60)</td><td>表示动画分成60步完成。</td></tr><tr><td>initial</td><td>设置属性为其默认值。 阅读关于 initial的介绍。</td></tr><tr><td>inherit</td><td>从父元素继承属性。 阅读关于 initinherital的介绍。</td></tr></tbody></table><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyframes</span> changecolor{</span><br><span class="line"> 0%{</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> }</span><br><span class="line"> 100%{</span><br><span class="line"> <span class="attribute">background</span>: green;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">animation</span>: changecolor <span class="number">5s</span> ease-out .<span class="number">2s</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="gradient渐变"><a href="#gradient渐变" class="headerlink" title="gradient渐变"></a>gradient渐变</h2><p>IE9及之前的版本都不支持渐变<br><a href="https://www.jianshu.com/p/58b340a037ea" target="_blank" rel="noopener">【CSS】渐变背景（background-image）</a></p><h3 id="CSS3-线性渐变"><a href="#CSS3-线性渐变" class="headerlink" title="CSS3 线性渐变"></a>CSS3 线性渐变</h3><p>background: linear-gradient(direction, color-stop1, color-stop2, …);<br>background: linear-gradient(to bottom right, red , blue); </p><p>background: linear-gradient(angle, color-stop1, color-stop2);<br>background: linear-gradient(180deg, red, blue); </p><p>例：<br><code>background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8);</code><br>背景色从左到右开始渐变，最左边是玫红，在元素宽度20%的位置变成青色，80%的位置变成黄色，最后是蓝色。<br><code>background-image: linear-gradient(to right, #E94E65 20%, #15A892 40%, #A89215 60%, #1574A8 80%);}</code><br>元素横向前20%宽度的背景色是纯粉红色。从20%的位置开始才由粉红色变成青色。直到40%的位置完全结束粉红色。</p><h3 id="CSS3-径向渐变"><a href="#CSS3-径向渐变" class="headerlink" title="CSS3 径向渐变"></a>CSS3 径向渐变</h3><p>background: radial-gradient(center, shape size, start-color, …, last-color)</p><h3 id="重复的线性渐变"><a href="#重复的线性渐变" class="headerlink" title="重复的线性渐变"></a>重复的线性渐变</h3><p>background: repeating-linear-gradient(red, yellow 10%, green 20%);</p><h3 id="设置形状"><a href="#设置形状" class="headerlink" title="设置形状"></a>设置形状</h3><p>background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */</p>]]></content>
<summary type="html">
<p>css属性简写总结：<br><code>background,font,transition,animation,
margin,padding,border,transform,linear-gradient</code></p>
<h2 id="background背景"><a href="#background背景" class="headerlink" title="background背景"></a>background背景</h2><p><strong>简写语法： background:bg-color bg-image pos/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;</strong> </p>
<p>| 属性 | 值 | 说明 |<br>| —— | —— |<br>| 1. background-color| color或transparent | 设置背景颜色 |<br>| 2. background-image | url(path) | 设置背景图片 |<br>| 3. background-position | 10% 50% | 设置背景位置 |<br>| 4. background-size | cover，100% | 设置背景图片大小 |<br>| 5. background-repeat | no-reapeat，reapeat | 设置图片是否重复 |<br>| 6. background-origin | content-box，padding-box，border-box | 指定了背景图像的位置区域。 |<br>| 7. background-clip | content-box，padding-box，border-box | 背景剪裁属性是从指定位置开始绘制。 |<br>| 8. background-attachment | scroll，fixed | 属性设置背景图像是否固定或者随着页面的其余部分滚动 | </p>
</summary>
<category term="CSS" scheme="https://www.xin666.cc/categories/CSS/"/>
<category term="CSS" scheme="https://www.xin666.cc/tags/CSS/"/>
<category term="CSS3" scheme="https://www.xin666.cc/tags/CSS3/"/>
</entry>
<entry>
<title>Python基础语法(下)</title>
<link href="https://www.xin666.cc/Python%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-02/"/>
<id>https://www.xin666.cc/Python基础语法-02/</id>
<published>2018-08-27T12:45:00.000Z</published>
<updated>2021-08-11T07:17:58.988Z</updated>
<content type="html"><![CDATA[<h2 id="一-高级特效"><a href="#一-高级特效" class="headerlink" title="一 高级特效"></a>一 高级特效</h2><h3 id="1-切片"><a href="#1-切片" class="headerlink" title="1.切片"></a>1.切片</h3><p>这种经常取指定索引范围的操作，<br>用循环十分繁琐，因此，Python提供了切片（Slice）操作符</p><a id="more"></a> <p>获取前3个元素方法：</p><p><strong>1> 笨方法:</strong> </p><figure class="highlight python"><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">L = [<span class="string">'Michael'</span>, <span class="string">'Sarah'</span>, <span class="string">'Tracy'</span>, <span class="string">'Bob'</span>, <span class="string">'Jack'</span></span><br><span class="line">[L[<span class="number">0</span>], L[<span class="number">1</span>], L[<span class="number">2</span>]]</span><br></pre></td></tr></table></figure><p><strong>2> for循环:</strong> </p><figure class="highlight python"><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">r = []</span><br><span class="line">n = <span class="number">3</span></span><br><span class="line">i = <span class="number">1</span></span><br><span class="line"><span class="keyword">for</span> v <span class="keyword">in</span> L:</span><br><span class="line"> <span class="keyword">if</span> i <= n:</span><br><span class="line"> r.append(v);</span><br><span class="line"> i=i+<span class="number">1</span></span><br></pre></td></tr></table></figure><p><strong>3> 切片:</strong> </p><figure class="highlight python"><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">r = L[<span class="number">0</span>:<span class="number">3</span>] <span class="comment"># 索引从0开始，到3结束，不包括3 前闭后开</span></span><br><span class="line">r = L[<span class="number">-2</span>:]</span><br><span class="line">L = list(range(<span class="number">100</span>))</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">- 前10个数:L[:10]</span><br><span class="line">- 后10个数:L[-10:]</span><br><span class="line">- 前11到22个数:L[11:22]</span><br><span class="line">- 前10个数，每两个取一个:L[:10:2] [0,2,4,6,8]</span><br><span class="line">- 所有数，每5个取一个:L[::5] [0,5,10,...]</span><br><span class="line">- 原样复制一个list:L[:]</span><br></pre></td></tr></table></figure><p>tuple也是一种list也可以用切片操作，只是操作的结果仍是tuple</p><p><strong>4> 字符串 切片操作如同list和tuple一样</strong> </p><figure class="highlight py"><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">str = <span class="string">'ABCDEFG'</span></span><br><span class="line">str[<span class="number">0</span>:<span class="number">3</span>] //<span class="string">"ABC"</span></span><br></pre></td></tr></table></figure><h3 id="2-迭代-for…in"><a href="#2-迭代-for…in" class="headerlink" title="2.迭代 for…in.."></a>2.迭代 for…in..</h3><p><strong>1> 迭代 list或tuple:</strong> </p><figure class="highlight python"><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">l = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> l:</span><br><span class="line"> print(i)</span><br></pre></td></tr></table></figure><p><strong>2> 迭代 dict</strong> </p><figure class="highlight python"><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="comment"># 键：</span></span><br><span class="line">d = {<span class="string">'a'</span>:<span class="number">1</span>,<span class="string">'b'</span>:<span class="number">2</span>,<span class="string">'c'</span>:<span class="number">3</span>}</span><br><span class="line"><span class="keyword">for</span> key <span class="keyword">in</span> d:</span><br><span class="line"> print(key)</span><br><span class="line"><span class="comment"># 值：</span></span><br><span class="line"><span class="keyword">for</span> val <span class="keyword">in</span> d.values():</span><br><span class="line"> print(val)</span><br><span class="line"><span class="comment"># 键和值:</span></span><br><span class="line"><span class="keyword">for</span> k,v <span class="keyword">in</span> d.items():</span><br><span class="line"> print(<span class="string">'%s : %s'</span> % (k, v))</span><br></pre></td></tr></table></figure><p><strong>3> 迭代 字符串</strong> </p><figure class="highlight py"><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">for</span> ch <span class="keyword">in</span> <span class="string">'ABC'</span>:</span><br><span class="line"> print(ch)//A,B,C</span><br></pre></td></tr></table></figure><p><strong>4> collections模块的Iterable类型 判断一个对象是可迭代对象</strong> </p><figure class="highlight py"><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">form collections <span class="keyword">import</span> Iterable</span><br><span class="line">isinstance(<span class="string">'abc'</span>, Iterable) <span class="comment"># True</span></span><br><span class="line">isinstance(<span class="number">123</span>, Iterable) <span class="comment"># False</span></span><br></pre></td></tr></table></figure><p><strong>5> enumerate函数</strong> </p><figure class="highlight python"><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></pre></td><td class="code"><pre><span class="line">可以把一个list变成索引-元素对</span><br><span class="line"><span class="keyword">for</span> i,v <span class="keyword">in</span> enumerate([<span class="string">'A'</span>, <span class="string">'B'</span>, <span class="string">'C'</span>]):</span><br><span class="line"> print(i,v)</span><br><span class="line"><span class="comment"># 0 A, 1 B, 2 C</span></span><br><span class="line"><span class="comment"># 5> </span></span><br><span class="line"><span class="keyword">for</span> x, y <span class="keyword">in</span> [(<span class="string">'a'</span>, <span class="number">1</span>), (<span class="string">'b'</span>, <span class="number">2</span>), (<span class="string">'c'</span>, <span class="number">3</span>)]:</span><br><span class="line"> print(x,y)</span><br><span class="line"> <span class="comment">#a 1</span></span><br><span class="line"> <span class="comment">#b 2...</span></span><br><span class="line">``` </span><br><span class="line"><span class="comment">### 4.列表生成式</span></span><br><span class="line">```python</span><br><span class="line"><span class="string">'''</span></span><br><span class="line"><span class="string">1> list(range(1,11)) # 1,2,3...10 </span></span><br><span class="line"><span class="string">2> [x * x for x in range(1,11)] # [1,4,9,16,25,...]</span></span><br><span class="line"><span class="string">3> [x * x for x in range(1.11) if x%2 == 0] # [4,16,36,64,100]</span></span><br><span class="line"><span class="string">4> [m+n for m in 'ABC' for n in 'XYZ'] # ['AX', 'AY', 'AZ','BX',...,'CZ']</span></span><br><span class="line"><span class="string">'''</span></span><br><span class="line"><span class="comment"># 5></span></span><br><span class="line"><span class="keyword">import</span> os <span class="comment"># 导入os模块，模块的概念后面讲到</span></span><br><span class="line">[d <span class="keyword">for</span> d <span class="keyword">in</span> os.listdir(<span class="string">'.'</span>)] <span class="comment"># os.listdir可以列出文件和目录</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 6> d = {'x' : 'A', 'y' : 'B', 'z' : 'C'}</span></span><br><span class="line"><span class="keyword">for</span> k, v <span class="keyword">in</span> d.items():</span><br><span class="line"> print(k,v)</span><br><span class="line">使用列表生成式</span><br><span class="line">[k+<span class="string">'='</span>+v <span class="keyword">for</span> k,v <span class="keyword">in</span> d.items()]</span><br><span class="line"><span class="comment"># ['y=B', 'x=A', 'z=C']</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 7> list中所有的字符串变成大小写</span></span><br><span class="line">L = [<span class="string">'Hello'</span>, <span class="string">'World'</span>, <span class="string">'IBM'</span>, <span class="string">'Apple'</span>]</span><br><span class="line"><span class="comment"># 转换成小写</span></span><br><span class="line">[s.lower() <span class="keyword">for</span> s <span class="keyword">in</span> L]</span><br><span class="line"><span class="comment"># 转换成大写</span></span><br><span class="line">[s.swapcase() <span class="keyword">for</span> x <span class="keyword">in</span> L]</span><br><span class="line"></span><br><span class="line"><span class="comment"># 8> 内置的isinstance函数可以判断一个变量是不是字符串</span></span><br><span class="line">isinstance(<span class="string">'ABC'</span>,str) <span class="comment"># True</span></span><br><span class="line">L1 = [<span class="string">'Hello'</span>, <span class="string">'World'</span>, <span class="number">18</span>, <span class="string">'Apple'</span>, <span class="literal">None</span>]</span><br><span class="line">L2 = [x.swapcase() <span class="keyword">for</span> x <span class="keyword">in</span> L1 <span class="keyword">if</span> isinstance(x,str)]</span><br><span class="line">print(L2) <span class="comment"># ['HELLO','WORLD','APPLE']</span></span><br></pre></td></tr></table></figure><h3 id="5-生成器"><a href="#5-生成器" class="headerlink" title="5.生成器"></a>5.生成器</h3><p>在Python中，这种一边循环一边计算的机制，称为生成器：generator。<br><strong>1> 创建一个generator</strong> </p><figure class="highlight py"><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">L = [x * x <span class="keyword">for</span> x <span class="keyword">in</span> range(<span class="number">100</span>)]</span><br><span class="line">g = (x * x <span class="keyword">for</span> x <span class="keyword">in</span> range(<span class="number">100</span>))</span><br></pre></td></tr></table></figure><p>创建L和g的区别仅在于最外层的[]和()，L是一个list，而g是一个generator。 </p><p><strong>2> next() 函数获得generator的下一个返回值</strong> </p><figure class="highlight py"><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">for</span> n <span class="keyword">in</span> g:</span><br><span class="line"> <span class="keyword">print</span></span><br></pre></td></tr></table></figure><p>3> 返回done循环完毕</p><figure class="highlight py"><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">def</span> <span class="title">fib</span><span class="params">(max)</span>:</span></span><br><span class="line"> n,a,b = <span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span></span><br><span class="line"> <span class="keyword">while</span> n < max:</span><br><span class="line"> <span class="keyword">yield</span> b</span><br><span class="line"> a,b = b, a+b</span><br><span class="line"> n = n+<span class="number">1</span></span><br><span class="line"> <span class="keyword">return</span> <span class="string">'done'</span></span><br></pre></td></tr></table></figure><h3 id="6-迭代器-Iterator"><a href="#6-迭代器-Iterator" class="headerlink" title="6.迭代器 Iterator"></a>6.迭代器 Iterator</h3><blockquote><p>我们已经知道，可以直接作用于for循环的数据类型有以下几种：<br>一类是集合数据类型，如list、tuple、dict、set、str等；<br> 一类是generator，包括生成器和带yield的generator function。<br>这些可以直接作用于for循环的对象统称为可迭代对象：Iterable。</p></blockquote><p>可以使用isinstance()判断一个对象是否是Iterable对象:</p><figure class="highlight py"><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">form collections <span class="keyword">import</span> Iterable</span><br><span class="line">isinstance([],Iterable) <span class="comment"># True</span></span><br><span class="line">isinstance({},Iterable) <span class="comment"># True</span></span><br><span class="line">isinstance(<span class="string">'abc'</span>,Iterable) <span class="comment"># True</span></span><br><span class="line">isinstance(<span class="string">'123'</span>,Iterable) <span class="comment"># False</span></span><br></pre></td></tr></table></figure><p><strong>1> iter()</strong> </p><blockquote><p>生成器都是Iterator对象，但list、dict、str虽然是Iterable，却不是Iterator。<br>把list、dict、str等Iterable变成Iterator可以使用iter()函数<br>你可能会问，为什么list、dict、str等数据类型不是Iterator？<br>这是因为Python的Iterator对象表示的是一个数据流，<br>Iterator对象可以被next()函数调用并不断返回下一个数据，<br>直到没有数据时抛出StopIteration错误。可以把这个数据流看做是一个有序序列，<br>但我们却不能提前知道序列的长度，只能不断通过next()函数实现按需计算下一个数据，<br>所以Iterator的计算是惰性的，只有在需要返回下一个数据时它才会计算。<br>Iterator甚至可以表示一个无限大的数据流，例如全体自然数。<br>而使用list是永远不可能存储全体自然数的。</p></blockquote><p><strong>Python的for循环本质上就是通过不断调用next()函数实现的，</strong> </p><figure class="highlight py"><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">for</span> x <span class="keyword">in</span> [<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"> <span class="keyword">pass</span></span><br><span class="line"><span class="comment"># -------------- 等价于： --------------</span></span><br><span class="line">it = [<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"><span class="keyword">while</span> true:</span><br><span class="line"> <span class="keyword">try</span>:</span><br><span class="line"> <span class="comment">#获得下一个值</span></span><br><span class="line"> x = next(it)</span><br><span class="line"> <span class="keyword">except</span> StopIteration:</span><br><span class="line"> <span class="comment"># 遇到StopIteration就退出循环</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br></pre></td></tr></table></figure><p>生成式<br>生成器 generator<br>迭代器 iterator<br>可迭代的 iterable</p><blockquote><p>迭代器是惰性的,用多少生产多少;可迭代对象是一下全部返回,不管用到用不到.</p></blockquote><h2 id="二-函数式编程"><a href="#二-函数式编程" class="headerlink" title="二 函数式编程"></a>二 函数式编程</h2><blockquote><p>函数式编程的一个特点就是，允许把函数本身作为参数传入另一个函数，还允许返回一个函数！</p></blockquote><h3 id="1-高阶函数"><a href="#1-高阶函数" class="headerlink" title="1.高阶函数"></a>1.高阶函数</h3><blockquote><p>既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。</p></blockquote><figure class="highlight py"><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="function"><span class="keyword">def</span> <span class="title">add</span><span class="params">(x,y,f)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> f(x) + f(y)</span><br><span class="line">add(<span class="number">-2</span>,<span class="number">5</span>,abs);</span><br></pre></td></tr></table></figure><p><strong>1> map()</strong><br>函数接收两个参数，一个是函数，一个是Iterable，<br>map将传入的函数依次作用到序列的每个元素，<br>并把结果作为新的Iterator返回。</p><figure class="highlight py"><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">def</span> <span class="title">f</span><span class="params">(x)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> x*x</span><br><span class="line">r = map(f,[<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">list(r) <span class="comment"># [1,4,9,16,25]</span></span><br></pre></td></tr></table></figure><p><strong>2> reduce()</strong> </p><p>reduce把一个函数作用在一个序列[x1, x2, x3, …]<br>上，这个函数必须接收两个参数，reduce把结果继续和序列的下一个元素做累积计算<br>reduce(f,[1,2,3]) == f(f(f(1,2),3),4)</p><p><strong>将数字字符串转换成int类型</strong> </p><figure class="highlight py"><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">from</span> functools <span class="keyword">import</span> reduce</span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">str2int</span><span class="params">(s)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">fn</span><span class="params">(x, y)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> x * <span class="number">10</span> + y</span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">char2num</span><span class="params">(s)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> {<span class="string">'0'</span>: <span class="number">0</span>, <span class="string">'1'</span>: <span class="number">1</span>, <span class="string">'2'</span>: <span class="number">2</span>, <span class="string">'3'</span>: <span class="number">3</span>, <span class="string">'4'</span>: <span class="number">4</span>, <span class="string">'5'</span>: <span class="number">5</span>, <span class="string">'6'</span>: <span class="number">6</span>, <span class="string">'7'</span>: <span class="number">7</span>, <span class="string">'8'</span>: <span class="number">8</span>, <span class="string">'9'</span>: <span class="number">9</span>}[s]</span><br><span class="line"> <span class="keyword">return</span> reduce(fn, map(char2num, s))</span><br></pre></td></tr></table></figure><p><strong>3> filter() 过滤</strong><br>filter()把传入的函数依次作用于每个元素，<br>然后根据返回值是True还是False决定保留还是丢弃该元素</p><figure class="highlight py"><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="function"><span class="keyword">def</span> <span class="title">is_odd</span><span class="params">(n)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> n%<span class="number">2</span> == <span class="number">0</span></span><br><span class="line">list(filter(is_odd,[<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="comment">#[2,4]</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">is_empty</span><span class="params">(n)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> n <span class="keyword">and</span> n.strip()</span><br></pre></td></tr></table></figure><p><strong>4> sorted() 排序算法</strong> </p><figure class="highlight py"><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">sorted([<span class="number">1</span>,<span class="number">-2</span>,<span class="number">-4</span>,<span class="number">5</span>,<span class="number">3</span>],key=abs) <span class="comment"># [1,-2,3,-4,5]</span></span><br><span class="line">sorted([<span class="string">'bob'</span>, <span class="string">'about'</span>, <span class="string">'Zoo'</span>, <span class="string">'Credit'</span>], key=str.lower, reverse=<span class="literal">True</span>)</span><br><span class="line"><span class="comment"># ['Zoo', 'Credit', 'bob', 'about']</span></span><br></pre></td></tr></table></figure><h3 id="2-返回函数"><a href="#2-返回函数" class="headerlink" title="2.返回函数"></a>2.返回函数</h3><p><strong>1> 闭包</strong> </p><figure class="highlight py"><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">def</span> <span class="title">lazy_sum</span><span class="params">(*args)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">sum</span><span class="params">()</span>:</span></span><br><span class="line"> ax = <span class="number">0</span></span><br><span class="line"> <span class="keyword">for</span> i <span class="keyword">in</span> args:</span><br><span class="line"> ax = ax + i</span><br><span class="line"> <span class="keyword">return</span> ax</span><br><span class="line"> <span class="keyword">return</span> sum</span><br></pre></td></tr></table></figure><p><strong>2> 闭包</strong></p><figure class="highlight py"><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">count</span><span class="params">()</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">f</span><span class="params">(j)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">g</span><span class="params">()</span>:</span></span><br><span class="line"> <span class="keyword">return</span> j*j</span><br><span class="line"> <span class="keyword">return</span> g</span><br><span class="line"> fs = []</span><br><span class="line"> <span class="keyword">for</span> i <span class="keyword">in</span> range(<span class="number">1</span>, <span class="number">4</span>):</span><br><span class="line"> fs.append(f(i)) <span class="comment"># f(i)立刻被执行，因此i的当前值被传入f()</span></span><br><span class="line"> <span class="keyword">return</span> fs</span><br><span class="line">``` </span><br><span class="line"><span class="comment">### 3.匿名函数</span></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"><span class="comment">## 三 模块</span></span><br><span class="line">> </span><br><span class="line">一个.py文件就称之为一个模块</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><span class="line">Python又引入了按目录来组织模块的方法，称为包（Package）。</span><br><span class="line">请注意，每一个包目录下面都会有一个__init__.py的文件，这个文件是必须存在的</span><br><span class="line">自己创建模块时要注意命名，不能和Python自带的模块名称冲突</span><br><span class="line"></span><br><span class="line"><span class="comment">### 1.使用模块</span></span><br><span class="line">**<span class="number">1</span>> sys模块** </span><br><span class="line">```python</span><br><span class="line"><span class="comment">#!/usr/bin/python</span></span><br><span class="line"><span class="comment"># -*- coding:utf-8 -*-</span></span><br><span class="line"><span class="string">'a test module'</span></span><br><span class="line">__author_ : <span class="string">'zhou'</span></span><br><span class="line"><span class="keyword">import</span> sys</span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">test</span><span class="params">()</span>:</span></span><br><span class="line"> args = sys.argv</span><br><span class="line"> <span class="keyword">if</span> len(args) == <span class="number">1</span>:</span><br><span class="line"> print(<span class="string">'hello world'</span>)</span><br><span class="line"> <span class="keyword">elif</span> len(args) == <span class="number">2</span>:</span><br><span class="line"> print(<span class="string">'hello $s'</span> $ (args))</span><br><span class="line"> <span class="keyword">else</span>:</span><br><span class="line"> print(<span class="string">'too many arguments'</span>)</span><br><span class="line"><span class="keyword">if</span> __name__ == <span class="string">'__main__'</span></span><br><span class="line"> test()</span><br></pre></td></tr></table></figure><blockquote></blockquote><p>当我们在命令行运行hello模块文件时，Python解释器把一个特殊变量<strong>name</strong>置为<strong>main</strong>，<br>而如果在其他地方导入该hello模块时，if判断将失败，因此，<br>这种if测试可以让一个模块通过命令行运行时执行一些额外的代码，最常见的就是运行测试</p><p><strong>2> 作用域</strong> </p><blockquote></blockquote><p>在一个模块中，我们可能会定义很多函数和变量，但有的函数和变量我们希望给别人使用，<br>有的函数和变量我们希望仅仅在模块内部使用。在Python中，是通过_前缀来实现的。</p><figure class="highlight py"><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">def</span> <span class="title">_private_1</span><span class="params">(name)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> <span class="string">'Hello %s'</span> % name</span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">__private_2</span><span class="params">(name)</span></span></span><br><span class="line"><span class="function"> <span class="title">return</span> '<span class="title">Hello</span> %<span class="title">s</span>' % <span class="title">name</span></span></span><br><span class="line"><span class="function"><span class="title">def</span> <span class="title">greeting</span><span class="params">(name)</span>:</span></span><br><span class="line"> <span class="keyword">if</span> leg(name) > <span class="number">3</span>:</span><br><span class="line"> <span class="keyword">return</span> _private_1(name)</span><br><span class="line"> <span class="keyword">else</span>:</span><br><span class="line"> <span class="keyword">return</span> __private_2(name</span><br></pre></td></tr></table></figure><h3 id="2-安装第三方模块"><a href="#2-安装第三方模块" class="headerlink" title="2 安装第三方模块"></a>2 安装第三方模块</h3><p>在Python中，安装第三方模块，是通过包管理工具pip完成的。</p><h3 id="3-name-‘main‘含义："><a href="#3-name-‘main‘含义：" class="headerlink" title="3 name == ‘main‘含义："></a>3 <strong>name</strong> == ‘<strong>main</strong>‘含义：</h3><p>如果是命令行直接运行一个py文件时候，这个文件中的 <strong>name</strong> == ‘<strong>main</strong>‘<br>如果是另一个文件导入 这个py文件，调用另一个文件时候，这个py文件中的<br><strong>name</strong> == “这个py文件的文件名”</p><h3 id="4-自定义系统包"><a href="#4-自定义系统包" class="headerlink" title="4 自定义系统包"></a>4 自定义系统包</h3><ul><li>创建包文件夹，创建<strong>init</strong>.py和setup.py文件，</li><li>在setup.py文件中写入<br> from distutils.core import setup<br> setup(name = ‘meal’, version = ‘1.0’, py_modules = [‘test’,’test2’])</li><li>python setup.py build, python setup.py sdist</li><li>最后生成disc文件夹里 压缩包 ，进入解压zxvf，</li><li>然后进入解压完的文件夹 运行 python setup.py install</li></ul><h2 id="正则表达"><a href="#正则表达" class="headerlink" title="正则表达"></a>正则表达</h2><h3 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h3><ul><li>re.I使匹配对大小写不敏感</li><li>re.L做本地化识别（locale-aware）匹配</li><li>re.M多行匹配，影响 ^ 和 $</li><li>re.S使 . 匹配包括换行在内的所有字符</li><li>re.U根据Unicode字符集解析字符。这个标志影响 \w, \W, \b, \B.</li><li>re.X该标志通过给予你更灵活的格式以便你将正则表达式写得更易于理解。</li></ul><h3 id="compile方法"><a href="#compile方法" class="headerlink" title="compile方法"></a>compile方法</h3><p>compile(reg, re.S)可以将正则字符串编译成正则表达式对象，以便于在后面的匹配中复用。</p><figure class="highlight py"><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">pattern = re.compile(<span class="string">'\d{2}:\d{2}'</span>, re.S)</span><br><span class="line">res = re.findall(pattern, str)</span><br></pre></td></tr></table></figure><p>如果使用分组<code>()</code>可以用group(1)获取单个值<br>使用groups()获取值组成的元祖</p><h3 id="1-match方法"><a href="#1-match方法" class="headerlink" title="1. match方法"></a>1. match方法</h3><blockquote><p>如果使用分组()可以用group(1)获取第一个匹配<code>()</code>的值,使用groups()获取值组成的元祖,group(0)或group()返回所有匹配的字符串</p></blockquote><figure class="highlight py"><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">str = <span class="string">'hello world123'</span></span><br><span class="line">res = re.match(<span class="string">'(h).*?(w)'</span>, str, re.S)</span><br><span class="line">res.group() <span class="comment"># 'hello w'</span></span><br><span class="line">res.group(<span class="number">0</span>) <span class="comment"># 'hello w'</span></span><br><span class="line">res.group(<span class="number">1</span>) <span class="comment"># 'h'</span></span><br><span class="line">res.group(<span class="number">2</span>) <span class="comment"># 'w'</span></span><br><span class="line">res.groups() <span class="comment"># ('h', 'w')</span></span><br></pre></td></tr></table></figure><h3 id="2-search方法"><a href="#2-search方法" class="headerlink" title="2. search方法"></a>2. search方法</h3><p>它在匹配时会扫描整个字符串，然后返回第一个成功匹配的结果</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">re.search(reg, str, re.S)</span><br></pre></td></tr></table></figure><h3 id="3-findall方法"><a href="#3-findall方法" class="headerlink" title="3. findall方法"></a>3. findall方法</h3><p>findall()方法会搜索整个字符串然后返回匹配正则表达式的所有内容。</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">re.findall(reg, str, re.S)</span><br></pre></td></tr></table></figure><h3 id="4-sub方法"><a href="#4-sub方法" class="headerlink" title="4. sub方法"></a>4. sub方法</h3><p>re.sub(pattern, repl, string, count=0)方法用来修改文本<br>count 模式匹配后替换的最大次数，默认 0 表示替换所有的匹配。<br>repl 参数是一个函数</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">re.sub(<span class="string">'\d+'</span>, <span class="string">''</span>, str, count=<span class="number">0</span>)</span><br></pre></td></tr></table></figure><h3 id="5-finditer方法"><a href="#5-finditer方法" class="headerlink" title="5. finditer方法"></a>5. finditer方法</h3><p>和 findall 类似，在字符串中找到正则表达式所匹配的所有子串，并把它们作为一个迭代器返回</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">re.finditer(pattern, string, flags=<span class="number">0</span>)</span><br></pre></td></tr></table></figure><h3 id="6-split方法"><a href="#6-split方法" class="headerlink" title="6 split方法"></a>6 split方法</h3><p>split 方法按照能够匹配的子串将字符串分割后返回列表</p><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">re.split(pattern, string[, maxsplit=<span class="number">0</span>, flags=<span class="number">0</span>])</span><br></pre></td></tr></table></figure><p>maxsplit: 分隔次数，maxsplit=1 分隔一次，默认为 0，不限制次数</p><h3 id="group和groups"><a href="#group和groups" class="headerlink" title="group和groups"></a>group和groups</h3><blockquote><p>[注意意:只有<code>match(),serach()</code>返回值，才能用group()和groups()，findall()返回的要么<code>[(),()]</code>（正常捕获时），要么就返回<code>[,,,]</code>(无捕获组),所以<code>findall()</code>返回值并没有<code>group()</code>和<code>groups</code>方法]</p></blockquote><figure class="highlight python"><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">str = <span class="string">'hello world123hello world456'</span></span><br><span class="line">res = re.search(<span class="string">'\w(\d+).*?(\d+)'</span>,str, re.S)</span><br><span class="line">res.group() <span class="comment"># 'd123hello world456'</span></span><br><span class="line">res.group(<span class="number">0</span>) <span class="comment"># 'd123hello world456'</span></span><br><span class="line">res.group(<span class="number">1</span>) <span class="comment"># '123'</span></span><br><span class="line">res.group(<span class="number">2</span>) <span class="comment"># '456'</span></span><br><span class="line">res.groups() <span class="comment"># ('123', '456')</span></span><br><span class="line">res.groups()[<span class="number">1</span>] <span class="comment"># '456'</span></span><br><span class="line">res = re.findall(<span class="string">'\w(?P<num1>\d+).*?(?P<num2>\d+)'</span>,str, re.S)</span><br><span class="line">print(res) <span class="comment"># ('123', '456')</span></span><br></pre></td></tr></table></figure><h3 id="命名捕获"><a href="#命名捕获" class="headerlink" title="命名捕获"></a>命名捕获</h3><blockquote><p>命令组的语法是 Python 专用扩展之一： <code>(?P<name>...)</code>。名字很明显是组的名字。除了该组有个名字之外，命名组也同捕获组是相同的。<code>MatchObject</code> 的方法处理捕获组时接受的要么是表示组号的整数，要么是包含组名的字符串。命名组也可以是数字，<code>(?P=word)</code>获取反向引用，所以你可以通过两种方式来得到一个组的信息：</p></blockquote><figure class="highlight py"><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">p = re.compile(<span class="string">r'(?P<word>\b\w+\b)'</span>)</span><br><span class="line">m = p.search( <span class="string">'(((( Lots of punctuation )))'</span> )</span><br><span class="line">m.group(<span class="string">'word'</span>) <span class="comment"># 'Lots'</span></span><br><span class="line">m.group(<span class="number">1</span>) <span class="comment"># 'Lots'</span></span><br></pre></td></tr></table></figure><h2 id="pdb调试"><a href="#pdb调试" class="headerlink" title="pdb调试"></a>pdb调试</h2><p><code>pdb调试</code><br><strong>命令行调试</strong><br><code>python -m pdb xxx.py</code> </p><blockquote><p>h ———–> help 查看帮助<br>l ————> list 显示当前的代码<br>n ————> next 向下执行一行代码<br>c ————> continue 继续执行代码<br>b ————> break 添加断点 b 12在12行添加断电，b查看所有断点<br>s ————> setp 进入到一个函数<br>p ————> print 打印一个变量的值<br>a ————> args 打印所有形参变量数据<br>q ————> quit 退出调试<br>r ————> return 快速执行到函数的最后一行</p></blockquote><p>** 代码中使用pdb库** </p><figure class="highlight py"><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">import</span> pdb</span><br><span class="line">pdb.run(<span class="string">"func(11,22)"</span>)</span><br><span class="line">pdb.set_trace() <span class="comment"># 程序运行到这里就会停止</span></span><br></pre></td></tr></table></figure><h2 id="爬虫"><a href="#爬虫" class="headerlink" title="爬虫"></a>爬虫</h2><p>1.明确目标 url<br>2.爬去<br>3.分析<br>4.储存<br>scrapy<br>新建项目<br>明确目标<br>制作爬虫<br>储存内容</p>]]></content>
<summary type="html">
<h2 id="一-高级特效"><a href="#一-高级特效" class="headerlink" title="一 高级特效"></a>一 高级特效</h2><h3 id="1-切片"><a href="#1-切片" class="headerlink" title="1.切片"></a>1.切片</h3><p>这种经常取指定索引范围的操作，<br>用循环十分繁琐，因此，Python提供了切片（Slice）操作符</p>
</summary>
<category term="Python" scheme="https://www.xin666.cc/categories/Python/"/>
<category term="Python" scheme="https://www.xin666.cc/tags/Python/"/>
</entry>
<entry>
<title>Python基础语法(上)</title>
<link href="https://www.xin666.cc/Python%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-01/"/>
<id>https://www.xin666.cc/Python基础语法-01/</id>
<published>2018-08-27T12:03:00.000Z</published>
<updated>2021-08-11T07:17:58.987Z</updated>
<content type="html"><![CDATA[<p><strong>Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。</strong><br>Python 是由 Guido van Rossum 在八十年代末和九十年代初，在荷兰国家数学和计算机科学研究所设计出来的。<br>Python 本身也是由诸多其他语言发展而来的,这包括 ABC、Modula-3、C、C++、Algol-68、SmallTalk、Unix shell 和其他的脚本语言等等。<br>像 Perl 语言一样，Python 源代码同样遵循 GPL(GNU General Public License)协议。<br>现在 Python 是由一个核心开发团队在维护，Guido van Rossum 仍然占据着至关重要的作用，指导其进展。</p><a id="more"></a><h2 id="一-变量"><a href="#一-变量" class="headerlink" title="一.变量"></a>一.变量</h2><h3 id="1-变量命名及规范"><a href="#1-变量命名及规范" class="headerlink" title="1.变量命名及规范"></a>1.变量命名及规范</h3><ul><li>一个变量包括两方面：变量名和变量值。</li><li>变量名开头必须 字母 或 下划线。</li><li>python命名区分大小写。</li><li>这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言</li></ul><h3 id="2-创建变量"><a href="#2-创建变量" class="headerlink" title="2.创建变量"></a>2.创建变量</h3><p>在python中创建变量就是变量的声明,当创建两个相同的简单变量，其实是创建了同一个变量。</p><figure class="highlight python"><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">a = <span class="string">'ABC'</span></span><br><span class="line">b = a</span><br><span class="line">c = <span class="string">'ABC'</span></span><br><span class="line">id(a) == id(b) <span class="comment"># True</span></span><br></pre></td></tr></table></figure><ol><li>在内存中创建了一个’ABC’的字符串；</li><li>在内存中创建了一个名为a的变量，并把它指向’ABC’。</li><li>也可以把一个变量a赋值给另一个变量b，这个操作实际上是把变量b指向变量a所指向的数据</li><li>创建变量c和a的值一样，python会优化为同一个变量</li></ol><h3 id="3-常量-全部大写的变量名表示常量"><a href="#3-常量-全部大写的变量名表示常量" class="headerlink" title="3.常量 全部大写的变量名表示常量"></a>3.常量 全部大写的变量名表示常量</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">PI = <span class="number">3.1415</span></span><br></pre></td></tr></table></figure><h3 id="4-python多重赋值-其实就是分装成元组tuple"><a href="#4-python多重赋值-其实就是分装成元组tuple" class="headerlink" title="4.python多重赋值 其实就是分装成元组tuple"></a>4.python多重赋值 其实就是分装成元组tuple</h3><figure class="highlight python"><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">a,b=<span class="number">1</span>,<span class="number">3</span> <span class="comment"># a=1,b=3</span></span><br><span class="line">[a,b,c]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>] </span><br><span class="line">(d,e,f) = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>]</span><br><span class="line">(j,h,k) = (<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>);</span><br></pre></td></tr></table></figure><h2 id="二-数据类型"><a href="#二-数据类型" class="headerlink" title="二.数据类型"></a>二.数据类型</h2><h3 id="0-基本数据类型"><a href="#0-基本数据类型" class="headerlink" title="0.基本数据类型"></a>0.基本数据类型</h3><ul><li><p>Number（数字）</p></li><li><p>String (字符串)</p></li><li><p>List (列表)</p></li><li><p>Tuple (元组)</p></li><li><p>Set (集合)</p></li><li><p>Dictionary (字典)</p></li><li><p>不可变数据类型：Number(数字)、String(字符串)、Tuple(元组)</p></li><li><p>可变数据类型：List(列表)、Dictionary(字典)、Set(集合)</p></li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1> 整型</span><br><span class="line">2> 浮点型</span><br><span class="line">3> 字符串 ' ', " ", ''' ''',r''不转义, 单双三引号 (三引号可以将里面的单双引号转义输出) 'hello'*5 # 'hellohello...'</span><br><span class="line">4> 布尔型 True,False （请注意大小写）布尔值可以用and、or和not运算,布尔值其实是转换为0和1可以数字相计算(+,-,*,/)</span><br><span class="line">5> 空值 None</span><br><span class="line"> 空值是Python里一个特殊的值，用None表示。None不能理解为0，因为0是有意义的，而None是一个特殊的空值</span><br><span class="line">6> 列表 list list = ['a','b','c',1,2,3]</span><br><span class="line">7> 字典 dict dict = {'name':'job'}</span><br></pre></td></tr></table></figure><h3 id="1-数字类型"><a href="#1-数字类型" class="headerlink" title="1. 数字类型"></a>1. 数字类型</h3><p>Python3支持的数字类型有，int、float、bool、complex(复数)。 </p><p>bool为布尔类型，为int型的子类。在Python3中，bool类型有两个值，<br>True和False。其中，True == 1， False == 0。</p><h3 id="2-字符串和编码"><a href="#2-字符串和编码" class="headerlink" title="2.字符串和编码"></a>2.字符串和编码</h3><ol><li>反斜杠可以用来转义，使用r可以让反斜杠不发生转义</li><li>字符串可以用 <code>+</code> 运算符连接在一起，用 <code>*</code> 运算符重复</li><li>Python中的字符串有两种索引方式，从左往右以0开始，从右往左以-1开始</li><li>Python中的字符串，是一个不可变数据类型，所以不能改变</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">1> ord() 获取字符的整数表示 ord('A') #65</span><br><span class="line">2> chr() 函数把编码转换为对应的字符chr(66) #b</span><br><span class="line">3> encode() 和 decode() 通过encode()方法可以编码为指定的bytes 'ABC'.encode('utf-8')</span><br><span class="line">4> len() 计算的是 str 的字符数 如果换成bytes，len()函数就计算字节数</span><br><span class="line">5> % 格式化的字符串 $d,$s,$f,$x 使用%%转义%</span><br><span class="line"> %s表示用字符串替换，%d表示用整数替换，有几个%?占位符，后面就跟几个变量或者值，顺序要对应好。如果只有一个%?，括号可以省略。</span><br><span class="line"> 'Hi, %s, you have $%d.' % ('Michael', 1000000) # 'Hi, Michael, you have $1000000'</span><br><span class="line">strs = "helloworld"</span><br><span class="line">f'hello{name}'可以字符串模版输出</span><br><span class="line">6> .upper() 转换大写，.lower()转换小写，.capitalize()，.title()每个单词首字母大写</span><br><span class="line">7> .find(x,star,end) 返回x开始的索引，没找到返回-1,str.find("h",4,-1) # 8 rfind() 反向查找</span><br><span class="line">8> .index(x) 返回x开始的索引，没找到会报错 rindex()</span><br><span class="line">9> .count(str,star,end) 返回str在star和end之间出现的个数</span><br><span class="line">10> .replace(str1,str2,3)查找所有str1字符并替换为str2,指定只替换3个</span><br><span class="line">11> .split(",",max) 把strs字符串按指定的','分割为列表，分割的元素数量为max,默认为全部</span><br><span class="line">12> .endswitch(".txt")检查文件是否以 .txt结束如果是返回True否则返回False...startswitch()</span><br><span class="line">13> .strip(),.lstrip(),rstrip() 去除空格</span><br><span class="line">14> .join(list) '-'.join(['1','2'])把列表用指定的字符连接成字符串,注意列表元素不能为数字 # '1-2'</span><br><span class="line">15> .center(40),.ljust(40,'-'),.rjust(40,'-') 居中、左对齐、右对齐,第一个参数必填</span><br></pre></td></tr></table></figure><h3 id="3-list列表"><a href="#3-list列表" class="headerlink" title="3.list列表"></a>3.list列表</h3><ol><li>List的元素写在方括号中间，以逗号隔开</li><li>和字符串一样，List可以被索引（index）和切片</li><li>List可以使用+操作符进行拼接</li><li>List中的元素是可以改变的</li></ol><p><strong>列表内置的方法</strong> </p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"># 增删改查：</span><br><span class="line">ls = [1,2,3]</span><br><span class="line">1> len(ls) 获取列表的长度 len(ls) # 3</span><br><span class="line">2> [-1] 获取列表最后一个元素 ls[-1] # 3</span><br><span class="line">3> .append(ele) 追加元素到末尾 ls.append('A')</span><br><span class="line">4> .insert(index, ele) 把ele元素插入到指定index的位置之前 ls.insert(2, 'a') # [1,2,'a',3]</span><br><span class="line">5> .pop(index) 删除列表最后一个元素 或指定的元素 index 索引 并返回被删除的元素</span><br><span class="line">6> .extend() ls.extend(ls2) 将一个列表和另一个列表合并或ls+ls2</span><br><span class="line">7> in , not in , index("str",1,4) in判断元素是否在列表中， index 从开始到结束索引查找str</span><br><span class="line">8> del .pop(index) .remove(ele) del删除指定元素，pop(i)删除指定下标元素，remove(ele)删除指定值的元素</span><br><span class="line">9> .count(ele) ls.count("str") 查找元素在ls中出现的次数</span><br><span class="line">10> enumerate(ls) 列出索引和值</span><br><span class="line">11> zip(ls,ls2)</span><br><span class="line">12> .sort(key=None, reverse=False) 排序key=int,key=str,key=len</span><br><span class="line">13> .reverse() 反转排序</span><br><span class="line">14> copy()拷贝，引用copy库中的copy.deepcopy(ls)可以进行深拷贝</span><br></pre></td></tr></table></figure><h3 id="4-元组tuple"><a href="#4-元组tuple" class="headerlink" title="4.元组tuple"></a>4.元组tuple</h3><p>tuple和list非常类似，但是tuple一旦初始化就不能修改,List中的增、删、改函数，在Tuple中，全部不可用。<br>tuple = (‘a’,’b’,’c’) 它也没有append()，insert()这样的方法。其他获取元素的方法和list是一样的<br>tuple所谓的“不变”是说，tuple的每个元素，指向永远不变。<br><code>index(),count()</code></p><h3 id="5-字典dict-map"><a href="#5-字典dict-map" class="headerlink" title="5.字典dict(map)"></a>5.字典dict(map)</h3><p>ictionary(字典)是Python中另一个非常有用的内置数据类型。<br>列表是有序对象集合，字典是无序对象集合。<br>两者之前的区别在于，字典是用通过键来存取的，而不是通过偏移（索引）存取的</p><ol><li>字典是一种映射类型，它的元素是键值对</li><li>字典的关键字必须为不可变类型，且不能重复</li><li>创建空字典使用{}</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">必须牢记：key必须是 不可变对象</span><br><span class="line">Python内置了字典：dict的支持，dict全称dictionary，在其他语言中也称为map，使用键-值（key-value）存储，具有极快的查找速度。这个通过key计算位置的算法称为哈希算法（Hash）。</span><br><span class="line">dict内部存放的顺序和key放入的顺序是没有关系的。</span><br><span class="line">创建字典：</span><br><span class="line">d = {'Micheel': 95, 'Bob': 75, 'Tracy': 85}</span><br><span class="line">d = dict(name = 'drink', age = 22)</span><br><span class="line">d = dict([('name','drink'),('age',22)])</span><br><span class="line"></span><br><span class="line">1> in,not in, Bob in d === True # in 判断key是否存在</span><br><span class="line">2> .get() 通过dict提供的get方法，如果key不存在，可以返回None，或者自己指定的返回value：</span><br><span class="line"> d.get('Thomas') # None</span><br><span class="line"> d.get('Thomas',-1) #-1</span><br><span class="line">3> .pop(key) d.pop('Bob') 删除key 并 返回被删除的元素</span><br><span class="line">4> del d[key],.clear() del删除元素，.clear()清除整个字典</span><br><span class="line">5> len(d) 返回字典的长度</span><br><span class="line">6> .keys() , .values() , .items() //keys返回的是键 values返回的是值 items返回k-v的 组成的list列表</span><br><span class="line">7> d.copy() 回一个字典的浅复制</span><br><span class="line">8> d.update(d2) 把字典d2的键值对更新到d里</span><br></pre></td></tr></table></figure><h3 id="7-set-集合"><a href="#7-set-集合" class="headerlink" title="7.set 集合"></a>7.set 集合</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">set和dict类似，也是一组key的集合，但不存储value。由于key不能重复`，所以，在set中，没有重复的key。</span><br><span class="line">返回的数据是不重复并且有序的</span><br><span class="line">s = set([1,2,3,4,3,2,5])</span><br><span class="line">print(s) // {1,2,3,4,5}</span><br><span class="line">1> .add(key) 可以添加元素到set中，可以重复添加，但不会有效果</span><br><span class="line"> s.add(4)</span><br><span class="line">2> .remove(key) 方法可以删除元素</span><br><span class="line"> s.remove(4)</span><br><span class="line"> print(s) // {1,2,3,5}</span><br><span class="line"> </span><br><span class="line">3> &,|,- 分别返回两个集合的交集、并集，差集</span><br><span class="line"> s1 = set([1,2,3])</span><br><span class="line"> s2 = set([2,3,4])</span><br><span class="line"></span><br><span class="line"> s1 & s2 # 交集{2,3}</span><br><span class="line"> s1 | s2 # 并集{1,2,3,4}</span><br><span class="line"> s1 - s2 # 差集{1}</span><br></pre></td></tr></table></figure><h3 id="8-数据类型检测-isinstance"><a href="#8-数据类型检测-isinstance" class="headerlink" title="8.数据类型检测 isinstance()"></a>8.数据类型检测 isinstance()</h3><pre><code>x = 1;isinstance(x, (int,float)) #True</code></pre><h3 id="6-类型转换"><a href="#6-类型转换" class="headerlink" title="6.类型转换"></a>6.类型转换</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">1> int() 将字符串转换成整型 int()输入的是字符串数字，</span><br><span class="line">2> float()</span><br><span class="line">3> str()</span><br><span class="line">4> bool()</span><br></pre></td></tr></table></figure><h3 id="9-可变对象和不可变对象"><a href="#9-可变对象和不可变对象" class="headerlink" title="9.可变对象和不可变对象"></a>9.可变对象和不可变对象</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">列表可以通过引用其元素，改变对象自身(in-place change)。这种对象类型，称为可变数据对象(mutable object)，词典也是这样的数据类型。</span><br><span class="line">而像之前的数字和字符串，不能改变对象本身，只能改变引用的指向，称为不可变数据对象(immutable object)。</span><br><span class="line">我们之前学的元组(tuple)，尽管可以调用引用元素，但不可以赋值，因此不能改变对象自身，所以也算是immutable object.</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">1> 不可变对象</span><br><span class="line"> a = 'abc';</span><br><span class="line"> b = a.replace('a','A')</span><br><span class="line"> print(a) // 'abc'</span><br><span class="line"> 要始终牢记的是，a是变量，而'abc'才是字符串对象！有些时候，我们经常说，对象a的内容是'abc'，但其实是指，a本身是一个变量，它指向的对象的内容才是'abc'：</span><br><span class="line"></span><br><span class="line"> 当我们调用a.replace('a', 'A')时，实际上调用方法replace是作用在字符串对象'abc'上的，而这个方法虽然名字叫replace，但却没有改变字符串'abc'的内容。相反，replace方法创建了一个新字符串'Abc'并返回，如果我们用变量b指向该新字符串，就容易理解了，变量a仍指向原有的字符串'abc'，但变量b却指向新字符串'Abc'了：</span><br><span class="line"></span><br><span class="line"> 所以，对于不变对象来说，调用对象自身的任意方法，也不会改变该对象自身的内容。相反，这些方法会创建新的对象并返回，这样，就保证了不可变对象本身永远是不可变的。</span><br><span class="line">2> 可变对象 list，dict</span><br><span class="line">改变对象自身。这种对象类型，称为可变数据对象</span><br></pre></td></tr></table></figure><h2 id="三-运算符与表达式"><a href="#三-运算符与表达式" class="headerlink" title="三.运算符与表达式"></a>三.运算符与表达式</h2><h3 id="1-运算符类型"><a href="#1-运算符类型" class="headerlink" title="1.运算符类型"></a>1.运算符类型</h3><ul><li>1>算数运算符 +,-,<em>,/,%,*</em></li><li>2>赋值运算符 =,+=,-=,*=,/=</li><li>4>比较运算符 >,<,>=,<=,==,===,!=,!==</li><li>6>增量、减量运算符 ++,– </li><li>7>逻辑运算符 &&(and),||(or),xor,!</li><li>8>字符串运算符 +<blockquote><p>a+=a 与 a=a+a不同，a+=a是在元数据上修改，而a=a+a是先定一个变量a然后修改</p></blockquote></li></ul><p>2.运算符的优先级</p><h2 id="四-选择与循环"><a href="#四-选择与循环" class="headerlink" title="四.选择与循环"></a>四.选择与循环</h2><h3 id="1-选择语句"><a href="#1-选择语句" class="headerlink" title="1.选择语句"></a>1.选择语句</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">1> if:else:</span><br><span class="line"> age = 22</span><br><span class="line"> if age >10:</span><br><span class="line"> print(age)</span><br><span class="line"> elif age < 10:</span><br><span class="line"> print(-age)</span><br><span class="line"> else:</span><br><span class="line"> print()</span><br><span class="line"> if x:</span><br><span class="line"> print(True)</span><br><span class="line"> x 非零数值、非空字符串、非空list等，就判断为True</span><br><span class="line">2> 三元：</span><br><span class="line"> h = a-b if a>b else a+b</span><br></pre></td></tr></table></figure><h3 id="2-循环语句"><a href="#2-循环语句" class="headerlink" title="2.循环语句"></a>2.循环语句</h3><ol><li>for…in 循环</li><li>while 循环</li><li>for…in…else</li><li>while…else</li></ol><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">names = [<span class="string">'A'</span>,<span class="string">'B'</span>,<span class="string">'C'</span>]</span><br><span class="line"><span class="keyword">for</span> name <span class="keyword">in</span> names:</span><br><span class="line"> print(name)</span><br><span class="line">sum = <span class="number">0</span></span><br><span class="line"><span class="comment"># list()将 range(101)函数，可以生成一个整数序列 转换成list</span></span><br><span class="line"><span class="comment"># range(0,101) 返回大于0，小于101的有序整数</span></span><br><span class="line"><span class="keyword">for</span> x <span class="keyword">in</span> list(range(<span class="number">101</span>)):</span><br><span class="line"> sum = sum + x</span><br><span class="line"> print(sum)</span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line"> print(<span class="string">'end'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment"># for...else异常处理</span></span><br><span class="line"><span class="keyword">for</span> i <span class="keyword">in</span> names:</span><br><span class="line"> <span class="keyword">if</span> i == <span class="string">'B'</span>:</span><br><span class="line"> <span class="keyword">break</span></span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line"> <span class="keyword">raise</span> ValueError(<span class="string">"List argument missing terminal flag."</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 计算100以内所有奇数之和</span></span><br><span class="line">sum = <span class="number">0</span></span><br><span class="line">n = <span class="number">99</span></span><br><span class="line"><span class="keyword">while</span> n > <span class="number">0</span>:</span><br><span class="line"> sum = sum + n</span><br><span class="line"> n = n - <span class="number">2</span></span><br><span class="line">print(sum)</span><br><span class="line"></span><br><span class="line"><span class="comment"># while...else语句</span></span><br><span class="line">count = <span class="number">0</span></span><br><span class="line"><span class="keyword">while</span> count < <span class="number">5</span>:</span><br><span class="line"> <span class="keyword">print</span> count, <span class="string">" is less than 5"</span></span><br><span class="line"> count = count + <span class="number">1</span></span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line"> <span class="keyword">print</span> count, <span class="string">" is not less than 5"</span></span><br></pre></td></tr></table></figure><h3 id="3-break-语句"><a href="#3-break-语句" class="headerlink" title="3.break 语句"></a>3.break 语句</h3><blockquote><p>break语句可以提前退出循环</p></blockquote><figure class="highlight python"><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">names = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>]</span><br><span class="line"><span class="keyword">for</span> name <span class="keyword">in</span> names:</span><br><span class="line"> <span class="keyword">if</span> name == <span class="string">'b'</span>:</span><br><span class="line"> <span class="keyword">break</span> <span class="comment"># 停止循环</span></span><br></pre></td></tr></table></figure><h3 id="4-continue-语句"><a href="#4-continue-语句" class="headerlink" title="4.continue 语句"></a>4.continue 语句</h3><blockquote><p>continue跳过当前的这次循环，直接开始下一次循环</p></blockquote><p>输出奇数 </p><figure class="highlight python"><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">for</span> i <span class="keyword">in</span> range(<span class="number">0</span>,<span class="number">101</span>): <span class="comment"># 0-100</span></span><br><span class="line"> <span class="keyword">if</span> i%<span class="number">2</span> == <span class="number">0</span>:</span><br><span class="line"> <span class="keyword">continue</span></span><br><span class="line"> print(i) <span class="comment"># 输出奇数</span></span><br></pre></td></tr></table></figure><h2 id="五-函数"><a href="#五-函数" class="headerlink" title="五.函数"></a>五.函数</h2><blockquote><p>函数名其实就是指向一个函数对象的引用，完全可以把函数名赋给一个变量，相当于给这个函数起了一个“别名”<br>Python的函数返回多值其实就是返回一个tuple</p></blockquote><h3 id="1-调用函数"><a href="#1-调用函数" class="headerlink" title="1.调用函数"></a>1.调用函数</h3><p><code>abs(-22)</code> 调用函数时 参数必须与形参一致</p><h3 id="2-自定义函数"><a href="#2-自定义函数" class="headerlink" title="2.自定义函数"></a>2.自定义函数</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 函数定义 ：</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">my_abs</span><span class="params">(num)</span>:</span></span><br><span class="line"> <span class="keyword">if</span> num > <span class="number">0</span>:</span><br><span class="line"> print(num)</span><br><span class="line"> <span class="keyword">else</span>:</span><br><span class="line"> print(-num)</span><br><span class="line"><span class="comment"># 定义空函数 </span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">nop</span><span class="params">()</span>:</span></span><br><span class="line"> <span class="keyword">pass</span></span><br></pre></td></tr></table></figure><h3 id="3-函数的参数"><a href="#3-函数的参数" class="headerlink" title="3.函数的参数"></a>3.函数的参数</h3><ul><li>位置参数</li><li>默认参数</li><li>可变参数</li><li>关键字参数</li><li>命名关键字参数</li></ul><blockquote><p>在 Python 中，所有参数（变量）都是按引用传递<br>如果 参数 是不可变的对象，在函数中不可修改(使用global)<br>参数传递的顺序：<strong>先位置，再关键字，再包裹位置(可变参数)，再包裹关键字</strong> </p></blockquote><h4 id="1-必选参数"><a href="#1-必选参数" class="headerlink" title="1. 必选参数"></a>1. 必选参数</h4><p>必选参数也叫位置参数,在定义函数形参时候定义，当调用函数时，必须传递相应数量的实参</p><figure class="highlight python"><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">fun</span><span class="params">(a,b,c)</span>:</span></span><br><span class="line"> print(a,b,c)</span><br><span class="line">fun(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>) <span class="comment"># 传递实参对应形参顺序</span></span><br><span class="line">fun(<span class="number">1</span>,c=<span class="number">2</span>,b=<span class="number">3</span>) <span class="comment"># 关键字传递参数</span></span><br><span class="line">``` </span><br><span class="line"><span class="comment">#### 2. 默认参数 </span></span><br><span class="line">默然参数必须是在必选参数的后面定义，默认参数必须指向不变对象</span><br><span class="line">```py</span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">fun</span><span class="params">(a,b=<span class="number">2</span>)</span>:</span></span><br><span class="line"> print(a,b)</span><br><span class="line">fun(<span class="number">3</span>) <span class="comment"># '3','2'</span></span><br><span class="line">fun(<span class="number">3</span>,<span class="number">5</span>) <span class="comment"># '3', '5'</span></span><br><span class="line"><span class="comment"># 定义默认参数要牢记一点：默认参数必须指向不变对象！</span></span><br><span class="line"><span class="comment"># 必选参数在前，默认参数在后</span></span><br><span class="line">``` </span><br><span class="line"><span class="comment">#### 3. 可变参数(包裹参数)</span></span><br><span class="line"></span><br><span class="line">```py </span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">fun</span><span class="params">(*number)</span>:</span></span><br><span class="line"> print(number) <span class="comment"># 接收到的是一个 tuple</span></span><br><span class="line">fun(<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">list = [<span class="number">1</span>,<span class="number">23</span>,<span class="number">3</span>,<span class="number">5</span>]</span><br><span class="line"><span class="comment"># 在list或tuple前面加一个*号，把list或tuple的元素变成可变参数传进去 </span></span><br><span class="line">fun(*list) <span class="comment"># 解包裹传递参数</span></span><br><span class="line">``` </span><br><span class="line"><span class="comment">#### 4. 关键子参数</span></span><br><span class="line"></span><br><span class="line">```py</span><br><span class="line"><span class="comment"># 关键字参数在函数内部自动组装为一个dict</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">fun</span><span class="params">(a,b=<span class="number">2</span>,**kw)</span>:</span></span><br><span class="line"> print(a,b,kw) <span class="comment"># 1 2 {'c': 3, 'd': 4} </span></span><br><span class="line">fun(<span class="number">2</span>,c=<span class="number">3</span>,d=<span class="number">4</span>)</span><br><span class="line"></span><br><span class="line">m = {<span class="string">"name"</span>:<span class="string">"zhou"</span>, <span class="string">"age"</span>:<span class="number">22</span>}</span><br><span class="line">fun(<span class="number">2</span>,**m) <span class="comment"># 解包裹关键字传递</span></span><br><span class="line"><span class="comment"># 注意kw获得的dict是 m 的一份拷贝，对kw的改动不会影响到函数外的m。</span></span><br></pre></td></tr></table></figure><h4 id="5-命名关键字参数"><a href="#5-命名关键字参数" class="headerlink" title="5. 命名关键字参数"></a>5. 命名关键字参数</h4><p>和关键字参数<code>**kw</code>不同，命名关键字参数需要一个特殊分隔符<code>*</code>，<code>*</code>后面的参数被视为命名关键字参数,<br>命名关键字参数必须传入参数名，这和位置参数不同。如果没有传入参数名，调用将报错</p><figure class="highlight py"><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"># 如果要限制关键字参数的名字，就可以用命名关键字参数</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">person</span><span class="params">(name, age, *, city, job)</span>:</span></span><br><span class="line"> print(name, age, city, job)</span><br><span class="line"></span><br><span class="line">person(<span class="string">'Tom'</span>,<span class="number">22</span>,city=<span class="string">'us'</span>,job=<span class="string">'pyer'</span>) <span class="comment"># 正确</span></span><br><span class="line">person(<span class="string">'Tom'</span>,<span class="number">22</span>,<span class="string">'us'</span>,<span class="string">'pyer'</span>) <span class="comment"># 报错</span></span><br></pre></td></tr></table></figure><p>如果函数定义中已经有了一个可变参数，后面跟着的命名关键字参数就不再需要一个特殊分隔符<code>*</code>了： </p><figure class="highlight py"><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="function"><span class="keyword">def</span> <span class="title">person</span><span class="params">(name, age, *args, city, job)</span>:</span></span><br><span class="line"> print(name, age, args, city, job)</span><br><span class="line">person(<span class="string">'Tom'</span>,<span class="number">22</span>,city=<span class="string">'us'</span>,job=<span class="string">'pyer'</span>) <span class="comment"># Tom 22 () us pyer</span></span><br></pre></td></tr></table></figure><p>如果命名关键字参数具有默认值，调用时，可不传入city参数 </p><figure class="highlight py"><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="function"><span class="keyword">def</span> <span class="title">person</span><span class="params">(name, age, *, city=<span class="string">'Beijing'</span>, job)</span>:</span></span><br><span class="line"> print(name, age, city, job)</span><br><span class="line">person(<span class="string">'Jack'</span>, <span class="number">24</span>, job=<span class="string">'Engineer'</span>) <span class="comment"># Jack 24 Beijing Engineer</span></span><br></pre></td></tr></table></figure><h3 id="4-递归函数"><a href="#4-递归函数" class="headerlink" title="4.递归函数"></a>4.递归函数</h3><figure class="highlight py"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 在函数内部，可以调用其他函数。如果一个函数在内部调用自身本身，这个函数就是递归函数。</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">fact</span><span class="params">(n)</span>:</span></span><br><span class="line"> <span class="keyword">if</span> n ==<span class="number">1</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line"> <span class="keyword">return</span> n*fact(n<span class="number">-1</span>)</span><br></pre></td></tr></table></figure><h2 id="六-面向对象"><a href="#六-面向对象" class="headerlink" title="六.面向对象"></a>六.面向对象</h2><blockquote><p>当创建一个类时，在内存中也以类对象存在，当实例一个对象时，实例对象 不具有任何<br>的属性和方法 但是 包含对类的引用，当实例对象调用方法时，其实是通过引用 类对象里<br>的方法或属性 ，在类中创建的属性是属于类的，而在方法中创建的属性是属于每个实例对象的<br>类是与JavaScript中的原型继承<br>可以通过类名的方式获取类属性，但不能获取<strong>init</strong>方法里的实例属性</p></blockquote><p><strong>面向对象的3大特性</strong> </p><ol><li>封装</li><li>继承</li><li>多态</li></ol><h3 id="1-创建类："><a href="#1-创建类：" class="headerlink" title="1.创建类："></a>1.创建类：</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 创建类</span></span><br><span class="line">```python</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Student</span><span class="params">(object)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">__init__</span><span class="params">(self,name,age)</span>:</span></span><br><span class="line"> self.name = name</span><br><span class="line"> self.age = age</span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">print_info</span><span class="params">(self)</span>:</span></span><br><span class="line"> print(<span class="string">'%s : %s'</span> % (self.name, self.age))</span><br></pre></td></tr></table></figure><h3 id="2-实例对象："><a href="#2-实例对象：" class="headerlink" title="2.实例对象："></a>2.实例对象：</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 实例类的对象</span></span><br><span class="line">stu1 = Student(<span class="string">'zhou'</span>,<span class="string">'22'</span>)</span><br><span class="line">stu2 = Student(<span class="string">'hao'</span>,<span class="string">'23'</span>)</span><br><span class="line">stu1.print_info()</span><br></pre></td></tr></table></figure><p>通过方法修改数据，不要直接对象修改数据</p><h3 id="3-访问限制-‘-’"><a href="#3-访问限制-‘-’" class="headerlink" title="3.访问限制 ‘__’"></a>3.访问限制 ‘__’</h3><p><strong>1. 私有属性 ‘__’</strong> </p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 实例的变量名如果以__开头，就变成了一个私有变量（private）</span></span><br><span class="line"><span class="comment"># __name __func</span></span><br><span class="line"><span class="comment"># 私有属性，不能继承</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Student</span><span class="params">(object)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">__init__</span><span class="params">(self, name, age)</span>:</span></span><br><span class="line"> <span class="comment"># 定义 name 和 age 为私有属性</span></span><br><span class="line"> self.__name = name</span><br><span class="line"> self.__age = age</span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">print_info</span><span class="params">(self)</span>:</span></span><br><span class="line"> print(<span class="string">'$s : $s'</span> % (self.__name, self.__age))</span><br><span class="line"> <span class="comment"># 定义 获取 私有属性方法</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">get_name</span><span class="params">(self)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> self.__name</span><br><span class="line"> <span class="comment"># 定义 修改 私有属性方法</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">set_name</span><span class="params">(self, name)</span>:</span></span><br><span class="line"> self.__name = name</span><br><span class="line"> <span class="comment"># 原先那种直接通过bart.score = 59也可以修改啊，为什么要定义一个方法大费周折？</span></span><br><span class="line"> <span class="comment"># 因为在方法中，可以对参数做检查，避免传入无效的参数</span></span><br></pre></td></tr></table></figure><p><strong>2. 特殊变量 ‘<strong>xxx</strong>‘</strong><br>在Python中，变量名类似<code>__xxx__</code>的，也就是以双下划线开头，并且以双下划线结尾的，是特殊变量，<br>特殊变量是可以直接访问的，不是private变量，所以，不能用<code>__name__</code>、<code>__score__</code>这样的变量名。<br><code>__name</code>虽然是private的变量，但是依然可以在外部以<code>_Student_name</code>的形式访问到<br><strong>3> 魔术方法</strong> </p><figure class="highlight py"><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">__str__(self) <span class="comment"># 打印对象时候，打印__str__()方法返回的内容 </span></span><br><span class="line">__init__(self) <span class="comment"># 初始化 </span></span><br><span class="line">__del__(self) <span class="comment"># 对象结束之前 </span></span><br><span class="line">__slots__ <span class="comment"># 限制实例的属性，定义的属性仅对当前类实例起作用，对继承的子类是不起作用的</span></span><br></pre></td></tr></table></figure><p><strong>4. 类属性和类方法</strong> </p><ul><li>直接在类中定义的属性为类属性</li><li>在类中定义的方法都是 实例对象 的方法，如果先用<code>@classmethod</code> 然后定义就成了类方法，类方法传递一个<code>cls</code>参数，<code>cls</code>表示类对象本身。 </li><li>类属性和方法对实例对象是共享的。</li></ul><ul><li>类对象，可以在外部直接调用类属性(除私有)，也可以外部直接调用类方法(除私有)</li><li>但是类对象，不允许访问 实例属性，并且也不允许调用实例方法</li><li>如果是一个实例对象，它可以获取实例属性和类属性的值，但是只能修改实例属性</li><li>不能修改类属性，会覆盖类属性</li><li>它还可以调用 实例方法 和 类方法</li></ul><ul><li><input checked disabled type="checkbox"> <strong>在类内部</strong>，<strong>类方法</strong>中可以访问类的属性和方法(<strong>包括私有的</strong>)，但是不能访问实例的属性和方法(<strong>无论共私</strong>) </li></ul><p><strong>实例方法</strong>中可以访问实例的属性和方法也可以访问类的属性和方法<br>如果实例属性和类属性有相同的，则实例属性覆盖类属性 <br></p><ul><li><input checked disabled type="checkbox"> <strong>在类外部</strong>，<strong>类对象</strong>只能访问类属性和方法(<strong>不能访问私有的</strong>)，也不能访问实例的属性和方法 </li></ul><p><strong>实例对象</strong>可以访问实例的属性和方法(<strong>不能访问私有的</strong>)也可以访问类的属性和方法(<strong>不能访问私有的</strong>)<br>如果实例属性和类属性有相同的，则实例属性覆盖类属性</p><figure class="highlight python"><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="class"><span class="keyword">class</span> <span class="title">Person</span><span class="params">(object)</span>:</span></span><br><span class="line"> <span class="comment"># 定义类属性a 和 类私有属性__b</span></span><br><span class="line">a = <span class="string">'a'</span></span><br><span class="line"> __b = <span class="string">'_b'</span></span><br><span class="line"> num = <span class="number">1</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">__init__</span><span class="params">(self)</span>:</span></span><br><span class="line"> <span class="comment"># 定义实例属性c 和 实例私有属性__d</span></span><br><span class="line"> self.c = <span class="string">'c'</span></span><br><span class="line"> self.__d = <span class="string">'_d'</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">say</span><span class="params">(self)</span>:</span></span><br><span class="line"> print(<span class="string">'实例方法能访问实例属性：'</span> + self.c)</span><br><span class="line"> print(<span class="string">'实例方法能访问实例私有属性：'</span> + self.__d)</span><br><span class="line"> print(<span class="string">'实例方法能访问类属性：'</span> + self.a)</span><br><span class="line"> print(<span class="string">'实例方法能访问类私有属性：'</span> + self.__b)</span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">__psay</span><span class="params">(self)</span>:</span></span><br><span class="line"> <span class="keyword">pass</span></span><br><span class="line"> <span class="comment"># 定义类方法</span></span><br><span class="line"> <span class="comment"># cls 代表当前 类</span></span><br><span class="line"><span class="meta"> @classmethod</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">run</span><span class="params">(cls)</span>:</span></span><br><span class="line"> <span class="comment"># print('类方法不能访问实例属性' + self.c) 报错不能找到</span></span><br><span class="line"> <span class="comment"># print('类方法不能访问实例私有属性' + self.__d) 报错不能找到</span></span><br><span class="line"> print(<span class="string">'类方法能访问类属性'</span> + cls.a)</span><br><span class="line"> print(<span class="string">'类方法能访问类私有属性'</span> + cls.__b)</span><br><span class="line"> print(Person.__b)</span><br><span class="line"></span><br><span class="line"><span class="meta">@classmethod</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">setNum</span><span class="params">(cls)</span>:</span></span><br><span class="line">cls.num+=<span class="number">1</span></span><br><span class="line">p = Person()</span><br><span class="line">p1 = Person()</span><br></pre></td></tr></table></figure><p><strong>5. 静态方法</strong><br>使用<code>@staticmethod</code> 定义方法为静态方法<br>都可以修改属性，都不允许直接调用 实例 对象的方法</p><p><strong>6. <code>@property</code> 装饰器 负责把一个方法变成属性调用</strong><br>@property的实现比较复杂，我们先考察如何使用。把一个getter方法变成属性，<br>只需要加上@property就可以了，此时，<code>@property</code> 本身又创建了另一个装饰器 <code>@score.setter</code>，<br>负责把一个<code>setter</code>方法变成属性赋值，于是，我们就拥有一个可控的属性操作</p><figure class="highlight python"><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="class"><span class="keyword">class</span> <span class="title">Student</span><span class="params">(object)</span>:</span></span><br><span class="line"><span class="meta"> @property</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">score</span><span class="params">(self)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> self._score</span><br><span class="line"><span class="meta"> @score.setter</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">score</span><span class="params">(self, value)</span>:</span></span><br><span class="line"> <span class="keyword">if</span> <span class="keyword">not</span> isinstance(value, int):</span><br><span class="line"> <span class="keyword">raise</span> ValueError(<span class="string">'score must be an integer!'</span>)</span><br><span class="line"> <span class="keyword">if</span> value < <span class="number">0</span> <span class="keyword">or</span> value > <span class="number">100</span>:</span><br><span class="line"> <span class="keyword">raise</span> ValueError(<span class="string">'score must between 0 ~ 100!'</span>)</span><br><span class="line"> self._score = value</span><br><span class="line">s = Student()</span><br><span class="line">s.score = <span class="number">60</span> <span class="comment"># OK</span></span><br><span class="line">s.score = <span class="number">999</span> <span class="comment"># 报错</span></span><br><span class="line">print(s.score) <span class="comment"># 60</span></span><br></pre></td></tr></table></figure><h3 id="4-继承和多态"><a href="#4-继承和多态" class="headerlink" title="4.继承和多态"></a>4.继承和多态</h3><p><strong>1. 继承：</strong> </p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span><span class="params">(object)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">run</span><span class="params">(self)</span>:</span></span><br><span class="line"> print(<span class="string">'animal is runing...'</span>)</span><br><span class="line"><span class="comment"># Dog 继承 Animal</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span><span class="params">(Animal)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">run</span><span class="params">(self)</span>:</span></span><br><span class="line"> Animal.run(self) <span class="comment">#或 super().run()</span></span><br><span class="line"> print(<span class="string">'dog is runing...'</span>)</span><br><span class="line"><span class="comment"># 多继承：</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">C</span><span class="params">(A, B)</span>:</span></span><br><span class="line"><span class="keyword">pass</span></span><br></pre></td></tr></table></figure><p><strong>2. 多态：</strong> </p><figure class="highlight python"><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">dog = Dog()</span><br><span class="line">dog.run()</span><br><span class="line"><span class="comment">#当子类和父类都存在相同的run()方法时，我们说，子类的run()覆盖了父类的run()，在代码运行的时候，总是会调用子类的run()。这样，我们就获得了继承的另一个好处：多态。</span></span><br></pre></td></tr></table></figure><p><strong>3. isinstance() 判断一个变量是否是某个类型</strong> </p><figure class="highlight python"><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">a = list()</span><br><span class="line">isinstance(a,list) <span class="comment"># True</span></span><br><span class="line">isinstance(dog,Dog) <span class="comment"># True</span></span><br><span class="line">isinstance(dog,Animal) <span class="comment"># True</span></span><br><span class="line">“开闭”原则：</span><br><span class="line">对扩展开放：允许新增Animal子类；</span><br><span class="line">对修改封闭：不需要修改依赖Animal类型的run_twice()等函数。</span><br></pre></td></tr></table></figure><p><strong>4. C.<strong>mro</strong> # python3返回C类的继承顺序</strong><br><strong>5. 多继承 MixIn的目的就是给一个类增加多个功能</strong> </p><figure class="highlight python"><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="class"><span class="keyword">class</span> <span class="title">Bat</span><span class="params">(Mammal, Flyable)</span>:</span></span><br><span class="line"> <span class="keyword">pass</span></span><br></pre></td></tr></table></figure><h3 id="5-获取对象信息"><a href="#5-获取对象信息" class="headerlink" title="5.获取对象信息"></a>5.获取对象信息</h3><p><strong>1. type() 判断对象类型</strong> </p><figure class="highlight python"><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">type(<span class="number">123</span>) <span class="comment"># <type 'int'></span></span><br><span class="line">type(<span class="string">'str'</span>) <span class="comment"># <type 'str'></span></span><br><span class="line">type(<span class="literal">None</span>) <span class="comment"># <type 'NoneType'></span></span><br><span class="line">type(<span class="string">''</span>)</span><br><span class="line">types模块</span><br><span class="line"><span class="keyword">import</span> types</span><br><span class="line">type(<span class="string">'abc'</span>) == types.StringType</span><br><span class="line">type(<span class="string">u'abc'</span>) == types.UnicodeType</span><br><span class="line">type([]) == types.ListType</span><br><span class="line">type(str) == types.TypeType</span><br></pre></td></tr></table></figure><p><strong>2. isinstance() 一个对象是否是某种类型 或者位于该类型的父继承链上</strong> </p><p><strong>3. 使用dir() 获得一个对象的所有属性和方法,返回list</strong> </p><figure class="highlight python"><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"># 其中__len__方法返回长度 len()方法实际是调用内部__len()__</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">My_dog</span><span class="params">(object)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">__len__</span><span class="params">(self)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> <span class="number">100</span></span><br><span class="line">dog = My_dog()</span><br><span class="line">len(dog) //<span class="number">100</span></span><br></pre></td></tr></table></figure><p><strong>4. getattr(obj,’x’,404),setattr(obj,’x’,22),hasattr(obj,’y’)</strong> </p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyDog</span><span class="params">(object)</span>:</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">__init__</span><span class="params">(self)</span>:</span></span><br><span class="line"> self.x = <span class="number">9</span></span><br><span class="line"> <span class="function"><span class="keyword">def</span> <span class="title">power</span><span class="params">(self)</span>:</span></span><br><span class="line"> <span class="keyword">return</span> self.x * self.x</span><br><span class="line">obj = MyDog()</span><br><span class="line">hasattr(obj,<span class="string">'x'</span>) <span class="comment"># True</span></span><br><span class="line">hasattr(obj,<span class="string">'y'</span>) <span class="comment"># False</span></span><br><span class="line">setattr(obj,<span class="string">'y'</span>,<span class="number">19</span>)</span><br><span class="line">hasattr(obj,<span class="string">'y'</span>) <span class="comment"># True</span></span><br><span class="line">getattr(obj,<span class="string">'y'</span>) <span class="comment"># 19</span></span><br></pre></td></tr></table></figure><h3 id="6-实例属性和类的属性"><a href="#6-实例属性和类的属性" class="headerlink" title="6.实例属性和类的属性"></a>6.实例属性和类的属性</h3><figure class="highlight py"><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="class"><span class="keyword">class</span> <span class="title">Student</span><span class="params">(object)</span>:</span></span><br><span class="line"> name = <span class="string">'student'</span></span><br><span class="line">s = Student()</span><br><span class="line">print(s.name) <span class="comment"># 'student'</span></span><br><span class="line">print(Student.name) <span class="comment"># 'student'</span></span><br><span class="line">s.name = <span class="string">'zhou'</span></span><br><span class="line">print(s.name) <span class="comment"># 'zhou'</span></span><br><span class="line">print(Student.name) <span class="comment"># 'student'</span></span><br><span class="line"><span class="keyword">del</span> s.name</span><br><span class="line">print(s.name) <span class="comment"># 'student'</span></span><br></pre></td></tr></table></figure><blockquote><p>在编写程序的时候，千万不要把实例属性和类属性使用相同的名字，<br>因为相同名称的实例属性将屏蔽掉类属性，<br>但是当你删除实例属性后，再使用相同的名称，访问到的将是类属性’</p></blockquote><blockquote><p>在Python中变量的赋值是，先创建一个内存然后把数据存放在内存中，<br>把内存的 地址(指针) 赋值给这个变量。</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">a = 100</span><br><span class="line">b = a a 和 b指向的是同一个内存</span><br><span class="line">a = 200 a的地址改变 引用计数就为0 这样就会被垃圾回收器 回收</span><br><span class="line">理解：</span><br><span class="line">就像一个房子(内存)，里面有电视，床。。。(数据)，然后这个房子有个名字A，</span><br><span class="line">A里面存的是这个房子的位置(地址)，所以A就是这个房子的引用，现在我把B = A</span><br><span class="line">就是把A的位置给了B所以就有 A和B是这个房子的不同的名字，就好像同一个人，有</span><br><span class="line">不同的外号一样，都指的是同一个人</span><br><span class="line">在python中 分为可变数据(列表，字典)和不可变数据(字符串，数字,元祖,布尔..)</span><br><span class="line">如果是不可变数据 改变 A 的值，实际上是改变A的指向(地址)</span><br><span class="line">如果是可变数据，改变B中的元素(增加了家具) A 中的元素也会被改变</span><br></pre></td></tr></table></figure><h2 id="七-异常"><a href="#七-异常" class="headerlink" title="七.异常"></a>七.异常</h2><p><a href="https://blog.csdn.net/Karen_Yu_/article/details/78629918" target="_blank" rel="noopener">python所有的标准异常类</a> </p><figure class="highlight python"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span>:</span><br><span class="line">num = <span class="number">100</span></span><br><span class="line"><span class="keyword">except</span> (IOError,NameError) <span class="keyword">as</span> error:</span><br><span class="line">print(<span class="string">"出错了"</span>)</span><br><span class="line">print(error)</span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line">print(<span class="string">'没出错'</span>)</span><br><span class="line"><span class="keyword">finally</span>:</span><br><span class="line">print(<span class="string">"不管出没出错"</span>)</span><br><span class="line">f.close()</span><br><span class="line">print(<span class="string">'end'</span>)</span><br><span class="line"><span class="comment"># 捕获所有异常</span></span><br><span class="line"><span class="comment"># 这个将会捕获除了 SystemExit 、 KeyboardInterrupt 和 GeneratorExit 之外的所有异常。 如果你还想捕获这三个异常，将 Exception 改成 BaseException 即可。</span></span><br><span class="line"><span class="keyword">try</span>:</span><br><span class="line"> <span class="keyword">pass</span></span><br><span class="line"><span class="keyword">except</span> Exception <span class="keyword">as</span> e:</span><br><span class="line"> print(e)</span><br><span class="line"><span class="comment"># trackback 模块</span></span><br><span class="line"><span class="comment"># 用来精确模仿 python3 解析器的 stack trace 行为。</span></span><br><span class="line"><span class="comment"># 在程序中应该尽量使用这个模块。</span></span><br><span class="line"><span class="keyword">import</span> traceback</span><br><span class="line"><span class="keyword">try</span>:</span><br><span class="line"> <span class="keyword">pass</span></span><br><span class="line"><span class="keyword">except</span>:</span><br><span class="line"> traceback.print_exc() <span class="comment"># 输出详细的错误异常信息</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 自定义异常 </span></span><br><span class="line"><span class="comment"># raise 强制引发异常。一旦执行了raise 语句，raise后面的语句将不能执行</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">ShortInputException</span><span class="params">(Exception)</span>:</span></span><br><span class="line"><span class="string">""" 定义的异常类 """</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">__init__</span><span class="params">(self, length, atleast)</span>:</span></span><br><span class="line">Exception.__init__(self)</span><br><span class="line">self.length = length</span><br><span class="line">self.atleast = atleast</span><br><span class="line"></span><br><span class="line"><span class="keyword">try</span>: </span><br><span class="line"><span class="keyword">if</span> len(s) < <span class="number">3</span>:</span><br><span class="line"><span class="comment"># 产生异常</span></span><br><span class="line"><span class="keyword">raise</span> ShortInputException(len(s), <span class="number">3</span>)</span><br><span class="line"><span class="keyword">except</span> EoFError:</span><br><span class="line"><span class="keyword">pass</span></span><br><span class="line"><span class="keyword">except</span> ShortInputException, x: <span class="comment"># x绑定到了错误实例</span></span><br><span class="line">print()</span><br><span class="line"><span class="keyword">else</span>:</span><br><span class="line">print(<span class="string">"没有实现异常"</span>)</span><br></pre></td></tr></table></figure><pre><code class="py">iterable [<span class="string">'itəreibl'</span>] <span class="comment"># 可迭代的 </span>iterator [<span class="string">'itəreitə'</span>] <span class="comment"># 迭代器 </span>generator [<span class="string">'dʒenəreɪtə(r)'</span>] <span class="comment"># 生成器 </span><span class="keyword">yield</span> [ji:ld] isinstance() StopIteration </code></pre>]]></content>
<summary type="html">
<p><strong>Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。</strong><br>Python 是由 Guido van Rossum 在八十年代末和九十年代初，在荷兰国家数学和计算机科学研究所设计出来的。<br>Python 本身也是由诸多其他语言发展而来的,这包括 ABC、Modula-3、C、C++、Algol-68、SmallTalk、Unix shell 和其他的脚本语言等等。<br>像 Perl 语言一样，Python 源代码同样遵循 GPL(GNU General Public License)协议。<br>现在 Python 是由一个核心开发团队在维护，Guido van Rossum 仍然占据着至关重要的作用，指导其进展。</p>
</summary>
<category term="Python" scheme="https://www.xin666.cc/categories/Python/"/>
<category term="Python" scheme="https://www.xin666.cc/tags/Python/"/>
</entry>
<entry>
<title>CSS网格Grid布局</title>
<link href="https://www.xin666.cc/CSS%E7%BD%91%E6%A0%BCGrid%E5%B8%83%E5%B1%80/"/>
<id>https://www.xin666.cc/CSS网格Grid布局/</id>
<published>2018-08-27T11:03:00.000Z</published>
<updated>2021-08-11T07:17:58.975Z</updated>
<content type="html"><![CDATA[<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。<br>CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。<br><a href="https://caniuse.com/#feat=css-grid" target="_blank" rel="noopener">浏览器兼容支持</a></p><a id="more"></a><h2 id="重要术语"><a href="#重要术语" class="headerlink" title="重要术语"></a>重要术语</h2><ul><li>网格容器(Grid Container)</li><li>网格项(Grid Item)</li><li>网格线(Grid Line)</li><li>网格轨道(Grid Track)</li><li>网格单元(Grid Cell)</li><li>网格区域(Grid Area)<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></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">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item item-1"</span>></span>item1<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">"item item-2"</span>></span>item2<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">"item item-3"</span>></span>item3<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></pre></td></tr></table></figure></li></ul><h2 id="网格容器属性"><a href="#网格容器属性" class="headerlink" title="网格容器属性"></a>网格容器属性</h2><ol><li>display</li><li>grid-template-columns</li><li>grid-template-rows</li><li>grid-template-areas</li><li>grid-template</li><li>grid-column-gap</li><li>grid-row-gap</li><li>grid-gap</li><li>justify-items</li><li>align-items</li><li>justify-content</li><li>align-content</li><li>grid-auto-columns</li><li>grid-auto-rows</li><li>grid-auto-flow</li><li>grid</li></ol><h2 id="网格项目属性"><a href="#网格项目属性" class="headerlink" title="网格项目属性"></a>网格项目属性</h2><ol><li>grid-column-start</li><li>grid-column-end</li><li>grid-row-start</li><li>grid-row-end</li><li>grid-column</li><li>grid-row</li><li>grid-area</li><li>justify-self</li><li>align-self</li></ol><h2 id="推荐"><a href="#推荐" class="headerlink" title="推荐"></a>推荐</h2><ul><li><a href="http://www.css88.com/archives/8510/comment-page-1" target="_blank" rel="noopener">CSS Grid 布局完全指南(图解 Grid 详细教程)</a> </li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout" target="_blank" rel="noopener">MDN 网格布局教程</a> </li><li><a href="https://www.cnblogs.com/QianBoy/p/8626176.html" target="_blank" rel="noopener">CSS Grid 网格布局全解析</a> </li><li><a href="http://www.css88.com/archives/8512" target="_blank" rel="noopener">如何使用 CSS Grid 快速而又灵活的布局</a></li></ul>]]></content>
<summary type="html">
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。<br>CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。<br><a href="https://caniuse.com/#feat=css-grid" target="_blank" rel="noopener">浏览器兼容支持</a></p>
</summary>
<category term="CSS" scheme="https://www.xin666.cc/categories/CSS/"/>
<category term="CSS" scheme="https://www.xin666.cc/tags/CSS/"/>
<category term="布局" scheme="https://www.xin666.cc/tags/%E5%B8%83%E5%B1%80/"/>
</entry>
<entry>
<title>Vue-04学习笔记-动画</title>
<link href="https://www.xin666.cc/Vue-04%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%8A%A8%E7%94%BB/"/>
<id>https://www.xin666.cc/Vue-04学习笔记-动画/</id>
<published>2018-08-04T17:07:00.000Z</published>
<updated>2021-08-11T07:17:58.991Z</updated>
<content type="html"><![CDATA[<h2 id="Vue中css动画原理"><a href="#Vue中css动画原理" class="headerlink" title="Vue中css动画原理"></a>Vue中css动画原理</h2><ul><li>过度动画效果</li></ul><p><strong><code><transition>过度动画</code></strong><br>首先点击按钮的时候，页面即将被显示，当还没有显示，动画运行要第一帧的时候<br>fade-enter和fade-enter-active一起存在，当动画运行到第二帧的时候，vue把<br>fade-enter给移除了</p><a id="more"></a><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter</span>, <span class="selector-class">.fade-leave-to</span> {</span></span><br><span class="line"> opacity: 0;</span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter-active</span>, <span class="selector-class">.fade-leave-active</span> {</span></span><br><span class="line"> transition: opacity 2s;</span><br><span class="line"> }</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"show"</span>></span>hello world<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">transition</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span>切换<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> show: <span class="literal">true</span></span></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.show = !<span class="keyword">this</span>.show;</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="Vue中使用animate-css库"><a href="#Vue中使用animate-css库" class="headerlink" title="Vue中使用animate.css库"></a>Vue中使用animate.css库</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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span> <span class="attr">enter-active-class</span>=<span class="string">"animated swing"</span> <span class="attr">leave-active-class</span>=<span class="string">"animated shake"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"show"</span>></span>hello world<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">transition</span>></span></span><br></pre></td></tr></table></figure><h2 id="在vue中同时使用过度和动画"><a href="#在vue中同时使用过度和动画" class="headerlink" title="在vue中同时使用过度和动画"></a>在vue中同时使用过度和动画</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter</span>, <span class="selector-class">.fade-leave-to</span> {</span></span><br><span class="line"> opacity: 0;</span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter-active</span>, <span class="selector-class">.fade-leave-active</span> {</span></span><br><span class="line"> transition: opacity 3s;</span><br><span class="line"> }</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">transition</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">type</span>=<span class="string">"transition"</span> //设置动画时间与哪个为准</span></span><br><span class="line"><span class="tag"> <span class="attr">:duration</span>=<span class="string">"{enter: 5000, leave: 5000}"</span> // <span class="attr">:duration</span>=<span class="string">"5000"</span> 自定义时间</span></span><br><span class="line"><span class="tag"> <span class="attr">name</span>=<span class="string">"fade"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">enter-active-class</span>=<span class="string">"animated swing fade-enter-active"</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">leave-active-class</span>=<span class="string">"animated shake fade-leave-active"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">appear</span> //设置初始动画以<span class="attr">appear</span></span></span><br><span class="line"><span class="tag"> <span class="attr">appear-active-class</span>=<span class="string">"animated swing"</span> // 设置初始的动画效果</span></span><br><span class="line"><span class="tag"> ></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"show"</span>></span>hello world<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">transition</span>></span></span><br></pre></td></tr></table></figure><h2 id="Vue中的Js动画与Velocity-js库的结合"><a href="#Vue中的Js动画与Velocity-js库的结合" class="headerlink" title="Vue中的Js动画与Velocity.js库的结合"></a>Vue中的Js动画与Velocity.js库的结合</h2><h3 id="动画钩子函数"><a href="#动画钩子函数" class="headerlink" title="动画钩子函数"></a>动画钩子函数</h3><p><strong>入场动画</strong> </p><ul><li>@beforeEnter 动画执行之前</li><li>@enter 动画开始执行</li><li>@after-enter 动画执行完 当done执行完后执行</li></ul><p><strong>出场动画</strong> </p><blockquote><p>通入场动画一致</p></blockquote><ul><li>@before-leave</li><li>@leave</li><li>@after-leave</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">name</span>=<span class="string">"fade"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">before-enter</span>=<span class="string">"handleBeforeEnter"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">enter</span>=<span class="string">"handleEnter"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">after-enter</span>=<span class="string">"handleAfterEnter"</span></span></span><br><span class="line"><span class="tag"> ></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"show"</span>></span>hello world<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">transition</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span>切换<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> show: <span class="literal">true</span></span></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.show = !<span class="keyword">this</span>.show;</span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleBeforeEnter: <span class="function"><span class="keyword">function</span><span class="params">(el)</span> </span>{</span></span><br><span class="line"><span class="actionscript"> el.style.color = <span class="string">'red'</span>;</span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleEnter: <span class="function"><span class="keyword">function</span><span class="params">(el, done)</span> </span>{</span></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span></span><br><span class="line"><span class="actionscript"> el.style.color = <span class="string">'green'</span>;</span></span><br><span class="line"><span class="actionscript"> }, <span class="number">2000</span>);<span class="comment">// 2s后执行</span></span></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span></span><br><span class="line"><span class="actionscript"> done() <span class="comment">// 4s后执行done告诉vue动画结束，可以开始执行@after-enter</span></span></span><br><span class="line"> }, 4000);</span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleAfterEnter: <span class="function"><span class="keyword">function</span><span class="params">(el)</span> </span>{</span></span><br><span class="line"><span class="actionscript"> el.style.color = <span class="string">'blue'</span>;</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="velocity-js的使用"><a href="#velocity-js的使用" class="headerlink" title="velocity.js的使用"></a>velocity.js的使用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><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="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"velocity.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> show: <span class="literal">true</span></span></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.show = !<span class="keyword">this</span>.show;</span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleBeforeEnter: <span class="function"><span class="keyword">function</span><span class="params">(el)</span> </span>{</span></span><br><span class="line"> el.style.opacity = 0;</span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleEnter: <span class="function"><span class="keyword">function</span><span class="params">(el, done)</span> </span>{</span></span><br><span class="line"> Velocity(el, {</span><br><span class="line"><span class="actionscript"> opacity: <span class="number">1</span> <span class="comment">//执行的动画</span></span></span><br><span class="line"> },{</span><br><span class="line"><span class="actionscript"> duration: <span class="number">1000</span>, <span class="comment">// 动画时间</span></span></span><br><span class="line"><span class="actionscript"> complete: done <span class="comment">//动画完成后执行done</span></span></span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleAfterEnter: <span class="function"><span class="keyword">function</span><span class="params">(el)</span> </span>{</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="string">'动画结束！'</span>)</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="Vue中多个元素或多个组件的过度"><a href="#Vue中多个元素或多个组件的过度" class="headerlink" title="Vue中多个元素或多个组件的过度"></a>Vue中多个元素或多个组件的过度</h2><ul><li>给每一个元素添加一个不同的key</li><li>使用<code><component :is="组件名"></component></code>动态组件<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter</span>, <span class="selector-class">.fade-leave-to</span> {</span></span><br><span class="line"> opacity: 0;</span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter-active</span>, <span class="selector-class">.fade-leave-active</span> {</span></span><br><span class="line"> transition: opacity 1s;</span><br><span class="line"> }</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span> <span class="attr">mode</span>=<span class="string">"in-out"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"type"</span>></span><span class="tag"></<span class="name">component</span>></span></span><br><span class="line"> <span class="comment"><!-- <child-one v-if="show"></child-one></span></span><br><span class="line"><span class="comment"> <child-two v-else></child-two> --></span></span><br><span class="line"> <span class="comment"><!-- <div v-if="show" key="hello">hello world</div></span></span><br><span class="line"><span class="comment"> <div v-else key="bye">Bye world</div> --></span></span><br><span class="line"> <span class="tag"></<span class="name">transition</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span>切换<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'child-one'</span>, {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span>></span>child-one<span class="tag"></<span class="name">div</span>></span>'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'child-two'</span>, {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span>></span>child-two<span class="tag"></<span class="name">div</span>></span>'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> show: <span class="literal">true</span>,</span></span><br><span class="line"><span class="actionscript"> type: <span class="string">'child-one'</span></span></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.show = !<span class="keyword">this</span>.show;</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.type = <span class="keyword">this</span>.type == <span class="string">'child-one'</span>? <span class="string">'child-two'</span> : <span class="string">'child-one'</span></span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></li></ul><h2 id="vue中的列表过度"><a href="#vue中的列表过度" class="headerlink" title="vue中的列表过度"></a>vue中的列表过度</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter</span>, <span class="selector-class">.fade-leave-to</span> {</span></span><br><span class="line"> opacity: 0;</span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.fade-enter-active</span>, <span class="selector-class">.fade-leave-active</span> {</span></span><br><span class="line"> transition: opacity 1s;</span><br><span class="line"> }</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">transition-group</span> <span class="attr">name</span>=<span class="string">"fade"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item, index) of list"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span> <span class="attr">:data-id</span>=<span class="string">"item.id"</span>></span></span><br><span class="line"> {{item.title}}</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">transition-group</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span>Add<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> count = <span class="number">0</span>;</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"> list: []</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.list.push({</span></span><br><span class="line"> id: ++count,</span><br><span class="line"><span class="actionscript"> title: <span class="string">'hello world'</span> + <span class="string">'---'</span> + count</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="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="Vue中的动画封装"><a href="#Vue中的动画封装" class="headerlink" title="Vue中的动画封装"></a>Vue中的动画封装</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">fade</span> <span class="attr">v-if</span>=<span class="string">"show"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>hello world<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">fade</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">fade</span> <span class="attr">v-if</span>=<span class="string">"show"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>hello world<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">fade</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span>Add<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'fade'</span>, {</span></span><br><span class="line"><span class="actionscript"> props: [<span class="string">'show'</span>],</span></span><br><span class="line"> template: `</span><br><span class="line"><span class="actionscript"> <transition name=<span class="string">"fade"</span> </span></span><br><span class="line"><span class="actionscript"> @before-enter=<span class="string">"handleBeforeEnter"</span></span></span><br><span class="line"><span class="actionscript"> @enter=<span class="string">"handleEnter"</span></span></span><br><span class="line"> ></span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"><<span class="name">slot</span> <span class="attr">v-show</span>=<span class="string">"show"</span>></span><span class="tag"></<span class="name">slot</span>></span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"></<span class="name">transition</span>></span></span></span></span><br><span class="line"> `,</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleBeforeEnter: <span class="function"><span class="keyword">function</span><span class="params">(el)</span> </span>{</span></span><br><span class="line"><span class="actionscript"> el.style.color = <span class="string">'red'</span>;</span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> handleEnter: <span class="function"><span class="keyword">function</span><span class="params">(el, done)</span> </span>{</span></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span></span><br><span class="line"><span class="actionscript"> el.style.color = <span class="string">'green'</span>;</span></span><br><span class="line"> done();</span><br><span class="line"> },2000)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> show: <span class="literal">true</span></span></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.show = !<span class="keyword">this</span>.show;</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul><li>vue中的过度动画</li><li>css3动画</li><li>animate.css使用</li><li>velocity.js使用</li><li>多个元素动画</li><li>列表动画</li><li>动画封装</li></ul>]]></content>
<summary type="html">
<h2 id="Vue中css动画原理"><a href="#Vue中css动画原理" class="headerlink" title="Vue中css动画原理"></a>Vue中css动画原理</h2><ul>
<li>过度动画效果</li>
</ul>
<p><strong><code>&lt;transition&gt;过度动画</code></strong><br>首先点击按钮的时候，页面即将被显示，当还没有显示，动画运行要第一帧的时候<br>fade-enter和fade-enter-active一起存在，当动画运行到第二帧的时候，vue把<br>fade-enter给移除了</p>
</summary>
<category term="Vue" scheme="https://www.xin666.cc/categories/Vue/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="Vue" scheme="https://www.xin666.cc/tags/Vue/"/>
</entry>
<entry>
<title>Vue-03学习笔记-组件</title>
<link href="https://www.xin666.cc/Vue-03%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E7%BB%84%E4%BB%B6/"/>
<id>https://www.xin666.cc/Vue-03学习笔记-组件/</id>
<published>2018-08-04T17:05:00.000Z</published>
<updated>2021-08-11T07:17:58.991Z</updated>
<content type="html"><![CDATA[<h2 id="组件细节"><a href="#组件细节" class="headerlink" title="组件细节"></a>组件细节</h2><ul><li>is解决html bug</li><li>子组件中data必须是一个函数</li><li>ref使用</li></ul><h3 id="is用法"><a href="#is用法" class="headerlink" title="is用法"></a>is用法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span> <span class="attr">is</span>=<span class="string">"row"</span>></span><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span><span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">table</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>组件中使用data数据，必须是一个函数，返回一个对象</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'row'</span>, {</span><br><span class="line"> data: <span class="function"><span class="params">()</span>=></span>{</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="string">'content'</span>: <span class="string">'this is a rowa'</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> template: <span class="string">'<tr><td>{{content}}</td></tr>'</span></span><br><span class="line">})</span><br><span class="line"><span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><a id="more"></a><h3 id="ref用法"><a href="#ref用法" class="headerlink" title="ref用法"></a>ref用法</h3><blockquote><p>获取dom元素</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">ref</span>=<span class="string">"hello"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>.$refs.hello)</span><br></pre></td></tr></table></figure><p><strong>组件求和</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">counter</span> <span class="attr">ref</span>=<span class="string">"one"</span> @<span class="attr">change</span>=<span class="string">"handleChange"</span>></span><span class="tag"></<span class="name">counter</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">counter</span> <span class="attr">ref</span>=<span class="string">"two"</span> @<span class="attr">change</span>=<span class="string">"handleChange"</span>></span><span class="tag"></<span class="name">counter</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> ></span></span><br><span class="line"> {{total}}</span><br><span class="line"> <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="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'counter'</span>, {</span></span><br><span class="line"><span class="actionscript"> data: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span> {</span></span><br><span class="line"> number: 0</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span></span><span class="template-variable">{{number}}</span><span class="xml"><span class="tag"></<span class="name">div</span>></span>',</span></span></span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.number++;</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.$emit(<span class="string">'change'</span>, <span class="keyword">this</span>.number)</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"> total: 0</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleChange: <span class="function"><span class="keyword">function</span><span class="params">(aa)</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> one = <span class="keyword">this</span>.$refs.one.number;</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> two = <span class="keyword">this</span>.$refs.two.number;</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.total = one + two;</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="父子组件的数据传递"><a href="#父子组件的数据传递" class="headerlink" title="父子组件的数据传递"></a>父子组件的数据传递</h2><ul><li>子组件向父组件传值</li><li>父组件向子组件传值</li><li>单项数据流<h3 id="父组件向子组件"><a href="#父组件向子组件" class="headerlink" title="父组件向子组件"></a>父组件向子组件</h3></li></ul><p>单项数据流 </p><blockquote><p><strong>父组件向子组件传递数据是通过父组件上属性传递，父组件向子组件传递参数通过属性形式的数据，父组件可以随意的修改数据，但是，子组件不能随意的去修改父组件传递过来的数据</strong></p></blockquote><h3 id="子组件向父组件"><a href="#子组件向父组件" class="headerlink" title="子组件向父组件"></a>子组件向父组件</h3><blockquote><p>**子组件向父组件传递数据，通过事件的形式<code>$emit('change',...[arg1,arg2])</code></p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">counter</span> <span class="attr">:count</span>=<span class="string">"1"</span> @<span class="attr">inc</span>=<span class="string">"handleIncrease"</span>></span><span class="tag"></<span class="name">counter</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">counter</span> <span class="attr">:count</span>=<span class="string">"2"</span> @<span class="attr">inc</span>=<span class="string">"handleIncrease"</span>></span><span class="tag"></<span class="name">counter</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>{{total}}<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><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> counter = {</span></span><br><span class="line"><span class="actionscript"> props: [<span class="string">'count'</span>],</span></span><br><span class="line"><span class="actionscript"> data: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="actionscript"> number: <span class="keyword">this</span>.count</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span></span><span class="template-variable">{{number}}</span><span class="xml"><span class="tag"></<span class="name">div</span>></span>',</span></span></span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.number+=<span class="number">2</span>;</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.$emit(<span class="string">'inc'</span>, <span class="number">2</span>)</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"> total: 3</span><br><span class="line"> },</span><br><span class="line"> components: {</span><br><span class="line"> counter: counter,</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleIncrease: <span class="function"><span class="keyword">function</span><span class="params">(step)</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.total+=step;</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="组件参数效验与非props特效"><a href="#组件参数效验与非props特效" class="headerlink" title="组件参数效验与非props特效"></a>组件参数效验与非props特效</h2><ul><li>直接[String,Number,Object,Boolean,Array,Date,Function,Symbol]</li><li>传值对象：type,required,default</li><li>validator函数校验</li><li>Prop特性和非Prop特性</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">content</span>=<span class="string">"hello"</span>></span><span class="tag"></<span class="name">child</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'child'</span>, {</span></span><br><span class="line"> props: {</span><br><span class="line"> content: {</span><br><span class="line"><span class="javascript"> type: [<span class="built_in">String</span>, <span class="built_in">Number</span>],</span></span><br><span class="line"><span class="actionscript"> required: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">default</span>: <span class="string">'default value'</span>,</span></span><br><span class="line"><span class="actionscript"> validator: <span class="function"><span class="keyword">function</span><span class="params">(value)</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span> (value.length > <span class="number">5</span>)</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span>></span></span><span class="template-variable">{{content}}</span><span class="xml"><span class="tag"></<span class="name">div</span>></span>'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> content: <span class="string">'hello world!'</span>,</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p><strong>Prop特性</strong> </p><blockquote><p>父组件通过属性prop传递给子组件数据，子组件声明接收属性，然后可以直接用插值表达式或this来使用接收的数据</p></blockquote><p><strong>非 Prop 的特性</strong> </p><blockquote><p>父组件向子组件传递了数据，但是子组件<strong>并没有声明接收传递的数据</strong></p></blockquote><ol><li>报错</li><li>属性会展示在子组件最外层的html上</li></ol><h2 id="给组件绑定原生事件"><a href="#给组件绑定原生事件" class="headerlink" title="给组件绑定原生事件"></a>给组件绑定原生事件</h2><blockquote><p>給一个组件绑定一个事件的时候，实际上绑定的是一个<strong>自定义的事件</strong>。<br>可以使用<code>this.$emit('click')</code>触发父组件事件。<br>也可以在父组件上使用<code>@click.native</code>绑定原生事件。</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">content</span>=<span class="string">"hello world"</span> @<span class="attr">click.native</span>=<span class="string">"handleClick"</span>></span><span class="tag"></<span class="name">child</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'child'</span>, {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span>child<span class="tag"></<span class="name">div</span>></span>',</span></span></span><br><span class="line"> methods: {</span><br><span class="line"> handleClick() {</span><br><span class="line"><span class="actionscript"> alert(<span class="string">'child click'</span>);</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.$emit(<span class="string">'click'</span>);</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> methods: {</span><br><span class="line"><span class="actionscript"> handleClick: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> alert(<span class="string">'hello'</span>)</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="非父子组件间的传值"><a href="#非父子组件间的传值" class="headerlink" title="非父子组件间的传值"></a>非父子组件间的传值</h2><p><img src="http://p09g3b06f.bkt.clouddn.com/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B003-Vue%E4%B8%AD%E7%BB%84%E4%BB%B6%E5%88%92%E5%88%86%E5%92%8C%E4%BC%A0%E5%80%BC.png" alt="非父子组件传值"></p><ol><li>子孙传值</li><li>兄弟传值</li><li>堂兄弟传值<br>……<blockquote><p>如果使用父子之间一层层传(属性和事件触发)会非常复杂,第一可以使用VUEX来解决，第二可以使用<strong>发布订阅模式</strong>(Bus/总线/发布订阅/观察者模式)</p></blockquote></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 后面每一个 new Vue()的组件都会有bus这个属性</span></span><br><span class="line">Vue.prototype.bus = <span class="keyword">new</span> Vue();</span><br><span class="line"><span class="comment">// 通过 $emit('change', this.content)自定义事件,和传参数</span></span><br><span class="line"><span class="keyword">this</span>.bus.$emit(<span class="string">'change'</span>, <span class="keyword">this</span>.content)</span><br><span class="line"><span class="comment">// 通过$on('change', callback) //触发自定义事件，并回调函数</span></span><br><span class="line"><span class="keyword">this</span>.bus.$on(<span class="string">'change'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">msg</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(msg)</span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">content</span>=<span class="string">"Dell"</span>></span><span class="tag"></<span class="name">child</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">content</span>=<span class="string">"Lee"</span>></span><span class="tag"></<span class="name">child</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.prototype.bus = <span class="keyword">new</span> Vue();</span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'child'</span>, {</span></span><br><span class="line"> props: {</span><br><span class="line"><span class="javascript"> content: <span class="built_in">String</span></span></span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> data: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="actionscript"> msg: <span class="keyword">this</span>.content</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="handlebars"><span class="xml"> template: '<span class="tag"><<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>></span></span><span class="template-variable">{{msg}}</span><span class="xml"><span class="tag"></<span class="name">div</span>></span>',</span></span></span><br><span class="line"> methods: {</span><br><span class="line"> handleClick() {</span><br><span class="line"><span class="actionscript"> <span class="comment">// alert(this.content)</span></span></span><br><span class="line"><span class="actionscript"> <span class="comment">// 自定触发事件</span></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.bus.$emit(<span class="string">'change'</span>, <span class="keyword">this</span>.content)</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="actionscript"> mounted: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="comment">// 监听事件</span></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> this_ = <span class="keyword">this</span></span></span><br><span class="line"><span class="actionscript"> <span class="keyword">this</span>.bus.$on(<span class="string">'change'</span>, <span class="function"><span class="keyword">function</span><span class="params">(msg)</span></span>{</span></span><br><span class="line"> this_.msg = msg</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> data: {</span><br><span class="line"><span class="actionscript"> content: <span class="string">'hello world!'</span>,</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="在Vue中使用插槽"><a href="#在Vue中使用插槽" class="headerlink" title="在Vue中使用插槽"></a>在Vue中使用插槽</h2><p>匿名插槽<br>具名插槽</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">base-layout</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">slot</span>=<span class="string">"header"</span>></span>Here might be a page title<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>A paragraph for the main content.<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>And another one.<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"footer"</span>></span>Here's some contact info<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">base-layout</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"header"</span>></span><span class="tag"></<span class="name">slot</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">header</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span>></span><span class="tag"></<span class="name">slot</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">main</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">footer</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"footer"</span>></span><span class="tag"></<span class="name">slot</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">footer</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2 id="Vue中的作用于插槽"><a href="#Vue中的作用于插槽" class="headerlink" title="Vue中的作用于插槽"></a>Vue中的作用于插槽</h2><blockquote><p>作用于插槽必须是一个template的内容，然后声明slot-scope<br>当子组件循环或某一部分它的dom结构由外部传递进来的时候使用作用于插槽</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>{{props.item}}<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">child</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="actionscript"> Vue.component(<span class="string">'child'</span>, {</span></span><br><span class="line"><span class="actionscript"> data: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span> {</span></span><br><span class="line"> list: [1, 2, 3, 4, 5]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="handlebars"><span class="xml"> template: `<span class="tag"><<span class="name">div</span>></span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"><<span class="name">ul</span>></span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"><<span class="name">slot</span> <span class="attr">v-for</span>=<span class="string">"item of list"</span> <span class="attr">:item</span>=<span class="string">item</span>></span><span class="tag"></<span class="name">slot</span>></span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"></<span class="name">ul</span>></span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml"> <span class="tag"></<span class="name">div</span>></span>`</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="actionscript"> <span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span></span><br><span class="line"><span class="actionscript"> el: <span class="string">'#app'</span>,</span></span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h2 id="动态组件与v-once指令"><a href="#动态组件与v-once指令" class="headerlink" title="动态组件与v-once指令"></a>动态组件与v-once指令</h2><blockquote><p>使用component</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"type"</span>></span><span class="tag"></<span class="name">component</span>></span></span><br></pre></td></tr></table></figure><p><strong>v-once</strong></p><blockquote><p>不用重新创建组件，可以有效提高性能</p></blockquote>]]></content>
<summary type="html">
<h2 id="组件细节"><a href="#组件细节" class="headerlink" title="组件细节"></a>组件细节</h2><ul>
<li>is解决html bug</li>
<li>子组件中data必须是一个函数</li>
<li>ref使用</li>
</ul>
<h3 id="is用法"><a href="#is用法" class="headerlink" title="is用法"></a>is用法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">tr</span> <span class="attr">is</span>=<span class="string">"row"</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>组件中使用data数据，必须是一个函数，返回一个对象</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'row'</span>, &#123;</span><br><span class="line"> data: <span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line"> <span class="keyword">return</span> &#123;</span><br><span class="line"> <span class="string">'content'</span>: <span class="string">'this is a rowa'</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> template: <span class="string">'&lt;tr&gt;&lt;td&gt;&#123;&#123;content&#125;&#125;&lt;/td&gt;&lt;/tr&gt;'</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">var</span> app = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line"> el: <span class="string">'#app'</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</summary>
<category term="Vue" scheme="https://www.xin666.cc/categories/Vue/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="Vue" scheme="https://www.xin666.cc/tags/Vue/"/>
</entry>
<entry>
<title>Vue-02学习笔记-基础</title>
<link href="https://www.xin666.cc/Vue-02%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80/"/>
<id>https://www.xin666.cc/Vue-02学习笔记-基础/</id>
<published>2018-08-04T16:39:00.000Z</published>
<updated>2021-08-11T07:17:58.990Z</updated>
<content type="html"><![CDATA[<h2 id="Vue实例讲解"><a href="#Vue实例讲解" class="headerlink" title="Vue实例讲解"></a>Vue实例讲解</h2><blockquote><p>一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#root'</span>,</span><br><span class="line"> data: {</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> components: {</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><a id="more"></a><h2 id="Vue生命周期"><a href="#Vue生命周期" class="headerlink" title="Vue生命周期"></a>Vue生命周期</h2><blockquote><p>生命周期函数就是vue实例在某一个时间点会自动执行的函数</p></blockquote><ul><li><p>beforeCreate() 创建实例初始化之前</p></li><li><p>created() 创建实例初始化完成后</p></li><li><p>beforeMount() 页面挂载渲染之前</p></li><li><p>mounted() 页面挂载渲染完成后</p></li><li><p>beforeDestroy() vue实例销毁之前(vm.$destroy()手动销毁)</p></li><li><p>destroyed() vue实例销毁之后</p></li></ul><p>重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！（这点很重要）</p><ul><li>beforeUpdate() 数据改变后重新渲染之前</li><li>updated() 数据改变后重新渲染之后</li></ul><p>首先判断是否有el,然后判断是否有template,如果有则把template作为渲染，如果没有则把el挂载作为渲染。</p><p><img src="http://p09g3b06f.bkt.clouddn.com/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B002-Vue%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png" alt="vue 生命周期"></p><h2 id="vue模板语法"><a href="#vue模板语法" class="headerlink" title="vue模板语法"></a>vue模板语法</h2><ol><li>v-text 和插值表达式<code>{</code>msg<code>}</code>一样</li><li>v-html 插入html</li><li>v-bind:title 绑定属性</li><li>v-on:click 添加事件</li><li>v-if,v-else,v-else-if,v-show</li><li>v-for</li></ol><h2 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h2><blockquote><p>Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。</p></blockquote><h3 id="计算属性缓存-vs-方法"><a href="#计算属性缓存-vs-方法" class="headerlink" title="计算属性缓存 vs 方法"></a>计算属性缓存 vs 方法</h3><blockquote><p>计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> firstName: <span class="string">'Dell'</span>,</span><br><span class="line"> lastName: <span class="string">'Lee'</span>,</span><br><span class="line"> age: <span class="number">24</span></span><br><span class="line"> },</span><br><span class="line"> computed: {</span><br><span class="line"> fullName() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'计算了fullName一次'</span>)</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.firstName +<span class="string">' '</span>+ <span class="keyword">this</span>.lastName;</span><br><span class="line"> },</span><br><span class="line"> now() {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Date</span>.now(); </span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> fullName2() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'方法fullName2调用了一次'</span>)</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.firstName +<span class="string">' '</span>+ <span class="keyword">this</span>.lastName;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="计算属性-vs-侦听属性"><a href="#计算属性-vs-侦听属性" class="headerlink" title="计算属性 vs 侦听属性"></a>计算属性 vs 侦听属性</h3><blockquote><p>Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：<strong>侦听属性</strong>。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> firstName: <span class="string">'Dell'</span>,</span><br><span class="line"> lastName: <span class="string">'Lee'</span>,</span><br><span class="line"> fullName: <span class="string">''</span>,</span><br><span class="line"> age: <span class="number">24</span></span><br><span class="line"> },</span><br><span class="line"> watch: {</span><br><span class="line"> firstName() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'first计算了一次'</span>)</span><br><span class="line"> <span class="keyword">this</span>.fullName = <span class="keyword">this</span>.firstName + <span class="string">' '</span> + <span class="keyword">this</span>.lastName;</span><br><span class="line"> },</span><br><span class="line"> lastName() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'last计算了一次'</span>)</span><br><span class="line"> <span class="keyword">this</span>.fullName = <span class="keyword">this</span>.firstName + <span class="string">' '</span> + <span class="keyword">this</span>.lastName;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="计算属性的getter和setter"><a href="#计算属性的getter和setter" class="headerlink" title="计算属性的getter和setter"></a>计算属性的getter和setter</h3><p>计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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> vm = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> firstName: <span class="string">'Dell'</span>,</span><br><span class="line"> lastName: <span class="string">'Lee'</span>,</span><br><span class="line"> age: <span class="number">24</span></span><br><span class="line"> },</span><br><span class="line"> computed: {</span><br><span class="line"> fullName: {</span><br><span class="line"> <span class="keyword">get</span>: function() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'get 执行一次'</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.firstName +<span class="string">' '</span>+ <span class="keyword">this</span>.lastName;</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">set</span>: function(value) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'set 执行一次:'</span>+ value);</span><br><span class="line"> <span class="keyword">var</span> arr = value.split(<span class="string">' '</span>);</span><br><span class="line"> <span class="keyword">this</span>.firstName = arr[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">this</span>.lastName = arr[<span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> now() {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Date</span>.now(); </span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="vue中样式绑定"><a href="#vue中样式绑定" class="headerlink" title="vue中样式绑定"></a>vue中样式绑定</h2><p><strong>1. class对象绑定</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"{ active: isActive }"</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">"static"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">v-bind:class</span>=<span class="string">"{ active: isActive, 'text-danger': hasError }"</span>></span></span><br><span class="line"><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">v-bind:class</span>=<span class="string">"classObject"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>2. 数组绑定</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"[activeClass, errorClass]"</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">v-bind:class</span>=<span class="string">"[isActive ? activeClass : '', errorClass]"</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">v-bind:class</span>=<span class="string">"[{ active: isActive }, errorClass]"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>3. 内联样式绑定</strong> </p><figure class="highlight html"><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="tag"><<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">"{ color: activeColor, fontSize: fontSize + 'px' }"</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">v-bind:style</span>=<span class="string">"[baseStyles, overridingStyles]"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2 id="vue中条件渲染"><a href="#vue中条件渲染" class="headerlink" title="vue中条件渲染"></a>vue中条件渲染</h2><p><strong>1. v-if和v-show</strong> </p><blockquote><p>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。<br>v-show 只是简单地切换元素的 CSS 属性 display。<br>注意，v-show 不支持 <template> 元素，也不支持 v-else。</template></p></blockquote><p><strong>2. v-if,v-else-if,v-else</strong></p><blockquote><p>中间不能有其它的分隔</p></blockquote><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"show === 'a'"</span>></span></span><br><span class="line"> show if 内容</span><br><span class="line"><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">v-else-if</span>=<span class="string">"show === 'b'"</span>></span></span><br><span class="line"> show2 elif 内容</span><br><span class="line"><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">v-else</span>></span></span><br><span class="line"> show3 else 内容</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>3. 用 key 管理可复用的元素</strong> </p><p>Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。<br>当元素有<code>key</code>值得时候，如果两个元素的<code>key</code>值不一样，<code>vue</code>就不去复用</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"show"</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">key</span>=<span class="string">"username"</span> /></span></span><br><span class="line"><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">v-else</span>></span></span><br><span class="line"> 邮箱：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"email"</span> <span class="attr">key</span>=<span class="string">"email"</span> /></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2 id="vue中列表渲染"><a href="#vue中列表渲染" class="headerlink" title="vue中列表渲染"></a>vue中列表渲染</h2><p><strong>1. 循环数组</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item, index) of items"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>2. 循环对象</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(value, key, index) of object"</span>></span></span><br><span class="line"> {{ key }}: {{ value }}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>3. 变异方法</strong> </p><blockquote><p>Vue中不能直接通过索引或对象<code>.</code>来改变数据，Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下</p></blockquote><ol><li>push()</li><li>pop()</li><li>shift()</li><li>unshift()</li><li>splice()</li><li>sort()</li><li>reverse()</li></ol><p><strong>或则改变引用添加数据</strong> </p><blockquote><p>Vue中改变对象的数据可以使用<code>Vue.set()</code>或<code>vm.$set()</code></p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 方法一</span></span><br><span class="line">vm.list = [...vm.list,<span class="string">'good night'</span>]</span><br><span class="line">vm.obj = {...vm.obj,<span class="string">'name'</span>: <span class="string">'hello'</span>}</span><br><span class="line"><span class="comment">// 方法二</span></span><br><span class="line">Vue.set(vm.obj, <span class="string">"name"</span>, <span class="string">"hello"</span>)</span><br><span class="line">vm.$<span class="keyword">set</span>(vm.list, 1, {id:<span class="number">233</span>, <span class="attr">text</span>: <span class="string">'love'</span>})</span><br><span class="line">vm.$<span class="keyword">set</span>(vm.obj, 'name', 'hello')</span><br></pre></td></tr></table></figure><p><strong>4. 替换数组</strong> </p><blockquote><p>filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。</p></blockquote><p><strong>5.<code><template></code> 渲染多个元素</strong> </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">v-for</span>=<span class="string">"item of items"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>{{ item.msg }}<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"divider"</span> <span class="attr">role</span>=<span class="string">"presentation"</span>></span><span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="Vue实例讲解"><a href="#Vue实例讲解" class="headerlink" title="Vue实例讲解"></a>Vue实例讲解</h2><blockquote>
<p>一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line"> el: <span class="string">'#root'</span>,</span><br><span class="line"> data: &#123;</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"> methods: &#123;</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"> components: &#123;</span><br><span class="line"> </span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</summary>
<category term="Vue" scheme="https://www.xin666.cc/categories/Vue/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="Vue" scheme="https://www.xin666.cc/tags/Vue/"/>
</entry>
<entry>
<title>Vue-01学习笔记-起步</title>
<link href="https://www.xin666.cc/Vue-01%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E8%B5%B7%E6%AD%A5/"/>
<id>https://www.xin666.cc/Vue-01学习笔记-起步/</id>
<published>2018-08-04T16:36:00.000Z</published>
<updated>2021-08-11T07:17:58.990Z</updated>
<content type="html"><![CDATA[<h2 id="MVP模式"><a href="#MVP模式" class="headerlink" title="MVP模式"></a>MVP模式</h2><ul><li>V：视图view</li><li>P：控制器presenter</li><li>M：模型model</li></ul><blockquote><p>jquery方式，是一个面向dom的开发，主要逻辑在P层，需要大量的自己写dom操作。</p></blockquote><h2 id="MVVM模式、"><a href="#MVVM模式、" class="headerlink" title="MVVM模式、"></a>MVVM模式、</h2><ul><li>V: 视图view</li><li>VM：视图模型view model (使用了Object.defineProperties和虚拟dom来实现)</li><li>M：模型model</li></ul><blockquote><p>vue开发模式，是一个面向数据的开发，让开发者专注于view和model层，其它(双向数据、指令、事件)交给view model自动完成</p></blockquote><a id="more"></a><p><img src="http://p09g3b06f.bkt.clouddn.com/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B001-Vue%E7%9A%84MVVM%E6%A8%A1%E5%9E%8B%E5%9B%BE.png" alt="mvvm"></p><h2 id="组件化"><a href="#组件化" class="headerlink" title="组件化"></a>组件化</h2><p><strong>全局组件</strong> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'Name'</span>,{</span><br><span class="line"> template: <span class="string">'<li>todo item</li>'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>局部组件</strong> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> TodoItem = {</span><br><span class="line"> props: [<span class="string">'content'</span>, <span class="string">'index'</span>],</span><br><span class="line"> template: <span class="string">'<li>{{content}} <button @click="handleItemClick"z>删除</button></li>'</span>,</span><br><span class="line"> methods: {</span><br><span class="line"> handleItemClick: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.$emit(<span class="string">'delete'</span>, <span class="keyword">this</span>.index);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span>,</span><br><span class="line"> components: {</span><br><span class="line"> TodoItem: TodoItem</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h2 id="父子组件数据props传递"><a href="#父子组件数据props传递" class="headerlink" title="父子组件数据props传递"></a>父子组件数据props传递</h2><p>html: </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</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">v-model</span>=<span class="string">"inputValue"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"handleBtnClick"</span>></span>提交<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color:purple"</span>></span>点击列表删除<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="comment"><!-- <li v-for="(item, index) in list">{{item}}---{{index}}</li> --></span></span><br><span class="line"> <span class="tag"><<span class="name">todo-item</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">v-bind:content</span>=<span class="string">"item"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">v-bind:index</span>=<span class="string">"index"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">v-for</span>=<span class="string">"(item, index) in list"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">delete</span>=<span class="string">"handleItemDelete"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">todo-item</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>js: </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> list: [<span class="string">'第一课的内容'</span>, <span class="string">'第二课的内容'</span>, <span class="string">'第三课的内容'</span>],</span><br><span class="line"> <span class="string">'inputValue'</span>: <span class="string">''</span></span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> handleBtnClick: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.list.push(<span class="keyword">this</span>.inputValue);</span><br><span class="line"> <span class="keyword">this</span>.inputValue = <span class="string">''</span>;</span><br><span class="line"> },</span><br><span class="line"> handleItemDelete: <span class="function"><span class="keyword">function</span>(<span class="params">index</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.list.splice(index,<span class="number">1</span>);</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> components: {</span><br><span class="line"> TodoItem: TodoItem</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>父组件传递数据给子组件</strong> </p><blockquote><p>一个<code>new Vue()</code>就是一个父组件，通过组件实例上添加属性 <code>v-bind:content="item"</code>接收父组件的数据<code>item</code>给子组件<code>content</code>，然后子组件需要通过<code>props</code>接收<code>content</code>。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> TodoItem = {</span><br><span class="line"> props: [<span class="string">'content'</span>, <span class="string">'index'</span>],</span><br><span class="line"> template: <span class="string">'<li>{{content}} <button @click="handleItemClick"z>删除</button></li>'</span>,</span><br><span class="line"> methods: {</span><br><span class="line"> handleItemClick: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.$emit(<span class="string">'delete'</span>, <span class="keyword">this</span>.index);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>子组件传递数据给父组件</strong> </p><blockquote><p>通过<code>$emit('event', params)</code> 方式向上一层触发事件，上一层刚好监听这个事件，然后就能获取到子组件带出来的内容</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> methods: {</span><br><span class="line"> handleBtnClick: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.list.push(<span class="keyword">this</span>.inputValue);</span><br><span class="line"> <span class="keyword">this</span>.inputValue = <span class="string">''</span>;</span><br><span class="line"> },</span><br><span class="line"> handleItemDelete: <span class="function"><span class="keyword">function</span>(<span class="params">index</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.list.splice(index,<span class="number">1</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="MVP模式"><a href="#MVP模式" class="headerlink" title="MVP模式"></a>MVP模式</h2><ul>
<li>V：视图view</li>
<li>P：控制器presenter</li>
<li>M：模型model</li>
</ul>
<blockquote>
<p>jquery方式，是一个面向dom的开发，主要逻辑在P层，需要大量的自己写dom操作。</p>
</blockquote>
<h2 id="MVVM模式、"><a href="#MVVM模式、" class="headerlink" title="MVVM模式、"></a>MVVM模式、</h2><ul>
<li>V: 视图view</li>
<li>VM：视图模型view model (使用了Object.defineProperties和虚拟dom来实现)</li>
<li>M：模型model</li>
</ul>
<blockquote>
<p>vue开发模式，是一个面向数据的开发，让开发者专注于view和model层，其它(双向数据、指令、事件)交给view model自动完成</p>
</blockquote>
</summary>
<category term="Vue" scheme="https://www.xin666.cc/categories/Vue/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
<category term="Vue" scheme="https://www.xin666.cc/tags/Vue/"/>
</entry>
<entry>
<title>JavaScript判断和易错</title>
<link href="https://www.xin666.cc/javascript%E5%88%A4%E6%96%AD%E5%92%8C%E6%98%93%E9%94%99/"/>
<id>https://www.xin666.cc/javascript判断和易错/</id>
<published>2018-07-10T01:51:00.000Z</published>
<updated>2021-08-11T07:17:58.998Z</updated>
<content type="html"><![CDATA[<h2 id="js判断方法"><a href="#js判断方法" class="headerlink" title="js判断方法"></a>js判断方法</h2><h3 id="1-判断一个变量是否为空"><a href="#1-判断一个变量是否为空" class="headerlink" title="1.判断一个变量是否为空"></a>1.判断一个变量是否为空</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="keyword">if</span>(a){</span><br><span class="line"> ...</span><br><span class="line">}</span><br><span class="line"><span class="keyword">if</span>(a===<span class="literal">null</span> || a === <span class="literal">undefined</span> || a === <span class="string">''</span>){</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure><a id="more"></a><h3 id="2-判断一个变量是数值"><a href="#2-判断一个变量是数值" class="headerlink" title="2.判断一个变量是数值"></a>2.判断一个变量是数值</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="string">'124'</span>;</span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> (num<span class="number">-0</span>) === number){</span><br><span class="line"> ...</span><br><span class="line">}</span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> (num*<span class="number">0</span>) === number){</span><br><span class="line"> ...</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> num2 = (num<span class="number">-0</span>);</span><br><span class="line"><span class="keyword">if</span>(num2 !== num2){</span><br><span class="line"> num is <span class="literal">NaN</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="3-判断浏览器兼容Object-create"><a href="#3-判断浏览器兼容Object-create" class="headerlink" title="3.判断浏览器兼容Object.create"></a>3.判断浏览器兼容Object.create</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> create = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">Object</span>.create){</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Object</span>.create;</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>)</span>{};</span><br><span class="line"> F.prototype = obj;</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> F();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="4-判断属性是在对象上还是在对象的原型上"><a href="#4-判断属性是在对象上还是在对象的原型上" class="headerlink" title="4.判断属性是在对象上还是在对象的原型上"></a>4.判断属性是在对象上还是在对象的原型上</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> isOwnProperty = <span class="function"><span class="keyword">function</span>(<span class="params">name,obj</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(name <span class="keyword">in</span> obj){</span><br><span class="line"> <span class="keyword">if</span>(obj.hasOwnProperty(name)){</span><br><span class="line"> alert(name+<span class="string">'在obj对象上'</span>)</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> alert(name+<span class="string">'在obj原型对象上'</span>)</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> alert(name+<span class="string">'不在obj对象上'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="5-遍历对象不会在原型上"><a href="#5-遍历对象不会在原型上" class="headerlink" title="5.遍历对象不会在原型上"></a>5.遍历对象不会在原型上</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> eachObj = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i ; i<obj.length;i++){</span><br><span class="line"> <span class="built_in">console</span>.lgo(obj.[i])</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="6-在原型上添加方法"><a href="#6-在原型上添加方法" class="headerlink" title="6.在原型上添加方法"></a>6.在原型上添加方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.method = <span class="function"><span class="keyword">function</span>(<span class="params">name,func</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(!<span class="keyword">this</span>.prototype[name]){</span><br><span class="line"> <span class="keyword">this</span>.prototype.name = func;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="6-判断数据类型"><a href="#6-判断数据类型" class="headerlink" title="6.判断数据类型"></a>6.判断数据类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> arr 判断原始类型</span><br><span class="line">arr <span class="keyword">instanceof</span> <span class="built_in">Object</span> 判断引用类型</span><br><span class="line"><span class="built_in">Array</span>.isArray(arr) es5判断无论是否从框架中来的数组</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> type = <span class="function"><span class="keyword">function</span> (<span class="params">o</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> s = <span class="built_in">Object</span>.prototype.toString.call(o);</span><br><span class="line"> <span class="keyword">return</span> s.match(<span class="regexp">/\[object (.*?)\]/</span>)[<span class="number">1</span>].toLowerCase();</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">type({}); <span class="comment">// "object"</span></span><br><span class="line">type([]); <span class="comment">// "array"</span></span><br><span class="line">type(<span class="number">5</span>); <span class="comment">// "number"</span></span><br><span class="line">type(<span class="literal">null</span>); <span class="comment">// "null"</span></span><br><span class="line">type(); <span class="comment">// "undefined"</span></span><br><span class="line">type(<span class="regexp">/abcd/</span>); <span class="comment">// "regex"</span></span><br><span class="line">type(<span class="keyword">new</span> <span class="built_in">Date</span>()); <span class="comment">// "date"</span></span><br></pre></td></tr></table></figure><h3 id="7-each方法便利数组"><a href="#7-each方法便利数组" class="headerlink" title="7.each方法便利数组"></a>7.each方法便利数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> each = <span class="function"><span class="keyword">function</span>(<span class="params">arr,fn</span>)</span>{</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i<= arr.length;i++){</span><br><span class="line"> <span class="keyword">if</span>(fn.call(arr[ i ],i,arr[ i ])){</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 class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params">i,v</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(v === <span class="number">2</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><br></pre></td></tr></table></figure><h3 id="8-判断一个变量是否为对象"><a href="#8-判断一个变量是否为对象" class="headerlink" title="8.判断一个变量是否为对象"></a>8.判断一个变量是否为对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> isObject = <span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> val === <span class="built_in">Object</span>(val);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="9-合并两个数组"><a href="#9-合并两个数组" class="headerlink" title="9.合并两个数组"></a>9.合并两个数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></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><br><span class="line"><span class="keyword">var</span> b = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">a.push.apply(a,b);</span><br><span class="line"><span class="built_in">console</span>.log(a)<span class="comment">//[1,2,3,4,5,6]；</span></span><br><span class="line">拆分数组</span><br><span class="line"><span class="keyword">var</span> c = [<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><br><span class="line">c.splice(<span class="number">3</span>);<span class="comment">//[4,5,6]</span></span><br><span class="line">c <span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure><h3 id="10-将对象转换数组"><a href="#10-将对象转换数组" class="headerlink" title="10.将对象转换数组"></a>10.将对象转换数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.slice.apply({<span class="number">0</span>:<span class="number">1</span>,<span class="attr">length</span>:<span class="number">2</span>})</span><br></pre></td></tr></table></figure><h3 id="11-判断是否为pc还是ios还是安卓"><a href="#11-判断是否为pc还是ios还是安卓" class="headerlink" title="11.判断是否为pc还是ios还是安卓"></a>11.判断是否为pc还是ios还是安卓</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">IsPC</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> userAgentInfo = navigator.userAgent;</span><br><span class="line"> <span class="keyword">var</span> Agents = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"Android"</span>, <span class="string">"iPhone"</span>, <span class="string">"SymbianOS"</span>, <span class="string">"Windows Phone"</span>, <span class="string">"iPad"</span>, <span class="string">"iPod"</span>);</span><br><span class="line"> <span class="keyword">var</span> flag = <span class="literal">true</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> v = <span class="number">0</span>; v < Agents.length; v++) { </span><br><span class="line"> <span class="keyword">if</span> (userAgentInfo.indexOf(Agents[v]) > <span class="number">0</span>) { flag = <span class="literal">false</span>; <span class="keyword">break</span>; }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> flag;</span><br><span class="line">} </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isIos</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> u = navigator.userAgent, app = navigator.appVersion;</span><br><span class="line"> <span class="keyword">var</span> isAndroid = u.indexOf(<span class="string">'Android'</span>) > <span class="number">-1</span> || u.indexOf(<span class="string">'Linux'</span>) > <span class="number">-1</span>; <span class="comment">//g</span></span><br><span class="line"> <span class="keyword">var</span> isIOS = !!u.match(<span class="regexp">/\(i[^;]+;( U;)? CPU.+Mac OS X/</span>); <span class="comment">//ios终端</span></span><br><span class="line"> <span class="keyword">if</span> (isAndroid) {</span><br><span class="line"> <span class="comment">//这个是安卓操作系统</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (isIOS) {</span><br><span class="line"> <span class="comment">//这个是ios操作系统</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">//判断是否IE内核</span></span><br><span class="line"><span class="keyword">if</span>(browser.versions.trident){ alert(<span class="string">"is IE"</span>); }</span><br><span class="line"><span class="comment">//判断是否webKit内核</span></span><br><span class="line"><span class="keyword">if</span>(browser.versions.webKit){ alert(<span class="string">"is webKit"</span>); }</span><br><span class="line"><span class="comment">//判断是否移动端</span></span><br><span class="line"><span class="keyword">if</span>(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert(<span class="string">"移动端"</span>); }</span><br></pre></td></tr></table></figure><h3 id="12-判断数据类型"><a href="#12-判断数据类型" class="headerlink" title="12.判断数据类型"></a>12.判断数据类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Type = {};</span><br><span class="line"><span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>, type; type = [ <span class="string">'String'</span>, <span class="string">'Array'</span>, <span class="string">'Number'</span>,<span class="string">'Null'</span>,<span class="string">'Undefined'</span> ][ i++ ]; ){</span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params"> type </span>)</span>{</span><br><span class="line"> Type[ <span class="string">'is'</span> + type ] = <span class="function"><span class="keyword">function</span>(<span class="params"> obj </span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call( obj ) === <span class="string">'[object '</span>+ type +<span class="string">']'</span>;</span><br><span class="line"> }</span><br><span class="line"> })( type )</span><br><span class="line">};</span><br><span class="line">Type.isNumber(<span class="number">12</span>) <span class="comment">//true</span></span><br></pre></td></tr></table></figure><h3 id="13-判断构造函数是否-new调用"><a href="#13-判断构造函数是否-new调用" class="headerlink" title="13.判断构造函数是否 new调用"></a>13.判断构造函数是否 new调用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fubar</span>(<span class="params">foo, bar</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span> (!(<span class="keyword">this</span> <span class="keyword">instanceof</span> Fubar)) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> Fubar(foo, bar);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>._foo = foo;</span><br><span class="line"> <span class="keyword">this</span>._bar = bar;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_new</span>(<span class="params"><span class="regexp">/* 构造函数 */</span> constructor, <span class="regexp">/* 构造函数参数 */</span> param1</span>) </span>{</span><br><span class="line"> <span class="comment">// 将 arguments 对象转为数组</span></span><br><span class="line"> <span class="keyword">var</span> args = [].slice.call(<span class="built_in">arguments</span>);</span><br><span class="line"> <span class="comment">// 取出构造函数</span></span><br><span class="line"> <span class="keyword">var</span> <span class="keyword">constructor</span> = args.shift();</span><br><span class="line"> // 创建一个空对象，继承构造函数的 prototype 属性</span><br><span class="line"> var context = Object.create(<span class="keyword">constructor</span>.prototype);</span><br><span class="line"> // 执行构造函数</span><br><span class="line"> var result = <span class="keyword">constructor</span>.apply(context, args);</span><br><span class="line"> // 如果返回结果是对象，就直接返回，则返回 context 对象</span><br><span class="line"> return (typeof result === 'object' && result != null) ? result : context;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">// 实例</span><br><span class="line">var actor = _new(Person, '张三', 28);</span><br></pre></td></tr></table></figure><h3 id="14-判断bind-方法是否支持"><a href="#14-判断bind-方法是否支持" class="headerlink" title="14.判断bind()方法是否支持"></a>14.判断bind()方法是否支持</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(!(<span class="string">'bind'</span> <span class="keyword">in</span> <span class="built_in">Function</span>.prototype)){</span><br><span class="line"> <span class="built_in">Function</span>.prototype.bind = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> fn = <span class="keyword">this</span>;</span><br><span class="line"> <span class="keyword">var</span> context = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> 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">return</span> fn.apply(context, args);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="15-获得对象的所有属性"><a href="#15-获得对象的所有属性" class="headerlink" title="15.获得对象的所有属性"></a>15.获得对象的所有属性</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">inheritedPropertyNames</span>(<span class="params">obj</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> props = {};</span><br><span class="line"> <span class="keyword">while</span>(obj) {</span><br><span class="line"> <span class="built_in">Object</span>.getOwnPropertyNames(obj).forEach(<span class="function"><span class="keyword">function</span>(<span class="params">p</span>) </span>{</span><br><span class="line"> props[p] = <span class="literal">true</span>;</span><br><span class="line"> });</span><br><span class="line"> obj = <span class="built_in">Object</span>.getPrototypeOf(obj);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Object</span>.getOwnPropertyNames(props);</span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="16-对象的拷贝"><a href="#16-对象的拷贝" class="headerlink" title="16.对象的拷贝"></a>16.对象的拷贝</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">copyObject</span>(<span class="params">orig</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> copy = <span class="built_in">Object</span>.create(<span class="built_in">Object</span>.getPrototypeOf(orig));</span><br><span class="line"> copyOwnPropertiesFrom(copy, orig);</span><br><span class="line"> <span class="keyword">return</span> copy;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">copyOwnPropertiesFrom</span>(<span class="params">target, source</span>) </span>{</span><br><span class="line"> <span class="built_in">Object</span></span><br><span class="line"> .getOwnPropertyNames(source)</span><br><span class="line"> .forEach(<span class="function"><span class="keyword">function</span>(<span class="params">propKey</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> desc = <span class="built_in">Object</span>.getOwnPropertyDescriptor(source, propKey);</span><br><span class="line"> <span class="built_in">Object</span>.defineProperty(target, propKey, desc);</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> target;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="17-遍历所有子节点"><a href="#17-遍历所有子节点" class="headerlink" title="17.遍历所有子节点"></a>17.遍历所有子节点</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">DOMComb</span>(<span class="params">parent, callback</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (parent.hasChildNodes()) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> node = parent.firstChild; node; node = node.nextSibling) {</span><br><span class="line"> DOMComb(node, callback);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> callback.call(parent);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printContent</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.nodeValue) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.nodeValue);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">DOMComb(<span class="built_in">document</span>.body, printContent);</span><br></pre></td></tr></table></figure><h3 id="18-继承方法"><a href="#18-继承方法" class="headerlink" title="18.继承方法"></a>18.继承方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">Child,Parent</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</span><br><span class="line"> F.prototype = Parent.prototype;</span><br><span class="line"> Child.prototype = <span class="keyword">new</span> F();</span><br><span class="line"> Child.prototype.constructor = Child;</span><br><span class="line"> Child.uber = Parent.prototype;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="19-按键判断"><a href="#19-按键判断" class="headerlink" title="19.按键判断"></a>19.按键判断</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> btn.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> e = e || event;</span><br><span class="line"> <span class="keyword">var</span> x = e.which || e.keyCode;</span><br><span class="line"> <span class="keyword">if</span> (x == <span class="number">13</span>) {</span><br><span class="line"> alert (<span class="string">"你按下了 enter 键!"</span>);</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h3 id="20-dom操作"><a href="#20-dom操作" class="headerlink" title="20. dom操作"></a>20. dom操作</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">$ (selector){</span><br><span class="line"> <span class="keyword">var</span> type = selector.substring(<span class="number">0</span>, <span class="number">1</span>);</span><br><span class="line"> <span class="keyword">if</span> (type === <span class="string">'#'</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.querySelecotor) <span class="keyword">return</span> <span class="built_in">document</span>.querySelector(selector)</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">document</span>.getElementById(selector.substring(<span class="number">1</span>))</span><br><span class="line"> </span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span> (type === <span class="string">'.'</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.querySelecotorAll) <span class="keyword">return</span> <span class="built_in">document</span>.querySelectorAll(selector)</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">document</span>.getElementsByClassName(selector.substring(<span class="number">1</span>))</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">document</span>[<span class="string">'querySelectorAll'</span> ? <span class="string">'querySelectorAll'</span>:<span class="string">'getElementsByTagName'</span>](selector)</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">hasClass (ele, name) {</span><br><span class="line"> <span class="keyword">return</span> ele.className.match(<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">'(\\s|^)'</span> + name + <span class="string">'(\\s|$)'</span>));</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*添加类名*/</span></span><br><span class="line">addClass (ele, name) {</span><br><span class="line"> <span class="keyword">if</span> (!<span class="keyword">this</span>.hasClass(ele, name)) ele.className += <span class="string">" "</span> + name;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="21-jquery-css3实现页面强制竖屏特效"><a href="#21-jquery-css3实现页面强制竖屏特效" class="headerlink" title="21.jquery+css3实现页面强制竖屏特效"></a>21.jquery+css3实现页面强制竖屏特效</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//避免搜索影响屏幕尺寸判断</span></span><br><span class="line">$(<span class="string">"#textInput"</span>).on(<span class="string">'focus'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="string">"#mask"</span>).hide();</span><br><span class="line">});</span><br><span class="line">$(<span class="built_in">window</span>).on(<span class="string">'orientationchange'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">switch</span>(<span class="built_in">window</span>.orientation){</span><br><span class="line"> <span class="keyword">case</span> <span class="number">-90</span>:</span><br><span class="line"> <span class="keyword">case</span> <span class="number">90</span>:</span><br><span class="line"> $(<span class="string">"#mask"</span>).show();</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line"> $(<span class="string">"#mask"</span>).hide();</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="js易出错输出"><a href="#js易出错输出" class="headerlink" title="js易出错输出"></a>js易出错输出</h2><p>1.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">*函数f执行后，输出结果为undefined，</span></span><br><span class="line"><span class="comment">*原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> tem = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(tem);</span><br><span class="line"> <span class="keyword">if</span>(<span class="literal">false</span>){</span><br><span class="line"> <span class="keyword">var</span> tem = <span class="string">'hello world!'</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">f();<span class="comment">//undefined</span></span><br></pre></td></tr></table></figure><p>2.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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="comment">*函数f执行后，输出结果为undefined，</span></span><br><span class="line"><span class="comment">*原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">name = <span class="string">"window"</span></span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> name : <span class="string">'obj'</span>,</span><br><span class="line"> f(){</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</span><br><span class="line"> (<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="keyword">this</span>.name);</span><br><span class="line"> })();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>3.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* ++在后先return 在++</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">5</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> num++;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> num2 = add();</span><br><span class="line"><span class="built_in">console</span>.log(num2,num) <span class="comment">//5,6</span></span><br></pre></td></tr></table></figure><p>4.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</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="keyword">var</span> a = {<span class="attr">n</span>: <span class="number">1</span>};</span><br><span class="line"><span class="keyword">var</span> b = a;</span><br><span class="line">a.x = a = {<span class="attr">n</span>: <span class="number">2</span>}</span><br><span class="line"><span class="built_in">console</span>.log(a.x) <span class="comment">// undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// {n: 2}</span></span><br><span class="line"><span class="built_in">console</span>.log(b) <span class="comment">// {n: 1, x: {n:2}}</span></span><br></pre></td></tr></table></figure><blockquote></blockquote><pre><code>首先声明变量a,b,然后内存中创建对象{n: 1},然后把对象的引用赋值给a,接着把 保存对象{n:1}引用的a赋值给b;a和b都保存{n:1}的引用。然后执行 a.x = a = {n: 2}时候，a.x优先级高于赋值运算符，所以先将a指向的对象{n:1}中创建x属性，然后由于js赋值是从右到左的顺序，把对象{n: 2}的引用保存在a中，此时的a指向新对象{n: 2},最后把保存新对象{n:2}引用的a赋值给 对象{n: 1,x:undefined}中的x属性。所以就有log(a.x) 新对象{n:2}中没有a.x的值输出 undefined而变量b保存之前对象{n:1}的引用，所以log(b.x) 输出 {n:2}。</code></pre><p>5.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* i++和++i的区别</span></span><br><span class="line"><span class="comment">* a = ++i,先i=i+1再赋值给a;</span></span><br><span class="line"><span class="comment">* a = i++,先赋值给a再i=i+1;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> a,i=<span class="number">1</span>;</span><br><span class="line">a = (i++) + (i++) + (++i)</span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">//7</span></span><br><span class="line"></span><br><span class="line">分析：</span><br><span class="line"> 表达式分为<span class="number">3</span>段：</span><br><span class="line"> 第一个(i++) i为<span class="number">1</span>，然后i=i+<span class="number">1</span>;i=<span class="number">2</span></span><br><span class="line"> 第二个(i++) i为<span class="number">2</span>，然后i=i+<span class="number">1</span>;i=<span class="number">3</span>;</span><br><span class="line"> 第三个(++i) i=i+<span class="number">1</span>,所以i为<span class="number">4</span></span><br><span class="line"> a = <span class="number">1</span> + <span class="number">2</span> + <span class="number">4</span> =<span class="number">7</span>;</span><br></pre></td></tr></table></figure><p>6.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 考察 js 事件循环 任务队列 job和task</span></span><br><span class="line"><span class="comment">* 求输出结果顺序</span></span><br><span class="line"><span class="comment">* 先执行job中的任务再执行task中的任务</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"A"</span>);</span><br><span class="line"></span><br><span class="line">setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"A - setTimeout"</span>);</span><br><span class="line">}, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =></span> {</span><br><span class="line"> resolve();</span><br><span class="line">})</span><br><span class="line">.then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="string">"A - Promise 1"</span>);</span><br><span class="line">})</span><br><span class="line">.then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="string">"B - Promise 1"</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =></span> {</span><br><span class="line"> resolve();</span><br><span class="line">})</span><br><span class="line">.then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="string">"A - Promise 2"</span>);</span><br><span class="line">})</span><br><span class="line">.then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="string">"B - Promise 2"</span>);</span><br><span class="line">})</span><br><span class="line">.then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">console</span>.log(<span class="string">"C - Promise 2"</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"AA"</span>);</span><br><span class="line"></span><br><span class="line">输出</span><br><span class="line"><span class="string">'A'</span></span><br><span class="line"><span class="string">'AA'</span></span><br><span class="line"><span class="string">"A - Promise 1"</span></span><br><span class="line"><span class="string">"A - Promise 2"</span></span><br><span class="line"></span><br><span class="line"><span class="string">"B - Promise 1"</span></span><br><span class="line"><span class="string">"B - Promise 2"</span></span><br><span class="line"><span class="string">"C - Promise 2"</span></span><br><span class="line"></span><br><span class="line"><span class="string">"A - setTimeout"</span></span><br></pre></td></tr></table></figure><p>7.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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="comment">/**</span></span><br><span class="line"><span class="comment">* 考察 js 执行环境栈的进和出</span></span><br><span class="line"><span class="comment">* 求输出结果顺序</span></span><br><span class="line"><span class="comment">* </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">i</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(i < <span class="number">0</span>) <span class="keyword">return</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'begin:'</span> + i);</span><br><span class="line"> foo(i<span class="number">-1</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'end:'</span> + i);</span><br><span class="line">}</span><br><span class="line">foo(<span class="number">2</span>)</span><br><span class="line"></span><br><span class="line">输出：</span><br><span class="line"> begin: <span class="number">2</span>;</span><br><span class="line"> begin: <span class="number">1</span>;</span><br><span class="line"> begin: <span class="number">0</span>;</span><br><span class="line"> end: <span class="number">0</span>;</span><br><span class="line"> end: <span class="number">1</span>;</span><br><span class="line"> end: <span class="number">2</span>;</span><br></pre></td></tr></table></figure><p>8.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 考察 js 原型和this</span></span><br><span class="line"><span class="comment">* 求输出结果顺序</span></span><br><span class="line"><span class="comment">* </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Parent</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.a = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">this</span>.b = [<span class="number">1</span>, <span class="number">2</span>, <span class="keyword">this</span>.a];</span><br><span class="line"> <span class="keyword">this</span>.c = { <span class="attr">demo</span>: <span class="number">5</span>};</span><br><span class="line"> <span class="keyword">this</span>.show = <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="keyword">this</span>.a, <span class="keyword">this</span>.b, <span class="keyword">this</span>.c.demo);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.a = <span class="number">2</span>;</span><br><span class="line"> <span class="keyword">this</span>.change = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.b.push(<span class="keyword">this</span>.a);</span><br><span class="line"> <span class="keyword">this</span>.a = <span class="keyword">this</span>.b.length;</span><br><span class="line"> <span class="keyword">this</span>.c.demmo = <span class="keyword">this</span>.a++;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">Child.prototype = <span class="keyword">new</span> Parent();</span><br><span class="line"><span class="keyword">var</span> parent = <span class="keyword">new</span> Parent();</span><br><span class="line"><span class="keyword">var</span> child1 = <span class="keyword">new</span> Child();</span><br><span class="line"><span class="keyword">var</span> child2 = <span class="keyword">new</span> Child();</span><br><span class="line">child1.a = <span class="number">11</span>;</span><br><span class="line">child2.a = <span class="number">12</span>;</span><br><span class="line">parent.show();</span><br><span class="line">child1.show();</span><br><span class="line">child2.show();</span><br><span class="line">child1.change();</span><br><span class="line">child2.change();</span><br><span class="line">parent.show();</span><br><span class="line">child1.show();</span><br><span class="line">child2.show();</span><br><span class="line"></span><br><span class="line">输出：</span><br><span class="line"><span class="number">1</span> (<span class="number">3</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>] <span class="number">5</span></span><br><span class="line"><span class="number">11</span> (<span class="number">3</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>] <span class="number">5</span></span><br><span class="line"><span class="number">23</span> <span class="number">12</span> (<span class="number">3</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>] <span class="number">5</span></span><br><span class="line"><span class="number">1</span> (<span class="number">3</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>] <span class="number">5</span></span><br><span class="line"><span class="number">5</span> (<span class="number">5</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">11</span>, <span class="number">12</span>] <span class="number">5</span></span><br><span class="line"><span class="number">6</span> (<span class="number">5</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">11</span>, <span class="number">12</span>] <span class="number">5</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 考察 js 对象的引用地址</span></span><br><span class="line"><span class="comment">* </span></span><br><span class="line"><span class="comment">* 求输出结果</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"><span class="keyword">var</span> obj = {}</span><br><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">1</span>; i<=<span class="number">3</span>; i++){</span><br><span class="line"> obj.a = <span class="string">'a'</span>+i;</span><br><span class="line"> obj.b = <span class="string">'b'</span>+i;</span><br><span class="line"> <span class="built_in">console</span>.log(obj) <span class="comment">// 这里输出正确的值</span></span><br><span class="line"> <span class="built_in">console</span>.dir(obj) <span class="comment">// 这里输出循环完后的值</span></span><br><span class="line"> <span class="built_in">console</span>.table(obj)</span><br><span class="line"> arr.push(obj)</span><br><span class="line"> <span class="built_in">console</span>.log(arr) <span class="comment">//[] 这里输出内容和外面一样</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(arr) <span class="comment">// 输出什么？ 输出 [{a: 'a3', b: 'b3'}, {a: 'a3', b: 'b3'}, {a: 'a3', b: 'b3'}]</span></span><br></pre></td></tr></table></figure><blockquote><p>每次取出来的值都放在obj.a中，因为是在外面的定义的对象，所以<strong>每次obj的地址<br>是一样的</strong>，arr中保存的是obj的地址，当最后一次给arr.a赋值为a4时，由于<br>是同一个obj,所以最后一次给obj.a赋值给之前的值给覆盖掉,console.log和console.dir</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>{</span><br><span class="line"> getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">1</span>); };</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">Foo.getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">2</span>);};</span><br><span class="line">Foo.prototype.getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">3</span>);};</span><br><span class="line"><span class="keyword">var</span> getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">4</span>);};</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>{ alert (<span class="number">5</span>);}</span><br><span class="line"></span><br><span class="line"><span class="comment">//请写出以下输出结果：</span></span><br><span class="line">Foo.getName();</span><br><span class="line">getName();</span><br><span class="line">Foo().getName();</span><br><span class="line">getName();</span><br><span class="line"><span class="keyword">new</span> Foo.getName();</span><br><span class="line"><span class="keyword">new</span> Foo().getName();</span><br><span class="line"><span class="keyword">new</span> <span class="keyword">new</span> Foo().getName();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// 3</span></span><br></pre></td></tr></table></figure><blockquote><p>考察变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等等。</p></blockquote>]]></content>
<summary type="html">
<h2 id="js判断方法"><a href="#js判断方法" class="headerlink" title="js判断方法"></a>js判断方法</h2><h3 id="1-判断一个变量是否为空"><a href="#1-判断一个变量是否为空" class="headerlink" title="1.判断一个变量是否为空"></a>1.判断一个变量是否为空</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="keyword">if</span>(a)&#123;</span><br><span class="line"> ...</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span>(a===<span class="literal">null</span> || a === <span class="literal">undefined</span> || a === <span class="string">''</span>)&#123;</span><br><span class="line"> ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</summary>
<category term="JavaScript" scheme="https://www.xin666.cc/categories/JavaScript/"/>
<category term="JavaScript" scheme="https://www.xin666.cc/tags/JavaScript/"/>
</entry>
<entry>
<title>计算机知识要点</title>
<link href="https://www.xin666.cc/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9F%A5%E8%AF%86%E8%A6%81%E7%82%B9/"/>
<id>https://www.xin666.cc/计算机知识要点/</id>
<published>2018-05-31T12:16:00.000Z</published>
<updated>2021-08-11T07:17:59.010Z</updated>
<content type="html"><![CDATA[<ul><li>CPU的核心数，线程数</li><li>应用程序的多进程和多线程</li><li>串行并行和并发，同步和异步</li></ul><p><img src="http://p09g3b06f.bkt.clouddn.com/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9F%A5%E8%AF%86%E8%A6%81%E7%82%B9/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90.jpg" alt="计算机组成"></p><a id="more"></a><h2 id="cpu与核心"><a href="#cpu与核心" class="headerlink" title="cpu与核心"></a>cpu与核心</h2><p><strong>物理核心</strong><br>物理核数量=cpu数(机子上装的cpu的数量) * 每个cpu的核心数</p><p><strong>虚拟核</strong></p><ul><li><p>所谓的4核8线程，4核指的是物理核心。通过intel超线程技术，用一个物理核模拟两个虚拟核，每个核两个线程，总数为8线程。</p></li><li><p>在操作系统看来是8个核，但是实际上是4个物理核。</p></li><li><p>通过超线程技术可以实现单个物理核实现线程级别的并行计算，但是比不上性能两个物理核。</p></li></ul><p><strong>单核cpu和多核cpu</strong></p><ul><li>都是一个cpu，不同的是每个cpu上的核心数</li><li>多核cpu是多个单核cpu的替代方案，多核cpu减小了体积，同时也减少了功耗</li><li>一个核心只能同时执行一个线程</li></ul><h2 id="进程和线程"><a href="#进程和线程" class="headerlink" title="进程和线程"></a>进程和线程</h2><p><strong>进程</strong></p><ul><li>进程和线程都是一个时间段的描述，是CPU工作时间段的描述，不过是颗粒大小不同。</li><li>进程是操作系统进行资源（包括cpu、内存、磁盘IO等）分配的最小单位，进程与进程是独立</li><li>进程是应用程序的执行实例，每个进程是由私有的虚拟地址空间、代码、数据和其它各种系统资源组成</li></ul><p><strong>线程</strong></p><ul><li>线程是cpu调度和分配的基本单位，一个进程至少一个主线程</li><li>我们打开的微信，浏览器都是一个进程</li><li>进程可能有多个子任务，比如微信要接受消息，发送消息，这些子任务就是线程。</li><li>资源分配给进程，线程共享进程资源。</li><li>进程之间是相互独立的，不共享内存和数据，线程之间内存和数据是通用的</li></ul><p><strong>线程切换</strong></p><ul><li>cpu给线程分配时间片(也就是分配给线程的时间)，执行完时间片后会切换都另一个线程。</li><li>切换之前会保存线程的状态，下次时间片再给这个线程时才能知道当前状态。</li><li>从保存线程A的状态再到切换到线程B时，重新加载线程B的状态的这个过程就叫上下文切换。</li><li>而上下切换时会消耗大量的cpu时间。</li></ul><p><strong>线程和进程开销</strong></p><ul><li>上下文切换消耗</li><li>线程创建和消亡的开销</li><li>线程需要保存维持线程本地栈，会消耗内存</li><li>进程要分配好多资源(cpu,寄存器，文件，内存，io设备等)所以开销大</li></ul><p><strong>总结</strong><br>进程就是包换上下文切换的程序执行时间总和 = CPU加载上下文+CPU执行+CPU保存上下文。进程的颗粒度太大，每次都要有上下的调入，保存，调出。如果我们把进程比喻为一个运行在电脑上的软件，那么一个软件的执行不可能是一条逻辑执行的，必定有多个分支和多个程序段，就好比要实现程序A，实际分成 a，b，c等多个块组合而成。那么这里具体的执行就可能变成：程序A得到CPU =》CPU加载上下文，开始执行程序A的a小段，然后执行A的b小段，然后再执行A的c小段，最后CPU保存A的上下文。这里a，b，c的执行是共享了A的上下文，CPU在执行的时候没有进行上下文切换的。这里的a，b，c就是线程，也就是说线程是共享了进程的上下文环境，的更为细小的CPU时间段。</p><h2 id="串行，并发与并行"><a href="#串行，并发与并行" class="headerlink" title="串行，并发与并行"></a>串行，并发与并行</h2><p><strong>串行</strong></p><ul><li>单线程执行多个任务，执行时一个执行完再执行另一个。</li><li>比喻：吃完饭再看电视</li></ul><p><strong>并发</strong></p><ul><li>多个线程在单个核心运行，同一时间一个线程运行，系统不停切换线程，看起来像同时运行，实际上是线程不停切换。</li><li>在程序中我们开辟的线程数量大于cpu的数量，那么就会</li><li>比喻：一会儿去吃饭，一会儿去看电视</li></ul><p><strong>并行</strong></p><ul><li>每个线程分配给独立的核心，线程同时运行。</li><li>比喻：一边吃饭一边看球赛。</li></ul><h2 id="多核下线程数量选择"><a href="#多核下线程数量选择" class="headerlink" title="多核下线程数量选择"></a>多核下线程数量选择</h2><p><strong>计算密集型</strong></p><ul><li>程序主要为复杂的逻辑判断和复杂的运算。</li><li>cpu的利用率高，不用开太多的线程，开太多线程反而会因为线程切换时切换上下文而浪费资源。</li></ul><p><strong>IO密集型</strong></p><ul><li>程序主要为IO操作，比如磁盘IO(读取文件)和网络IO(网络请求)。</li><li>因为IO操作会阻塞线程，cpu利用率不高，可以开多点线程，阻塞时可以切换到其他就绪线程，提高cpu利用率。</li></ul><p><strong>网络请求型</strong></p><ul><li>可以使用单线程加异步来处理</li></ul><h2 id="同步和异步"><a href="#同步和异步" class="headerlink" title="同步和异步"></a>同步和异步</h2><p><strong>同步</strong></p><blockquote></blockquote><p>进程之间的关系不是相互排斥临界资源的关系，而是相互依赖的关系。进一步的说明：就是前一个进程的输出作为后一个进程的输入，当第一个进程没有输出时第二个进程必须等待。具有同步关系的一组并发进程相互发送的信息称为消息或事件。<br>其中并发又有伪并发和真并发，伪并发是指单核处理器的并发，真并发是指多核处理器的并发。</p><p><strong>异步</strong></p><blockquote></blockquote><p>异步和同步是相对的，同步就是顺序执行，执行完一个再执行下一个，需要等待、协调运行。异步就是彼此独立,在等待某事件的过程中继续做自己的事，不需要等待这一事件完成后再工作。线程就是实现异步的一个方式。异步是让调用方法的主线程不需要同步等待另一线程的完成，从而可以让主线程干其它的事情。</p><p>推荐：博文 </p><ul><li><a href="https://blog.csdn.net/u012398362/article/details/51475213" target="_blank" rel="noopener">多核CPU、多进程、多线程之间的联系</a> </li><li><a href="http://www.cnblogs.com/tracylining/p/3506673.html" target="_blank" rel="noopener">并发、并行、同步、异步、阻塞、非阻塞</a></li></ul>]]></content>
<summary type="html">
<ul>
<li>CPU的核心数，线程数</li>
<li>应用程序的多进程和多线程</li>
<li>串行并行和并发，同步和异步</li>
</ul>
<p><img src="http://p09g3b06f.bkt.clouddn.com/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9F%A5%E8%AF%86%E8%A6%81%E7%82%B9/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90.jpg" alt="计算机组成"></p>
</summary>
<category term="Linux" scheme="https://www.xin666.cc/categories/Linux/"/>
<category term="异步" scheme="https://www.xin666.cc/tags/%E5%BC%82%E6%AD%A5/"/>
<category term="Linux" scheme="https://www.xin666.cc/tags/Linux/"/>
</entry>
<entry>
<title>WebSocket了解一下</title>
<link href="https://www.xin666.cc/WebSocket%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B/"/>
<id>https://www.xin666.cc/WebSocket了解一下/</id>
<published>2018-05-25T08:54:00.000Z</published>
<updated>2021-08-11T07:17:58.992Z</updated>
<content type="html"><![CDATA[<hr><p>WebSocket并非一个工具，而是HTML5里面的协议。它从某种角度上弥补了上一部分中我们介绍过的HTTP协议的缺陷。<br>它诞生的最大价值，在于解决客户端和服务器之间的实时通信。WebSocket提供使用一个TCP连接进行双向通讯的机制，包括网络协议和API，以取代网页和服务器采用HTTP轮询进行双向通讯的机制。<br>由于使用WebSocket使用HTTP的端口，因此TCP连接建立后的握手消息是基于HTTP的，由服务器判断这是一个HTTP协议，还是WebSocket协议。 WebSocket连接除了建立和关闭时的握手，数据传输和HTTP没有任何关系。</p><p><img src="http://p09g3b06f.bkt.clouddn.com/WebSocket%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE.png" alt="协议"></p><a id="more"></a><h2 id="websocket与http"><a href="#websocket与http" class="headerlink" title="websocket与http"></a>websocket与http</h2><p>WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）</p><p>首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，</p><p>另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。通俗来说，你可以用HTTP协议传输非Html数据，</p><h2 id="Websocket是什么样的协议"><a href="#Websocket是什么样的协议" class="headerlink" title="Websocket是什么样的协议"></a>Websocket是什么样的协议</h2><p>首先，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。简单的举个例子吧，用目前应用比较广泛的HTTP生命周期来解释。</p><p>HTTP的生命周期通过 Request 来界定，也就是一个 Request 一个 Response ，那么在 HTTP1.0 中，这次HTTP请求就结束了。</p><p>在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request=Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。</p><h2 id="Websocket的作用"><a href="#Websocket的作用" class="headerlink" title="Websocket的作用"></a>Websocket的作用</h2><h3 id="longpoll-和-ajax轮询-的原理"><a href="#longpoll-和-ajax轮询-的原理" class="headerlink" title="longpoll 和 ajax轮询 的原理"></a>longpoll 和 ajax轮询 的原理</h3><p>ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。</p><p><img src="http://p09g3b06f.bkt.clouddn.com/WebSocket%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B/%E8%BD%AE%E8%AF%A2.png" alt="ajax轮询"></p><p>longpoll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。</p><p><img src="http://p09g3b06f.bkt.clouddn.com/WebSocket%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B/%E9%95%BF%E8%BD%AE%E8%AF%A2.png" alt="长轮询"></p><h2 id="websocket使用"><a href="#websocket使用" class="headerlink" title="websocket使用"></a>websocket使用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ws = <span class="keyword">new</span> WebSocket(<span class="string">"wss://www.websocket.org"</span>);</span><br><span class="line">ws.onopen = <span class="function"><span class="keyword">function</span>(<span class="params">evt</span>) </span>{ </span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"Connection open ..."</span>); </span><br><span class="line"> ws.send(<span class="string">"Hello WebSockets!"</span>);</span><br><span class="line">};</span><br><span class="line">ws.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">evt</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log( <span class="string">"Received Message: "</span> + evt.data);</span><br><span class="line"> ws.close();</span><br><span class="line">};</span><br><span class="line">ws.onclose = <span class="function"><span class="keyword">function</span>(<span class="params">evt</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"Connection closed."</span>);</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h2 id="推荐："><a href="#推荐：" class="headerlink" title="推荐："></a>推荐：</h2><ul><li><a href="https://segmentfault.com/a/1190000012948613#articleHeader15" target="_blank" rel="noopener">WebSocket 详解</a></li><li><a href="https://mp.weixin.qq.com/s/KVPNG_kvTTWnkbGvHOY4Gw" target="_blank" rel="noopener">看完让你彻底搞懂Websocket原理</a><br><a href="http://www.ruanyifeng.com/blog/2017/05/websocket.html" target="_blank" rel="noopener"> 阮一峰WebSocket教程</a></li></ul>]]></content>
<summary type="html">
<hr>
<p>WebSocket并非一个工具，而是HTML5里面的协议。它从某种角度上弥补了上一部分中我们介绍过的HTTP协议的缺陷。<br>它诞生的最大价值，在于解决客户端和服务器之间的实时通信。WebSocket提供使用一个TCP连接进行双向通讯的机制，包括网络协议和API，以取代网页和服务器采用HTTP轮询进行双向通讯的机制。<br>由于使用WebSocket使用HTTP的端口，因此TCP连接建立后的握手消息是基于HTTP的，由服务器判断这是一个HTTP协议，还是WebSocket协议。 WebSocket连接除了建立和关闭时的握手，数据传输和HTTP没有任何关系。</p>
<p><img src="http://p09g3b06f.bkt.clouddn.com/WebSocket%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE.png" alt="协议"></p>
</summary>
<category term="网络协议" scheme="https://www.xin666.cc/categories/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/"/>
<category term="HTTP" scheme="https://www.xin666.cc/tags/HTTP/"/>
<category term="网络协议" scheme="https://www.xin666.cc/tags/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/"/>
</entry>
<entry>
<title>React学习笔记</title>
<link href="https://www.xin666.cc/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<id>https://www.xin666.cc/React学习笔记/</id>
<published>2018-04-24T07:44:00.000Z</published>
<updated>2021-08-11T07:17:58.988Z</updated>
<content type="html"><![CDATA[<h2 id="React"><a href="#React" class="headerlink" title="React"></a>React</h2><p>高内聚（High Cohesion ）和低搞合（ LowCoupling）的原则。<br>“差劲的程序员操心代码，优秀的程序员操心数据结构和它们之间的关系。</p><a id="more"></a><h2 id="组件中的属性-prop-和状态-state"><a href="#组件中的属性-prop-和状态-state" class="headerlink" title="组件中的属性(prop)和状态(state)"></a>组件中的属性(prop)和状态(state)</h2><p>React 组件的数据分为两种， prop 和state ，无论prop 或者state 的改变，都可能引发组件的重新渲染<br>prop 是组件的对外接口， state 是组件的内部状态，对外用prop ，内部用state 。<br>在React 中， prop ( property 的简写）是从外部传递给组件的数据， 一个React 组件<br>通过定义自己能够接受的prop 就定义了自己的对外公共接口。<br>每个React 组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过prop 来和组件对话的。<br>propTypes类型检查是一个辅助工具<br>React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替<br>由于React组件不能修改传入的prop ，所以需要记录自身数据变化，就要使用state 。<br>而this.setState()函数所做的事情，首先是改变this.state 的值，然后驱动组件经历更新过程，这样才有机会让this.state 里新的值出现在界面上。</p><h2 id="prop和state区别"><a href="#prop和state区别" class="headerlink" title="prop和state区别"></a>prop和state区别</h2><ol><li>prop 用于定义外部接口， state 用于记录内部状态；</li><li>prop 的赋值在外部世界使用组件时， state 的赋值在组件内部；</li><li>组件不应该改变prop 的值，而state 存在的目的就是让组件来改变的。</li><li>组件的state ，就相当于组件的记忆，其存在意义就是被修改，每一次通过this.</li><li>setState 函数修改state 就改变了组件的状态，然后通过渲染过程把这种变化体现出来。</li><li>子组件向父组件传递数据和改变父组件中的数据是通过 父组件传递函数的prop给子组件调用，从而改变父组件的state数据和页面渲染</li></ol><h2 id="组件生命周期："><a href="#组件生命周期：" class="headerlink" title="组件生命周期："></a>组件生命周期：</h2><ul><li><input checked disabled type="checkbox"> 装载过程（ Mount ），也就是把组件第一次在DOM 树中渲染的过程；</li><li><input checked disabled type="checkbox"> 更新过程（ Update ），当组件被重新渲染的过程；</li><li><input checked disabled type="checkbox"> 卸载过程（ Unmount ），组件从DOM 中删除的过程。</li></ul><blockquote><p>构造函数（constructor）最先执行，componentWillMount() 会在render() 方法之前执行，而 componentDidMount() 在 render() 方法之后执行。</p></blockquote><h3 id="装载过程（-Mount-）：顺序："><a href="#装载过程（-Mount-）：顺序：" class="headerlink" title="装载过程（ Mount ）：顺序："></a>装载过程（ Mount ）：顺序：</h3><ol><li>constructor</li><li>getlnitialState</li></ol><ul><li>getDefaultProps (这两个函数只在React.createClass 方法创造的组件类才会起作用。)</li></ul><ol start="3"><li>componentWillMount</li><li>render</li><li>componentDidMount</li><li>componentWillUnmount</li><li>componentDidCatch(error, info)</li></ol><p>render 函数并不做实际的谊染动作，它只是返回一个JSX 描述的结构，最终由React 来操作渲染过程。</p><p>render 函数应该是一个纯函数，完全根据this.state 和this.props 来决定返回的结果，而且不要产生任何副作用。</p><p>在render函数中去调用this.setState毫无疑问是错误的，因为一个纯函数不应该引起状态的改变。</p><p>而setState也有一个非常重要的特性，那就是，该方法是异步的。它并不会立即执行，而会在下一轮事件循环中执行。</p><h3 id="更新过程（-Update-）：-顺序："><a href="#更新过程（-Update-）：-顺序：" class="headerlink" title="更新过程（ Update ）： 顺序："></a>更新过程（ Update ）： 顺序：</h3><ol><li>componentWillReceiveProps(nextProps) </li><li>shouldComponentUpdate(nextProps, nextState) (判断是否要更新)</li><li>componentWillUpdate(nextProps, nextState)</li><li>render</li><li>componentDidUpdate(prevProps, prevState)</li></ol><p>forceUpdate就是重新render。有些变量不在state上，但是你又想达到这个变量更新的时候，刷新render<br>只要是父组件的render 函数被调用，在render 函数里面被谊染的子组件就会经历更新过程，不管父组件传给子组件的props 有没有改变，都会触发子组件的componentWillReceiveProps函数。</p><p>注意，通过this.setState 方法触发的更新过程不会调用这个函数，这是因为这个函数<br>适合根据新的props 值（也就是参数nextProps ）来计算出是不是要更新内部状态state。</p><ul><li><p>constructor(props) - 它在组件初始化时被调用。在这个方法中，你可以设置初始化状态以及绑定类方法。</p></li><li><p>componentWillMount() - 它在 render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态，因为它不会触发组件的再次渲染。但一般来说，还是推荐在 constructor() 中去初始化状态。</p></li><li><p>render() - <strong>这个生命周期方法是必须有的</strong>，它返回作为组件输出的元素。这个方法应该是一个纯函数，因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回（需要渲染的）元素</p></li><li><p>componentDidMount() - 它仅在组件挂载后执行一次。这是发起异步请求去 API 获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中然后在 render() 生命周期方法中展示出来。</p></li><li><p>componentWillReceiveProps(nextProps) - 这个方法在一个更新生命周（update lifecycle）中被调用。新的属性会作为它的输入。因此你可以利用 this.props 来对比之后的属性和之前的属性，基于对比的结果去实现不同的行为。此外，你可以基于新的属性来设置组件的状态。</p></li><li><p>shouldComponentUpdate(nextProps, nextState) - 每次组件因为状态或者属性更改而更新时，它都会被调用。你将在成熟的React应用中使用它来进行性能优化。在一个更新生命周期中，组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期（render lifecycle）方法，避免不必要的渲染。</p></li><li><p>componentWillUpdate(nextProps, nextState) - 这个方法是 render() 执行之前的最后一个方法。你已经拥有下一个属性和状态，它们可以在这个方法中任由你处置。你可以利用这个方法在渲染之前进行最后的准备。<strong>注意在这个生命周期方法中你不能再触发 setState()</strong>。如果你想基于新的属性计算状态，你必须利用 componentWillReceiveProps()。</p></li><li><p>componentDidUpdate(prevProps, prevState) - 这个方法在 render() 之后立即调用。你可以用它当成操作 DOM 或者执行更多异步请求的机会。</p></li><li><p>componentWillUnmount() - 它会在组件销毁之前被调用。你可以利用这个生命周期方法去执行任何清理任务。</p></li><li><p>componentDidCatch(error, info)。它在 <strong>React 16 中引入</strong>，用来捕获组件的错误。</p></li></ul><h2 id="从Flux-到Redux"><a href="#从Flux-到Redux" class="headerlink" title="从Flux 到Redux"></a>从Flux 到Redux</h2>]]></content>
<summary type="html">
<h2 id="React"><a href="#React" class="headerlink" title="React"></a>React</h2><p>高内聚（High Cohesion ）和低搞合（ LowCoupling）的原则。<br>“差劲的程序员操心代码，优秀的程序员操心数据结构和它们之间的关系。</p>
</summary>
<category term="JavaScript" scheme="https://www.xin666.cc/categories/JavaScript/"/>
<category term="React" scheme="https://www.xin666.cc/tags/React/"/>
</entry>
</feed>