-
Notifications
You must be signed in to change notification settings - Fork 1
/
search.xml
464 lines (414 loc) · 82.7 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[JS中计时器的原理]]></title>
<url>/2017/04/11/JS%E4%B8%AD%E8%AE%A1%E6%97%B6%E5%99%A8%E7%9A%84%E5%8E%9F%E7%90%86/</url>
<content type="html"><![CDATA[<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>
]]></content>
<tags>
<tag> 计时器 </tag>
<tag> 事件队列 </tag>
<tag> 浏览器线程 </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于继承]]></title>
<url>/2017/04/10/%E5%85%B3%E4%BA%8E%E7%BB%A7%E6%89%BF/</url>
<content type="html"><![CDATA[<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>
]]></content>
</entry>
<entry>
<title><![CDATA[面向对象和类的区别]]></title>
<url>/2017/04/10/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%92%8C%E7%B1%BB%E7%9A%84%E5%8C%BA%E5%88%AB/</url>
<content type="html"><![CDATA[<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>
]]></content>
<tags>
<tag> 面向对象 </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于表单数据的传输问题]]></title>
<url>/2017/04/10/JS%E4%B8%AD%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%E7%9A%84%E4%BC%A0%E8%BE%93%E9%97%AE%E9%A2%98/</url>
<content type="html"><![CDATA[<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>
]]></content>
<tags>
<tag> 表单 </tag>
<tag> 数据传输 </tag>
<tag> 加密 </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于事件冒泡和事件获取]]></title>
<url>/2017/04/09/%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%92%8C%E4%BA%8B%E4%BB%B6%E8%8E%B7%E5%8F%96/</url>
<content type="html"><![CDATA[<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>
]]></content>
<tags>
<tag> 冒泡 </tag>
<tag> 捕获 </tag>
</tags>
</entry>
<entry>
<title><![CDATA[关于requireJs的介绍]]></title>
<url>/2017/04/08/%E5%85%B3%E4%BA%8ErequireJs%E7%9A%84%E4%BB%8B%E7%BB%8D/</url>
<content type="html"><![CDATA[<h1 id="require-Js"><a href="#require-Js" class="headerlink" title="require Js"></a>require Js</h1><h2 id="文章背景"><a href="#文章背景" class="headerlink" title="文章背景"></a>文章背景</h2><p>最近，我们在老师的带领下开发博学谷项目,可以说这个系统是我们大家一起学习以来所做的一个比较完整的项目，或者可以说是最接近完整的项目了吧.在这个项目中，我们开始接触模块化的东西,说实话，模块化真的是一个好东西,现在的it事业，乃至不仅仅我们it事业，一切都在向着模块化去发展.它能使我们即使面对海量的代码还能很好的管理分工.甚至，在开发过程中，我们只要编写自己特有的核心业务逻辑就行，其他的常见部分我们可以引用别的已经写好的模块.这样，使我们的开发更加便捷方便. </p>
<p><hr><br><strong>模块化</strong><br><br><br>模块化就是将很多能够实现一个功能的代码，放在一起，就是一个模块。很早的时候，我们将几个函数放在一起，这也是一个模块（当然，这种模块是没有意义的模块）。 </p>
<h2 id="模块化现如今的分类"><a href="#模块化现如今的分类" class="headerlink" title="模块化现如今的分类"></a>模块化现如今的分类</h2><p>现如今，我国市场上模块化的标准总的来说，分为三类。以commonjs为标准、以AMD（Asynchronous Module Definition）为标准，这可不是我们常见的那个处理器产商。还有国人写出来的以CMD（Common Module Definition）为标准。其中，amd和cmd可以说是在commonjs的基础上完成的。实现，commonjs完成最好的要数node了，实现Amd最好就是我们今天要说的requirejs,这个接下来再说。以CMD为标准，实现最好的可以说就是淘宝团队推出的seejs了。</p>
<h2 id="未完待续。。。。"><a href="#未完待续。。。。" class="headerlink" title="未完待续。。。。"></a>未完待续。。。。</h2>]]></content>
<tags>
<tag> require </tag>
<tag> 模块化 </tag>
</tags>
</entry>
<entry>
<title><![CDATA[PHP基础]]></title>
<url>/2017/04/05/PHP/</url>
<content type="html"><![CDATA[<h1 id="PHP基础"><a href="#PHP基础" class="headerlink" title="PHP基础"></a>PHP基础</h1><h2 id="PHP变量"><a href="#PHP变量" class="headerlink" title="PHP变量"></a>PHP变量</h2><h3 id="global关键字"><a href="#global关键字" class="headerlink" title="global关键字"></a>global关键字</h3><p>php中想要在函数内部访问全局变量要在全局变量前加一个global关键字</p>
<figure class="highlight php"><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"><span class="meta"><?php</span></div><div class="line"> $x=<span class="number">5</span>;</div><div class="line"> $y=<span class="number">10</span>;</div><div class="line"> functiong getSun(){</div><div class="line"> <span class="keyword">global</span> $x,$y;</div><div class="line"> $y=$x+$y;</div><div class="line"> }</div><div class="line"> getSun();</div><div class="line"> <span class="keyword">echo</span> $y; <span class="comment">//输出15</span></div><div class="line"></div><div class="line"></div><div class="line"> <span class="comment">//上述代码也可以写成$GLOBALS['y']=$GLOBALS['x']+$GLOBALS['y'];</span></div><div class="line"></div><div class="line"> <span class="comment">//php中用一个叫做$GLOBALS的数组来存储全局变量，因此我们可以通过$GLOBALS["变量名"]来访问这个全局变量</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h3 id="static关键字"><a href="#static关键字" class="headerlink" title="static关键字"></a>static关键字</h3><p>在php中，当一个函数完成时他的所有变量通常会被删除。然而，有时候我们希望某些局部变量不会被删除。因此，我们需要在第一次声明的时候使用static关键字<br><figure class="highlight php"><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="meta"><?php</span></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">myTest</span><span class="params">()</span></span></div><div class="line"> {</div><div class="line"> <span class="keyword">static</span> $x=<span class="number">0</span>;</div><div class="line"> <span class="keyword">echo</span> $x;</div><div class="line"> $x++;</div><div class="line"> }</div><div class="line"> myTest();</div><div class="line"> myTest();</div><div class="line"> myTest();</div><div class="line"> <span class="comment">//每次调用该函数时，该变量将会保留着函数前一次被调用时的值.但这个变量 $x还是局部变量。</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure></p>
<h2 id="echo-和print语句"><a href="#echo-和print语句" class="headerlink" title="echo 和print语句"></a>echo 和print语句</h2><h3 id="echo-和print的区别"><a href="#echo-和print的区别" class="headerlink" title="echo 和print的区别"></a>echo 和print的区别</h3><ul>
<li>echo输出一个或者多个字符串，没有返回值，echo的速度比print要快</li>
<li>print输出一个字符串，总是返回1</li>
</ul>
<h3 id="echo和print的相同点"><a href="#echo和print的相同点" class="headerlink" title="echo和print的相同点"></a>echo和print的相同点</h3><p>echo和print都是语言结构，使用的时候可以加双引号，也可以不加双引号。</p>
<h2 id="php中的数据类型"><a href="#php中的数据类型" class="headerlink" title="php中的数据类型"></a>php中的数据类型</h2><h3 id="var-dump-函数；"><a href="#var-dump-函数；" class="headerlink" title="var_dump()函数；"></a>var_dump()函数；</h3><p>var_dump()函数是返回php中变量的数据类型和值的</p>
<h3 id="php中的对象"><a href="#php中的对象" class="headerlink" title="php中的对象"></a>php中的对象</h3><p>php中对象必须声明</p>
<ul>
<li>必须使用class关键字声明类对象。类是可以包含属性和方法的结构</li>
<li>然后我们在类中定义数据类型，然后在实例化的类中使用数据类型</li>
</ul>
<figure class="highlight php"><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></pre></td><td class="code"><pre><div class="line"><span class="meta"><?php</span></div><div class="line"> <span class="comment">//class声明类</span></div><div class="line"> <span class="class"><span class="keyword">class</span> <span class="title">Car</span></span></div><div class="line"> {</div><div class="line"> <span class="keyword">var</span> $color;</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Car</span><span class="params">($color=<span class="string">"green"</span>)</span> </span>{</div><div class="line"> <span class="keyword">$this</span>->color = $color;</div><div class="line"> }</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">what_color</span><span class="params">()</span> </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">$this</span>->color;</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">print_vars</span><span class="params">($obj)</span> </span>{</div><div class="line"> <span class="keyword">foreach</span> (get_object_vars($obj) <span class="keyword">as</span> $prop => $val) {</div><div class="line"> <span class="keyword">echo</span> <span class="string">"\t$prop = $val\n"</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="comment">// 实例化一个对象</span></div><div class="line"> $herbie = <span class="keyword">new</span> Car(<span class="string">"white"</span>);</div><div class="line"></div><div class="line"> <span class="comment">// 打印出内容</span></div><div class="line"> <span class="keyword">echo</span> <span class="string">"\herbie: Properties\n"</span>;</div><div class="line"> print_vars($herbie);</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h3 id="php中NULL"><a href="#php中NULL" class="headerlink" title="php中NULL"></a>php中NULL</h3><ul>
<li>NULL值表示变量没有值</li>
<li>NULL是数据类型为NULL的值</li>
<li>NULL值指明一个变量是否为空值。同样可用于数据空值和NULL值的区别。</li>
<li>可以通过设置变量值为NULL来清空变量数据</li>
</ul>
<figure class="highlight php"><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="meta"><?php</span></div><div class="line"> $x=<span class="string">"Hello world!"</span>;</div><div class="line"> $x=<span class="keyword">null</span>;</div><div class="line"> var_dump($x);</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h2 id="PHP常量"><a href="#PHP常量" class="headerlink" title="PHP常量"></a>PHP常量</h2><h3 id="设置常量使用define-函数语法如下"><a href="#设置常量使用define-函数语法如下" class="headerlink" title="设置常量使用define()函数语法如下"></a>设置常量使用define()函数语法如下</h3><figure class="highlight php"><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="meta"><?php</span> </div><div class="line">bool define ( string $name , mixed $value [, bool $case_insensitive = <span class="keyword">false</span> ] )</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<p>该函数有三个参数</p>
<ul>
<li>name：必选参数,常量名称，即标识符</li>
<li>value:必选参数，常量的值。</li>
<li>case_insensitive:可选参数，如果设置为TRUE，该常量则大小写不敏感，默认是大小写敏感的</li>
</ul>
<p>下面创建一个大小写不敏感的常量<br><figure class="highlight php"><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="meta"><?php</span> </div><div class="line"> define(<span class="string">"GETVIEW"</span>, <span class="string">"这是一个常量"</span>,<span class="keyword">TRUE</span>);</div><div class="line"> <span class="keyword">echo</span> getview;</div><div class="line"> <span class="keyword">echo</span> <span class="string">"<br>"</span>;</div><div class="line"> <span class="keyword">echo</span> GETVIEW;</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure></p>
<h3 id="常量的注意"><a href="#常量的注意" class="headerlink" title="常量的注意"></a>常量的注意</h3><p>常量在创建后默认是全局变量，可以在整个运行脚本的任何地方使用。</p>
<h2 id="php字符串变量"><a href="#php字符串变量" class="headerlink" title="php字符串变量"></a>php字符串变量</h2><p>字符串变量用于存储并处理文本</p>
<h3 id="php并置运算符"><a href="#php并置运算符" class="headerlink" title="php并置运算符"></a>php并置运算符</h3><p>php中只有一个字符串运算符。并置运算符（.）用于把两个字符串值连接起来</p>
<h3 id="PHP-strlen-函数"><a href="#PHP-strlen-函数" class="headerlink" title="PHP strlen()函数"></a>PHP strlen()函数</h3><p>strlen() 函数返回字符串的长度（字符数）。 <code>strlen()</code> 经常用于循环中</p>
<figure class="highlight php"><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="meta"><?php</span> </div><div class="line"> <span class="keyword">echo</span> strlen(<span class="string">"Hello world!"</span>); <span class="comment">//输出12</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h3 id="php-strpos-函数"><a href="#php-strpos-函数" class="headerlink" title="php strpos()函数"></a>php strpos()函数</h3><p>strpos()函数用于在字符串内查找一个字符或一段指定的文本。如果在字符串中找到匹配，该函数会返回第一个匹配的字符位置。如果未找到匹配，则返回 FALSE。</p>
<figure class="highlight php"><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="meta"><?php</span> </div><div class="line"><span class="keyword">echo</span> strpos(<span class="string">"Hello world!"</span>,<span class="string">"world"</span>); <span class="comment">//输出6</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h2 id="php运算符"><a href="#php运算符" class="headerlink" title="php运算符"></a>php运算符</h2><h3 id="PHP算术运算符"><a href="#PHP算术运算符" class="headerlink" title="PHP算术运算符"></a>PHP算术运算符</h3><table>
<thead>
<tr>
<th>运算符</th>
<th>名称</th>
<th>描述</th>
<th>实例</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<tr>
<td>X+Y</td>
<td>加</td>
<td>X和y的和</td>
<td>2+2</td>
<td>4</td>
</tr>
<tr>
<td>X-Y</td>
<td>减</td>
<td>X和y的差</td>
<td>5-2</td>
<td>3</td>
</tr>
<tr>
<td>X*Y</td>
<td>乘</td>
<td>X和y的积</td>
<td>5*2</td>
<td>10</td>
</tr>
<tr>
<td>X/Y</td>
<td>除</td>
<td>X和y的商</td>
<td>15/5</td>
<td>3</td>
</tr>
<tr>
<td>X%y</td>
<td>模（除法的余数）</td>
<td>X除以y的余数</td>
<td>5%2</td>
<td>1</td>
</tr>
<tr>
<td>-x</td>
<td>取反</td>
<td>X取反</td>
<td>-2</td>
<td>-2</td>
</tr>
<tr>
<td>a.b</td>
<td>并置</td>
<td>连接两个字符串</td>
<td>“Hi”.”Ha”</td>
<td>HiHa</td>
</tr>
</tbody>
</table>
<p>PHP7+版本新增整除运算符intdiv()<br><figure class="highlight php"><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="meta"><?php</span></div><div class="line">var_dump(intdiv(<span class="number">10</span>, <span class="number">3</span>));<span class="comment">//输出 int(3)</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure></p>
<h3 id="PHP逻辑运算符"><a href="#PHP逻辑运算符" class="headerlink" title="PHP逻辑运算符"></a>PHP逻辑运算符</h3><table>
<thead>
<tr>
<th>运算符</th>
<th>名称</th>
<th>描述</th>
<th>实例</th>
</tr>
</thead>
<tbody>
<tr>
<td>x and y</td>
<td>与</td>
<td>如果x和y都为true则返回true</td>
<td>（6 < 10 and 3 > 1）返回true</td>
</tr>
<tr>
<td>x or y</td>
<td>或</td>
<td>如果x和y至少一个为true则返回true</td>
<td>（6 < 10 and 3 < 1）返回true</td>
</tr>
<tr>
<td>x xor y</td>
<td>异或</td>
<td>如果x和y有且仅有一个为true则返回true</td>
<td>（6 < 10 and 3 > 1）返回false</td>
</tr>
<tr>
<td>x && y</td>
<td>与</td>
<td>如果x和y都为true则返回true</td>
<td>（6 < 10 and 3 > 1）返回true</td>
</tr>
<tr>
<td>x || y</td>
<td>或</td>
<td>如果x和y至少一个为true则返回true</td>
<td>（6 < 10 and 3 < 1）返回true</td>
</tr>
<tr>
<td>!x</td>
<td>非</td>
<td>如果x不为true则返回true</td>
<td>!（6 < 10）返回false</td>
</tr>
</tbody>
</table>
<h3 id="组合比较符（PHP7-）"><a href="#组合比较符（PHP7-）" class="headerlink" title="组合比较符（PHP7+）"></a>组合比较符（PHP7+）</h3><figure class="highlight php"><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="meta"><?php</span></div><div class="line"><span class="comment">// 整型</span></div><div class="line"><span class="keyword">echo</span> <span class="number">1</span> <=> <span class="number">1</span>; <span class="comment">// 0</span></div><div class="line"><span class="keyword">echo</span> <span class="number">1</span> <=> <span class="number">2</span>; <span class="comment">// -1</span></div><div class="line"><span class="keyword">echo</span> <span class="number">2</span> <=> <span class="number">1</span>; <span class="comment">// 1</span></div><div class="line"></div><div class="line"><span class="comment">// 浮点型</span></div><div class="line"><span class="keyword">echo</span> <span class="number">1.5</span> <=> <span class="number">1.5</span>; <span class="comment">// 0</span></div><div class="line"><span class="keyword">echo</span> <span class="number">1.5</span> <=> <span class="number">2.5</span>; <span class="comment">// -1</span></div><div class="line"><span class="keyword">echo</span> <span class="number">2.5</span> <=> <span class="number">1.5</span>; <span class="comment">// 1</span></div><div class="line"> </div><div class="line"><span class="comment">// 字符串</span></div><div class="line"><span class="keyword">echo</span> <span class="string">"a"</span> <=> <span class="string">"a"</span>; <span class="comment">// 0</span></div><div class="line"><span class="keyword">echo</span> <span class="string">"a"</span> <=> <span class="string">"b"</span>; <span class="comment">// -1</span></div><div class="line"><span class="keyword">echo</span> <span class="string">"b"</span> <=> <span class="string">"a"</span>; <span class="comment">// 1</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h2 id="PHP中的数组"><a href="#PHP中的数组" class="headerlink" title="PHP中的数组"></a>PHP中的数组</h2><p>在PHP中，array()用来创建数组</p>
<p>在PHP中有三种类型的数组</p>
<ol>
<li>数值数组:带有数字ID键的数组</li>
<li>关联数组：带有指定键的数组，每个键关联一个值</li>
<li>多维数组：包含一个或多个数组的数组</li>
</ol>
<h3 id="PHP数值数组"><a href="#PHP数值数组" class="headerlink" title="PHP数值数组"></a>PHP数值数组</h3><figure class="highlight php"><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">$cars=<span class="keyword">array</span>(<span class="string">"Volvo"</span>,<span class="string">"BMW"</span>,<span class="string">"Toyota"</span>);<span class="comment">//自动分配id</span></div><div class="line"><span class="comment">//===================================================</span></div><div class="line"><span class="comment">//人工分配id</span></div><div class="line">$cars[<span class="number">0</span>]=<span class="string">"Volvo"</span>;</div><div class="line">$cars[<span class="number">1</span>]=<span class="string">"BMW"</span>;</div><div class="line">$cars[<span class="number">2</span>]=<span class="string">"Toyota"</span>;</div></pre></td></tr></table></figure>
<p><strong> 获取数组的长度 </strong><br>PHP中使用count()函数获取数组的长度</p>
<figure class="highlight php"><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="meta"><?php</span></div><div class="line">$cars=<span class="keyword">array</span>(<span class="string">"Volvo"</span>,<span class="string">"BMW"</span>,<span class="string">"Toyota"</span>);</div><div class="line"><span class="keyword">echo</span> count($cars);<span class="comment">//打印3</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h3 id="PHP关联数组"><a href="#PHP关联数组" class="headerlink" title="PHP关联数组"></a>PHP关联数组</h3><p><strong> 创建关联数组 </strong><br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$age=<span class="keyword">array</span>(<span class="string">"Peter"</span>=><span class="string">"35"</span>,<span class="string">"Ben"</span>=><span class="string">"37"</span>,<span class="string">"Joe"</span>=><span class="string">"43"</span>);</div></pre></td></tr></table></figure></p>
<p><strong> 遍历关联数组 </strong><br>遍历关联数组可以用foreach循环，如下所示：<br><figure class="highlight php"><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="meta"><?php</span></div><div class="line">$age=<span class="keyword">array</span>(<span class="string">"Peter"</span>=><span class="string">"35"</span>,<span class="string">"Ben"</span>=><span class="string">"37"</span>,<span class="string">"Joe"</span>=><span class="string">"43"</span>);</div><div class="line"></div><div class="line"><span class="keyword">foreach</span>($age <span class="keyword">as</span> $x=>$x_value)</div><div class="line">{</div><div class="line"><span class="keyword">echo</span> <span class="string">"Key="</span> . $x . <span class="string">", Value="</span> . $x_value;</div><div class="line"><span class="keyword">echo</span> <span class="string">"<br>"</span>;</div><div class="line">}</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure></p>
<h3 id="PHP多维数组"><a href="#PHP多维数组" class="headerlink" title="PHP多维数组"></a>PHP多维数组</h3><p>PHP多维数组，即包含一个或者多个数组的数组，这里不做介绍。</p>
<h2 id="PHP中数组排序"><a href="#PHP中数组排序" class="headerlink" title="PHP中数组排序"></a>PHP中数组排序</h2><p>数组中的元素可以按照字母或者数字顺序进行升序或者降序排列</p>
<p><strong> 数组的排序有以下几种方法 </strong> </p>
<ul>
<li>sort():对数组进行升序排列</li>
<li>rsort():对数组进行降序排列</li>
<li>asort():根据关联数组的值，对数组进行升序排列</li>
<li>ksort():根据关联数组的键，对数组进行升序排列</li>
<li>arsort():根据关联数组的值，对数组进行降序排列</li>
<li>krsort():根据关联数组的键，对数组进行降序排列</li>
</ul>
<h2 id="PHP超级全局变量"><a href="#PHP超级全局变量" class="headerlink" title="PHP超级全局变量"></a>PHP超级全局变量</h2><p>超级全局变量在PHP4.1.0后被启用，是PHP系统中自带的变量，在一个脚本的全部作用域中都可用。 </p>
<p><strong> PHP中的几个超级全局变量 </strong> </p>
<ul>
<li>$GLOBALS</li>
<li>$_SERVER</li>
<li>$_REQUEST</li>
<li>$_POST</li>
<li>$_GET</li>
<li>$_FILES</li>
<li>$_ENV</li>
<li>$_COOKIE</li>
<li>$_SESSION</li>
</ul>
<h3 id="PHP中-GLOBALS"><a href="#PHP中-GLOBALS" class="headerlink" title="PHP中$GLOBALS"></a>PHP中$GLOBALS</h3><p>$GLOBALS是PHP的一个超级全局变量组，在一个PHP脚本的全部作用域中都可以访问<br>$GLOBALS是一个包含了全部变量的全局组合数组。变量的名字就是数组的键</p>
<figure class="highlight php"><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="meta"><?php</span> </div><div class="line"> $x=<span class="number">75</span>；</div><div class="line"> $y=<span class="number">25</span>;</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">addition</span><span class="params">()</span></span>{</div><div class="line"> $GLOBALS[<span class="string">"z"</span>]=$GLOBALS[<span class="string">"x"</span>]+$GLOBALS[<span class="string">"y"</span>];</div><div class="line"> }</div><div class="line"> addition();</div><div class="line"> <span class="keyword">echo</span> $z; <span class="comment">//打印100（z 是一个$GLOBALS数组中的超级全局变量，该变量同样可以在函数外访问）</span></div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<h2 id="PHP中-SERVER"><a href="#PHP中-SERVER" class="headerlink" title="PHP中$_SERVER"></a>PHP中$_SERVER</h2><p>$_SERVER是一个包含了诸如头信息(header)、路径(path)、以及脚本位置(script locations)等信息的数组。这个数组中的项目由web服务器创建。不能保证每个服务器都提供全部项目；服务器可能</p>
]]></content>
</entry>
<entry>
<title><![CDATA[tags]]></title>
<url>/tags/index.html</url>
<content type="html"></content>
</entry>
<entry>
<title><![CDATA[about]]></title>
<url>/about/index.html</url>
<content type="html"></content>
</entry>
</search>