-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
509 lines (456 loc) · 43.2 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Stone's blog!</title>
<link href="/atom.xml" rel="self"/>
<link href="http://sj719045032.github.io/"/>
<updated>2016-04-15T03:05:35.303Z</updated>
<id>http://sj719045032.github.io/</id>
<author>
<name>Stone</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>比较好的前端博客或者网站</title>
<link href="http://sj719045032.github.io/2016/04/15/link/"/>
<id>http://sj719045032.github.io/2016/04/15/link/</id>
<published>2016-04-15T02:44:41.000Z</published>
<updated>2016-04-15T03:05:35.303Z</updated>
<content type="html"><p>大漠 淘宝 <a href="http://www.w3cplus.com/" target="_blank" rel="external">http://www.w3cplus.com/</a><br>李成银 百度 <a href="http://www.welefen.com/" target="_blank" rel="external">http://www.welefen.com/</a><br>张鑫旭 <a href="http://www.zhangxinxu.com/wordpress/" target="_blank" rel="external">http://www.zhangxinxu.com/wordpress/</a></p>
<p>下面这些人名先留下以备瞻仰。</p>
<p>JavaScript 语言：周爱民、老赵、玉伯、hax, 月影、CatChen, winter, 白露飞 等等<br>DOM 和浏览器兼容性：winter, 司徒正美、屈超、怿飞 等等<br>HTML 和 CSS：彪叔、aoao, 怿飞、macji 等等<br>类库框架：玉伯、JK, cnberg, yiminghe, 元彦 等等<br>前端布道士：克军、玉伯、怿飞、秦歌、小马 等等<br>不知分到哪一类的：hujinpu, 李牧、winter, dexteryy, 李超、老鱼、太伯、陈成</p>
</content>
<summary type="html">
<p>大漠 淘宝 <a href="http://www.w3cplus.com/" target="_blank" rel="external">http://www.w3cplus.com/</a><br>李成银 百度 <a href="http://www.wele
</summary>
</entry>
<entry>
<title>正则表达式速查表</title>
<link href="http://sj719045032.github.io/2016/04/15/regular-expression/"/>
<id>http://sj719045032.github.io/2016/04/15/regular-expression/</id>
<published>2016-04-15T02:28:34.000Z</published>
<updated>2016-04-15T02:59:41.857Z</updated>
<content type="html"><p><img src="/img/regular-expression.png" alt="avatar"></p>
</content>
<summary type="html">
<p><img src="/img/regular-expression.png" alt="avatar"></p>
</summary>
</entry>
<entry>
<title>2016阿里实习生第一次电话面试总结</title>
<link href="http://sj719045032.github.io/2016/03/08/ali-interview/"/>
<id>http://sj719045032.github.io/2016/03/08/ali-interview/</id>
<published>2016-03-08T03:58:08.000Z</published>
<updated>2016-03-14T01:42:02.954Z</updated>
<content type="html"><p> 2016年3月7日，晚上接到了人生中第一次电话面试-阿里实习生招聘电话面试。打来电话的是一个姐姐，下面是一些问题。</p>
<h3 id="1-angular数据双向绑定的原理，以及与检测对象改变的实现双向绑定有什么不同"><a href="#1-angular数据双向绑定的原理，以及与检测对象改变的实现双向绑定有什么不同" class="headerlink" title="1.angular数据双向绑定的原理，以及与检测对象改变的实现双向绑定有什么不同"></a>1.angular数据双向绑定的原理，以及与检测对象改变的实现双向绑定有什么不同</h3><p> 当时答得不太好。后面上网查了资料，发现这篇文章讲得比较详细<a href="http://sentsin.com/web/779.html" target="_blank" rel="external">http://sentsin.com/web/779.html</a>.简言之，从模型到ui的更新，通过$digest循环遍历该作用域注册的所有watch，对比模型值是否改变，如果出现新值就把变化更新到视图上。从UI更新到模型，核心是$apply函数，如果是使用angular扩展的事件，那么angular就是自动调用$apply函数然后启动watch检测，将数据变化更新到模型。</p>
<h3 id="2-angular依赖注入"><a href="#2-angular依赖注入" class="headerlink" title="2.angular依赖注入"></a>2.angular依赖注入</h3><p> 在angular有下面三种方式:</p>
<ul>
<li><p>通过数组标注在方法的参数中声明依赖（优先考虑）</p>
</li>
<li><p>定义在控制器构造方法的$inject属性中</p>
</li>
<li><p>通过方法参数名隐式的添加(有些注意事项)</p>
</li>
</ul>
<ol>
<li><p>数组标注</p>
<pre><code>myModule.controller(&apos;myController&apos;,[&apos;$scope&apos;,&apos;myService&apos;,function($scope,myService){
//your code.
}]);
</code></pre><p>在第二个数组类型的参数中声明了两个依赖$scope,myService.后面的function中的参数$scope,myService与前面生命的依赖一一对应，可以改成符合js命名规范的任意标示符，比如：</p>
<pre><code>myModule.controller(&apos;myController&apos;,[&apos;$scope&apos;,&apos;myService&apos;,function(myScope,aService){
//your code.
}]);
</code></pre><p>这样myScope便对应$scope服务，aService对应myService。</p>
</li>
</ol>
<ol>
<li><p>$inject属性</p>
<pre><code>var myController=function($scope,myService){
//your code.
}];
myController.$inject=[&apos;$scope&apos;,&apos;myService&apos;];
myModule.controller(&apos;myController&apos;,myController);
</code></pre></li>
<li><p>隐式声明依赖</p>
<pre><code>myModule.controller(&apos;myController&apos;,function($scope,myService){
//your code.
});
</code></pre><p>将构造函数的参数设为需要依赖的服务名，这样注入器就会自动查找需要依赖的服务</p>
</li>
</ol>
<h3 id="3-闭包及其优缺点"><a href="#3-闭包及其优缺点" class="headerlink" title="3.闭包及其优缺点"></a>3.闭包及其优缺点</h3><p> 闭包定义：javascript允许使用内部函数，内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。</p>
<ul>
<li>优点：<ul>
<li>不增加额外的全局变量。</li>
<li>执行过程中所有变量都是在匿名函数内部。</li>
<li>加强封装性</li>
</ul>
</li>
<li>缺点<ul>
<li>由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。</li>
<li>闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。</li>
</ul>
</li>
</ul>
<h3 id="4-ajax优缺点"><a href="#4-ajax优缺点" class="headerlink" title="4.ajax优缺点"></a>4.ajax优缺点</h3><p> ajax：AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：</p>
<ul>
<li>使用XHTML+CSS来标准化呈现；</li>
<li>使用XML和XSLT进行数据交换及相关操作；</li>
<li>使用XMLHttpRequest对象与Web服务器进行异步数据通信； </li>
<li>使用Javascript操作Document Object Model进行动态显示及交互； </li>
<li><p>使用JavaScript绑定和处理所有数据。</p>
<ul>
<li>优点：<ul>
<li>无刷新更新数据</li>
<li>异步与服务器通信</li>
<li>前端和后端负载平衡</li>
<li>基于标准被广泛支持</li>
<li>界面与应用分离</li>
</ul>
</li>
<li>缺点<ul>
<li>无法使用Back和History功能</li>
<li>安全问题 AJAX暴露了与服务器交互的细节</li>
<li>对搜索引擎的支持比较弱</li>
<li>破坏了程序的异常机制</li>
<li>违背URL和资源定位的初衷</li>
<li>客户端过肥，太多客户端代码造成开发上的成本</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="5-javascript中的this理解"><a href="#5-javascript中的this理解" class="headerlink" title="5.javascript中的this理解"></a>5.javascript中的this理解</h3><p> this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。</p>
<ol>
<li><p>作为对象方法调用<br> 如果函数作为某个对象的方法调用，那么this绑定到这个对象上。</p>
<pre><code>function myFunc() {
console.log(this.x);
}
var myObject = {};
myObject.x = &quot;stone&quot;;
myObject.myFunc = myFunc;
myObject.myFunc();//输出为‘stone’
</code></pre></li>
<li><p>作为函数调用<br> 如果函数直接作为函数调用，那么this绑定到全局对象，浏览器中也就是window。</p>
<pre><code>var x = &apos;stone&apos;;
function myFunc() {
this.x = &quot;water&quot;;
console.log(this.x);
}
myFunc();//输出为‘water’
</code></pre></li>
<li><p>作为构造函数调用<br> 作为构造函数，this指向生成的对象。</p>
<pre><code>function Stone() {
this.name = &quot;stone&quot;;
}
myStone = new Stone();
console.log(myStone.name);//输出‘stone’
</code></pre></li>
<li><p>通过apply/call调用<br> apply/call可以改变函数的调用对象，他们的第一个参数代表改变后调用这个函数的对象</p>
<pre><code>name = &apos;Global&apos;;
var Stone = {
name: &apos;Stone&apos;
};
function showName() {
console.log(this.name);
}
showName.apply();//输出为‘Global’,未改变this指向
showName.apply(Stone);//输出为‘Stone’，this指向为Stone对象
</code></pre></li>
<li><p>自执行函数<br> 自行函数this指向全局对象，浏览器中是window</p>
<pre><code>name=&apos;Global&apos;;
var Stone={
name:&apos;stone&apos;,
showName:function(){
console.log(this.name);
(function(){
console.log(this.name);
})();
}
};
Stone.showName();//输出stone Global
</code></pre></li>
</ol>
<h3 id="6-js事件代理（委托）"><a href="#6-js事件代理（委托）" class="headerlink" title="6.js事件代理（委托）"></a>6.js事件代理（委托）</h3><p> 事件阶段：事件捕获-&gt;目标-&gt;事件冒泡</p>
<ol>
<li><p>事件捕获阶段</p>
<p> 事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达时间的目标节点。捕获阶段的主要任务是遍历传播路径，在冒泡阶段，时间会通过这个路径回溯到文档根节点。在实际应用中，我们并没有太多使用捕获阶段监听的用例，但是通过在捕获阶段对事件的处理，我们可以阻止类似click事件在某个特定元素上被触发。</p>
</li>
<li><p>目标阶段</p>
<p> 当事件到达目标节点时，事件就进入了目标阶段。事件在目标节点上被触发，然后逆向回流，知道传播到最外层的文档节点。</p>
</li>
<li><p>冒泡阶段</p>
<p> 事件在目标事件上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点。也就是说，同一事件会一次在目标节点的父节点，父节点的父节点…直到最外层的节点上触发。 </p>
<p>事件代理：把事件处理器添加到一个父级元素上。默认情况下，由于事件在目标元素上面触发后，还会一次冒泡到DOM树最上层，所以事件代理得以实现。这样我们可以在上层元素通过判断事件的目标，来对目标元素采取相应的操作。</p>
</li>
</ol>
<h3 id="7-position几种属性"><a href="#7-position几种属性" class="headerlink" title="7.position几种属性"></a>7.position几种属性</h3><table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>absolute</td>
<td>生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td>
</tr>
<tr>
<td>fixed</td>
<td>生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td>
</tr>
<tr>
<td>relative</td>
<td>生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。</td>
</tr>
<tr>
<td>static</td>
<td>默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 position 属性的值。</td>
</tr>
</tbody>
</table>
<h3 id="8-display属性"><a href="#8-display属性" class="headerlink" title="8.display属性"></a>8.display属性</h3><ul>
<li><p>inline(行内元素)</p>
<ul>
<li>和其他元素都在一行上</li>
<li>元素的高度、宽度、行高及顶部和底部边距不可设置</li>
<li>元素的宽度就是它包含的文字或图片的宽度，不可改变</li>
</ul>
</li>
<li><p>block(块元素)</p>
<ul>
<li>每个块级元素都从新的一行开始，并且其后的元素也另起一行</li>
<li>元素的高度、宽度、行高以及顶和底边距都可设置</li>
<li>元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度</li>
</ul>
</li>
<li><p>inline-block</p>
<p>inline-block既具有block的宽高特性又具有inline的同行元素特性。</p>
</li>
</ul>
<h3 id="9-BFC-Block-formatting-context-块级格式化上下文"><a href="#9-BFC-Block-formatting-context-块级格式化上下文" class="headerlink" title="9.BFC(Block formatting context)块级格式化上下文"></a>9.BFC(Block formatting context)块级格式化上下文</h3><p> 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p>
<ul>
<li><p>BFC布局规则：</p>
<ul>
<li>内部的Box会在垂直方向，一个接一个地放置。</li>
<li>Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠</li>
<li>每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。</li>
<li>BFC的区域不会与float box重叠。</li>
<li>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。</li>
<li>计算BFC的高度时，浮动元素也参与计算</li>
</ul>
</li>
<li><p>产生BFC的元素</p>
<ul>
<li>根元素</li>
<li>float属性不为none</li>
<li>position为absolute或fixed</li>
<li>display为inline-block, table-cell, table-caption, flex, inline-flex</li>
<li>overflow不为visible</li>
</ul>
</li>
</ul>
<h3 id="10-OSI七层模型"><a href="#10-OSI七层模型" class="headerlink" title="10.OSI七层模型"></a>10.OSI七层模型</h3><table>
<thead>
<tr>
<th>OSI层</th>
<th>功能</th>
<th>协议</th>
</tr>
</thead>
<tbody>
<tr>
<td>应用层</td>
<td>文件传输，电子邮件，文件服务，虚拟终端</td>
<td>TFTP，HTTP，SNMP，FTP，SMTP，DNS，Telnet</td>
</tr>
<tr>
<td>表示层</td>
<td>数据格式化，代码转换，数据加密</td>
<td>没有协议</td>
</tr>
<tr>
<td>会话层</td>
<td>解除或建立与别的接点的联系</td>
<td>没有协议</td>
</tr>
<tr>
<td>传输层</td>
<td>提供端对端的接口</td>
<td>TCP，UDP</td>
</tr>
<tr>
<td>网络层</td>
<td>为数据包选择路由</td>
<td>IP，ICMP，RIP，OSPF，BGP，IGMP</td>
</tr>
<tr>
<td>数据链路层</td>
<td>传输有地址的帧以及错误检测功能</td>
<td>SLIP，CSLIP，PPP，ARP，RARP，MTU</td>
</tr>
<tr>
<td>物理层</td>
<td>以二进制数据形式在物理媒体上传输数据</td>
<td>ISO2110，IEEE802，IEEE802.2</td>
</tr>
</tbody>
</table>
<h3 id="11-http"><a href="#11-http" class="headerlink" title="11 http"></a>11 http</h3><p> HTTP是Hyper Text Transfer Protocol（超文本传输协议）的缩写</p>
<ol>
<li><p>工作流程</p>
<ul>
<li>首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP的工作开始</li>
<li>建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。</li>
<li>服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。</li>
<li>客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开连接。</li>
</ul>
</li>
<li><p>常用状态吗</p>
</li>
</ol>
<table>
<thead>
<tr>
<th>消息</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>200（成功）</td>
<td>服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。</td>
</tr>
<tr>
<td>301（永久移动）</td>
<td>请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。</td>
</tr>
<tr>
<td>302（临时移动）</td>
<td>服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个网页或网站已经移动，因为 Googlebot 会继续抓取原有位置并编制索引。</td>
</tr>
<tr>
<td>304（未修改）</td>
<td>自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应（称为 If-Modified-Since HTTP 标头）。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。</td>
</tr>
<tr>
<td>404（未找到）</td>
<td>服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。</td>
</tr>
<tr>
<td>503（服务不可用）</td>
<td>服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。</td>
</tr>
</tbody>
</table>
</content>
<summary type="html">
<p> 2016年3月7日，晚上接到了人生中第一次电话面试-阿里实习生招聘电话面试。打来电话的是一个姐姐，下面是一些问题。</p>
<h3 id="1-angular数据双向绑定的原理，以及与检测对象改变的实现双向绑定有什么不同"><a href="#1-angular数据
</summary>
<category term="面试" scheme="http://sj719045032.github.io/tags/%E9%9D%A2%E8%AF%95/"/>
</entry>
<entry>
<title>markdown基本语法</title>
<link href="http://sj719045032.github.io/2016/03/03/simple_grammar/"/>
<id>http://sj719045032.github.io/2016/03/03/simple_grammar/</id>
<published>2016-03-03T12:10:57.000Z</published>
<updated>2016-04-15T02:46:40.022Z</updated>
<content type="html"><h1 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h1><p>#一级标题</p>
<p>##二级级标题</p>
<p>###三级标题</p>
<p>####四级标题</p>
<p>#####五级标题</p>
<p>######六级标题</p>
<p>#列表</p>
<h2 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h2><ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6<br>##内部列表</li>
<li>外部<ul>
<li>内部</li>
<li>内部</li>
<li>内部</li>
</ul>
</li>
<li>外部<ul>
<li>内部</li>
<li>内部</li>
<li>内部</li>
</ul>
</li>
</ul>
<p>##有序列表</p>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<p>##引用</p>
<blockquote>
<p>这里是引用</p>
</blockquote>
<p>##图片与链接</p>
<p>###链接<br><a href="http://git.oschina.net/XuChunH/" target="_blank" rel="external">我的主页</a></p>
<p>###图片<br><img src="http://git.oschina.neploads/17/82617_XuChunH.jpg?1441725952" alt="avatar"></p>
<p>##粗体与斜体<br><strong>粗体</strong><br><em>斜体</em></p>
<p>##表格？？？<br>| Tables | Are | Cool |<br>| ————- |:————-:| —–:|<br>| col 3 is | right-aligned | $1600 |<br>| col 2 is | centered | $12 |<br>| zebra stripes | are neat | $1 |</p>
<p>##代码<br> public String s = “s”;//使用TAB键</p>
<p>##分割线</p>
<hr>
</content>
<summary type="html">
<h1 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h1><p>#一级标题</p>
<p>##二级级标题</p>
<p>###三级标题</p>
<p>####四级标题</p>
<p>#####五级标题</
</summary>
<category term="markdown" scheme="http://sj719045032.github.io/tags/markdown/"/>
</entry>
<entry>
<title>js闭包之我见</title>
<link href="http://sj719045032.github.io/2016/03/03/bibao/"/>
<id>http://sj719045032.github.io/2016/03/03/bibao/</id>
<published>2016-03-03T11:02:06.000Z</published>
<updated>2016-03-03T12:55:37.142Z</updated>
<content type="html"><p> 对于闭包，我自己有一点简单的理解</p>
<h2 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h2><p> js中函数查找变量的顺序是由内到外的，先查找函数内部的变量，再查找父函数中的变量，以此类推。</p>
<h2 id="内存回收机制"><a href="#内存回收机制" class="headerlink" title="内存回收机制"></a>内存回收机制</h2><p> 一般来说,一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了.对应的内存空间也就被回收了.</p>
<h2 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h2><p> 如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的.并且这个内部函数又使用了外部函数的某些变量的话.这种内存回收机制就会出现问题.如果在外部函数返回后,又直接调用了内部函数,那么内部函数就无法读取到他所需要的外部函数中变量的值了.所以js解释器在遇到函数定义的时候,会自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来.也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收.<br> 下面来看一下一个例子<br> java代码：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"> <span class="keyword">var</span> li=<span class="built_in">document</span>.getElementsByTagName(<span class="string">'li'</span>);</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;li.length;i++)&#123;</span><br><span class="line"> li[i].onclick=functon()&#123;</span><br><span class="line"> alert(i);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></p>
<p> html代码：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p> 运行起来，大家可能很惊讶，全都弹框输出5;因为onclick绑定的函数都引用了同一个变量i，循环执行完后i=5；最后点击按钮时，调用函数，找到变量i=5，自然输出是5。<br> 我们可以改进一下改吗如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="keyword">var</span> li = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'li'</span>);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt; li.length; i++) &#123;</span><br><span class="line"> li[i].onclick = (<span class="function"><span class="keyword">function</span> (<span class="params">j</span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> alert(j);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;)(i);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></p>
<p> 如上面的代码所示，我们用一个匿名函数，传入i然后立即执行，并且返回需要绑定到onclick事件的函数。这样返回的函数都访问到的是匿名函数传入的i的值,即j的值。这里我们就用到了闭包的特性，因为onclick事件绑定了function（）{alert（j）}，所以虽然匿名函数已经执行完并返回了函数，但是局部变量j，仍然还可能被点击事件绑定的函数，还被保存着。当点击事件发生时便执行相应的函数，得到不同的结果。</p>
</content>
<summary type="html">
<p> 对于闭包，我自己有一点简单的理解</p>
<h2 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h2><p> js中函数查找变量的顺序是由内到外的，先查找函数内部的变量，再查
</summary>
<category term="闭包 javascript" scheme="http://sj719045032.github.io/tags/%E9%97%AD%E5%8C%85-javascript/"/>
</entry>
<entry>
<title>javacript不能精确相加之0.1+0.2！=0.3</title>
<link href="http://sj719045032.github.io/2016/03/03/javacript_add/"/>
<id>http://sj719045032.github.io/2016/03/03/javacript_add/</id>
<published>2016-03-03T08:10:57.000Z</published>
<updated>2016-03-03T12:14:53.079Z</updated>
<content type="html"><p> 很久以前发现js小数相加会不精确，网上很多方法是用toFix()函数取相应位数的小数，但是我觉得这个方法不太好,自己研究了一下，可以任意个数字精确相加，代码如下<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addAcc</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"> <span class="keyword">var</span> numbers=<span class="string">''</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">arguments</span>.length==<span class="number">1</span>)&#123;<span class="comment">//判断输入参数是一个并且认为是一个数组</span></span><br><span class="line"> numbers=<span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"> numbers=<span class="built_in">Array</span>.apply(<span class="literal">null</span>, <span class="built_in">arguments</span>);<span class="comment">//将arguments对象转换成数组</span></span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">var</span> maxDecLength=<span class="number">0</span>;</span><br><span class="line"> numbers.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">i</span>) </span>&#123;<span class="comment">//找出最长的小数位数</span></span><br><span class="line"> <span class="keyword">var</span> decStr = i.toString();</span><br><span class="line"> <span class="keyword">if</span> (decStr.indexOf(<span class="string">'.'</span>) !== <span class="number">-1</span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> decLength = decStr.split(<span class="string">'.'</span>)[<span class="number">1</span>].length;</span><br><span class="line"> <span class="keyword">if</span> (decLength &gt; maxDecLength)</span><br><span class="line"> maxDecLength = decLength;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;);</span><br><span class="line"> <span class="keyword">return</span> numbers.map(<span class="function"><span class="keyword">function</span>(<span class="params">i</span>)</span>&#123;<span class="comment">//将小数转换成整数</span></span><br><span class="line"> <span class="keyword">return</span> i*<span class="built_in">Math</span>.pow(<span class="number">10</span>,maxDecLength);</span><br><span class="line"> &#125;).reduce(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;<span class="comment">//数字相加</span></span><br><span class="line"> <span class="keyword">return</span> a+b;</span><br><span class="line"> &#125;)/<span class="built_in">Math</span>.pow(<span class="number">10</span>,maxDecLength);<span class="comment">//得到最终结果</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 使用这个方法可以任意多小数相加，输入参数可以是相加数字的数字，也可以是单个的数字</p>
</content>
<summary type="html">
<p> 很久以前发现js小数相加会不精确，网上很多方法是用toFix()函数取相应位数的小数，但是我觉得这个方法不太好,自己研究了一下，可以任意个数字精确相加，代码如下<br><figure class="highlight javascript"><table><tr><t
</summary>
<category term="javascrippt" scheme="http://sj719045032.github.io/tags/javascrippt/"/>
</entry>
</feed>