-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1265 lines (543 loc) · 71.9 KB
/
index.html
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 class="theme-next pisces use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Hexo, NexT" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />
<meta property="og:type" content="website">
<meta property="og:title" content="GostHand's Blog">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="GostHand's Blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="GostHand's Blog">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Pisces',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
fancybox: true,
motion: true,
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title> GostHand's Blog </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">GostHand's Blog</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">Adversity is a good discipline</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/04/11/JS中计时器的原理/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Gost Hand">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="GostHand's Blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/04/11/JS中计时器的原理/" itemprop="url">
JS中计时器的原理
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-04-11T18:59:16+08:00">
2017-04-11
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="JS中的定时器"><a href="#JS中的定时器" class="headerlink" title="JS中的定时器"></a>JS中的定时器</h2><p>我们都知道JS中定时器分为两种定时器,这两种定时器都是属于BOM下的Window对象的方法。下面我们就来聊聊JS中的两种定时器,</p>
<h3 id="延时定时器"><a href="#延时定时器" class="headerlink" title="延时定时器"></a>延时定时器</h3><p>首先，我们来聊聊延时定时器，延时定时器，顾名思义就是延迟一段时间后会触发的定时器.它相当于一个定时炸弹,经过一段时间过后会触发的一个定时器,当触发完成后定时器就会自动销毁，所以说延时定时器只会触发一次。相当于一个定时炸弹，爆炸过后就没了。 </p>
<ul>
<li><p>其语法格式如下： </p>
<figure class="highlight js"><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"><span class="comment">//语法格式</span></div><div class="line"><span class="keyword">var</span> timerId=setTimeOut(callback, time, lang);</div><div class="line"><span class="comment">//参数详解:</span></div><div class="line"> <span class="comment">//callback:必选参数，回调函数，时间到了就会执行的函数代码语句.</span></div><div class="line"> <span class="comment">//time:必选参数,延时的时间,定义我们需要让其延时的时间(毫秒值).</span></div><div class="line"> <span class="comment">//lang:可选参数,定义脚本语言的类型，可以是：JScript | VBScript | JavaScript（这里不做过多介绍）</span></div><div class="line"></div><div class="line"><span class="comment">//其返回值是一个id，就是这个定时器的id值,这个id值用于标识我们创建的定时器.</span></div></pre></td></tr></table></figure>
</li>
<li><p>清除延时定时器<br>某些时候，我们设置了延时定时器，当处于特定的条件下的时候，我们又不想让其触发,就像我们埋下炸弹，我们要给自己留条能拆除炸弹的后路一样，我们设置了，延时定时器，也要有种方法能够清除这个延时定时器</p>
<figure class="highlight js"><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="comment">//语法结构：</span></div><div class="line">clearTimeOut(timerId);</div><div class="line"><span class="comment">//参数详解</span></div><div class="line"> <span class="comment">//timerId：必选参数,表示定义的延时定时器的id值.比如说这样就清除了上面我们定义的那个延时定时器.</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="间歇定时器"><a href="#间歇定时器" class="headerlink" title="间歇定时器"></a>间歇定时器</h3><p>间歇定时器，就是当我们给其设定时间和一个回调函数后，它会每隔设定的时间去执行一次我们所设定的回调函数.只要我们不手动清除，它就会一直执行下去。直至浏览器窗口的关闭.</p>
<ul>
<li><p>其语法格式如下： </p>
<figure class="highlight js"><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="comment">//语法格式：</span></div><div class="line"><span class="keyword">var</span> intervalID = setInterval(func, delay, lang);</div><div class="line"><span class="comment">//参数详解:</span></div><div class="line"> <span class="comment">//func：必选参数,重复执行的函数,</span></div><div class="line"> <span class="comment">//delay：必选参数每次延迟的毫秒数</span></div><div class="line"> <span class="comment">//lang：可选参数,定义脚本语言的类型，可以是：JScript | VBScript | JavaScript（这里不做过多介绍）</span></div><div class="line"><span class="comment">//其返回值是一个id，就是这个定时器的id值,这个id值用于标识我们创建的定时器.一般用于清除此定时器.</span></div></pre></td></tr></table></figure>
</li>
<li><p>清除间歇定时器<br>间歇定时器，如果我们不手动清除它，它就会一直循环执行下去，产生死循环，所以，我们一般情况下，在设置一个间歇定时器的时候，都会给其设定一个清除这个间歇定时器的条件.下面我们看看如何清除间歇定时器.</p>
<figure class="highlight js"><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="comment">//语法格式：</span></div><div class="line">clearInterval(intervalID);</div><div class="line"><span class="comment">//参数详解</span></div><div class="line"> <span class="comment">//intervalID：必选参数,表示标识定义的间歇定时器的id值.比如说这样就清除了上面我们定义的那个间歇定时器.</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="关于任务队列与浏览器线程"><a href="#关于任务队列与浏览器线程" class="headerlink" title="关于任务队列与浏览器线程"></a>关于任务队列与浏览器线程</h2><p>上面，我们说到了JS中的两种计时器,那么，在js中计时器的原理是什么样的呢?要弄清除这个问题，我们首先要搞清楚两个概念:任务队列和浏览器线程.</p>
<h3 id="浏览器线程"><a href="#浏览器线程" class="headerlink" title="浏览器线程"></a>浏览器线程</h3><p>我们都知道，js是单线程的，那么什么是线程呢?线程就是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元。(也就是说，在同一个线程中程序执行流是一步一步的往下执行的,执行完上一步才会去执行下一步)。<br>其实，浏览器是有很多线程的，它有五大常驻线程:</p>
<ol>
<li>js引擎线程(也就是我们浏览器解析js代码的线程)</li>
<li>GUI渲染页面的线程</li>
<li>浏览器事件线程</li>
<li>浏览器定时器触发线程</li>
<li>浏览器http请求线程</li>
</ol>
<p>这五大常驻线程，各司其职。每当JS引擎线程遇到对应的任务时，它就会将任务转交给对应得线程去处理，然后接收对应线程的处理结果.不过这里要注意的是JS引擎线程和GUI渲染线程是互斥的，也就是说在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,相当于被”冻结”了.具体示意图如下图所示:<br><img src="/2017/04/11/JS中计时器的原理/1.jpg" alt="浏览器线程示意图"><br> 从这张图我们可以知道JS引擎线程首先执行回调函数块，然后是执行点击事件回调，接着是执行定时器的线程，最后在执行其他的线程。</p>
<h3 id="任务队列"><a href="#任务队列" class="headerlink" title="任务队列"></a>任务队列</h3><p>上面，我们说到，js是单线程的，所以说在js中，所有的任务都是要去排队执行的。前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。我们都知道CPU的处理效率是非常之高的，所以说很多时候，CPU的大部分区域都是出于闲置状态。如果我们要js对我们写的js文件中的代码去一行一行的解析，那会大大的浪费资源的，而且很大程度上影响了页面的加载速度.所以，我们js的设计者意识到这一点.我们可以挂起在等待中的任务。先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。 </p>
<p>所以说，js中任务是分为两种形式的一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。</p>
<p>因为这个设定JS形成了如下的执行模式:<br><img src="/2017/04/11/JS中计时器的原理/2.jpg" alt="js执行模式"></p>
<h2 id="JS中计时器的原理"><a href="#JS中计时器的原理" class="headerlink" title="JS中计时器的原理"></a>JS中计时器的原理</h2><p>上面，我们说到了任务列队和浏览器线程。下面，我们来谈谈JS中的计时器是如何工作的. </p>
<p>举个例子来说:<br><figure class="highlight js"><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">setTimeout(<span class="string">"alert('定时器!')"</span>,<span class="number">0</span>);</div><div class="line">alert(<span class="string">"测试"</span>);</div></pre></td></tr></table></figure></p>
<p>首先JS线程读取到setTimeout定时器，这个时候就会将任务转交给定时器的线程，然后跳过定时器继续执行，这个时候你就看到了弹出框的内容为测试，然后因为定时器的时间为0，所以一执行定时器线程就会即可将弹出框为定时器字样的任务添加到主线程（JS引擎线程）的队列之后，等待JS引擎的调用，这个时候我们看到的结果是先弹出测试，然后再弹出定时器。</p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/04/10/关于继承/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Gost Hand">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="GostHand's Blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/04/10/关于继承/" itemprop="url">
关于继承
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-04-10T20:03:02+08:00">
2017-04-10
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="关于继承"><a href="#关于继承" class="headerlink" title="关于继承"></a>关于继承</h3><p>现在，我们来说说js中的继承,js中实现继承的方式有很多种.下面我们一一介绍。</p>
<h4 id="简单原型链"><a href="#简单原型链" class="headerlink" title="简单原型链"></a>简单原型链</h4><p>这应该可以说是在js中实现继承的最简单的方式了，其根本原理就是运用通过构造函数实例化的对象都可以直接引用其原型中的成员。因此我们有以下代码：<br><figure class="highlight js"><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="function"><span class="keyword">function</span> <span class="title">Super</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">this</span>.val = <span class="number">1</span>;</div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>];</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Sub</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line">Sub.prototype = <span class="keyword">new</span> Super(); <span class="comment">//////////核心</span></div><div class="line"> </div><div class="line"><span class="keyword">var</span> sub1 = <span class="keyword">new</span> Sub();</div><div class="line"><span class="keyword">var</span> sub2 = <span class="keyword">new</span> Sub();</div><div class="line">sub1.val = <span class="number">2</span>;</div><div class="line">sub1.arr.push(<span class="number">2</span>);</div><div class="line">alert(sub1.val); <span class="comment">// 2</span></div><div class="line">alert(sub2.val); <span class="comment">// 1</span></div><div class="line"> </div><div class="line">alert(sub1.arr); <span class="comment">// 1, 2</span></div><div class="line">alert(sub2.arr); <span class="comment">// 1, 2</span></div></pre></td></tr></table></figure></p>
<p>可以看到，我们将空的构造函数的原型指向由Super创建的一个实例。这样，我们通过Sub创建的所有对象就能直接访问Sub的原型中的内容了。而我们Sub构造函数本身却没有定义相应的成员。 </p>
<p>这种方法比较简洁，当然，也有其不足之处 </p>
<p>修改sub1.arr后sub2.arr也变了，因为来自原型对象的引用属性是所有实例共享的。<br>可以这样理解：执行sub1.arr.push(2);先对sub1进行属性查找，找遍了实例属性（在本例中没有实例属性），没找到，就开始顺着原型链向上找，拿到了sub1的原型对象，一搜身，发现有arr属性。于是给arr末尾插入了2，所以sub2.arr也变了<br>创建子类实例时，无法向父类构造函数传参<br>这样写Sub只能继承自一个“父类”（当然可以利用对象的动态特性来写，使Sub可以继承自多个“父类”） </p>
<p>#### 借用构造函数<br>为了解决简单原型链引发的前两个致命缺点，在上世纪末，人们试着采用一种新的方式来实现js中的继承。于是出现了一种借用构造函数的方式：</p>
<ol>
<li><p>具体实现</p>
<figure class="highlight js"><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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Super</span>(<span class="params">val</span>)</span>{</div><div class="line"> <span class="keyword">this</span>.val = val;</div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>];</div><div class="line"> </div><div class="line"> <span class="keyword">this</span>.fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Sub</span>(<span class="params">val</span>)</span>{</div><div class="line"> Super.call(<span class="keyword">this</span>, val); <span class="comment">// 核心</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"> </div><div class="line"><span class="keyword">var</span> sub1 = <span class="keyword">new</span> Sub(<span class="number">1</span>);</div><div class="line"><span class="keyword">var</span> sub2 = <span class="keyword">new</span> Sub(<span class="number">2</span>);</div><div class="line">sub1.arr.push(<span class="number">2</span>);</div><div class="line">alert(sub1.val); <span class="comment">// 1</span></div><div class="line">alert(sub2.val); <span class="comment">// 2</span></div><div class="line"> </div><div class="line">alert(sub1.arr); <span class="comment">// 1, 2</span></div><div class="line">alert(sub2.arr); <span class="comment">// 1</span></div><div class="line"> </div><div class="line">alert(sub1.fun === sub2.fun); <span class="comment">// false</span></div></pre></td></tr></table></figure>
</li>
<li><p>核心<br>借父类的构造函数来增强子类实例，等于是把父类的实例属性复制了一份给子类实例装上了（完全没有用到原型）</p>
</li>
<li>优缺点</li>
</ol>
<ul>
<li>优点： *<br>解决了子类实例共享父类引用属性的问题<br>创建子类实例时，可以向父类构造函数传参</li>
<li>缺点： *<br>无法实现函数复用，每个子类实例都持有一个新的fun函数，太多了就会影响性能，内存爆炸。。<h4 id="组合继承（最常用）"><a href="#组合继承（最常用）" class="headerlink" title="组合继承（最常用）"></a>组合继承（最常用）</h4>目前我们的借用构造函数方式还是有问题（无法实现函数复用），没关系，接着修复，jsers吭哧吭哧又搞出了组合继承</li>
</ul>
<ol>
<li><p>具体实现</p>
<figure class="highlight js"><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="function"><span class="keyword">function</span> <span class="title">Super</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="comment">// 只在此处声明基本属性和引用属性</span></div><div class="line"> <span class="keyword">this</span>.val = <span class="number">1</span>;</div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>];</div><div class="line">}</div><div class="line"><span class="comment">// 在此处声明函数</span></div><div class="line">Super.prototype.fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line">Super.prototype.fun2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line"><span class="comment">//Super.prototype.fun3...</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Sub</span>(<span class="params"></span>)</span>{</div><div class="line"> Super.call(<span class="keyword">this</span>); <span class="comment">// 核心</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line">Sub.prototype = <span class="keyword">new</span> Super(); <span class="comment">// 核心</span></div><div class="line"> </div><div class="line"><span class="keyword">var</span> sub1 = <span class="keyword">new</span> Sub(<span class="number">1</span>);</div><div class="line"><span class="keyword">var</span> sub2 = <span class="keyword">new</span> Sub(<span class="number">2</span>);</div><div class="line">alert(sub1.fun === sub2.fun); <span class="comment">// true</span></div></pre></td></tr></table></figure>
</li>
<li><p>核心<br>把实例函数都放在原型对象上，以实现函数复用。同时还要保留借用构造函数方式的优点，通过Super.call(this);继承父类的基本属性和引用属性并保留能传参的优点；通过Sub.prototype = new Super();继承父类函数，实现函数复用</p>
</li>
<li>优缺点</li>
</ol>
<ul>
<li>优点： *<br>不存在引用属性共享问题<br>可传参<br>函数可复用</li>
<li>缺点： *<br>（一点小瑕疵）子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的。。。又是内存浪费，比刚才情况好点，不过确实是瑕疵<h4 id="寄生组合继承（最佳方式）"><a href="#寄生组合继承（最佳方式）" class="headerlink" title="寄生组合继承（最佳方式）"></a>寄生组合继承（最佳方式）</h4>从名字就能看出又是对组合继承的优化，不是说组合继承有瑕疵吗，没关系，我们接着追求完美</li>
</ul>
<ol>
<li><p>具体实现</p>
<figure class="highlight js"><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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">beget</span>(<span class="params">obj</span>)</span>{ <span class="comment">// 生孩子函数 beget：龙beget龙，凤beget凤。</span></div><div class="line"> <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line"> F.prototype = obj;</div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> F();</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Super</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="comment">// 只在此处声明基本属性和引用属性</span></div><div class="line"> <span class="keyword">this</span>.val = <span class="number">1</span>;</div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>];</div><div class="line">}</div><div class="line"><span class="comment">// 在此处声明函数</span></div><div class="line">Super.prototype.fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line">Super.prototype.fun2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line"><span class="comment">//Super.prototype.fun3...</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Sub</span>(<span class="params"></span>)</span>{</div><div class="line"> Super.call(<span class="keyword">this</span>); <span class="comment">// 核心</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="keyword">var</span> proto = beget(Super.prototype); <span class="comment">// 核心</span></div><div class="line">proto.constructor = Sub; <span class="comment">// 核心</span></div><div class="line">Sub.prototype = proto; <span class="comment">// 核心</span></div><div class="line"> </div><div class="line"><span class="keyword">var</span> sub = <span class="keyword">new</span> Sub();</div><div class="line">alert(sub.val);</div><div class="line">alert(sub.arr);</div></pre></td></tr></table></figure>
</li>
<li><p>核心<br>用beget(Super.prototype);切掉了原型对象上多余的那份父类实例属性</p>
</li>
<li>优缺点</li>
</ol>
<ul>
<li>优点： *<br>完美了</li>
<li>缺点： *<br>理论上没有了（如果用起来麻烦不算缺点的话。。）<br>P.S.用起来麻烦是一方面，另一方面是因为寄生组合式继承出现的比较晚，是21世纪初的东西，大家等不起这么久，所以组合继承是最常用的，而这个理论上完美的方案却只是课本上的最佳方式了<h4 id="原型式"><a href="#原型式" class="headerlink" title="原型式"></a>原型式</h4>其实介绍完上面的完美方案就可以结束了，但从组合继承到完美方案好像有一段不小的思维跳跃，有必要把故事说清楚</li>
</ul>
<ol>
<li>具体实现</li>
</ol>
<figure class="highlight js"><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"><span class="function"><span class="keyword">function</span> <span class="title">beget</span>(<span class="params">obj</span>)</span>{ <span class="comment">// 生孩子函数 beget：龙beget龙，凤beget凤。</span></div><div class="line"> <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line"> F.prototype = obj;</div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> F();</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Super</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">this</span>.val = <span class="number">1</span>;</div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>];</div><div class="line">}</div><div class="line"> </div><div class="line"><span class="comment">// 拿到父类对象</span></div><div class="line"><span class="keyword">var</span> sup = <span class="keyword">new</span> Super();</div><div class="line"><span class="comment">// 生孩子</span></div><div class="line"><span class="keyword">var</span> sub = beget(sup); <span class="comment">// 核心</span></div><div class="line"><span class="comment">// 增强</span></div><div class="line">sub.attr1 = <span class="number">1</span>;</div><div class="line">sub.attr2 = <span class="number">2</span>;</div><div class="line"><span class="comment">//sub.attr3...</span></div><div class="line"> </div><div class="line">alert(sub.val); <span class="comment">// 1</span></div><div class="line">alert(sub.arr); <span class="comment">// 1</span></div><div class="line">alert(sub.attr1); <span class="comment">// 1</span></div></pre></td></tr></table></figure>
<ol>
<li>核心<br>用生孩子函数得到得到一个“纯洁”的新对象（“纯洁”是因为没有实例属性），再逐步增强之（填充实例属性）</li>
<li>优缺点</li>
</ol>
<ul>
<li>优点： *<br>从已有对象衍生新对象，不需要创建自定义类型（更像是对象复制，而不是继承。。）</li>
<li>缺点： *<br>原型引用属性会被所有实例共享，因为是用整个父类对象来充当了子类原型对象，所以这个缺陷无可避免<br>无法实现代码复用（新对象是现取的，属性是现添的，都没用函数封装，怎么复用）<h4 id="寄生式"><a href="#寄生式" class="headerlink" title="寄生式"></a>寄生式</h4>这名字太扯了，而且寄生式是一种模式（套路），并不是只能用来实现继承</li>
</ul>
<ol>
<li>具体实现</li>
</ol>
<figure class="highlight js"><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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">beget</span>(<span class="params">obj</span>)</span>{ <span class="comment">// 生孩子函数 beget：龙beget龙，凤beget凤。</span></div><div class="line"> <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</div><div class="line"> F.prototype = obj;</div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> F();</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Super</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">this</span>.val = <span class="number">1</span>;</div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>];</div><div class="line">}</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSubObject</span>(<span class="params">obj</span>)</span>{</div><div class="line"> <span class="comment">// 创建新对象</span></div><div class="line"> <span class="keyword">var</span> clone = beget(obj); <span class="comment">// 核心</span></div><div class="line"> <span class="comment">// 增强</span></div><div class="line"> clone.attr1 = <span class="number">1</span>;</div><div class="line"> clone.attr2 = <span class="number">2</span>;</div><div class="line"> <span class="comment">//clone.attr3...</span></div><div class="line"> </div><div class="line"> <span class="keyword">return</span> clone;</div><div class="line">}</div><div class="line"> </div><div class="line"><span class="keyword">var</span> sub = getSubObject(<span class="keyword">new</span> Super());</div><div class="line">alert(sub.val); <span class="comment">// 1</span></div><div class="line">alert(sub.arr); <span class="comment">// 1</span></div><div class="line">alert(sub.attr1); <span class="comment">// 1</span></div></pre></td></tr></table></figure>
<ol>
<li>核心<br>给原型式继承穿了个马甲而已，看起来更像继承了（上面介绍的原型式继承更像是对象复制）<br>注意：beget函数并不是必须的，换言之，创建新对象 -> 增强 -> 返回该对象，这样的过程叫寄生式继承，新对象是如何创建的并不重要（用beget生的，new出来的，字面量现做的。。都可以）</li>
<li>缺点</li>
</ol>
<ul>
<li>优点： *<br>还是不需要创建自定义类型</li>
<li>缺点： *<br>无法实现函数复用（没用到原型，当然不行）</li>
</ul>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/04/10/面向对象和类的区别/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Gost Hand">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="GostHand's Blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/04/10/面向对象和类的区别/" itemprop="url">
面向对象和类的区别
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-04-10T17:36:52+08:00">
2017-04-10
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="面向对象和类的区别"><a href="#面向对象和类的区别" class="headerlink" title="面向对象和类的区别"></a>面向对象和类的区别</h1><p>现如今，比较流行的一种编程思想就是面向对象编程（Object Oriented Programming, OOP, 面向对象程序设计）。</p>
<h2 id="什么是面向对象"><a href="#什么是面向对象" class="headerlink" title="什么是面向对象"></a>什么是面向对象</h2><p>面向对象编程思想，跟面向过程程序设计有很显然的区别.在面向过程的程序设计中，我们将重心放在解决问题的步骤上，即，我们想要解决一个问题，必须，一步一步的去将其完成。然而，面向对象的程序设计不是这样，应该说它是面向过程的封装，我们只要关心解决这个问题需要用到哪些对象即可，而不需要去关心这个问题是如何一步一步解决的。所以，面向对象在很大程度上减少了我们程序员的工作量。因此，很对面向对象的语言也是发展的有声有色。比如：java、C#、c++以及我们的JS等。 </p>
<ul>
<li>面向对象的三大基本特征 * </li>
</ul>
<ol>
<li>封装:把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口。</li>
<li>继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。</li>
<li>多态：接口的多种不同的实现方式即为多态。同一操作作用于不同的对象，产生不同的执行结果。在运行时，通过指向基类的指针或引用来调用派生类中的虚函数来实现多态。 </li>
</ol>
<p>当然，可能这比较难理解，没关系，我们来看看这三大特性的作用：<br>封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的类。它们的目的都是为了—代码重用。而多态则是为了实现另一个目的—接口重用。这里要注明的是在我们的母语js中是没有多态这个概念的。<br>现在，我们举例来说明什么是面向对象：<br><figure class="highlight plain"><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><div class="line">面向过程的程序设计方式：</div><div class="line">1、确定长方形周长和面积的算法。</div><div class="line">2、编写两个方法（函数）分别计算长方形的周长和面积。</div><div class="line">3、求周长的方法（函数）和求面积的方法（函数）需要两个参数，分别是长方形的长和宽。</div><div class="line"></div><div class="line">面向对象的程序设计方式：</div><div class="line">1、一个长方形可以看成一个长方形对象。</div><div class="line">2、一个长方形对象有两个状态（长和宽）和两个行为（求周长和求面积）。</div><div class="line">3、将所有长方形的共性抽取出来，设计一个长方形类。</div><div class="line">4、通过长方形对象的行为，就可以求出某个具体的长方形对象的周长和面积。</div></pre></td></tr></table></figure></p>
<h2 id="什么是类"><a href="#什么是类" class="headerlink" title="什么是类"></a>什么是类</h2><p>上面，我们很多地方都说到类这个名词，那么什么是类呢？简单来说，类就是一系列具有相同特性的对象的集合。，他是我们在程序设计时定义对象的基础模板.类的实例就是对象。在我们js中，是没有类这个概念的，或者说，在js中，类就相当于构造函数。<br>类的实质是一种用户自定义数据类型。在其他面向对象中类的定义是这样的:<br><figure class="highlight java"><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="class"><span class="keyword">class</span>类名</span></div><div class="line">{</div><div class="line"><span class="keyword">public</span>:</div><div class="line">公有成员,任何情况下均可访问</div><div class="line"><span class="keyword">private</span>:</div><div class="line">私有成员,只能在类的内部访问它，其子类也不能够访问。</div><div class="line"> </div><div class="line"><span class="keyword">protected</span>:</div><div class="line">保护成员,只能在类的内部以及其子类的内部访问它，在类外不能访问。</div><div class="line">};</div></pre></td></tr></table></figure></p>
<p>在js中，类的另一种体现(构造函数)是这样定义的:<br><figure class="highlight js"><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"><span class="function"><span class="keyword">function</span> <span class="title">Fun</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="comment">// 私有属性</span></div><div class="line"> <span class="keyword">var</span> val = <span class="number">1</span>; <span class="comment">// 私有基本属性</span></div><div class="line"> <span class="keyword">var</span> arr = [<span class="number">1</span>]; <span class="comment">// 私有引用属性</span></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>)</span>{} <span class="comment">// 私有函数（引用属性）</span></div><div class="line"> </div><div class="line"> <span class="comment">// 实例属性</span></div><div class="line"> <span class="keyword">this</span>.val = <span class="number">1</span>; <span class="comment">// 实例基本属性</span></div><div class="line"> <span class="keyword">this</span>.arr = [<span class="number">1</span>]; <span class="comment">// 实例引用属性</span></div><div class="line"> <span class="keyword">this</span>.fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}; <span class="comment">// 实例函数（引用属性）</span></div><div class="line">}</div><div class="line"> </div><div class="line"><span class="comment">// 原型属性</span></div><div class="line">Fun.prototype.val = <span class="number">1</span>; <span class="comment">// 原型基本属性</span></div><div class="line">Fun.prototype.arr = [<span class="number">1</span>]; <span class="comment">// 原型引用属性</span></div><div class="line">Fun.prototype.fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}; <span class="comment">// 原型函数（引用属性）</span></div></pre></td></tr></table></figure></p>
<p>可以看到，其实类的实质是给它的实例对象一些共同的属性与方法，通过它实例化的对象与方法就能够使用其中的属性与方法.这就是我们类的概念. </p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/04/10/JS中表单数据的传输问题/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Gost Hand">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="GostHand's Blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/04/10/JS中表单数据的传输问题/" itemprop="url">
关于表单数据的传输问题
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-04-10T13:58:44+08:00">
2017-04-10
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="表单数据的提交"><a href="#表单数据的提交" class="headerlink" title="表单数据的提交"></a>表单数据的提交</h1><p>我们都知道我们客户端要实现和服务器端的互交要向后端去提交数据并从后端接收数据，而我们常用的方式也就是利用form表单去提交。在我们实际开发的过程中，form表单的提交也是十分重要的一项技术。下面我们就来谈谈关于表单数据的提交。</p>
<h2 id="关于提交方式"><a href="#关于提交方式" class="headerlink" title="关于提交方式"></a>关于提交方式</h2><p>说起提交方式，我们要提到的就是HTTP协议了。我们都知道，HTTP协议请求格式分为四个模块，分别是：请求行、请求头、请求空行、请求体。如下：<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><div class="line">GET /books/?sex=man&name=Professional HTTP/1.1</div><div class="line">Host: www.wrox.com</div><div class="line">User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)</div><div class="line">Gecko/20050225 Firefox/1.0.1</div><div class="line">Connection: Keep-Alive</div><div class="line"></div><div class="line">POST / HTTP/1.1</div><div class="line">Host: www.wrox.com</div><div class="line">User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)</div><div class="line">Gecko/20050225 Firefox/1.0.1</div><div class="line">Content-Type: application/x-www-form-urlencoded</div><div class="line">Content-Length: 40</div><div class="line">Connection: Keep-Alive</div><div class="line"> （----此处空一行----） </div><div class="line">name=Professional%20Ajax&publisher=Wiley</div></pre></td></tr></table></figure></p>
<p>在请求头中，一般就会说明请求类型.在我们HTTP协议中定义了以下几种常见的请求或者说互交方法:</p>
<ol>
<li>GET：请求获取Request-URI所标识的资源 (查)</li>
<li>POST：在Request-URI所标识的资源后附加新的数据 （改）</li>
<li>PUT：请求服务器存储一个资源，并用Request-URI作为其标识 （增）</li>
<li>DELETE：请求服务器删除Request-URI所标识的资源 （删）</li>
<li>OPTIONS： 请求查询服务器的性能，或者查询与资源相关的选项和需求</li>
<li>HEAD：请求获取由Request-URI所标识的资源的响应消息报头</li>
<li>TRACE：请求服务器回送收到的请求信息，主要用于测试或诊断</li>
<li>CONNECT：保留将来使用<br>当然，我们前端常用的也就是前两种，下面，我们来聊聊GET和POST提交数据的不同之处。</li>
</ol>
<h3 id="GET提交"><a href="#GET提交" class="headerlink" title="GET提交"></a>GET提交</h3><p>GET提交方式请求的数据会附加到浏览器url的后面，我们在地址栏可以看到请求的数据内容。所以GET方式发送的数据量会比较少，而且，GET方式发送的数据相对来说比较不安全。不过，正因为GET提交的数据量小，且是随着url一起提交给服务端的，所以它的数据提交效率比较快。所以，我们平常在实际开发中，一般使用GET提交用来信息的获取操作.在保证安全性的前提下最大限度的提升网页的效率。</p>
<h3 id="POST提交"><a href="#POST提交" class="headerlink" title="POST提交"></a>POST提交</h3><p>POST提交方式，在设计的最初是用来修改服务器资源的，但后来，在我们的使用中，渐渐的将它的作用范围扩大了。使它不仅仅用来修改服务器资源。相对于GET方式来说，它的特性还是比较明显的。POST提交的数据不会显示在url中，所以相对来说POST提交是比较安全的。而且，post提交的数据量也是比GET提交的数据量要大的多。所以，我们一般利用POST提交方式来给服务器设发送数据，设置信息，或者数据量比较大的，安全要求比较高的信息.</p>
<h2 id="关于数据提交的安全性问题"><a href="#关于数据提交的安全性问题" class="headerlink" title="关于数据提交的安全性问题"></a>关于数据提交的安全性问题</h2><p>上面我们说的数据的提交方式，并且有所提及GET方式提交数据是附加到URL后面，以明文显示的。所以，比较不安全。POST提交方式不会在URl上显示。相对安全一点，那么，可能有人要问：“POST提交方式到底是明文传输，还是密文传输呢？”<br>要搞清楚这点，首先，我们要认识到一点：密文到底是什么，是不是就是看不见的就是密文呢？当然，在坐的都知道，密文不是这样。密文就是加密后的“文本”,某些时候，我们可以看到密文，但是，就算你看到也是没有用的，你只要不会对密文解密。那么，你看到的仅仅就是一串字符串而已。根本就不知道这段字符串显示的是什么内容。如下:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">6L+Z5piv5LuA5LmI5LiA5Liy5Luj56CB77yM5oiR55yf55qE5LiN55+l6YGT5ZWK //这是什么一串代码，我真的不知道啊</div></pre></td></tr></table></figure></p>
<p>那么，POST提交是明文还是密文提交呢？<br>其实，POST提交数据也是明文的方式提交的，只是我们用户比较不容易看到而已，当然，我们能在HTTP请求头中能够看到，所以，在我们的实际开发中，这种以明文提交的数据还是比较不安全的，所以，我们一般在POST提交的时候，会先给其加密再来将其提交到服务器端。到达服务端后，由服务器直接存储获得提交的数据，下次从服务器获取时再给其解密。当然，还有另一种方式，通过HTTPS协议即ssl+Http协议来提交数据，但这种提交方式在一定的程度上影响网页效率。这里不做过多的介绍，有兴趣的同学可以转 <a href="https://www.baidu.com" target="_blank" rel="external">百度</a>。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
<li>get方式的安全性较post差些，数据量较小些，如若包含机密或者数据量过大的话，建议用post提交。</li>
<li>在做数据查询的时候，建议使用GET方式，而在做数据添加、修改删除的时候，建议用POST方式</li>
</ul>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/04/09/关于事件冒泡和事件获取/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Gost Hand">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.jpg">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="GostHand's Blog">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2017/04/09/关于事件冒泡和事件获取/" itemprop="url">
关于事件冒泡和事件获取
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-04-09T20:13:21+08:00">
2017-04-09
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="关于事件"><a href="#关于事件" class="headerlink" title="关于事件"></a>关于事件</h2><p>说起冒泡和捕获，我们不得不提的是事件。在js中事件的触发，会分为三个阶段:捕获阶段、目标阶段和冒泡阶段。具体流程如下:<br><img src="/2017/04/09/关于事件冒泡和事件获取/1.png" alt="事件触发图解"><br>由上图可以看出，当一个事件被触发的时候，我们的浏览器想要找到到底是哪一个目标元素触发了这个事件，并作出一系列的相应是分三个阶段的。下面，我们来一个个解读这三个阶段. </p>
<h3 id="捕获阶段"><a href="#捕获阶段" class="headerlink" title="捕获阶段"></a>捕获阶段</h3><p>事件触发的第一个阶段是事件的捕获阶段，我们知道每一个html文档页面都是有它自己的DOM树的。而我们的浏览器想要找到DOM树中的某一个节点，就要从网页的根节点去查找。所以在我个人看来，事件的捕获阶段更像是浏览器要找到，触发事件的目标节点，从根节点出发一直流向目标节点。沿途经过的所有节点都会触发捕获事件。直到到达目标节点。当然，其实在事件的捕获阶段，浏览器做的不仅仅是这些。浏览器在到达目标节点的沿途经过的所有节点。浏览器都会建立传播路径,方便在事件的冒泡阶段的回溯.这也是事件捕获阶段的主要任务.</p>
<h3 id="目标阶段"><a href="#目标阶段" class="headerlink" title="目标阶段"></a>目标阶段</h3><p>一旦事件到达目标节点，事件就进入了目标阶段，此时，事件将会在目标节点上触发，然后开始根据捕获阶段建立的传播路径开始回流。进入冒泡阶段.</p>
<h3 id="冒泡阶段"><a href="#冒泡阶段" class="headerlink" title="冒泡阶段"></a>冒泡阶段</h3><p>当事件在目标节点上触发开始回流后，就进入了目标阶段。目标阶段事件会随着DOM树一层一层的向上冒泡，直至DOM根节点.</p>
<h2 id="关于addEventListener方法"><a href="#关于addEventListener方法" class="headerlink" title="关于addEventListener方法"></a>关于addEventListener方法</h2><p>addEventListener是给Dom对象注册监听事件的一种方法,其语法结构如下<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">element.addEventListener(event, <span class="function"><span class="keyword">function</span>, <span class="title">useCapture</span>);</span></div></pre></td></tr></table></figure></p>
<p>其参数结构如下:</p>
<ol>
<li>event: 必须项，我们可以用这个参数来指定要监听的事件名称，注意：这里不要”on”</li>
<li>function: 必须项,我们可以手动设置，当指定事件触发的时候，这个事件的处理函数 </li>
<li>useCapture: 可选项，其值为布尔值。指定事件是否在捕获或者冒泡阶段执行。默认为false.表示该事件在冒泡阶段执行.设为true，则表示事件在捕获阶段开始执行 </li>
</ol>
<h3 id="关于addEventListener的兼容性问题"><a href="#关于addEventListener的兼容性问题" class="headerlink" title="关于addEventListener的兼容性问题"></a>关于addEventListener的兼容性问题</h3><p>addEventListener是有兼容性问题的，它在ie中只有9及其以上的版本对其支持,因此，在ie8及以下的版本中，是不能用这个方法的，但是，我们有另一个方法可用“attachEvent()”。因此，我们可以使用能力检测的方法来进行兼容性处理。具体处理代码如下:<br><figure class="highlight js"><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">var</span> x = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</div><div class="line"><span class="keyword">if</span> (x.addEventListener) { <span class="comment">//所有主流浏览器，除了 IE 8 及更早 IE版本</span></div><div class="line"> x.addEventListener(<span class="string">"click"</span>, myFunction);</div><div class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (x.attachEvent) { <span class="comment">// IE 8 及更早 IE 版本</span></div><div class="line"> x.attachEvent(<span class="string">"onclick"</span>, myFunction);</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h2 id="事件代理"><a href="#事件代理" class="headerlink" title="事件代理"></a>事件代理</h2><h3 id="事件代理的运作方式"><a href="#事件代理的运作方式" class="headerlink" title="事件代理的运作方式"></a>事件代理的运作方式</h3><p>事件代理可以说是利用了我们js中的两种事件特性：事件冒泡和目标事件。我们给事件处理器添加到父辈元素上，当子辈元素被触发事件的时候，由于事件的冒泡，事件会回溯到父辈元素上，并且我们可以知道，事件是从哪一个子辈元素冒泡上来的。（even.target）</p>
<h3 id="事件代理的好处"><a href="#事件代理的好处" class="headerlink" title="事件代理的好处"></a>事件代理的好处</h3><p>代理事件的好处是显而易见的，我们可以给父元素注册事件，从而避免了给每一个子元素添加事件。所以一旦子元素过多的时候，我们给其父元素添加事件就可以很大程度上的去优化浏览器性能。比如说在一个10列、100行的HTML表格里，让其每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。</p>
<h2 id="阻止事件冒泡"><a href="#阻止事件冒泡" class="headerlink" title="阻止事件冒泡"></a>阻止事件冒泡</h2><p>我们知道事件的触发是要向上冒泡的，但有些时候，由于业务的需求，我们并不希望事件向上冒泡，或者说，我们在其父辈元素上也要添加相同的事件，那么其父辈元素就会多次触发此事件，导致与我们的需求有误差。所以，我们要阻止事件的冒泡.</p>
<h3 id="阻止事件冒泡的方法"><a href="#阻止事件冒泡的方法" class="headerlink" title="阻止事件冒泡的方法"></a>阻止事件冒泡的方法</h3><p>阻止事件冒泡可以有以下几种方法:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">event.stopPropagation()<span class="comment">//此方法用来阻止事件冒泡</span></div></pre></td></tr></table></figure></p>
<p>或者<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">return</span> <span class="literal">false</span>; <span class="comment">//此句用来阻止默认事件同时也阻止了事件冒泡</span></div></pre></td></tr></table></figure></p>
<h1 id="要注意的是"><a href="#要注意的是" class="headerlink" title="要注意的是:"></a>要注意的是:</h1><p>我们无法在事件捕获阶段阻止事件冒泡！！！例如，我们在代码里加上true，如图所示，第一个li会触发事件。因为捕获是从根节点向目标节点触发，而冒泡是从目标节点向根节点触发。<br><img src="/2017/04/09/关于事件冒泡和事件获取/2.png" alt="无法在捕获阶段阻止事件冒泡"></p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</section>
<nav class="pagination">
<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/"><i class="fa fa-angle-right"></i></a>
</nav>