-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1249 lines (787 loc) · 126 KB
/
index.html
File metadata and controls
1249 lines (787 loc) · 126 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>朱天宇</title>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<meta name="author" content="朱天宇">
<meta name="description" content="云雀叫了一整天">
<meta property="og:type" content="website">
<meta property="og:title" content="朱天宇">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="朱天宇">
<meta property="og:description" content="云雀叫了一整天">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="朱天宇">
<meta name="twitter:description" content="云雀叫了一整天">
<link rel="alternative" href="/atom.xml" title="朱天宇" type="application/atom+xml">
<link rel="icon" href="/img/favicon.ico">
<link rel="apple-touch-icon" href="/img/jacman.jpg">
<link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<div>
<div id="imglogo">
<a href="/"><img src="/img/logo.png" alt="朱天宇" title="朱天宇"/></a>
</div>
<div id="textlogo">
<h1 class="site-name"><a href="/" title="朱天宇">朱天宇</a></h1>
<h2 class="blog-motto"></h2>
</div>
<div class="navbar"><a class="navbutton navmobile" href="#" title="Menu">
</a></div>
<nav class="animated">
<ul>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/about">About</a></li>
<li>
<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
<label>Search</label>
<input type="search" id="search" name="q" autocomplete="off" maxlength="20" placeholder="Search" />
<input type="hidden" name="q" value="site:yoursite.com">
</form>
</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<div id="main">
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2017/02/02/itachi/" title="Itachi" itemprop="url">Itachi</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2017-02-02T12:38:22.000Z" itemprop="datePublished"> Published 2017-02-02</time>
</p>
</header>
<div class="article-content">
<h1 id="鼬"><a href="#鼬" class="headerlink" title="鼬"></a>鼬</h1><p>只要是人都是依靠自己的知识和认知并且也被其束缚着生活的，那叫做现实。但知识和认知是暖昧不清的东西，现实也许只是镜花水月，人都是活在自己的执念中的，你不这样认为吗？</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/U/">U</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2017/01/16/JavaScript总结/" title="JavaScript总结" itemprop="url">JavaScript总结</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2017-01-16T13:33:51.000Z" itemprop="datePublished"> Published 2017-01-16</time>
</p>
</header>
<div class="article-content">
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><p>JavaScript 是 弱类型 语言，但并不是没有类型，JavaScript可以识别下面 7 种不同类型的值：</p>
<p>基本数据类型</p>
<ul>
<li>Boolean</li>
<li>Number</li>
<li>String</li>
<li>null</li>
<li>undefined</li>
<li>Symbol</li>
</ul>
<p>Object</p>
<ul>
<li>Array</li>
<li>RegExp</li>
<li>Date</li>
<li>Math</li>
<li>…<br>可以使用 <code>typeof</code>判断数据类型，操作符返回一个字符串，但并非返回的所有结果都符合预期<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">typeof <span class="literal">false</span> // <span class="string">"boolean"</span></div><div class="line">typeof .2 // <span class="string">"number"</span></div><div class="line">typeof NaN // <span class="string">"number"</span></div><div class="line">typeof <span class="string">''</span> // <span class="string">"string"</span></div><div class="line">typeof undefined // <span class="string">"undefined"</span></div><div class="line">typeof Symbol() // <span class="string">"symbol"</span></div><div class="line"></div><div class="line">typeof new Date() // <span class="string">"object"</span></div><div class="line">typeof [] // <span class="string">"object"</span></div><div class="line"></div><div class="line">typeof alert // <span class="string">"function"</span></div><div class="line"></div><div class="line">typeof null // <span class="string">"object"</span></div><div class="line">typeof not_defined_var // <span class="string">"undefined"</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><p>在应用程序中，使用变量来来为值命名。变量的名称称为 <code>identifiers</code></p>
<p>声明</p>
<ul>
<li>使用关键字 <code>var</code> ：函数作用域</li>
<li>使用关键字 <code>let</code> ：块作用域 (block scope local variable)</li>
<li>直接使用：全局作用域<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var global_var = 1;</div><div class="line"></div><div class="line"><span class="keyword">function</span> <span class="function"><span class="title">fn</span></span> () {</div><div class="line"> var fn_var = 2;</div><div class="line"> </div><div class="line"> <span class="keyword">if</span>(fn_var > 10){</div><div class="line"> <span class="built_in">let</span> block_var = 3;</div><div class="line"> global_var2 = 4; //全局作用域</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<p>只声明不赋值，变量的默认值是 <code>undefined</code></p>
<p><code>const</code>关键字可以声明不可变变量，同样为块作用域。对不可变的理解在对象上的理解需要注意<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">const num = 1;</div><div class="line">const obj = {</div><div class="line"> prop: <span class="string">'value'</span></div><div class="line">};</div><div class="line"></div><div class="line">num = 2; // Uncaught TypeError: Assignment to constant variable.</div><div class="line">obj[<span class="string">'prop'</span>] = <span class="string">'value2'</span>;</div><div class="line"></div><div class="line">obj = []; // Uncaught TypeError: Assignment to constant variable.</div></pre></td></tr></table></figure></p>
<p>变量提升</p>
<p>JavaScript中可以引用稍后声明的变量，而不会引发异，这一概念称为变量声明提升(hoisting)<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">console.log(a); // undefined</div><div class="line"></div><div class="line">var a = 2;</div></pre></td></tr></table></figure></p>
<p>等同于<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">var a;</div><div class="line"></div><div class="line">console.log(a);</div><div class="line"></div><div class="line">a = 2;</div></pre></td></tr></table></figure></p>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><p>一个函数就是一个可以被外部代码调用(或者函数本身递归调用)的 子程序</p>
<p>定义函数</p>
<ul>
<li>函数声明</li>
<li>函数表达式</li>
<li>Function 构造函数</li>
<li>箭头函数<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> <span class="function"><span class="title">fn</span></span>(){}</div><div class="line"></div><div class="line">var fn = <span class="function"><span class="title">function</span></span>(){}</div><div class="line"></div><div class="line">var fn = new Function(arg1, arg2, ... argN, funcBody)</div><div class="line"></div><div class="line">var fn = (param) => {}</div></pre></td></tr></table></figure>
</li>
</ul>
<p>arguments</p>
<ul>
<li>arguments: 一个包含了传递给当前执行函数参数的类似于数组的对象</li>
<li>arguments.length: 传给函数的参数的数目<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> <span class="function"><span class="title">foo</span></span>() {</div><div class="line"> <span class="built_in">return</span> arguments;</div><div class="line">}</div><div class="line">foo(1, 2, 3); // Arguments[3] </div><div class="line">// { <span class="string">"0"</span>: 1, <span class="string">"1"</span>: 2, <span class="string">"2"</span>: 3 }</div></pre></td></tr></table></figure>
</li>
</ul>
<p>rest<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> foo(...args) {</div><div class="line"> <span class="built_in">return</span> args;</div><div class="line">}</div><div class="line">foo(1, 2, 3); // Array[3]</div><div class="line">// [1, 2, 3]</div><div class="line"></div><div class="line"><span class="keyword">function</span> fn(a, b, ...args){</div><div class="line"> <span class="built_in">return</span> args;</div><div class="line">}</div><div class="line"></div><div class="line">fn(1, 2, 3, 4, 5); // Array[3] </div><div class="line">// [3, 4, 5]</div></pre></td></tr></table></figure></p>
<p>default</p>
<p>函数的参数可以在定义的时候约定默认值<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> fn (a = 2, b = 3) {</div><div class="line"> <span class="built_in">return</span> a + b;</div><div class="line">}</div><div class="line"></div><div class="line"></div><div class="line">fn(2, 3); // 5</div><div class="line"></div><div class="line">fn(2); // 5</div><div class="line"></div><div class="line">fn(); // 5</div></pre></td></tr></table></figure></p>
<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><p>JavaScript 中对象是可变 键控集合 (keyed collections)</p>
<p>定义对象</p>
<ul>
<li>字面量</li>
<li>构造函数<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">var obj = {</div><div class="line"> prop: <span class="string">'value'</span>,</div><div class="line"> fn: <span class="function"><span class="title">function</span></span>(){}</div><div class="line">};</div><div class="line"></div><div class="line">var date = new Date();</div></pre></td></tr></table></figure>
</li>
</ul>
<p>构造函数</p>
<p>构造函数和普通函数并没有区别，使用 <code>new</code> 关键字调用就是构造函数，使用构造函数可以 实例化 一个对象</p>
<p>函数的返回值有两种可能</p>
<ul>
<li>显式调用 <code>return</code> 返回 <code>return</code> 后表达式的求值</li>
<li>没有调用 <code>return</code> 返回 <code>undefined</code><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> People(name, age) {</div><div class="line"> this.name = name;</div><div class="line"> this.age = age;</div><div class="line">}</div><div class="line"></div><div class="line">var people = new People(<span class="string">'Byron'</span>, 26);</div></pre></td></tr></table></figure>
</li>
</ul>
<p>构造函数返回值</p>
<ul>
<li>没有返回值</li>
<li>简单数据类型</li>
<li>对象类型<br>前两种情况构造函数返回构造对象的实例，实例化对象正是利用的这个特性</li>
</ul>
<p>第三种构造函数和普通函数表现一致，返回 <code>return</code> 后表达式的结果</p>
<p>prototype</p>
<ul>
<li>每个函数都有一个 <code>prototype</code> 的对象属性，对象内有一个 <code>constructor</code> 属性，默认指向函数本身</li>
<li>每个对象都有一个 <code>__proto__</code>的属性，属相指向其父类型的 <code>prototype</code><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> Person(name) {</div><div class="line"> this.name = name;</div><div class="line">}</div><div class="line"></div><div class="line">Person.prototype.print = <span class="function"><span class="title">function</span></span> () {</div><div class="line"> console.log(this.name);</div><div class="line">};</div><div class="line"></div><div class="line">var p1 = new Person(<span class="string">'Byron'</span>);</div><div class="line">var p2 = new Person(<span class="string">'Casper'</span>);</div><div class="line"></div><div class="line">p1.print();</div><div class="line">p2.print();</div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="this-和作用域"><a href="#this-和作用域" class="headerlink" title="this 和作用域"></a>this 和作用域</h2><p>this 场景</p>
<p>普通函数</p>
<ul>
<li>严格模式：undefined</li>
<li>非严格模式: 全局对象</li>
<li>Node: global</li>
<li>浏览器: window<br>构造函数：对象的实例</li>
</ul>
<p>对象方法：对象本身</p>
<p>call & apply</p>
<ul>
<li>fn.call(context, arg1, arg2, …, argn)</li>
<li>fn.apply(context, args)<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> isNumber(obj) {</div><div class="line"> <span class="built_in">return</span> Object.prototype.toString.call(obj) === <span class="string">'[object Number]'</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<p>Function.prototype.bind</p>
<p><code>bind</code> 返回一个新函数，函数的作用域为 <code>bind</code> 参数<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> <span class="function"><span class="title">fn</span></span>() {</div><div class="line"> this.i = 0;</div><div class="line"></div><div class="line"> <span class="built_in">set</span>Interval(<span class="function"><span class="title">function</span></span> () {</div><div class="line"> console.log(this.i++);</div><div class="line"> }.bind(this), 500)</div><div class="line">}</div><div class="line"></div><div class="line">fn();</div></pre></td></tr></table></figure></p>
<p>() => {}</p>
<p>箭头函数是 ES6 提供的新特性，是简写的 函数表达式，拥有词法作用域和 <code>this</code> 值<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> <span class="function"><span class="title">fn</span></span>() {</div><div class="line"> this.i = 0;</div><div class="line"></div><div class="line"> <span class="built_in">set</span>Interval(() => {</div><div class="line"> console.log(this.i++);</div><div class="line"> }, 500)</div><div class="line">}</div><div class="line"></div><div class="line">fn();</div></pre></td></tr></table></figure></p>
<p>##继承<br>在 JavaScript 的场景，继承有两个目标，子类需要得到父类的：</p>
<ul>
<li>对象的属性</li>
<li>对象的方法<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> inherits(child, parent) {</div><div class="line"> var _proptotype = Object.create(parent.prototype);</div><div class="line"> _proptotype.constructor = child.prototype.constructor;</div><div class="line"> child.prototype = _proptotype;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">function</span> People(name, age) {</div><div class="line"> this.name = name;</div><div class="line"> this.age = age;</div><div class="line">}</div><div class="line"></div><div class="line">People.prototype.getName = <span class="function"><span class="title">function</span></span> () {</div><div class="line"> <span class="built_in">return</span> this.name;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">function</span> English(name, age, language) {</div><div class="line"> People.call(this, name, age);</div><div class="line"> this.language = language;</div><div class="line">}</div><div class="line"></div><div class="line">inherits(English, People);</div><div class="line"></div><div class="line">English.prototype.introduce = <span class="function"><span class="title">function</span></span> () {</div><div class="line"> console.log(<span class="string">'Hi, I am '</span> + this.getName());</div><div class="line"> console.log(<span class="string">'I speak '</span> + this.language);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keyword">function</span> Chinese(name, age, language) {</div><div class="line"> People.call(this, name, age);</div><div class="line"> this.language = language;</div><div class="line">}</div><div class="line"></div><div class="line">inherits(Chinese, People);</div><div class="line"></div><div class="line">Chinese.prototype.introduce = <span class="function"><span class="title">function</span></span> () {</div><div class="line"> console.log(<span class="string">'你好，我是'</span> + this.getName());</div><div class="line"> console.log(<span class="string">'我说'</span> + this.language);</div><div class="line">}</div><div class="line"></div><div class="line">var en = new English(<span class="string">'Byron'</span>, 26, <span class="string">'English'</span>);</div><div class="line">var cn = new Chinese(<span class="string">'色拉油'</span>, 27, <span class="string">'汉语'</span>);</div><div class="line"></div><div class="line">en.introduce();</div><div class="line">cn.introduce();</div></pre></td></tr></table></figure>
</li>
</ul>
<p>ES6 class 与继承<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="string">"use strict"</span>;</div><div class="line"></div><div class="line">class People{</div><div class="line"> constructor(name, age){</div><div class="line"> this.name = name;</div><div class="line"> this.age = age;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="function"><span class="title">getName</span></span>(){</div><div class="line"> <span class="built_in">return</span> this.name;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">class English extends People{</div><div class="line"> constructor(name, age, language){</div><div class="line"> super(name, age);</div><div class="line"> this.language = language;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="function"><span class="title">introduce</span></span>(){</div><div class="line"> console.log(<span class="string">'Hi, I am '</span> + this.getName());</div><div class="line"> console.log(<span class="string">'I speak '</span> + this.language);</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">let</span> en = new English(<span class="string">'Byron'</span>, 26, <span class="string">'English'</span>);</div><div class="line"></div><div class="line">en.introduce();</div></pre></td></tr></table></figure></p>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><p>label statement<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">loop:</div><div class="line"> <span class="keyword">for</span> (var i = 0; i < 10; i++) {</div><div class="line"> <span class="keyword">for</span> (var j = 0; j < 5; j++) {</div><div class="line"> console.log(j);</div><div class="line"> <span class="keyword">if</span> (j === 1) {</div><div class="line"> <span class="built_in">break</span> loop;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line">console.log(i);</div></pre></td></tr></table></figure></p>
<p>语句与表达式<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">var x = { a:1 };</div><div class="line"></div><div class="line">{ a:1 }</div><div class="line"></div><div class="line">{ a:1, b:2 }</div></pre></td></tr></table></figure></p>
<p>立即执行函数<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">( <span class="function"><span class="title">function</span></span>() {}() );</div><div class="line">( <span class="function"><span class="title">function</span></span>() {} )();</div><div class="line">[ <span class="function"><span class="title">function</span></span>() {}() ];</div><div class="line"></div><div class="line">~ <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">! <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">+ <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">- <span class="function"><span class="title">function</span></span>() {}();</div><div class="line"></div><div class="line">delete <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">typeof <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">void <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">new <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">new <span class="function"><span class="title">function</span></span>() {};</div><div class="line"></div><div class="line">var f = <span class="function"><span class="title">function</span></span>() {}();</div><div class="line"></div><div class="line">1, <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">1 ^ <span class="function"><span class="title">function</span></span>() {}();</div><div class="line">1 > <span class="function"><span class="title">function</span></span>() {}();</div></pre></td></tr></table></figure></p>
<h2 id="高阶函数"><a href="#高阶函数" class="headerlink" title="高阶函数"></a>高阶函数</h2><p>高阶函数是把函数当做参数或者返回值是函数的函数</p>
<p>回调函数<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">[1, 2, 3, 4].forEach(<span class="keyword">function</span>(item){</div><div class="line"> console.log(item);</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>闭包</p>
<p>闭包由两部分组成</p>
<ul>
<li>函数</li>
<li>环境：函数创建时作用域内的局部变量<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> makeCounter(init) {</div><div class="line"> var init = init || 0;</div><div class="line"></div><div class="line"> <span class="built_in">return</span> <span class="function"><span class="title">function</span></span>(){</div><div class="line"> <span class="built_in">return</span> ++init;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">var counter = makeCounter(10);</div><div class="line"></div><div class="line">console.log(counter());</div><div class="line">console.log(counter());</div></pre></td></tr></table></figure>
</li>
</ul>
<p>典型错误<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span> (var i = 0; i < doms.length; i++) {</div><div class="line"> doms.eq(i).on(<span class="string">'click'</span>, <span class="keyword">function</span> (ev) {</div><div class="line"> console.log(i);</div><div class="line"> });</div><div class="line">}</div><div class="line"></div></pre></td></tr></table></figure></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span> (var i = 0; i < doms.length; i++) {</div><div class="line"> (<span class="keyword">function</span> (i) {</div><div class="line"> doms.eq(i).on(<span class="string">'click'</span>, <span class="keyword">function</span> (ev) {</div><div class="line"> console.log(i);</div><div class="line"> });</div><div class="line"> })(i);</div><div class="line">}</div></pre></td></tr></table></figure>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/JS/">JS</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/JS/">JS</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/12/26/函数调用/" title="函数调用" itemprop="url">函数调用</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-12-26T12:22:09.000Z" itemprop="datePublished"> Published 2016-12-26</time>
</p>
</header>
<div class="article-content">
<p>函数的定义会为形参提供实参的值。函数使用它们实参的值来计算返回值，称为该函数调用表达式的值。除了实参之外，每次调用还会拥有另一个值——本次调用的上下文——这就是 this 关键字。<br>如果函数挂在在一个对象上，作为对象的一个属性，就称为它为对象的方法。当通过这个对象来调用函数时，该对象就是此次调用的上下文（context），也就是该函数的this的值。<br>在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值给变量，或者作为参数传递给其他函数。因为函数就是对象，所以可以给它们设置属性，甚至调用它们的方法。<br>JS的函数可以嵌套在其他函数定义中，这样它们就可以访问它们被定义时所处的作用域中的任何变量。这意味着JS函数构成了一个闭包（closure）,它给JS带来了非常强劲的编程能力。</p>
<h1 id="什么是函数"><a href="#什么是函数" class="headerlink" title="什么是函数"></a>什么是函数</h1><h2 id="函数定义"><a href="#函数定义" class="headerlink" title="函数定义"></a>函数定义</h2><p>函数使用 function 关键字来定义；它可以用在函数定义表达式或者函数声明语句里。在两种形式里，函数定义都从 function 关键字开始，其后跟随这些组成部分</p>
<ul>
<li>函数名字标识符 —— 函数名称是函数声明语句必须的部分。它的用于就像变量的名字，新定义的函数对象会赋值给这个对象。对函数定义表达式来说，这个名字是可选的；如果存在，该名字只存在与函数体中，并指代该函数对象本身。</li>
<li>一对圆括号 —— 其中包含由0个或者多个逗号隔开的标识符组成的列表。这些标识符是函数的参数名称，它们就像函数体中的局部变量一样。</li>
<li>一对花括号 —— 其中包含0条或多条JS语句。这些语句构成了函数体；一旦调用函数，就会执行这些语句。</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">// 函数声明语句 </div><div class="line"><span class="keyword">function</span> printprops(o){ </div><div class="line"> ... ... </div><div class="line">} </div><div class="line"> </div><div class="line">// 函数表达式 </div><div class="line">var square = <span class="keyword">function</span>(x ){ ... ...} </div><div class="line"> </div><div class="line">// 函数表达式可以包含名称 </div><div class="line">var f = <span class="keyword">function</span> fact(x) { ... ...}; </div><div class="line"> </div><div class="line">// 函数表达式也可以作为参数传递给其他函数 </div><div class="line">data.sort(<span class="keyword">function</span>(a,b){... ...}); </div><div class="line"> </div><div class="line">// 函数表达式有时定义后立即调用 </div><div class="line">var tensquared = (<span class="keyword">function</span>(x){<span class="built_in">return</span> x*x;}(10));</div></pre></td></tr></table></figure>
<p>注意：</p>
<ul>
<li>以表达式方式定义的函数，函数的名称是可选的。</li>
<li>一条函数声明语句实际上声明了一个变量，并把一个函数对象赋值给它。</li>
<li>相对而言，定义函数表达式时并没有声明一个变量。</li>
<li>如果一个函数表达式包含名称，函数的局部作用域将会包含一个绑定到函数对象的名称，实际上，函数的名称将会称为函数内部的一个局部变量。</li>
<li><font color="red">以表达式方式定义的函数在定义之前无法调用</font></li>
<li><font color="red">函数声明语句被提前到外部脚本或外部函数作用域的顶部，所以以这种方式声明的函数，可以被在它定义之前出现的代码所调用</font>><h2 id="函数返回值"><a href="#函数返回值" class="headerlink" title="函数返回值"></a>函数返回值</h2>大多数函数包含一条 reuturn 语句。return语句导致函数停止执行，并返回它的表达式的值给调用者。<br>如果return语句没有一个与之相关的表达式，则它返回undefined值。如果一个函数不包含return语句，那它就只执行函数体中每条语句，并返回undefined值给调用者。<h2 id="函数命名"><a href="#函数命名" class="headerlink" title="函数命名"></a>函数命名</h2>通常函数名的第一个字符为小写<h2 id="嵌套函数"><a href="#嵌套函数" class="headerlink" title="嵌套函数"></a>嵌套函数</h2>在JS里，函数可以嵌套在其他函数里。<br>嵌套函数可以访问嵌套它们的函数的参数和变量。<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> hypotenuse(a, b){ </div><div class="line"> <span class="keyword">function</span> square(x) { <span class="built_in">return</span> x*x;} </div><div class="line"> <span class="built_in">return</span> Math.sqrt(square(a) + square(b)); </div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="函数调用"><a href="#函数调用" class="headerlink" title="函数调用"></a>函数调用</h1><p>构成函数主体的JS代码在定义时并不会执行，只有调用该函数时，才会执行。<br>有4中方式来调用JS函数：</p>
<ul>
<li>作为函数</li>
<li>作为方法</li>
<li>作为构造函数</li>
<li>通过它们的call（）和apply（）方法间接调用<h2 id="函数调用-1"><a href="#函数调用-1" class="headerlink" title="函数调用"></a>函数调用</h2>以函数形式调用的函数通常不使用 this 关键字。<h2 id="方法调用"><a href="#方法调用" class="headerlink" title="方法调用"></a>方法调用</h2>方法调用和函数调用有一个重要的区别，即，调用上下文。<br>属性访问表达式由两部分组成：一个对象和属性名称。在这样的方法调用表达式中，对象为调用上下文，函数体可以使用关键字 this 引用该对象。<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">var calculator = { </div><div class="line"> operand1 : 1, </div><div class="line"> operand2: 1, </div><div class="line"> add: <span class="function"><span class="title">function</span></span>(){ </div><div class="line"> this.result = this.operand1 + this.operand2; </div><div class="line"> } </div><div class="line">}; </div><div class="line"> </div><div class="line">calculator.add(); </div><div class="line">calculator.result; //=> 2</div></pre></td></tr></table></figure>
</li>
</ul>
<p>任何函数只要作为方法调用实际上都会传入一个隐式的实参 —— 这个对象。<br>嵌套的函数不会从调用它的函数中继承this。<br>如果想访问这个外部函数的this值，需要将this的值保存在一个变量里，这个变量和内部函数都同在一个作用域内。通常使用变量self来保存this。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">var o = { </div><div class="line"> m: <span class="function"><span class="title">function</span></span>(){ </div><div class="line"> var self = this; </div><div class="line"> console.log(this === o); //=> <span class="literal">true</span> </div><div class="line"> f(); </div><div class="line"> </div><div class="line"> <span class="keyword">function</span> <span class="function"><span class="title">f</span></span>(){ </div><div class="line"> console.log(this === 0); // <span class="literal">false</span> </div><div class="line"> console.log(self === o); // <span class="literal">true</span> </div><div class="line"> } </div><div class="line"> } </div><div class="line">};</div></pre></td></tr></table></figure></p>
<h2 id="构造函数调用"><a href="#构造函数调用" class="headerlink" title="构造函数调用"></a>构造函数调用</h2><p>果函数或者方法调用之前带有关键字new，它就构成构造函数调用。<br>如果构造函数调用在圆括号内包含一组实参列表，先计算这些实参表达式，然后传入函数内。但如果构造函数没有形参，JS构造函数调用的语法是允许省略实参列表和圆括号的。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">var o = new Object(); </div><div class="line">var o = new Object;</div></pre></td></tr></table></figure></p>
<p>构造函数可以使用 this 关键字来引用这个新创建的对象。<br>构造函数通常不使用 return 关键字。然而如果构造函数显示地使用 return 语句返回一个对象，那么调用表达式的值就是这个对象。如果构造函数使用return语句但没有指定返回值，或者返回一个原始值，那么这时将忽略返回值，同时使用这个对象作为调用结果。</p>
<h2 id="间接调用"><a href="#间接调用" class="headerlink" title="间接调用"></a>间接调用</h2><p>函数也是对象，函数对象也可以包含方法，其中两个方法call() 和 apply() 可以用来间接调用函数。</p>
<h1 id="函数的实参和形参"><a href="#函数的实参和形参" class="headerlink" title="函数的实参和形参"></a>函数的实参和形参</h1><p>JavaScript中的函数定义并未指定函数形参的类型，函数调用也未对传入的实参值做任何类型检查。JavaScript函数调用甚至不检查传入形参的格式。</p>
<h2 id="可选形参"><a href="#可选形参" class="headerlink" title="可选形参"></a>可选形参</h2><p>当调用函数的时候传入的实参比函数声明时指定的形参个数要少，剩下的形参都将设置为undefined值。<br>当用这种可选实参来实现函数时，需要将可选实参放在实参列表的最后。</p>
<h2 id="可变长的实参列表：实参对象"><a href="#可变长的实参列表：实参对象" class="headerlink" title="可变长的实参列表：实参对象"></a>可变长的实参列表：实参对象</h2><p>当调用函数的时候传入的实参个数超过函数定义时的形参个数时，没有办法直接获得命名值的引用。<br>参数对象解决了这个问题。在函数体内，标识符 arguments 是指向实参对象的引用，实参对象是一个类数组对象，可以通过数字下标就能传入函数的实参值，而不用非要用通过名字来得到实参<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> f(x, y, z){ </div><div class="line"> <span class="keyword">if</span> (arguments.length != 3){ </div><div class="line"> ... ... </div><div class="line"> } </div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>第一个实参可以通过参数名x来获得，也可以通过 arguments[0] 来得到。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/JS/">JS</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/JS/">JS</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/12/06/Node中的url模块/" title="Node中的url模块" itemprop="url">Node中的url模块</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-12-06T03:23:51.000Z" itemprop="datePublished"> Published 2016-12-06</time>
</p>
</header>
<div class="article-content">
<pre><code>在使用node时，通常需要使用一些第三方包，其实node有一些核心模块可以直接使用。
</code></pre><h2 id="node的核心模块"><a href="#node的核心模块" class="headerlink" title="node的核心模块"></a>node的核心模块</h2><p>node 的核心模块<br>path：处理文件路径。<br>fs：操作文件系统。<br>child_process：新建子进程。<br>util：提供一系列实用小工具。<br>http：提供HTTP服务器功能。<br>url：用于解析URL。<br>querystring：解析URL中的查询字符串。<br>crypto：提供加密和解密功能。<br>其他</p>
<h2 id="url模块"><a href="#url模块" class="headerlink" title="url模块"></a>url模块</h2><h3 id="url模块的三种方法"><a href="#url模块的三种方法" class="headerlink" title="url模块的三种方法"></a>url模块的三种方法</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">1.url.parse(str,<span class="literal">true</span>) //将字符串转成对象,第二个参数默认为<span class="literal">false</span>，为<span class="literal">true</span>时，返回的url对象中，query的属性为一个对象。</div><div class="line">2.url.format(urlObj) //用于将对象转成字符串</div><div class="line">3.url.resolve(from,to)</div><div class="line"> url.resolve(<span class="string">"http://whitemu.com"</span>,<span class="string">"gulu"</span>);</div><div class="line"> /*</div><div class="line"> 返回值：</div><div class="line"> <span class="string">'http://whitemu.com/gulu'</span></div><div class="line"> */</div></pre></td></tr></table></figure>
<h3 id="url使用"><a href="#url使用" class="headerlink" title="url使用"></a>url使用</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">var url = require(<span class="string">'url'</span>);</div><div class="line">var str = <span class="string">'http://poiu:123@127.0.0.1:3000/?name=tom#a'</span>;</div><div class="line">var urlObj = url.parse(str,<span class="literal">true</span>); </div><div class="line">console.log(urlObj);</div><div class="line">/*</div><div class="line"> protocol: <span class="string">'http:'</span>, 协议</div><div class="line"> slashes: <span class="literal">true</span>, 是否有//</div><div class="line"> auth: <span class="string">'poiu:123'</span>, 用户名和密码</div><div class="line"> host: <span class="string">'127.0.0.1:3000'</span>, 主机</div><div class="line"> port: <span class="string">'3000'</span>, 端口</div><div class="line"> hostname: <span class="string">'127.0.0.1'</span>,域名/IP地址</div><div class="line"> <span class="built_in">hash</span>: <span class="string">'#a'</span>, 片断标识符 指向HTML页面某个DOM元素的ID</div><div class="line"> search: <span class="string">'?name=tom'</span>, ?+查询字符串</div><div class="line"> query: {name:<span class="string">'tom'</span>},查询字符串</div><div class="line"> pathname: <span class="string">'/'</span>, 端口号和？中间的那部分</div><div class="line"> path: <span class="string">'/2016jsnode?name=tom'</span>, pathname+search</div><div class="line"> href: <span class="string">'http://poiu:123@127.0.0.1:3000/?name=tom#a'</span> 原始的URL</div><div class="line"> */</div></pre></td></tr></table></figure>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/Node-js/">Node.js</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/Node-js/">Node.js</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/09/10/js阻止子元素响应父元素事件/" title="js阻止子元素响应父元素事件" itemprop="url">js阻止子元素响应父元素事件</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-09-10T06:23:33.000Z" itemprop="datePublished"> Published 2016-09-10</time>
</p>
</header>
<div class="article-content">
<h2 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h2><p>在一个元素上触发事件，如果此元素定义了处理程序，那么此次事件就会被捕获，根据程序进行该事件的处理。否则这个事件会根据DOM树向父节点逐级传播，如果从始至终都没有被处理，那么最终会到达document或window根元素。</p>
<h2 id="阻止事件冒泡"><a href="#阻止事件冒泡" class="headerlink" title="阻止事件冒泡"></a>阻止事件冒泡</h2><p>W3C标准调用事件对象的<code>stopPropagation()</code>方法，IE可以设置对象的<code>cancelBubble</code>属性为<code>true</code>;</p>
<p>在Jquery中的事件方法都带有event参数，这是一个符合W3C标准的事件对象，且兼容IE，可以使用<code>event.stopPropagation()</code>阻止冒泡。更简单的，直接<code>return false</code>;，等价于<code>event.stopPropagation()</code>加上<code>event.preventDefault()</code>。</p>
<p>在原生JS中，事件对象要区别对待。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> cancelEvent(e) {</div><div class="line"> <span class="keyword">if</span>(e) {</div><div class="line"> e.stopPropagation(); //非IE</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> window.event.cancelBubble = <span class="literal">true</span>; //IE</div><div class="line"> }</div><div class="line">}</div><div class="line">```bash</div><div class="line"><span class="comment">## 阻止多个子元素的事件</span></div><div class="line">综上所述，想要链接和按钮元素不响应父节点事件，便要为所有这些元素注册事件，编写阻止事件冒泡的代码。</div><div class="line">```bash</div><div class="line">var div = $(<span class="string">'#div'</span>);</div><div class="line">div.click(<span class="function"><span class="title">function</span></span>(){</div><div class="line"> // do...</div><div class="line">});</div><div class="line">div.on(<span class="string">'click'</span>, <span class="string">'a,button,input'</span>, <span class="keyword">function</span>(event){</div><div class="line"> event.stopPropagation(); // 或 <span class="built_in">return</span> <span class="literal">false</span>;</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>使用event对象解决<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">$(<span class="string">'#div'</span>).on(<span class="string">'click'</span>, <span class="keyword">function</span>(event){</div><div class="line"> var tag = event.target.tagName;</div><div class="line"> <span class="keyword">if</span>(tag!=<span class="string">'A'</span> && tag!=<span class="string">'BUTTON'</span> && tag!=<span class="string">'INPUT'</span>){</div><div class="line"> // do...</div><div class="line"> }</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/JS/">JS</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/JS/">JS</a><a href="/tags/Event/">Event</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/07/25/Flex布局/" title="Flex布局" itemprop="url">Flex布局</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-07-25T14:03:31.000Z" itemprop="datePublished"> Published 2016-07-25</time>
</p>
</header>
<div class="article-content">
<p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。<br>任何一个容器都可以指定为Flex布局。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">#box{</span></div><div class="line"> display: flex;</div><div class="line"> width: 500px;</div><div class="line"> height: 300px;</div><div class="line"> border: 10px solid red;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h2 id="父容器属性"><a href="#父容器属性" class="headerlink" title="父容器属性"></a>父容器属性</h2><p>有六个属性设置在box父容器上，来控制子元素的显示方式；分别是：</p>
<ul>
<li>flex-direction 设置主轴对齐方式 默认 row x轴从左到右；</li>
<li>flex-wrap 子元素换行的方式 默认nowrap ；</li>
<li>flex-flow flex-direction和flex-wrap的简写 默认row nowrap；</li>
<li>justify-content 子元素的对齐方式 默认flex-start 左对齐</li>
<li>align-items </li>
<li><p>align-content</p>
<h3 id="flex-direction"><a href="#flex-direction" class="headerlink" title="flex-direction"></a>flex-direction</h3><p>决定主轴的对齐方向，分别有四个属性： </p>
</li>
<li><p>row（默认值）：主轴为水平方向，起点在左端。 </p>
</li>
<li>row-reverse：主轴为水平方向，起点在右端。</li>
<li>column：主轴为垂直方向，起点在上沿。</li>
<li>column-reverse：主轴为垂直方向，起点在下沿。<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="comment">#box{</span></div><div class="line"> display: flex;</div><div class="line"> flex-direction: row;</div><div class="line">}</div><div class="line">.inner{</div><div class="line"> width: 100px;</div><div class="line"> height: 100px;</div><div class="line"> background: <span class="comment">#8a4182;</span></div><div class="line"> margin: 10px;</div><div class="line"></div><div class="line">}</div><div class="line"></div><div class="line"><div id=<span class="string">"box"</span>></div><div class="line"> <div class=<span class="string">"inner"</span>></div></div><div class="line"> <div class=<span class="string">"inner"</span>></div></div><div class="line"> <div class=<span class="string">"inner"</span>></div></div><div class="line"></div></div></pre></td></tr></table></figure>
</li>
</ul>
<p><img src="/2016/07/25/Flex布局/a1.jpg" alt=""><br>例如上面代码，主轴就是x轴横向的；起点在左端，从左到右排列</p>
<h3 id="flex-wrap"><a href="#flex-wrap" class="headerlink" title="flex-wrap"></a>flex-wrap</h3><p>定义子元素超过一行，如何换行，分别有三个属性：</p>
<ul>
<li>nowrap（默认值）：默认不换行。 </li>
<li>wrap：换行，第二行在第一行下面，从左到右</li>
<li>wrap-reverse：换行，第二行在第一行上面，从左到右；</li>
</ul>
<h4 id="nowrap"><a href="#nowrap" class="headerlink" title="nowrap"></a>nowrap</h4><p>不换行，如果子元素超过父元素的宽度或者高度，会自动在主轴方向压缩<br>下面的例子，主轴是x轴，默认不换行，但是父元素的宽度是500，子元素明显大于父元素宽度，会默认宽度变窄；<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">#box{</span></div><div class="line"> display: flex;</div><div class="line"> flex-direction: row;</div><div class="line"> width: 500px;</div><div class="line"> border: 1px solid red;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><img src="/2016/07/25/Flex布局/a2.jpg" alt=""></p>
<h4 id="wrap"><a href="#wrap" class="headerlink" title="wrap"></a>wrap</h4><p>换行，正常的折行<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">#box{</span></div><div class="line"> display: flex;</div><div class="line"> flex-direction: row;</div><div class="line"> flex-wrap: wrap;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><img src="/2016/07/25/Flex布局/a3.jpg" alt=""></p>
<h4 id="wrap-reverse"><a href="#wrap-reverse" class="headerlink" title="wrap-reverse"></a>wrap-reverse</h4><p>第二行在第一行上方<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">#box{</span></div><div class="line"> display: flex;</div><div class="line"> flex-direction: row;</div><div class="line"> flex-wrap: wrap-reverse;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><img src="/2016/07/25/Flex布局/a99.jpg" alt=""></p>
<h3 id="flex-flow"><a href="#flex-flow" class="headerlink" title="flex-flow"></a>flex-flow</h3><p>是flex-direction 和flex-wrap的简写形式，默认是 row nowrap<br><code>flex-flow：flex-direction|flex-wrap;</code></p>
<h3 id="justify-content"><a href="#justify-content" class="headerlink" title="justify-content"></a>justify-content</h3><p>子元素在主轴对齐方式</p>
<ul>
<li>flex-start（默认值）：左对齐</li>
<li>flex-end：右对齐</li>
<li>center： 居中</li>
<li>space-between：两端对齐，项目之间的间隔都相等。</li>
<li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。<br>flex-start和flex-end，center这三个都比较简单，主要区分开下面的space-between和space-around；<br><img src="/2016/07/25/Flex布局/a4.jpg" alt="space-between：两端对齐"><br><img src="/2016/07/25/Flex布局/a5.jpg" alt="space-around"></li>
</ul>
<h3 id="align-items"><a href="#align-items" class="headerlink" title="align-items"></a>align-items</h3><p>交叉轴如何对齐，如果flex-direction：row和row-reverse 那么交叉轴就是y轴，如果是column和column-reverse那么交叉轴是x轴</p>
<ul>
<li>flex-start：交叉轴的起点对齐。</li>
<li>flex-end：交叉轴的终点对齐。</li>
<li>center：交叉轴的中点对齐。</li>
<li>baseline: 项目的第一行文字的基线对齐。</li>
<li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。<br>.<br><img src="/2016/07/25/Flex布局/a6.jpg" alt="baseline:以第一个子元素文字的基线对齐"><br>.<br><img src="/2016/07/25/Flex布局/a7.jpg" alt="stretch:子元素不设置高度，那么高度将沾满整个父元素"><h3 id="align-content"><a href="#align-content" class="headerlink" title="align-content"></a>align-content</h3>属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</li>
<li>flex-start：与交叉轴的起点对齐。</li>
<li>flex-end：与交叉轴的终点对齐。</li>
<li>center：与交叉轴的中点对齐。</li>
<li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li>
<li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
<li>stretch（默认值）：轴线占满整个交叉轴。</li>
</ul>
<h2 id="子元素属性"><a href="#子元素属性" class="headerlink" title="子元素属性"></a>子元素属性</h2><p>有六个属性设置在子元素项目上：</p>
<ul>
<li>order</li>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
<li>flex</li>
<li>align-self<h3 id="order"><a href="#order" class="headerlink" title="order"></a>order</h3>子元素排列的位置默认是按照html先后顺序来排列的，html结构谁在前面默认就排列在前面；order的作用就是改变子元素排列顺序<br>order：默认（0） 值越小越靠前，<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><div id=<span class="string">"box"</span>></div><div class="line"> <div class=<span class="string">"inner item"</span>>1</div></div><div class="line"> <div class=<span class="string">"inner"</span>>2</div></div><div class="line"> <div class=<span class="string">"inner"</span>>3</div></div><div class="line"> <div class=<span class="string">"inner"</span>>4</div></div><div class="line"> <div class=<span class="string">"inner"</span>>5</div></div><div class="line"></div></div><div class="line"></div><div class="line">.inner:nth-child(5){</div><div class="line"> order: -1;</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<p><img src="/2016/07/25/Flex布局/a8.jpg" alt=""></p>
<h3 id="flex-grow"><a href="#flex-grow" class="headerlink" title="flex-grow"></a>flex-grow</h3><p>放大比例 默认是0 当有放大空间的时候，值越大，放大的比例越大<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.inner:nth-child(1){</div><div class="line"> flex-grow: 1;</div><div class="line"> }</div></pre></td></tr></table></figure></p>
<p><img src="/2016/07/25/Flex布局/a9.jpg" alt=""></p>
<h3 id="flex-shrink"><a href="#flex-shrink" class="headerlink" title="flex-shrink"></a>flex-shrink</h3><p>缩小比例 默认是1 值越大，缩小的时候比例越小；</p>
<h3 id="flex-basis"><a href="#flex-basis" class="headerlink" title="flex-basis"></a>flex-basis</h3><p>属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。<br>flex-basis：200px ，如果项目有多余的空间，设置为200px。那么会放大到200的宽度；<br><img src="/2016/07/25/Flex布局/a10.jpg" alt=""></p>
<h3 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h3><p> flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>
<h3 id="align-self"><a href="#align-self" class="headerlink" title="align-self"></a>align-self</h3><p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.item {</div><div class="line"> align-self: auto | flex-start | flex-end | center | baseline | stretch;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>除了auto是表示继承父元素，其他的跟align-items是一样的。</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/Flex布局/">Flex布局</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/Flex布局/">Flex布局</a><a href="/tags/弹性布局/">弹性布局</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/06/23/Github访问慢的问题/" title="Github访问慢的问题" itemprop="url">Github访问慢的问题</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-06-23T06:54:12.000Z" itemprop="datePublished"> Published 2016-06-23</time>
</p>
</header>
<div class="article-content">
<p>有时候访问Github会加载很长时间，或者干脆css样式加载不出来，网上看了几篇文章，统一的解释是github的CDN被污染了(毕竟是国外网站，出点问题很正常)</p>
<h3 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h3><p> 有vpn服务的可以直接使用vpn，没有vpn的，可以绕过dns解析，在本地直接绑定host。打开dns查询工具网站<br> <a href="http://tool.chinaz.com/dns " target="_blank" rel="external">http://tool.chinaz.com/dns </a><br> 输入github的官网，会查询出该域名的解析<br> 选取一个TTL值最小的ip，直接绑定到hosts文件便可解决，比如我选择192.30.253.113，TTL值为22</p>
<p> 在hosts文件末尾添加<br> 103.245.222.249 github.global.ssl.fastly.net<br> 103.245.222.133 assets-cdn.github.com</p>
<p> 然后再访问Github,问题解决</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/网络问题/">网络问题</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/网络问题/">网络问题</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/06/02/JS中call()、apply()、bind()的区别/" title="JS中call()、apply()、bind()的区别" itemprop="url">JS中call()、apply()、bind()的区别</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-06-02T02:43:21.000Z" itemprop="datePublished"> Published 2016-06-02</time>
</p>
</header>
<div class="article-content">
<p>call()、apply()作用都是一样的，简单来说就是改变当前使用该方法的对象中的this指向，指向调用方法中的thisObj对象二者的区别（第一个参数是相同的）就是call方法中传入的参数是是一个个列举出来的，而apply方法中的参数二是一个数组<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">window.color=<span class="string">'red'</span>;</div><div class="line">var o={color:<span class="string">"blue"</span>};</div><div class="line"><span class="keyword">function</span> <span class="function"><span class="title">sayColor</span></span>(){</div><div class="line">alert(this.color);</div><div class="line">};</div><div class="line">sayColor(); //red（全局函数，this是window）</div><div class="line">sayColor.call(this);//red(调用call方法，指定对象是this，这里的this是window，没什么意义)</div><div class="line">sayColor.call(window);//red(调用call方法，指定对象是window，没什么意义)</div><div class="line">sayColor.call(o); //blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)</div><div class="line">sayColor.apply(o);//blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)</div></pre></td></tr></table></figure></p>
<p>ECMAScript5中的bind()方法和前二种方法相似，bind()这个方法会创建一个函数的实例，这个实例的this值会被绑定到传递给bind()函数的值</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">function</span> a(y){</div><div class="line"><span class="built_in">return</span> this.x+y;</div><div class="line">};</div><div class="line">var o={x:1};</div><div class="line">var g=a.bind(o);</div><div class="line">g(2);//3</div></pre></td></tr></table></figure>
<p>从例子中可以看出函数a绑定到对象o上了，并且返回了新的函数g，调用g时，a函数会当作对象o的方法来调用<br>bind()这个方法是将函数绑定到某个对象上，并且返回一个新的函数，这个新函数中传入的参数都将传入被绑定的函数上。</p>
<h2 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h2><p>在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。<br>在说区别之前还是先总结一下三者的相似之处：<br>1、都是用来改变函数的this对象的指向的。<br>2、第一个参数都是this要指向的对象。<br>3、都可以利用后续参数传参。<br>那么他们的区别在哪里的，先看一个例子。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">var xw = {</div><div class="line"> name : <span class="string">"小王"</span>,</div><div class="line"> gender : <span class="string">"男"</span>,</div><div class="line"> age : 24,</div><div class="line"> say : <span class="function"><span class="title">function</span></span>() {</div><div class="line"> alert(this.name + <span class="string">" , "</span> + this.gender + <span class="string">" ,今年"</span> + this.age); </div><div class="line"> }</div><div class="line"> }</div><div class="line"> var xh = {</div><div class="line"> name : <span class="string">"小红"</span>,</div><div class="line"> gender : <span class="string">"女"</span>,</div><div class="line"> age : 18</div><div class="line"> }</div><div class="line"> xw.say();</div></pre></td></tr></table></figure></p>
<p>函数执行，显示的肯定是小王 ， 男 ， 今年24。<br>那么如何用xw的say方法来显示xh的数据呢。<br>对于call可以这样：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.call(xh);</div></pre></td></tr></table></figure></p>
<p>对于apply可以这样：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.apply(xh);</div></pre></td></tr></table></figure></p>
<p>对于bind可以这样：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.bind(xh)();</div></pre></td></tr></table></figure></p>
<p>如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。<br>那么call和apply有什么区别呢？我们把例子稍微改写一下。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">var xw = {</div><div class="line"> name : <span class="string">"小王"</span>,</div><div class="line"> gender : <span class="string">"男"</span>,</div><div class="line"> age : 24,</div><div class="line"> say : <span class="keyword">function</span>(school,grade) {</div><div class="line"> alert(this.name + <span class="string">" , "</span> + this.gender + <span class="string">" ,今年"</span> + this.age + <span class="string">" ,在"</span> + school + <span class="string">"上"</span> + grade); </div><div class="line"> }</div><div class="line">}</div><div class="line">var xh = {</div><div class="line"> name : <span class="string">"小红"</span>,</div><div class="line"> gender : <span class="string">"女"</span>,</div><div class="line"> age : 18</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。<br>对于call来说是这样的<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.call(xh,<span class="string">"实验小学"</span>,<span class="string">"六年级"</span>);</div></pre></td></tr></table></figure></p>
<p>对于apply来说是这样的<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.apply(xh,[<span class="string">"实验小学"</span>,<span class="string">"六年级"</span>]);</div></pre></td></tr></table></figure></p>
<p>call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。<br>对于bind,可以像call那样传参<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.bind(xh,<span class="string">"实验小学"</span>,<span class="string">"六年级"</span>)();</div></pre></td></tr></table></figure></p>
<p>但是由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xw.say.bind(xh,<span class="string">"实验小学"</span>,<span class="string">"六年级"</span>)();</div></pre></td></tr></table></figure></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/JS/">JS</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/JS/">JS</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/05/02/初学Bootstrap/" title="初学Bootstrap" itemprop="url">初学Bootstrap</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-05-02T07:20:01.000Z" itemprop="datePublished"> Published 2016-05-02</time>
</p>
</header>
<div class="article-content">
<p>bootstrap 的学习非常简单，并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。</p>
<h2 id="Bootstrap引用"><a href="#Bootstrap引用" class="headerlink" title="Bootstrap引用"></a>Bootstrap引用</h2><p>bootstrap提供了三种类型的下载：</p>
<hr>
<p>用于生产环境的 Bootstrap</p>
<p> 编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。</p>
<p>Bootstrap 源码</p>
<p> Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。</p>
<p>Sass</p>
<p> 这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。</p>
<hr>
<p>其实我们不用下载bootstrap也可以使用它：</p>
<p>Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。<br>下面是base.html<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><!DOCTYPE html></div><div class="line"><html lang=<span class="string">"zh-CN"</span>></div><div class="line"> <head></div><div class="line"> <meta charset=<span class="string">"utf-8"</span>></div><div class="line"> <meta http-equiv=<span class="string">"X-UA-Compatible"</span> content=<span class="string">"IE=edge"</span>></div><div class="line"> <meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width, initial-scale=1"</span>></div><div class="line"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --></div><div class="line"> <title>Bootstrap 101 Template</title></div><div class="line"></div><div class="line"> <!-- Bootstrap --></div><div class="line"> <link rel=<span class="string">"stylesheet"</span> href=<span class="string">"http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"</span>></div><div class="line"> </div><div class="line"> </head></div><div class="line"> <body></div><div class="line"> <h1>你好，bootstrap！</h1></div><div class="line"></div><div class="line"> <!-- jQuery (necessary <span class="keyword">for</span> Bootstrap<span class="string">'s JavaScript plugins) --></span></div><div class="line"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script></div><div class="line"> <!-- Include all compiled plugins (below), or include individual files as needed --></div><div class="line"> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></div><div class="line"> </body></div><div class="line"></html></div></pre></td></tr></table></figure></p>
<p> base.html中已经引入了bootstrap，将其保存，就可以使用bootstrap提供的样式了。</p>
<h2 id="图标字体"><a href="#图标字体" class="headerlink" title="图标字体"></a>图标字体</h2><p>bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><h3>图标</h3> </div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-home"</span>></span></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-signal"</span>></span></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-cog"</span>></span></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-apple"</span>></span></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-trash"</span>></span></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-play-circle"</span>></span></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-headphones"</span>></span></div></pre></td></tr></table></figure></p>
<p><img src="/2016/05/02/初学Bootstrap/图标.jpg" alt="图标"></p>
<h2 id="按钮"><a href="#按钮" class="headerlink" title="按钮"></a>按钮</h2><p><button></button>标签用于创建按钮，bootstrap提供了丰富的按钮样式。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><h3>按钮</h3></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-default"</span>>按钮</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-primary"</span>>primary</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-success"</span>>success</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-info"</span>>info</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-warning"</span>>warning</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-danger"</span>>danger</button></div><div class="line"> </div><div class="line"> <h3>按钮尺寸</h3></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-default"</span>>按钮</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-primary btn-lg"</span>>primary</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-success btn-sm"</span>>success</button></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-info btn-xs"</span>>info</button></div><div class="line"></div><div class="line"> <h3>把图标显示在按钮里</h3></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"btn btn-default"</span>><span class=<span class="string">"glyphicon glyphicon-home"</span>></span>&nbsp;&nbsp;按钮</button></div></pre></td></tr></table></figure></p>
<p>按钮除了有默认的大小外，bootstrap还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。<br><img src="/2016/05/02/初学Bootstrap/按钮.jpg" alt="按钮"></p>
<h2 id="下拉菜单"><a href="#下拉菜单" class="headerlink" title="下拉菜单"></a>下拉菜单</h2><p> 下拉菜单是最常见的交互之一，bootstrap提供了漂亮的样式。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><h3>下拉菜单</h3></div><div class="line"> <div class=<span class="string">"dropdown"</span>></div><div class="line"> <button class=<span class="string">"btn btn-primary dropdown-toggle"</span> <span class="built_in">type</span>=<span class="string">"button"</span> id=<span class="string">"dropdownMenu1"</span> data-toggle=<span class="string">"dropdown"</span> aria-expanded=<span class="string">"true"</span>></div><div class="line"> Dropdown</div><div class="line"> <span class=<span class="string">"caret"</span>></span></div><div class="line"> </button></div><div class="line"> <ul class=<span class="string">"dropdown-menu"</span> role=<span class="string">"menu"</span> aria-labelledby=<span class="string">"dropdownMenu1"</span>></div><div class="line"> <li role=<span class="string">"presentation"</span>><a role=<span class="string">"menuitem"</span> tabindex=<span class="string">"-1"</span> href=<span class="string">"#"</span>>Action</a></li></div><div class="line"> <li role=<span class="string">"presentation"</span>><a role=<span class="string">"menuitem"</span> tabindex=<span class="string">"-1"</span> href=<span class="string">"#"</span>>Another action</a></li></div><div class="line"> <li role=<span class="string">"presentation"</span>><a role=<span class="string">"menuitem"</span> tabindex=<span class="string">"-1"</span> href=<span class="string">"#"</span>>Something <span class="keyword">else</span> here</a></li></div><div class="line"> <li role=<span class="string">"presentation"</span>><a role=<span class="string">"menuitem"</span> tabindex=<span class="string">"-1"</span> href=<span class="string">"#"</span>>Separated link</a></li></div><div class="line"> </ul></div><div class="line"> </div></div></pre></td></tr></table></figure></p>
<h2 id="输入框"><a href="#输入框" class="headerlink" title="输入框"></a>输入框</h2><p>通过<code><input></input></code>标签去创建输入框。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><h3>输入框</h3></div><div class="line"> <div class=<span class="string">"input-group"</span>></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-user"</span>></span></div><div class="line"> <input <span class="built_in">type</span>=<span class="string">"text"</span> placeholder=<span class="string">"username"</span>></div><div class="line"> </div></div><div class="line"></div><div class="line"> <div class=<span class="string">"input-group"</span>></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-lock"</span>></span></div><div class="line"> <input <span class="built_in">type</span>=<span class="string">"password"</span> placeholder=<span class="string">"password"</span>></div><div class="line"> </div></div></pre></td></tr></table></figure></p>
<p><img src="/2016/05/02/初学Bootstrap/输入框.jpg" alt="输入框"></p>
<h2 id="导航栏"><a href="#导航栏" class="headerlink" title="导航栏"></a>导航栏</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><h3>导航栏</h3></div><div class="line"> <nav class=<span class="string">"navbar navbar-inverse navbar-fixed-top"</span>></div><div class="line"> <div id=<span class="string">"navbar"</span> class=<span class="string">"navbar-collapse collapse"</span>></div><div class="line"> <ul class=<span class="string">"nav navbar-nav"</span>></div><div class="line"> <li class=<span class="string">"active"</span>><a href=<span class="string">"#"</span>>Home</a></li></div><div class="line"> <li><a href=<span class="string">"#about"</span>>About</a></li></div><div class="line"> <li><a href=<span class="string">"#contact"</span>>Contact</a></li></div><div class="line"> <li class=<span class="string">"dropdown"</span>></div><div class="line"> <a href=<span class="string">"#"</span> class=<span class="string">"dropdown-toggle"</span> data-toggle=<span class="string">"dropdown"</span> role=<span class="string">"button"</span> aria-expanded=<span class="string">"false"</span>>Dropdown <span class=<span class="string">"caret"</span>></span></a></div><div class="line"> <ul class=<span class="string">"dropdown-menu"</span> role=<span class="string">"menu"</span>></div><div class="line"> <li><a href=<span class="string">"#"</span>>Action</a></li></div><div class="line"> <li><a href=<span class="string">"#"</span>>Another action</a></li></div><div class="line"> <li class=<span class="string">"divider"</span>></li></div><div class="line"> <li class=<span class="string">"dropdown-header"</span>>Nav header</li></div><div class="line"> <li><a href=<span class="string">"#"</span>>Separated link</a></li></div><div class="line"> </ul></div><div class="line"> </li></div><div class="line"> </ul></div><div class="line"> </div><!--/.nav-collapse --></div><div class="line"> </div></div><div class="line"> </nav></div></pre></td></tr></table></figure>
<p><img src="/2016/05/02/初学Bootstrap/导航.jpg" alt="导航栏"></p>
<h2 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><h3>表单</h3></div><div class="line"> <form></div><div class="line"> <div class=<span class="string">"form-group"</span>></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-user"</span>></span></div><div class="line"> <input <span class="built_in">type</span>=<span class="string">"email"</span> id=<span class="string">"exampleInputEmail1"</span> placeholder=<span class="string">"Enter email"</span>></div><div class="line"> </div></div><div class="line"> <div class=<span class="string">"form-group"</span>></div><div class="line"> <span class=<span class="string">"glyphicon glyphicon-lock"</span>></span></div><div class="line"> <input <span class="built_in">type</span>=<span class="string">"password"</span> id=<span class="string">"exampleInputPassword1"</span> placeholder=<span class="string">"Password"</span>></div><div class="line"> </div></div><div class="line"> <div class=<span class="string">"form-group"</span>></div><div class="line"> <label <span class="keyword">for</span>=<span class="string">"exampleInputFile"</span>>File input</label></div><div class="line"> <input <span class="built_in">type</span>=<span class="string">"file"</span> id=<span class="string">"exampleInputFile"</span>></div><div class="line"> <p class=<span class="string">"help-block"</span>>Example block-level <span class="built_in">help</span> text here.</p></div><div class="line"> </div></div><div class="line"> <div class=<span class="string">"checkbox"</span>></div><div class="line"> <label></div><div class="line"> <input <span class="built_in">type</span>=<span class="string">"checkbox"</span>> Check me out</div><div class="line"> </label></div><div class="line"> </div></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"submit"</span> class=<span class="string">"btn btn-default"</span>>Submit</button></div><div class="line"> </form></div></pre></td></tr></table></figure>
<h2 id="警告框"><a href="#警告框" class="headerlink" title="警告框"></a>警告框</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><h3>警告框</h3></div><div class="line"> <div class=<span class="string">"alert alert-warning alert-dismissible"</span> role=<span class="string">"alert"</span>></div><div class="line"> <button <span class="built_in">type</span>=<span class="string">"button"</span> class=<span class="string">"close"</span> data-dismiss=<span class="string">"alert"</span> aria-label=<span class="string">"Close"</span>><span aria-hidden=<span class="string">"true"</span>>&<span class="built_in">times</span>;</span></button></div><div class="line"> <strong>Warning!</strong> Better check yourself, you<span class="string">'re not looking too good.</span></div><div class="line"> </div></div><div class="line"> <div class="alert alert-success" role="alert"></div><div class="line"> <a href="#" class="alert-link">success!</a></div><div class="line"> </div></div><div class="line"> <div class="alert alert-info" role="alert"></div><div class="line"> <a href="#" class="alert-link">info!</a></div><div class="line"> </div></div><div class="line"> <div class="alert alert-warning" role="alert"></div><div class="line"> <a href="#" class="alert-link">warning!</a></div><div class="line"> </div></div><div class="line"> <div class="alert alert-danger" role="alert"></div><div class="line"> <a href="#" class="alert-link">danger!</a></div><div class="line"> </div></div></pre></td></tr></table></figure>
<p><img src="/2016/05/02/初学Bootstrap/警告框.jpg" alt="警告框"></p>
<h2 id="进度条"><a href="#进度条" class="headerlink" title="进度条"></a>进度条</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><h3>进度条</h3></div><div class="line"> <div class=<span class="string">"progress"</span>></div><div class="line"> <div class=<span class="string">"progress-bar"</span> role=<span class="string">"progressbar"</span> aria-valuenow=<span class="string">"70"</span> aria-valuemin=<span class="string">"0"</span> aria-valuemax=<span class="string">"100"</span> style=<span class="string">"width: 60%;"</span>></div><div class="line"> 70%</div><div class="line"> </div></div><div class="line"> </div></div></pre></td></tr></table></figure>
<p><img src="/2016/05/02/初学Bootstrap/进度条.jpg" alt="进度条"></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/Bootstrap/">Bootstrap</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/Bootstrap/">Bootstrap</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2016/04/02/利用border属性绘制简单图形/" title="利用border属性绘制简单图形" itemprop="url">利用border属性绘制简单图形</a>
</h1>
<p class="article-author">By
<a href="/about" title="朱天宇" target="_blank" itemprop="author">朱天宇</a>
<p class="article-time">
<time datetime="2016-04-02T13:33:21.000Z" itemprop="datePublished"> Published 2016-04-02</time>
</p>
</header>
<div class="article-content">
<p>平时在写网页时，border属性一般都会用来给盒子添加边框;<br>但是通过对border做一些小小的控制，就可以实现简单的图形绘制<br>效果如下图：<br><img src="data:image/jpg;base64,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" alt=""></p>
<p>代码：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line"><!DOCTYPE html></div><div class="line"><html></div><div class="line"><head></div><div class="line"><meta charset=<span class="string">"utf-8"</span>></div><div class="line"><title>triangle</title></div><div class="line"><style <span class="built_in">type</span>=<span class="string">"text/css"</span>></div><div class="line"> .shape {</div><div class="line"> <span class="built_in">float</span>: left;</div><div class="line"> margin-left: 50px;</div><div class="line"> width:0;</div><div class="line"> height:0;</div><div class="line"> border-width: 30px;</div><div class="line"> border-style:solid;</div><div class="line"> border-color: transparent transparent transparent transparent ;</div><div class="line"> }</div><div class="line"> /*三角形*/</div><div class="line"> .triangle {</div><div class="line"> border-bottom: 30px solid skyblue;</div><div class="line"> }</div><div class="line"> /*标签*/</div><div class="line"> .mark {</div><div class="line"> border-left: 30px solid skyblue;</div><div class="line"> border-top: 30px solid skyblue;</div><div class="line"> border-right: 30px solid skyblue;</div><div class="line"> }</div><div class="line"> /*直角三角形*/</div><div class="line"> .right-triangle {</div><div class="line"> border-left: 30px solid skyblue;</div><div class="line"> border-bottom: 30px solid skyblue;</div><div class="line"> }</div><div class="line"></style></div><div class="line"></head></div><div class="line"><body></div><div class="line"> <div class=<span class="string">"shape triangle"</span>></div></div><div class="line"> <div class=<span class="string">"shape mark"</span>></div></div><div class="line"> <div class=<span class="string">"shape right-triangle"</span>></div></div><div class="line"></body></div><div class="line"></html></div></pre></td></tr></table></figure></p>
<p>其实原理很简单：<br>把盒子宽高都设置为0，那么给该盒子添加一定宽度的边框，那么每条边都会像三角形一样，这时在把不需要的边设置为透明，就会有所需要的效果。<br><img src="data:image/jpg;base64,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" alt=""></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-categories">
<span></span>
<a class="article-category-link" href="/categories/CSS/">CSS</a>
</div>
<div class="article-tags">
<span></span> <a href="/tags/CSS/">CSS</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<nav id="page-nav" class="clearfix">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">Next<span></span></a>
</nav>
</div>
<div class="openaside"><a class="navbutton" href="#" title="Show Sidebar"></a></div>
<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="Hide Sidebar"></a></div>
<aside class="clearfix">
<div class="categorieslist">
<p class="asidetitle">Categories</p>
<ul>
<li><a href="/categories/Bootstrap/" title="Bootstrap">Bootstrap<sup>1</sup></a></li>
<li><a href="/categories/CSS/" title="CSS">CSS<sup>2</sup></a></li>
<li><a href="/categories/Flex布局/" title="Flex布局">Flex布局<sup>1</sup></a></li>
<li><a href="/categories/HTML/" title="HTML">HTML<sup>1</sup></a></li>
<li><a href="/categories/JS/" title="JS">JS<sup>4</sup></a></li>
<li><a href="/categories/Node-js/" title="Node.js">Node.js<sup>1</sup></a></li>
<li><a href="/categories/hexo/" title="hexo">hexo<sup>1</sup></a></li>
<li><a href="/categories/网络问题/" title="网络问题">网络问题<sup>1</sup></a></li>
</ul>
</div>
<div class="tagslist">
<p class="asidetitle">Tags</p>