-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
574 lines (360 loc) · 30.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daniel的blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Daniel的blog">
<meta property="og:type" content="website">
<meta property="og:title" content="Daniel的blog">
<meta property="og:url" content="https://danielwlam.github.io/index.html">
<meta property="og:site_name" content="Daniel的blog">
<meta property="og:description" content="Daniel的blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Daniel的blog">
<meta name="twitter:description" content="Daniel的blog">
<link rel="icon" href="https://assets-cdn.github.com/favicon.ico">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Daniel的blog</a>
</h1>
<h2 id="subtitle-wrap">
<a href="/" id="subtitle">除了前端技术，应该还会记录些生活趣事吧</a>
</h2>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">首页</a>
<a class="main-nav-link" href="/archives">全部</a>
</nav>
<nav id="sub-nav">
<a id="nav-search-btn" class="nav-icon" title="搜索"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="https://danielwlam.github.io"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-2017-08-02" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/08/02/2017-08-02/" class="article-date">
<time datetime="2017-08-02T15:49:10.745Z" itemprop="datePublished">2017-08-02</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/08/02/2017-08-02/">反思</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>好像是安逸久了，整个人懒散了，似乎是没有之前那么高要求。今天被leader痛批了一顿，原因是作品在笔记本屏幕上太丑。当时没说话，但是“顶”了一句，觉得自己情商好低。如果不能改掉这个缺陷，我永远也不可能是个适合打工的人。</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/08/02/2017-08-02/" data-id="cj5v6x481000838te1qf2el0t" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-06-13" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/06/13/2017-06-13/" class="article-date">
<time datetime="2017-06-13T15:15:21.580Z" itemprop="datePublished">2017-06-13</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/06/13/2017-06-13/">设置Image对象的src时到底发生了什么！？</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>最近在搞些数据采集方面的东西，然后打点有个常用的方法是生成Image标签，指定SRC为目标服务器的接口，即可完成打点，然而事实上，并没有后辣么简单。</p>
<p>考虑一种情况，PM需要你统计每个链接跳转的点击PV，相信聪明的你这时肯定能很快地完成这个需求：</p>
<ul>
<li>找出所有需要统计的a标签</li>
<li>preventDefault禁止默认的跳转</li>
<li>Image打点</li>
<li>location.href跳转</li>
</ul>
<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> img = <span class="keyword">new</span> Image()</div><div class="line"><span class="built_in">console</span>.log(<span class="number">123</span>)</div><div class="line">img.src = <span class="string">'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'</span></div><div class="line"><span class="built_in">console</span>.log(<span class="number">456</span>)</div><div class="line">location.href = <span class="string">'http://www.uc.cn/'</span></div></pre></td></tr></table></figure>
<blockquote>小tips： 在浏览器的控制面板，network中把preservelog开启，可以看到页面跳转前后的抓包情况</blockquote>
<p>这里我把img的src指定为了google的logo，这样可以更加清楚地看到网速的影响（之前在公司做的实验，公司网络太好，一直难以重现），我们来看看抓包的情况：<br><img src="https://user-images.githubusercontent.com/8369212/27091314-5e619b38-5092-11e7-955a-acd8824e38e7.png" alt="img"></p>
<p>可以看到，请求的google的logo被取消了，说明上面的打点方法在“网速”慢的情况下是不行的。但是到底为什么呢？</p>
<p>按照大多数人的常识， 我请求发出去了，我不需要管了呀，就像我和你隔着几十米远大喊，我已经说出去了，你听不听得到是另一回事了，我的声波已经发出去了。然而！</p>
<p>同样的事情，对于网络来说，你的声波可不一定真的发出去了。经过和小伙伴的讨论和查阅资料，这个TCP链接的建立有关。说到这里，相信很多人已经恍然大悟了。日常开发大部分场景都不怎么需要考虑这个问题，然而这里就偏偏是这个问题导致的图片被取消，请求无法建立成功。</p>
<p>具体来说就是TCP建立链接需要经过3次握手，而这3次握手需要时间短，但毕竟还是要时间的啊！问题就出在这里了。代码的执行逻辑是，当指定src时，浏览器开始建立TCP链接，发出SYN包给目标服务器，服务器收到SYN包，返回SYN+ACK包，浏览器收到，在发送ACK包，这时，TCP才建立起来，才能正常请求资源。所以，当代码逻辑在下一个语句就要进行跳转，而此时TCP的链接都还没有完全建立起来，这个资源就被cancel了。</p>
<p>有兴趣的还可以看一下chrome是在什么情况下会canceled一个请求！<a href="https://stackoverflow.com/questions/12009423/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools" target="_blank" rel="external">https://stackoverflow.com/questions/12009423/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools</a></p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/06/13/2017-06-13/" data-id="cj5v6x47l000738tem1v0022v" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-05-01" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/05/02/2017-05-01/" class="article-date">
<time datetime="2017-05-02T15:36:00.427Z" itemprop="datePublished">2017-05-02</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<h2 id="论狗作为一种生物的成功性"><a href="#论狗作为一种生物的成功性" class="headerlink" title="论狗作为一种生物的成功性"></a>论狗作为一种生物的成功性</h2><p>不要说我是个阴谋论者或者悲观论者，其实我们已经在一次新的物种大灭绝中了。相信有不少人以为物种大灭绝是像恐龙那样的瞬间的事情，但其实不是，物种灭绝是一个持续的过程。越来越多的证据表明，我们已经在这一次新的灭绝中，江豚，老虎等等。然而，在很多生物种群数量减少，甚至濒临灭绝，但有几种生物，从种群数量上来看，它们确实非常成功的生物，作为宠物的猫狗，作为人类食物来源的鸡鸭鹅等家禽，和猪牛羊等牲畜。绝大多数人是不以猫狗为食的，仅仅从这一层来说，猫狗确实是一种非常成功的生物。</p>
<p>（先占坑）</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/05/02/2017-05-01/" data-id="cj5v6x481000e38te91x7yay5" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-04-18" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/04/18/2017-04-18/" class="article-date">
<time datetime="2017-04-18T14:59:50.180Z" itemprop="datePublished">2017-04-18</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<h2 id="ES5-ES6-ES2016-ES2017都是什么跟什么"><a href="#ES5-ES6-ES2016-ES2017都是什么跟什么" class="headerlink" title="ES5, ES6, ES2016,ES2017都是什么跟什么"></a>ES5, ES6, ES2016,ES2017都是什么跟什么</h2><p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492505184940&di=cf4a363a73c43a42761151ae29fd4262&imgtype=0&src=http%3A%2F%2Fimages.cnitblog.com%2Fblog%2F608463%2F201412%2F092228155096076.png" alt=""></p>
<p>今天来聊聊这个话题。看到这对名字，相信你跟我一样，有一点疑惑了。</p>
<p>一方面，我们现在有一部分的js可以直接丢到浏览器里运行，但另一方面，我们也经常看到一些新的，改进的被叫做es6或者es2015的js，这些新版本拥有上百个新的功能，而且看起来像一门新的语言，这到底是咋回事呢？</p>
<p>好吧，信不信由你，这种现象其实由来已久。那些你可以直接丢浏览器里跑的JS其实一直都在变化，并且实际上是<a href="http://www.ecma-international.org" target="_blank" rel="external">ECMASciprt</a>的一种实现。</p>
<p>而ES2015，仅仅指的是这套标准的其中一个版本。</p>
<p>你可以在这里看到这些标准（实际上，这些标准虽然很难看，但确实很有用）</p>
<ul>
<li>ES2015或ES6（两者是一样的）— <a href="http://www.ecma-international.org/ecma-262/6.0/" target="_blank" rel="external"> http://www.ecma-international.org/ecma-262/6.0/</a></li>
<li>ES2016 — <a href="https://www.ecma-international.org/ecma-262/7.0/" target="_blank" rel="external">https://www.ecma-international.org/ecma-262/7.0/</a></li>
<li>ES2017(草案，现在还只是草稿，但之后就会变成标准了)— <a href="https://github.com/tc39/proposals" target="_blank" rel="external">https://github.com/tc39/proposals</a></li>
</ul>
<p>这些标准会随着时间自然地被淘汰，比如很久前的ES3，同时被后来的新标准兼容。你可以在<a href="http://kangax.github.io/compat-table/es5/" target="_blank" rel="external">这里</a>看到这些兼容性情况。</p>
<p>作为一个开发者，这些标准代码可以完成被编译成浏览器识别的版本，所以你完全可以使用这些最新最棒的功能，但是时刻留意关注各种不同JS版本的兼容性也是不少的工作量啊。</p>
<p>那我们应该怎么愉快地开发呢？</p>
<p>简单地来说，就是家喻户晓的<a href="https://babeljs.io/" target="_blank" rel="external">babel</a>。Babel是一个用来把新的ES标准编译成浏览器可执行版本js的工具。这以为着，你可以使用所有的ECMA标准提高的新功能，而不需要去担心浏览器是否支持这个语法。通过配置，你甚至可以直接编译ES2017的语法，然后就可以在浏览器或者node环境运行你的代码了！</p>
<p>那么问题来了，咱们要怎么用好Babel这把利剑呢？</p>
<p>或许你应该去看看babel的<a href="http://babeljs.io/docs/setup/" target="_blank" rel="external">文档</a>(￣ー￣)</p>
<p>或者我之后再开个文章来介绍一下babel的使用，那就要你对我的博客保持时刻的关注了！</p>
<p>参考链接<a href="https://medium.com/@_alexray/es2015-es6-es7-a-whole-new-javascript-23008fd28108" target="_blank" rel="external">https://medium.com/@_alexray/es2015-es6-es7-a-whole-new-javascript-23008fd28108</a></p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/04/18/2017-04-18/" data-id="cj5v6x4gt000h38te0o1c53qj" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-04-11" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/04/11/2017-04-11/" class="article-date">
<time datetime="2017-04-11T13:10:44.061Z" itemprop="datePublished">2017-04-11</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/04/11/2017-04-11/">一道笔试题考察reduce和valueOf，toString</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>题目：编写一个函数能返回以下结果：</p>
<p>add(1)(2) // 3<br>add(1, 2, 3)(4) // 10<br>add(1)(2)(3)(4) // 10</p>
<p>这个题，其实要满足第一，二种情况还是比较简单，如下：<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></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span> (<span class="params">...args</span>) </span>{</div><div class="line"> <span class="keyword">let</span> sum = args.reduce(<span class="function">(<span class="params">a, b</span>) =></span> a + b)</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">..._args</span>) </span>{</div><div class="line"> <span class="keyword">return</span> _args.reduce(<span class="function">(<span class="params">a, b</span>) =></span> a + b, sum)</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>但真正的难点在于第三种情况，怎么样让这个add函数既返回闭包，又返回值呢？在看了一些资料后，发现要用上函数的valueOf或toString，直接上代码吧：<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></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">...args</span>) </span>{</div><div class="line"> <span class="function"><span class="keyword">function</span> <span class="title">_add</span>(<span class="params">..._args</span>) </span>{</div><div class="line"> <span class="keyword">return</span> add.apply(<span class="keyword">this</span>, args.concat(_args))</div><div class="line"> }</div><div class="line"> _add.valueOf = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">let</span> sum = args.reduce(<span class="function">(<span class="params">a, b</span>) =></span> a + b)</div><div class="line"> <span class="keyword">return</span> args.reduce(<span class="function">(<span class="params">a, b</span>) =></span> a + b)</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> _add;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>首先要说明的是对于函数，valueOf的优先级比toString高。代码行数不多，但其实里面考察的知识挺多的，一个是函数的valueOf和toString，这个大家可以动手试试直接把valueOf返回一个值，当这个函数没有返回值的时候，就是调用的valueOf，而同时设置valueOf或者toString，则以valueOf为准，也就是优先级更高。</p>
<p>另外考察了reduce的玩法，最近看的redux源码也是把reduce这个方法玩得很溜，用来做函数柯里化的利器。</p>
<p>最后考察的当然就是闭包了，还有apply的使用，这里-add闭包return时使用的是apply，就很巧妙地把处理过的形参作为apply的参数传递过去了，而不至于后面的运算形成多维数组。</p>
<p>真的很巧妙，建议自己思考一下！！</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/04/11/2017-04-11/" data-id="cj5v6x481000d38teurev1k20" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-妙语1" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/04/06/妙语1/" class="article-date">
<time datetime="2017-04-06T13:08:12.433Z" itemprop="datePublished">2017-04-06</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/04/06/妙语1/">妙语壹</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>成功的人大抵相同，失败的人也大都相似</p>
</blockquote>
<p>这个《妙语》系列，主要用来记录日常脑子里迸出来的，自己觉得有意思的词、句、文。</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/04/06/妙语1/" data-id="cj5v6x481000f38tepciivpep" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-03-23" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/03/23/2017-03-23/" class="article-date">
<time datetime="2017-03-23T14:48:34.055Z" itemprop="datePublished">2017-03-23</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/03/23/2017-03-23/">Javascript生成笛卡尔积简便方法</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>这两天遇到个需求，就是求笛卡尔积，这玩意在纸上写简单，在代码里，就不那么容易想了，老是想到for循环，这定势思维也是醉了。</p>
<p>这里引用一下这位大神的<a href="http://cwestblog.com/2011/05/02/cartesian-product-of-multiple-arrays/" target="_blank" rel="external">博客</a>，实现非常简单：</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></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">combine</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="built_in">Array</span>.prototype.reduce.call(<span class="built_in">arguments</span>, <span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>{</div><div class="line"> <span class="keyword">var</span> ret = [];</div><div class="line"> a.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">a</span>) </span>{</div><div class="line"> b.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">b</span>) </span>{</div><div class="line"> ret.push(a.concat([b]))</div><div class="line"> })</div><div class="line"> });</div><div class="line"> <span class="keyword">return</span> ret;</div><div class="line"> }, [[]])</div><div class="line">}</div></pre></td></tr></table></figure>
<p>突然感觉啊，很多API虽然大多数情况，用不上，但是关键时刻，想一想还是挺巧妙的。</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/03/23/2017-03-23/" data-id="cj5v6x481000b38tet5zldpev" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-03-16" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/03/16/2017-03-16/" class="article-date">
<time datetime="2017-03-16T14:37:57.048Z" itemprop="datePublished">2017-03-16</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/03/16/2017-03-16/">JS继承小感</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>事实上，我并不是想长篇大论地说什么继承的实现，而是想聊点别的。</p>
<p>我们知道，es6推出已经快2年了，class属性也在很多很多地方大放异彩，比如react等等。即使是自己要造些轮子，你可能也不会再像es5时代那样，自己去做封装了。我想，这时技术发展的一个必然趋势。</p>
<p>然而，问题在于，当你越来越多地使用新特性（语法糖），而且，这些新语法确确实实比以前方便了很多很多很多，还是举class为例子，实现一个继承仅仅几个关键字extends, constructor, super。 你还记得es5要怎么做吗？先不说实现继承的集中方法了，什么原型式继承，组合继承，寄生继承，寄生组合继承一堆东西，即使是实现一个构造函数的封装，也是够麻烦的。我想说的是，我们总有一天会遗忘这些旧知识，拥抱新的知识，那这些知识我们还需要去学习，需要时常去复习吗？</p>
<p>我知道我问了一似乎很蠢的问题。这个问题没有标准的答案，起码目前来说。但我相信，给点时间，这些早晚不需要再去了解。打个并不十分恰当的比方，以前有汇编这种比较底层的语言，也有C这种高级语言，我想那个时候的程序员们应该也有类似的疑问，“我要不要去明白原理？”。但是放到今天来，我不能说百分百，但是起码绝大部分人，不需要理解原理，依然能用得好好的。</p>
<p>胡说了一堆，其实只是因为今天自己对这方面的知识又有点忘了。人都是懒的，不管怎样，拥抱未来吧。</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/03/16/2017-03-16/" data-id="cj5v6x481000a38tei6i9cc0n" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-02-13" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/02/13/2017-02-13/" class="article-date">
<time datetime="2017-02-13T13:40:42.692Z" itemprop="datePublished">2017-02-13</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/02/13/2017-02-13/">2017-02-13工作小结</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>周末跑脚本，跑了72小时还没跑完。本地脚本，请求web服务器，再请求数据服务器，非常慢。。。另外两个脚本是弄NAPI的追尾数据，更新一些数据。中途断了一次，在for循环中好好的就断开了，没有catch到错误信息，发现用co来搞开发，catch的时候很多语法错误这些catch不到，在调试错误的时候浪费了时间。</p>
<p>另外，打算有空优化一下数据库，说实话，现在select count一个表80+万的数据，要13秒。。这速度是绝对不能忍受的。虽然已经有redis做了缓存，但这查询速度是不允许存在的，这么慢。明明建立了索引，但是explain的时候，并没有使用到索引。深深地怀疑索引建立得有问题！</p>
<p>看看明天数据跑下来没有。要开始部署上线的统计模块了！</p>
<p>另外，今天自己搞了个小需求来做，顺便复习了一下deku+redux的开发模式。差点都忘了呢！一定要前后端兼顾！</p>
<p>最后一句鸡汤：当你感觉不舒服的时候，就是你成长的时候。</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/02/13/2017-02-13/" data-id="cj5v6x4ho000j38teqzdmrgat" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-2017-02-08" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/02/08/2017-02-08/" class="article-date">
<time datetime="2017-02-08T15:36:07.266Z" itemprop="datePublished">2017-02-08</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/02/08/2017-02-08/">IOS click事件</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>算是IOS的bug吧，如果不用fastclick之类的工具来处理，想用原生click事件，如果不是a标签或者input标签，click事件不能冒泡到body上。解决方法：</p>
<ol>
<li>事件直接绑定到元素上。</li>
<li>要冒泡的元素加上cursor:pointer;</li>
<li>监听的元素改成body内的其它父元素。</li>
</ol>
<p>显然，2，3方法比较适用于实际情况。</p>
<p>另外，据说IOS8以后click事件已经没有那300ms的延时？待鉴定呢！</p>
</div>
<footer class="article-footer">
<a data-url="https://danielwlam.github.io/2017/02/08/2017-02-08/" data-id="cj5v6x47g000238terifkg2gb" class="article-share-link">Share</a>
</footer>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">__('next') »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">八月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">五月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">四月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">二月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">一月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">十二月 2016</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">最新文章</h3>
<div class="widget">
<ul>
<li>
<a href="/2017/08/02/2017-08-02/">反思</a>
</li>
<li>
<a href="/2017/06/13/2017-06-13/">设置Image对象的src时到底发生了什么！？</a>
</li>
<li>
<a href="/2017/05/02/2017-05-01/">(no title)</a>
</li>
<li>
<a href="/2017/04/18/2017-04-18/">(no title)</a>
</li>
<li>
<a href="/2017/04/11/2017-04-11/">一道笔试题考察reduce和valueOf，toString</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2017 Daniel Lam<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">首页</a>
<a href="/archives" class="mobile-nav-link">全部</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
<!--友盟统计-->
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261171771'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1261171771%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>