-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
588 lines (440 loc) · 121 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
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Who am i?</title>
<subtitle>saver</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://topgrd.me/"/>
<updated>2017-12-04T12:19:42.208Z</updated>
<id>http://topgrd.me/</id>
<author>
<name>topgrd</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Tracking.js Javascript的计算机视觉库</title>
<link href="http://topgrd.me/2017/12/04/tracking/"/>
<id>http://topgrd.me/2017/12/04/tracking/</id>
<published>2017-12-03T16:00:00.000Z</published>
<updated>2017-12-04T12:19:42.208Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>惭愧惭愧，距离上次写博客已经很久很久了。 </p>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>tracking.js库将不同的计算机视觉算法和技术带入浏览器环境。通过使用现代HTML5规范，让你能够进行实时的颜色跟踪，人脸检测等等。所有这些都使用轻量级核心（〜7 KB）和直观的界面。<br><a id="more"></a> </p>
<h2 id="快速使用"><a href="#快速使用" class="headerlink" title="快速使用"></a>快速使用</h2><p>首先，从官方给的链接里将<a href="https://github.com/eduardolundgren/tracking.js/archive/master.zip" target="_blank" rel="external">trackingjs</a>库下载下来,引入到你的html文件中。如果需要进行人脸识别的话，还需引入下载源文件夹下<code>build/data</code>下的几个文件，如下图所示。<br><img src="/img/trackCode1.png" alt="code1"><br>当然，现代化前端开发是可能需要使用ES6的<code>import</code>方式引入的，这样需要改下源码，因为tracking.js目前还不支持模块化。首先通过<code>npm install tracking</code>安装，然后从node_modules中找到名为tracking的包，修改build下tracking.js文件，在最后加一行加上: <code>module.exports = window.tracking</code>。这样你就可以在你的js文件中<code>import tracking from 'tracking'</code>了😁。不过注意，文章下面的示例都是使用html引入为例的。<br>在图中，我们还创建了一个class为continer的元素，并在这个父元素中放了2个img元素，这两个img就是我们需要识别的图像。<br><img src="/img/google2.png" alt="google"><br><img src="/img/faces.jpg" alt="faces"><br>第一个我们引入了Google的logo的图片，用来进行颜色跟踪。<br>第二个是张人脸图片，用来进行人脸识别。<br>在这里，我们想要跟踪Google logo中蓝色和黄色以及品红色并将它们标记出来。代码很简单:<br><img src="/img/trackCode2.png" alt="code2"><br>首先获取container父元素，后面创建识别区域时需要用到，再获取目标图片元素节点。<br>因为tracking.js默认支持识别的基础颜色为 [‘magenta’, ‘cyan’, ‘yellow’]，所以我们需要自己去ColorTracker的所提供的registerColor接口注册蓝色的rgb范围。registerColor第一个参数为注册颜色的名称，第二个参数是个匿名函数，函数的参数分别对应RGB色值的R, G, B。在函数里判断rgb范围是否是你需要识别的颜色范围，根据返回的布尔值确定。<br>实力例化一个colorTrakcer对象并将所要跟踪颜色的名称数组传入，然后利用track方法识别目标图片，并传入实例化对象。<br>tracking.js内部实现track是使用的事件模式，所以需要监听track事件，并在回调函数里进行处理。它会将所识别的结果赋给回调函数第一个参数的data属性。我们识别Google logo的data：<br><img src="/img/t1.png" alt="t1"><br>返回结果里包含了识别区域的宽高和原点位置，所以我们就可以根据其将识别出的区域标记出来。由于Google logo中没有品红色，所以没有相关区域。<br><img src="/img/t2.png" alt="t2"><br>人脸识别和颜色识别的代码差别不大，API基本一致，不过需要实例化的对象是ObjectTracker，传入的数组可以是[‘face’, ‘eye’, ‘mouth’]，我们这里选择识别face和eye，代码如下：<br><img src="/img/trackCode3.png" alt="code3"><br>识别结果准确度还是蛮高的。<br><img src="/img/t3.png" alt="t3"></p>
]]></content>
<summary type="html">
<p>惭愧惭愧，距离上次写博客已经很久很久了。 </p>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>tracking.js库将不同的计算机视觉算法和技术带入浏览器环境。通过使用现代HTML5规范，让你能够进行实时的颜色跟踪，人脸检测等等。所有这些都使用轻量级核心（〜7 KB）和直观的界面。<br>
</summary>
</entry>
<entry>
<title>手动实现一个VirtualDom</title>
<link href="http://topgrd.me/2017/05/17/virtualdom/"/>
<id>http://topgrd.me/2017/05/17/virtualdom/</id>
<published>2017-05-16T16:00:00.000Z</published>
<updated>2017-06-15T03:01:38.245Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h2 id="什么是virtualdom"><a href="#什么是virtualdom" class="headerlink" title="什么是virtualdom"></a>什么是virtualdom</h2><p>virtualdom 中文翻译过来是虚拟Dom，它的意思是指使用 JavaScript 实现一个dom树的结构，即用 JavaScript对象标识Dom结构，插到文档中。有什么用呢，在我们过去更新一个dom节点时，我们会使用JS的dom相关api去操作浏览器元素节点，这样无疑对性能是有一定的负担的，但是使用虚拟Dom后，我们只需要在浏览器内存中维护一颗JavaScript树结构对象，当Dom需要更新时，在内存中重新建立一颗新的树，记录2个树的差异得到patch，然后将这个patch更新到页面的树结构对象上，从而更新视图。<br>在React，Vue等框架中都实现了 VirtualDom，以为它比操作原生Dom要快，对于VirtualDom而言，树上的节点不是元素节点，而是Components。 </p>
<a id="more"></a>
<h3 id="1-vnode"><a href="#1-vnode" class="headerlink" title="1.vnode"></a>1.vnode</h3><p>vnode即虚拟的dom节点，通常我们普通的dom节点如下<br><figure class="highlight html"><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="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"vn"</span>></span></div><div class="line"> <span class="tag"><<span class="name">ul</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</span>></span>hello<span class="tag"></<span class="name">li</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</span>></span>world<span class="tag"></<span class="name">li</span>></span></div><div class="line"> <span class="tag"></<span class="name">ul</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure></p>
<p>我们可以使用js来模拟这个dom结构<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><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="keyword">let</span> vd = {</div><div class="line"> <span class="attr">nodename</span>: <span class="string">'div'</span>,</div><div class="line"> <span class="attr">attributes</span>: {</div><div class="line"> <span class="attr">id</span>: <span class="string">'vn'</span></div><div class="line"> },</div><div class="line"> <span class="attr">children</span>: [</div><div class="line"> {</div><div class="line"> <span class="attr">nodename</span>: <span class="string">'ul'</span>,</div><div class="line"> <span class="attr">children</span>: [</div><div class="line"> {</div><div class="line"> <span class="attr">nodename</span>: <span class="string">'li'</span>,</div><div class="line"> <span class="attr">children</span>: [</div><div class="line"> <span class="string">'hello'</span></div><div class="line"> ]</div><div class="line"> },</div><div class="line"> {</div><div class="line"> <span class="attr">nodename</span>: <span class="string">'li'</span>,</div><div class="line"> <span class="attr">children</span>: [</div><div class="line"> <span class="string">'world'</span></div><div class="line"> ]</div><div class="line"> }</div><div class="line"> ]</div><div class="line"> }</div><div class="line"> ]</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>这样，就将真实dom的所有信息都标识出来了。</p>
<h3 id="2-render函数"><a href="#2-render函数" class="headerlink" title="2.render函数"></a>2.render函数</h3><p>有了vnode，下一步就是渲染了。<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> render = <span class="function"><span class="keyword">function</span> <span class="title">render</span>(<span class="params">vnode</span>) </span>{</div><div class="line"> <span class="comment">// 如果子节点类型是文本，就创建文本节点</span></div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> vnode === <span class="string">'string'</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="built_in">document</span>.createTextNode(vnode)</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">let</span> node = <span class="built_in">document</span>.createElement(vnode.nodename)</div><div class="line"> <span class="comment">// 判断vnode里的attributes里的是property还是attribute</span></div><div class="line"> diffProps(node, vnode)</div><div class="line"></div><div class="line"> vnode.children.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">child</span>) </span>{</div><div class="line"> node.appendChild(render(child))</div><div class="line"> })</div><div class="line"> <span class="keyword">return</span> node</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>在真实dom节点里，property和attribute不是一回事，所以我们需要有一个函数来判断attributes里的key值是property还是attribute<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"><span class="keyword">const</span> diffProps = <span class="function"><span class="keyword">function</span> <span class="title">diffProps</span>(<span class="params">node, vnode</span>) </span>{</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> name <span class="keyword">in</span> vnode.attributes) {</div><div class="line"> <span class="keyword">let</span> value = vnode.attributes[name]</div><div class="line"> <span class="comment">// 如果node里有这个name，表示它是property</span></div><div class="line"> <span class="keyword">if</span> (name <span class="keyword">in</span> node) {</div><div class="line"> node[name] = value</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> node.setAttribute(name, value)</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>ok，render函数算是完成了，让我们来用一下，看看它能否正常工作<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"><span class="keyword">var</span> vdom = render(vd)</div><div class="line"><span class="built_in">document</span>.body.appendChild(vdom)</div></pre></td></tr></table></figure></p>
<p>output:<br><img src="/img/virtualdom.png" alt="vd"><br>good work!😁</p>
]]></content>
<summary type="html">
<h2 id="什么是virtualdom"><a href="#什么是virtualdom" class="headerlink" title="什么是virtualdom"></a>什么是virtualdom</h2><p>virtualdom 中文翻译过来是虚拟Dom，它的意思是指使用 JavaScript 实现一个dom树的结构，即用 JavaScript对象标识Dom结构，插到文档中。有什么用呢，在我们过去更新一个dom节点时，我们会使用JS的dom相关api去操作浏览器元素节点，这样无疑对性能是有一定的负担的，但是使用虚拟Dom后，我们只需要在浏览器内存中维护一颗JavaScript树结构对象，当Dom需要更新时，在内存中重新建立一颗新的树，记录2个树的差异得到patch，然后将这个patch更新到页面的树结构对象上，从而更新视图。<br>在React，Vue等框架中都实现了 VirtualDom，以为它比操作原生Dom要快，对于VirtualDom而言，树上的节点不是元素节点，而是Components。 </p>
</summary>
</entry>
<entry>
<title>Windows下使用Headless Chrome</title>
<link href="http://topgrd.me/2017/04/26/headless-Chrome/"/>
<id>http://topgrd.me/2017/04/26/headless-Chrome/</id>
<published>2017-04-25T16:00:00.000Z</published>
<updated>2017-04-27T02:07:06.101Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>google在4月的时候宣布他们将在chrome 59中支持headless模式，headless模式即chrome会以一种静默的模式启动，他不会启用界面，但是他在后台的行为与正常浏览器一样。 </p>
<h2 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h2><p>安装一个支持headless的chrome版本，我使用的是chrome canary，是chrome的实验版本，新的特性一版都会最新添加在里面。 </p>
<h2 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h2><p>最简单的启动方式是在桌面上右键chrome，然后在目标后面添加<code>--headless --remote-debugging-port=9222 --disable-gpu https://chromium.org</code>,然后右键，这样chrome就在后台以headless模式运行了，并且监听的9222端口。或者使用命令行的方式打开 在后面添加刚才的参数 </p>
<h2 id="使用chrome-remote-interface"><a href="#使用chrome-remote-interface" class="headerlink" title="使用chrome-remote-interface"></a>使用chrome-remote-interface</h2><p>使用npm的包<a href="https://github.com/cyrus-and/chrome-remote-interface" target="_blank" rel="external">chrome-remote-interface</a>会让我们更方便的完成想要的操作，它允许使用配置远程链接chrome，然后调用api（chrome debugger-protocol）去操作。<br><a id="more"></a></p>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><p>以下代码完成了3个操作，分别调用了Network Page Console，主要的功能是监听console.messageAdded事件，一旦console有消音添加，会在cmd/bash中打印<br>，打印网络请求，打印页面img的属性。<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><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> CDP = <span class="built_in">require</span>(<span class="string">"chrome-remote-interface"</span>)</div><div class="line"></div><div class="line">CDP(<span class="function"><span class="params">chrome</span> =></span> {</div><div class="line"> <span class="keyword">const</span> { Network, Page, Console } = chrome</div><div class="line"></div><div class="line"> Network.requestWillBeSent(<span class="function"><span class="params">params</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.log(params.request.url)</div><div class="line"> })</div><div class="line"></div><div class="line"> chrome.on(<span class="string">"Console.messageAdded"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">message</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(message.message.text)</div><div class="line"> })</div><div class="line"></div><div class="line"> <span class="built_in">Promise</span>.all([Network.enable(), Page.enable(), Console.enable()])</div><div class="line"> .then(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">return</span> Page.navigate({</div><div class="line"> <span class="attr">url</span>: <span class="string">"http://topgrd.me"</span></div><div class="line"> })</div><div class="line"> })</div><div class="line"> .then(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> chrome.DOM.getDocument(<span class="function">(<span class="params">error, params</span>) =></span> {</div><div class="line"> <span class="keyword">if</span> (error) {</div><div class="line"> <span class="built_in">console</span>.error(params)</div><div class="line"> <span class="keyword">return</span></div><div class="line"> }</div><div class="line"> <span class="keyword">const</span> options = {</div><div class="line"> <span class="attr">nodeId</span>: params.root.nodeId,</div><div class="line"> <span class="attr">selector</span>: <span class="string">"img"</span></div><div class="line"> }</div><div class="line"> chrome.DOM.querySelectorAll(options, (error, params) => {</div><div class="line"> <span class="keyword">if</span> (error) {</div><div class="line"> <span class="built_in">console</span>.error(params)</div><div class="line"> <span class="keyword">return</span></div><div class="line"> }</div><div class="line"> <span class="built_in">console</span>.log(params)</div><div class="line"> params.nodeIds.forEach(<span class="function"><span class="params">nodeId</span> =></span> {</div><div class="line"> <span class="keyword">const</span> options = {</div><div class="line"> <span class="attr">nodeId</span>: nodeId</div><div class="line"> }</div><div class="line"> chrome.DOM.getAttributes(options, (error, params) => {</div><div class="line"> <span class="keyword">if</span> (error) {</div><div class="line"> <span class="built_in">console</span>.error(params)</div><div class="line"> <span class="keyword">return</span></div><div class="line"> }</div><div class="line"> })</div><div class="line"> })</div><div class="line"> })</div><div class="line"> })</div><div class="line"> }, <span class="number">5000</span>)</div><div class="line"> })</div><div class="line"> .catch(<span class="function"><span class="params">err</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.error(err)</div><div class="line"> chrome.close()</div><div class="line"> })</div><div class="line">}).on(<span class="string">"error"</span>, err => {</div><div class="line"> <span class="built_in">console</span>.error(err)</div><div class="line">})</div></pre></td></tr></table></figure></p>
<h2 id="可以做什么"><a href="#可以做什么" class="headerlink" title="可以做什么"></a>可以做什么</h2><p>chrome的headless模式可以让我们完成爬虫，自动化测试等相关功能。</p>
]]></content>
<summary type="html">
<p>google在4月的时候宣布他们将在chrome 59中支持headless模式，headless模式即chrome会以一种静默的模式启动，他不会启用界面，但是他在后台的行为与正常浏览器一样。 </p>
<h2 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h2><p>安装一个支持headless的chrome版本，我使用的是chrome canary，是chrome的实验版本，新的特性一版都会最新添加在里面。 </p>
<h2 id="启动"><a href="#启动" class="headerlink" title="启动"></a>启动</h2><p>最简单的启动方式是在桌面上右键chrome，然后在目标后面添加<code>--headless --remote-debugging-port=9222 --disable-gpu https://chromium.org</code>,然后右键，这样chrome就在后台以headless模式运行了，并且监听的9222端口。或者使用命令行的方式打开 在后面添加刚才的参数 </p>
<h2 id="使用chrome-remote-interface"><a href="#使用chrome-remote-interface" class="headerlink" title="使用chrome-remote-interface"></a>使用chrome-remote-interface</h2><p>使用npm的包<a href="https://github.com/cyrus-and/chrome-remote-interface">chrome-remote-interface</a>会让我们更方便的完成想要的操作，它允许使用配置远程链接chrome，然后调用api（chrome debugger-protocol）去操作。<br>
</summary>
</entry>
<entry>
<title>曲线救国之SVN客户端钩子</title>
<link href="http://topgrd.me/2017/04/17/svnhook/"/>
<id>http://topgrd.me/2017/04/17/svnhook/</id>
<published>2017-04-16T16:00:00.000Z</published>
<updated>2017-04-27T02:17:54.369Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>此方法使用于没有权限到SVN仓库服务器设置钩子。 </p>
<h2 id="How-to-do"><a href="#How-to-do" class="headerlink" title="How to do"></a>How to do</h2><p>首先客户端的hook是在TortoiseSVN里支持的，所以得先安装TortoiseSVN，我相信使用SVN的大部分人都安装了这个软件。然后在TortoiseSVN的设置里找到hook script。<br><img src="/img/setting.png" alt="set"><br>然后点击add添加自己的脚本 </p>
<a id="more"></a>
<p><img src="/img/hook.png" alt="script"><br>这里选择的是脚本执行的时机，具体可以查看文档<a href="https://tortoisesvn.net/docs/nightly/TortoiseSVN_zh_CN/tsvn-dug-settings.html" target="_blank" rel="external">doc</a><br>我这里是使用了node脚本，并选择在开始提交前执行，当然，你也可以选择执行你自己熟悉的语言写的脚本，如java, c, Python等.<br><img src="/img/sethook.png" alt="sethook"><br>上图中 我设置了开始提交前执行，用node执行index.js来进行代码检查（eslint）工作，并勾选等待脚本执行结束和总是执行此脚本，那么以后只要我对work目录下的文件进行提交，那么提交开始前它都会执行我的代码检查脚本。 然后你也可以设置提交代码后执行脚本发送邮件通知等功能。至于脚本怎么写我就不具体描述了。效果如图<br><img src="/img/em.png" alt="preview"> </p>
]]></content>
<summary type="html">
<p>此方法使用于没有权限到SVN仓库服务器设置钩子。 </p>
<h2 id="How-to-do"><a href="#How-to-do" class="headerlink" title="How to do"></a>How to do</h2><p>首先客户端的hook是在TortoiseSVN里支持的，所以得先安装TortoiseSVN，我相信使用SVN的大部分人都安装了这个软件。然后在TortoiseSVN的设置里找到hook script。<br><img src="/img/setting.png" alt="set"><br>然后点击add添加自己的脚本 </p>
</summary>
</entry>
<entry>
<title>Vue总结</title>
<link href="http://topgrd.me/2016/12/22/vue/"/>
<id>http://topgrd.me/2016/12/22/vue/</id>
<published>2016-12-21T16:00:00.000Z</published>
<updated>2017-04-27T02:02:52.347Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h1 id="在使用Vue-ElementUI-Vuex-Vue-Router中遇到的问题以及解决"><a href="#在使用Vue-ElementUI-Vuex-Vue-Router中遇到的问题以及解决" class="headerlink" title="在使用Vue+ElementUI+Vuex+Vue-Router中遇到的问题以及解决"></a>在使用Vue+ElementUI+Vuex+Vue-Router中遇到的问题以及解决</h1><p>初学Vue，直接实战，目前为止遇到一些问题总结。 </p>
<ul>
<li>使用vue-cli最新版本时，执行<code>npm run dev</code>出现错误，执行<code>npm run build</code>无错。研究cmd的错误提示以及源码中build文件夹下的代码，最后在其中的<code>dev-server.js</code>中打印了<code>process.env.NODE_ENV</code>信息，结果显示<code>production</code>。修改<code>package.json</code>文件scripts中的配置<code>"dev": "set NODE_ENV=development&&node build/dev-server.js",</code> 开发模式正常执行。 </li>
<li>使用v-for时，不能在一个组件template的根元素上绑定。 </li>
<li><p>做IE兼容，Vuex在IE下需要ES6的promoise的polyfill。 执行<code>npm i babel-polyfill -D</code>，修改webpack.base.conf.js </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></pre></td><td class="code"><pre><div class="line">entry: {</div><div class="line"> <span class="attr">app</span>: [<span class="string">'babel-polyfill'</span>, <span class="string">'./src/main.js'</span>]</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>Vue2中props不能设置双向绑定，防止对父组件产生反向影响，所以要是子组件的数据变化影响父组件中的数据，可以使用Vue自带的自定义事件来解决，使用v-on来绑定，使用$emit触发，在v-on绑定自定义事件时，可以将$event作为最后一个参数传入。 </p>
</li>
</ul>
<a id="more"></a>
<ul>
<li>当一个列表组件中数据是通过ajax异步请求的时候，会发现即使将方法写在生命周期created方法中时，第一次进入页面时此组件也没有渲染，这时候可以使用v-if控制显示，在ajax请求的时候，定义一个state属性isFetching为false，并让v-if绑定此值。当数据获取到后通过Vuex将其改为true，这样就不会出现页面没有渲染组件的情况。在ajax请求过程中可使用一个提示加载中的UI组件. </li>
<li>当你使用了Vuex时,修改state中的数据时，不能直接通过赋值来修改，而是通过dispatch action来修改状态，并且在Vuex中修改一个数组的数据时，是不能直接赋值修改的。由于 JavaScript 的限制， Vue 不能检测以下变动的数组，所以可以使用splice修改来达到watch的效果。<br><a href="https://cn.vuejs.org/v2/guide/list.html#注意事项" target="_blank" rel="external">注意事项</a><br>（未完待续） </li>
</ul>
<p>个人认为如果你接触过React那一套和Angular，学习Vue成本很低。因为Vue有很多其他框架的一些特性，响应式组件化思想，Angular的指令，template，React的虚拟DOM，Vuex和Redux也是相同的思想，React需要用JSX写，但Vue则拥抱html。</p>
]]></content>
<summary type="html">
<h1 id="在使用Vue-ElementUI-Vuex-Vue-Router中遇到的问题以及解决"><a href="#在使用Vue-ElementUI-Vuex-Vue-Router中遇到的问题以及解决" class="headerlink" title="在使用Vue+ElementUI+Vuex+Vue-Router中遇到的问题以及解决"></a>在使用Vue+ElementUI+Vuex+Vue-Router中遇到的问题以及解决</h1><p>初学Vue，直接实战，目前为止遇到一些问题总结。 </p>
<ul>
<li>使用vue-cli最新版本时，执行<code>npm run dev</code>出现错误，执行<code>npm run build</code>无错。研究cmd的错误提示以及源码中build文件夹下的代码，最后在其中的<code>dev-server.js</code>中打印了<code>process.env.NODE_ENV</code>信息，结果显示<code>production</code>。修改<code>package.json</code>文件scripts中的配置<code>&quot;dev&quot;: &quot;set NODE_ENV=development&amp;&amp;node build/dev-server.js&quot;,</code> 开发模式正常执行。 </li>
<li>使用v-for时，不能在一个组件template的根元素上绑定。 </li>
<li><p>做IE兼容，Vuex在IE下需要ES6的promoise的polyfill。 执行<code>npm i babel-polyfill -D</code>，修改webpack.base.conf.js </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></pre></td><td class="code"><pre><div class="line">entry: &#123;</div><div class="line"> <span class="attr">app</span>: [<span class="string">'babel-polyfill'</span>, <span class="string">'./src/main.js'</span>]</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>Vue2中props不能设置双向绑定，防止对父组件产生反向影响，所以要是子组件的数据变化影响父组件中的数据，可以使用Vue自带的自定义事件来解决，使用v-on来绑定，使用$emit触发，在v-on绑定自定义事件时，可以将$event作为最后一个参数传入。 </p>
</li>
</ul>
</summary>
</entry>
<entry>
<title>Functional Programing（二)</title>
<link href="http://topgrd.me/2016/12/01/FP2/"/>
<id>http://topgrd.me/2016/12/01/FP2/</id>
<published>2016-11-30T16:00:00.000Z</published>
<updated>2017-04-27T02:24:30.014Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h2 id="Functor"><a href="#Functor" class="headerlink" title="Functor"></a>Functor</h2><h3 id="Container"><a href="#Container" class="headerlink" title="Container"></a>Container</h3><p>创建一个容器Container,里面可以存储任意值<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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Container</span>(<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.__value = x</div><div class="line">}</div></pre></td></tr></table></figure></p>
<a id="more"></a>
<p>但是我们如果创建一个容器，每次都需要写new，可以创建一个of函数来避免。<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></pre></td><td class="code"><pre><div class="line">Container.of = <span class="function"><span class="keyword">function</span> (<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> Container(x)</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>这样，如果构造一个新的容器，则只需要<code>Container.of(x)</code>就行了。 如果容器中有了值，我们需要一个方法能够操作这个值。<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></pre></td><td class="code"><pre><div class="line">Container.prototype.map = <span class="function"><span class="keyword">function</span> (<span class="params">f</span>) </span>{</div><div class="line"> <span class="keyword">return</span> Container.of(f(<span class="keyword">this</span>.__value))</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>利用map方法，将想要操作这个值的方法传递进去，操作容器内的值，并返回一个新的容器和操作后的值。</p>
]]></content>
<summary type="html">
<h2 id="Functor"><a href="#Functor" class="headerlink" title="Functor"></a>Functor</h2><h3 id="Container"><a href="#Container" class="headerlink" title="Container"></a>Container</h3><p>创建一个容器Container,里面可以存储任意值<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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Container</span>(<span class="params">x</span>) </span>&#123;</div><div class="line"> <span class="keyword">this</span>.__value = x</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
</summary>
</entry>
<entry>
<title>Functional Programing（一)</title>
<link href="http://topgrd.me/2016/11/24/FP1/"/>
<id>http://topgrd.me/2016/11/24/FP1/</id>
<published>2016-11-23T16:00:00.000Z</published>
<updated>2017-05-17T06:58:04.980Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>最近看了函数式编程，传统方式上我们一般是命令式编程，而FP是一种完全不同的编程思想， 他会让你拥有不同的编程体验。<br>在数学上，我们定义一个函数y=f(x)或者y=f(g(x))。当我们输入固定的x值时，函数y的值是一定的。而函数式编程即是这么一种风格，它强调副作用最小，鼓励使用不可变数据和纯函数。在如今的js界，函数式编程变的越来越留下。redux，immutable，Rxjs等都是函数式编程的实践。 </p>
<a id="more"></a>
<h2 id="纯函数"><a href="#纯函数" class="headerlink" title="纯函数"></a>纯函数</h2><p>何谓纯函数？就是同样的输入，结果永远保持不变（immutable），非纯函数，则同样的输入会导致不同的结果。 在javascript的原生方法中，数组的splice就是非纯函数，因为它会改变原始数组，并将结果返回。而slice则是纯函数，因为它不会改变原始数组，它返回的是新的数组（原数组的副本）。纯函数是不会修改变量，它每次返回都是新的变量或者原始变量的拷贝，他不会修改系统变量，没有副作用。 </p>
<h2 id="函数柯里化-curry"><a href="#函数柯里化-curry" class="headerlink" title="函数柯里化 curry"></a>函数柯里化 curry</h2><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"><span class="keyword">const</span> f1 = <span class="function">(<span class="params">x, y</span>) =></span> x * y;</div><div class="line"><span class="comment">// 柯里化：</span></div><div class="line"><span class="keyword">const</span> f2 => <span class="function"><span class="params">x</span> =></span> (<span class="function"><span class="params">y</span>=></span> x * y);</div><div class="line"><span class="comment">// example</span></div><div class="line"><span class="keyword">const</span> add = <span class="function"><span class="params">x</span> =></span> (<span class="function"><span class="params">y</span> =></span> x+y);</div><div class="line"><span class="keyword">const</span> add2 = add(<span class="number">2</span>);</div><div class="line"><span class="keyword">let</span> result = add2(<span class="number">4</span>); <span class="comment">// 6</span></div></pre></td></tr></table></figure></p>
<p>上面的例子中我们将函数f1柯里化为f2，f2接受第一个参数x会返回一个函数 <code>x * y</code>，如add2返回的是2 + y，第二次传入y得到最后结果。<br>使用lodash中的curry<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> { curry } <span class="keyword">from</span> <span class="string">'lodash'</span>;</div><div class="line"><span class="keyword">const</span> mutiply = curry(<span class="function">(<span class="params">x, y</span>) =></span> x * y);</div><div class="line"><span class="keyword">const</span> mutiply4 = mutiply(<span class="number">4</span>);</div><div class="line"><span class="keyword">let</span> result = mutiply4(<span class="number">6</span>); <span class="comment">// 4 * 6 =24;</span></div></pre></td></tr></table></figure></p>
<p>自己实现一个简陋的curry函数<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> curry = <span class="function"><span class="keyword">function</span> <span class="title">curry</span>(<span class="params">fn</span>) </span>{</div><div class="line"> <span class="keyword">var</span> slice = <span class="built_in">Array</span>.prototype.slice</div><div class="line"> <span class="keyword">var</span> len = fn.length</div><div class="line"> <span class="keyword">var</span> curryFn = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> args = slice.call(<span class="built_in">arguments</span>)</div><div class="line"> <span class="keyword">if</span> (args.length < len) {</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> curryFn.apply(<span class="literal">null</span>, slice.call(<span class="built_in">arguments</span>).concat(args))</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> fn.apply(<span class="literal">null</span>, args)</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> curryFn</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>原理是利用闭包保存函数参数，当参数数组长度小于函数长度时，递归，当相等时，调用之前curry的函数，并将递归保存的参数数组赋进去。<br>利用curry向后传递参数的性质可以实现跟踪trace函数。<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> trace = curry(<span class="function"><span class="keyword">function</span> (<span class="params">tag, x</span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(tag, x)</div><div class="line"> <span class="keyword">return</span> x</div><div class="line">})</div></pre></td></tr></table></figure></p>
<p>再利用后面所说的compose将trace函数组合在某一步就可以再函数运行过程中打印想要查看的信息了。</p>
<h2 id="组合-compose"><a href="#组合-compose" class="headerlink" title="组合 compose"></a>组合 compose</h2><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="keyword">const</span> addFour = <span class="function">(<span class="params">x</span>) =></span> x + <span class="number">4</span>;</div><div class="line"><span class="keyword">const</span> addSix = <span class="function">(<span class="params">x</span>) =></span> x + <span class="number">6</span>;</div><div class="line"><span class="comment">// 简单的compose</span></div><div class="line"><span class="keyword">const</span> compose = <span class="function">(<span class="params">f, g</span>) =></span> (<span class="function">(<span class="params">x</span>) =></span> f(g(x)));</div></pre></td></tr></table></figure>
<p>addFour函数将参数加4，addSix将参数加6，那么addTen呢，是不是应该addFour后addSix？ 上面的compose函数就是组合函数，将函数f和g组合起来。先执行g(x)，然后将g(x)的结果作为f的参数执行。所以addTen方法如下<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"><span class="keyword">const</span> addTen => compose(addFour, addSix);</div><div class="line">addTen(<span class="number">1</span>); <span class="comment">// 11</span></div></pre></td></tr></table></figure></p>
<p>在 compose 的定义中，g 将先于 f 执行，因此就创建了一个从右到左的数据流。这样做的可读性远远高于嵌套一大堆的函数调用. 是不是很像数学中的函数。</p>
<blockquote>
<p>让代码从右向左运行，而不是由内而外运行，我觉得可以称之为“左倾”. </p>
</blockquote>
<p>利用reduce实现compose<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"><span class="keyword">var</span> compose = <span class="function">(<span class="params">...fns</span>) =></span></div><div class="line"> fns.reverse().reduce(<span class="function">(<span class="params">acc, fn</span>) =></span> (...args) => fn(acc(args)))</div></pre></td></tr></table></figure></p>
<p>使用compose函数就可以将两个，三个，四个等多个函数黏在一起。并让其顺序由右向左运行。<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"><span class="keyword">const</span> addTenTrace = compose(addFour, trace(<span class="string">'after addSix'</span>), addSix)</div><div class="line">addTenTrace(<span class="number">3</span>); <span class="comment">// log: after addSix 9</span></div></pre></td></tr></table></figure></p>
<p>上面利用的就可以跟踪到addSix后函数的运行情况了。 </p>
<h2 id="PointFree"><a href="#PointFree" class="headerlink" title="PointFree"></a>PointFree</h2><p>在FP中，pointfree指的是永远不要说出你的数据，既不暴露数据。<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></pre></td><td class="code"><pre><div class="line"><span class="comment">// not pointfree (提到了word)</span></div><div class="line"><span class="keyword">var</span> snakeCase = <span class="function"><span class="keyword">function</span> (<span class="params">word</span>) </span>{</div><div class="line"> <span class="keyword">return</span> word.toLowerCase().replace(<span class="regexp">/\s+/ig</span>, <span class="string">'_'</span>)</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(snakeCase(<span class="string">'Hello Topgrd'</span>))</div><div class="line"><span class="keyword">var</span> replace = <span class="function"><span class="keyword">function</span> (<span class="params">pattern, replacement</span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">word</span>) </span>{</div><div class="line"> <span class="keyword">return</span> word.replace(pattern, replacement)</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="comment">// pointfree</span></div><div class="line"><span class="keyword">var</span> snakeCase2 = _.compose(replace(<span class="regexp">/\s+/ig</span>, <span class="string">'_'</span>), _.toUpper)</div></pre></td></tr></table></figure></p>
<p>上面两个函数的差异很容易看出来，一个提到了你要处理的数据word，而另一个没有。 </p>
]]></content>
<summary type="html">
<p>最近看了函数式编程，传统方式上我们一般是命令式编程，而FP是一种完全不同的编程思想， 他会让你拥有不同的编程体验。<br>在数学上，我们定义一个函数y=f(x)或者y=f(g(x))。当我们输入固定的x值时，函数y的值是一定的。而函数式编程即是这么一种风格，它强调副作用最小，鼓励使用不可变数据和纯函数。在如今的js界，函数式编程变的越来越留下。redux，immutable，Rxjs等都是函数式编程的实践。 </p>
</summary>
</entry>
<entry>
<title>nproxy</title>
<link href="http://topgrd.me/2016/09/16/proxy/"/>
<id>http://topgrd.me/2016/09/16/proxy/</id>
<published>2016-09-15T16:00:00.000Z</published>
<updated>2017-04-28T06:35:49.045Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h1 id="使用反向代理，本地文件调试线上环境"><a href="#使用反向代理，本地文件调试线上环境" class="headerlink" title="使用反向代理，本地文件调试线上环境"></a>使用反向代理，本地文件调试线上环境</h1><p>使用反向代理，我们可以用浏览器访问线上环境时，将需要调试修改的文件代理到本地，这样只需要在本地修改文件，就可以在你的浏览器上预览到想要的效果，例如用本地未混淆的js替换线上的js，或者其他js，html，image等等。最后修改完成后再发布，调试极为方便。 </p>
<h2 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h2><p>在本地和服务器直接加一层服务，然后用这个代理服务去监听并拦截客户端发出的请求，然后用代理服务代理请求到你指定的去处。<br><img src="/img/proxys.png" alt="proxy"> </p>
<a id="more"></a>
<h2 id="nproxy"><a href="#nproxy" class="headerlink" title="nproxy"></a>nproxy</h2><p>nproxy是开源在github上的一个node包，可以用来做反向代理，并且支持Windows, Mac, Linux。 </p>
<ul>
<li>可以用来将线上的html，css，js文件请求代理到本地，方便调试。 </li>
<li>代理Ajax请求。 </li>
<li>支持多个文件合并一个文件的替换。</li>
</ul>
<h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>先安装node.js，url: <a href="https://nodejs.org/en/" target="_blank" rel="external">https://nodejs.org/en/</a>. 建议下载6.4.0版本的，可以享受js的许多新特性。<br>安装之后，在命令台输入<code>node -v</code> 查看版本和是否安装，输入<code>npm -v</code> 查看是否安宁庄了node包管理工具.<br>安装proxy<br>使用命令行输入<code>npm install -g nproxy</code>，全局安装nproxy，等待安装完成。<br>安装完成后，在新建一个目录，放置你需要写的代理模板匹配规则.js文件。<br>注意，如果代理到本地，则需要写的responder为绝对路径。<br>在目录下新建一个js文件，在里面写上你的代理匹配规则，可以使用正则和变量等方式。<br>tpl.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><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">module</span>.exports = [</div><div class="line"></div><div class="line"> <span class="comment">// 1. 替换单个文件到本地</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="string">'http://117.139.217.11:10300/webJsB/netsdk_lee.js'</span>, <span class="comment">// 匹配你将替换的url模板</span></div><div class="line"> responder: <span class="string">"E:/work/sdkTest/netsdk_lee.js"</span></div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// 2. 替换单个文件到web上</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="string">'http://117.139.217.11:10300/webJsB/netsdk_lee.js'</span>, <span class="comment">// Match url you wanna replace</span></div><div class="line"> responder: <span class="string">"http://117.139.217.11:10300/webJsB/netsdk.js"</span></div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// 3. 多文件拼接替换，有时需考虑文件顺序</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="string">'group/homepageTileFramework.*.js'</span>,</div><div class="line"> <span class="attr">responder</span>: [</div><div class="line"> <span class="string">'/home/js/a.js'</span>,</div><div class="line"> <span class="string">'/home/js/b.js'</span>,</div><div class="line"> <span class="string">'/home/js/c.js'</span></div><div class="line"> ]</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// 4. 多文件目录替换</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="string">'group/homepageTileFramework.*.js'</span>,</div><div class="line"> <span class="attr">responder</span>: {</div><div class="line"> <span class="attr">dir</span>: <span class="string">'/home/js'</span>,</div><div class="line"> <span class="attr">src</span>: [</div><div class="line"> <span class="string">'a.js'</span>,</div><div class="line"> <span class="string">'b.js'</span>,</div><div class="line"> <span class="string">'c.js'</span></div><div class="line"> ]</div><div class="line"> }</div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// 5. 替换图片</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="string">'ui/homepage/img'</span>, <span class="comment">// must be a string</span></div><div class="line"> responder: <span class="string">'/home/image/'</span> <span class="comment">//must be a absolute directory path</span></div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// 6. 用正则表达式匹配</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="regexp">/https?:\/\/[\w\.]*(?::\d+)?\/ui\/(.*)_dev\.(\w+)/</span>,</div><div class="line"> <span class="attr">responder</span>: <span class="string">'http://localhost/proxy/$1.$2'</span></div><div class="line"> },</div><div class="line"></div><div class="line"> <span class="comment">// 7. 用正则匹配替换不同目录下的文件</span></div><div class="line"> <span class="comment">// http://host:port/ui/a/img/... => /home/a/image/...</span></div><div class="line"> <span class="comment">// http://host:port/ui/b/img/... => /home/b/image/...</span></div><div class="line"> <span class="comment">// http://host:port/ui/c/img/... => /home/c/image/...</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line"> {</div><div class="line"> <span class="attr">pattern</span>: <span class="regexp">/ui\/(.*)\/img\//</span>,</div><div class="line"> <span class="attr">responder</span>: <span class="string">'/home/$1/image/'</span></div><div class="line"> }</div><div class="line">];</div></pre></td></tr></table></figure></p>
<p>写好匹配规则文件后，在cmd里输入 <code>nproxy -l [filename].js</code>，会创建代理服务。默认监听8989端口，也可以修改 使用<code>-p [port]</code>. </p>
<h2 id="设置浏览器代理"><a href="#设置浏览器代理" class="headerlink" title="设置浏览器代理"></a>设置浏览器代理</h2><p>设置浏览器代理，将浏览器的请求代理在8989端口监听。打开浏览器设置，找浏览器代理服务器设置，在弹出的internet属性面板里点击<code>连接</code>->点击<code>LAN设置</code>-><code>代理服务器</code>->勾上为<code>LAN使用代理服务器</code>,然后点击<code>高级</code>->弹出的面板里在http栏目里写入<code>127.0.0.1</code>端口写入<code>8989</code>。（也可以以设置代理请求https） </p>
]]></content>
<summary type="html">
<h1 id="使用反向代理，本地文件调试线上环境"><a href="#使用反向代理，本地文件调试线上环境" class="headerlink" title="使用反向代理，本地文件调试线上环境"></a>使用反向代理，本地文件调试线上环境</h1><p>使用反向代理，我们可以用浏览器访问线上环境时，将需要调试修改的文件代理到本地，这样只需要在本地修改文件，就可以在你的浏览器上预览到想要的效果，例如用本地未混淆的js替换线上的js，或者其他js，html，image等等。最后修改完成后再发布，调试极为方便。 </p>
<h2 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h2><p>在本地和服务器直接加一层服务，然后用这个代理服务去监听并拦截客户端发出的请求，然后用代理服务代理请求到你指定的去处。<br><img src="/img/proxys.png" alt="proxy"> </p>
</summary>
</entry>
<entry>
<title>React中的setState是异步的</title>
<link href="http://topgrd.me/2016/07/23/setState/"/>
<id>http://topgrd.me/2016/07/23/setState/</id>
<published>2016-07-22T16:00:00.000Z</published>
<updated>2017-04-27T05:23:35.986Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>在写Select组件时，发现我换了选项后，结果依然返回之前的值，导致我的选项与值的展示不对应。以下是关于这个问题的解释：<br>先看源码ReactComponent.js中关于setState函数的文档 </p>
<blockquote>
<p>绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。<br>setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。<br>不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。<br>setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。<br><a id="more"></a></p>
</blockquote>
<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><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line">* Sets a subset of the state. Always use this to mutate</div><div class="line">* state. You should treat `this.state` as immutable.</div><div class="line">*</div><div class="line">* There is no guarantee that `this.state` will be immediately updated, so</div><div class="line">* accessing `this.state` after calling this method may return the old value.</div><div class="line">*</div><div class="line">* There is no guarantee that calls to `setState` will run synchronously,</div><div class="line">* as they may eventually be batched together. You can provide an optional</div><div class="line">* callback that will be executed when the call to setState is actually</div><div class="line">* completed.</div><div class="line">*</div><div class="line">* When a function is provided to setState, it will be called at some point in</div><div class="line">* the future (not synchronously). It will be called with the up to date</div><div class="line">* component arguments (state, props, context). These values can be different</div><div class="line">* from this.* because your function may be called after receiveProps but before</div><div class="line">* shouldComponentUpdate, and this new state, props, and context will not yet be</div><div class="line">* assigned to this.</div><div class="line">*</div><div class="line">* @param {object|function} partialState Next partial state or function to</div><div class="line">* produce next partial state to be merged with current state.</div><div class="line">* @param {?function} callback Called after state is updated.</div><div class="line">* @final</div><div class="line">* @protected</div><div class="line">*/</div><div class="line">ReactComponent.prototype.setState = <span class="function"><span class="keyword">function</span> (<span class="params">partialState, callback</span>) </span>{</div><div class="line"> !(<span class="keyword">typeof</span> partialState === <span class="string">'object'</span> || <span class="keyword">typeof</span> partialState === <span class="string">'function'</span> || partialState == <span class="literal">null</span>)</div><div class="line"> ? <span class="literal">true</span></div><div class="line"> ? invariant(<span class="literal">false</span>, <span class="string">'setState(...): takes an object of state variables to update or a function which returns an object of state variables.'</span>)</div><div class="line"> : _prodInvariant(<span class="string">'85'</span>)</div><div class="line"> : <span class="keyword">void</span> <span class="number">0</span>;</div><div class="line"> <span class="keyword">this</span>.updater.enqueueSetState(<span class="keyword">this</span>, partialState);</div><div class="line"> <span class="keyword">if</span> (callback) {</div><div class="line"> <span class="keyword">this</span>.updater.enqueueCallback(<span class="keyword">this</span>, callback, <span class="string">'setState'</span>);</div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure>
<p>文档解释了setState()是异步执行的，所以在setState中提供了回调函数，所以可以把setState后面的动作设置到回调函数里，:)</p>
]]></content>
<summary type="html">
<p>在写Select组件时，发现我换了选项后，结果依然返回之前的值，导致我的选项与值的展示不对应。以下是关于这个问题的解释：<br>先看源码ReactComponent.js中关于setState函数的文档 </p>
<blockquote>
<p>绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。<br>setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。<br>不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。<br>setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。<br>
</summary>
</entry>
<entry>
<title>在工作中遇到的浏览器兼容问题总结</title>
<link href="http://topgrd.me/2016/05/13/compatibility/"/>
<id>http://topgrd.me/2016/05/13/compatibility/</id>
<published>2016-05-12T16:00:00.000Z</published>
<updated>2017-04-27T01:59:27.131Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>#浏览器兼容 </p>
<ul>
<li>ie9不支持placeholder</li>
<li>IE8不支持 <strong>proto</strong></li>
<li>IE9不支持监听输入框退格事件</li>
<li>window.onload存在兼容性问题</li>
<li>decodeURIComponent()存在Uncaught URIError: URI malformed问题，如decodeURIComponent(‘a%AFc’)。 <h1 id="notice"><a href="#notice" class="headerlink" title="notice"></a>notice</h1></li>
<li>addEventListener的handler使用bind的时候， 需要保存bind后的handler，才能remove。<br>```js<br>var touchHandler = function (e) {<br> // do something<br>}<br>var hanlder = touchHandler.bind(this);<br>document.addEventListener(‘touchstart’, handler, false);<br>// when remove<br>document.removeEventListener(‘touchstart’, handler, false);</li>
</ul>
<p>``` </p>
]]></content>
<summary type="html">
<script src="/assets/js/APlayer.min.js"> </script><p>#浏览器兼容 </p>
<ul>
<li>ie9不支持placeholder</li>
<li>IE8不支持 <strong>proto</strong></li>
<li
</summary>
</entry>
<entry>
<title>一道题</title>
<link href="http://topgrd.me/2016/04/01/add/"/>
<id>http://topgrd.me/2016/04/01/add/</id>
<published>2016-03-31T16:00:00.000Z</published>
<updated>2017-04-27T01:58:29.334Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h1 id="一道题"><a href="#一道题" class="headerlink" title="一道题"></a>一道题</h1><p>实现add(x)输出x, add(x)(y)输出x+y的结果，add(x)(y)(z)则输出x+y+z…可以无限调用。<br>当我第一眼看到这个题的时候，马上想到的是函数式编程，利用compose实现。要实现这样的函数，必须要改写函数的toString和valueOf方法。<br><a id="more"></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><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> _args = [].slice.call(<span class="built_in">arguments</span>);</div><div class="line"> <span class="keyword">var</span> adder = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> _adder = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> [].push.apply(_args, [].slice.call(<span class="built_in">arguments</span>));</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'args'</span>, _args);</div><div class="line"> <span class="keyword">return</span> _adder;</div><div class="line"> }</div><div class="line"></div><div class="line"> _adder.toString = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> _args.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>{</div><div class="line"> <span class="keyword">return</span> a + b;</div><div class="line"> });</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> _adder;</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> adder.apply(<span class="literal">null</span>, [].slice.call(<span class="built_in">arguments</span>));</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(add(<span class="number">2</span>)(<span class="number">3</span>)(<span class="number">3</span>));</div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<h1 id="一道题"><a href="#一道题" class="headerlink" title="一道题"></a>一道题</h1><p>实现add(x)输出x, add(x)(y)输出x+y的结果，add(x)(y)(z)则输出x+y+z…可以无限调用。<br>当我第一眼看到这个题的时候，马上想到的是函数式编程，利用compose实现。要实现这样的函数，必须要改写函数的toString和valueOf方法。<br>
</summary>
</entry>
<entry>
<title>React + ES6 中绑定this</title>
<link href="http://topgrd.me/2015/11/03/NoAutoBinding/"/>
<id>http://topgrd.me/2015/11/03/NoAutoBinding/</id>
<published>2015-11-02T16:00:00.000Z</published>
<updated>2017-04-26T15:01:48.316Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h1 id="React-ES6-中绑定this"><a href="#React-ES6-中绑定this" class="headerlink" title="React + ES6 中绑定this"></a>React + ES6 中绑定this</h1><p>在使用React.creatClass时，如果给一个组件绑定事件（onClick，onChange等），是不需要将this在bind到上面的，然而在使用ES6时，是不会自动绑定this的。why？<br>Go Doc: </p>
<blockquote>
<p><strong>Autobinding</strong><br>When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of this is correct. With React, every method is automatically bound to its component instance (except when using ES6 class syntax). React caches the bound method such that it’s extremely CPU and memory efficient. It’s also less typing! </p>
</blockquote>
<p>在React中，如果创建了回调函数，是会自动将this绑定到他的组件上面的。<strong>(except when using Es6 class syntax)</strong> , :( </p>
<blockquote>
<p><strong>No Autobinding</strong><br>Methods follow the same semantics as regular ES6 classes, meaning that they don’t automatically bind this to the instance. You’ll have to explicitly use .bind(this) or arrow functions =>: </p>
</blockquote>
<p>所以在使用ES6写react组件时，可以这么写：<br><strong>第一种</strong><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></pre></td><td class="code"><pre><div class="line">_handleClick(e) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);</div><div class="line">}</div><div class="line">render() {</div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">{this._handleClick.bind(this)}</span>></span>点击<span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> );</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><strong>第二种</strong><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></pre></td><td class="code"><pre><div class="line">_handleClick(e) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);</div><div class="line">}</div><div class="line">render() {</div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">{()</span>=></span>this._handleClick()}>点击<span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> );</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><strong>第三种</strong><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">constructor</span>() {</div><div class="line"> <span class="keyword">this</span>._handlerClick = <span class="keyword">this</span>._handlerClick.bind(<span class="keyword">this</span>);</div><div class="line">}</div><div class="line">_handleClick(e) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);</div><div class="line">}</div><div class="line">render() {</div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">{this._handleClick}</span>></span>点击<span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> );</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p><strong>第四种</strong><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></pre></td><td class="code"><pre><div class="line">_handleClick(e) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);</div><div class="line">}</div><div class="line">render() {</div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> <span class="tag"><<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">{::this._handleClick}</span>></span>点击<span class="tag"></<span class="name">h1</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> );</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>特别解释下第四种<br>函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面，ES7的草案，babel已经支持。<br>facebook关于没有自动绑定的介绍:<a href="https://facebook.github.io/react/docs/reusable-components.html#no-autobinding" target="_blank" rel="external">autobind</a></p>
]]></content>
<summary type="html">
<script src="/assets/js/APlayer.min.js"> </script><h1 id="React-ES6-中绑定this"><a href="#React-ES6-中绑定this" class="headerlink" title="React +
</summary>
</entry>
<entry>
<title>React中的组件写法</title>
<link href="http://topgrd.me/2015/10/15/noStateComponent/"/>
<id>http://topgrd.me/2015/10/15/noStateComponent/</id>
<published>2015-10-14T16:00:00.000Z</published>
<updated>2017-04-26T15:02:59.707Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><h1 id="React中的组件写法"><a href="#React中的组件写法" class="headerlink" title="React中的组件写法"></a>React中的组件写法</h1><h2 id="React-createClass-ES5"><a href="#React-createClass-ES5" class="headerlink" title="React.createClass (ES5)"></a>React.createClass (ES5)</h2><p>在React刚出世的时候，官方是这样定义一个react组件的。<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><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="keyword">var</span> Count = React.createClass({</div><div class="line"> <span class="attr">defaultProps</span>: {</div><div class="line"> <span class="attr">initialValue</span>: <span class="number">0</span></div><div class="line"> },</div><div class="line"> <span class="attr">getInitialState</span>: {</div><div class="line"> retrun {</div><div class="line"> <span class="attr">count</span>: <span class="number">0</span></div><div class="line"> }</div><div class="line"> },</div><div class="line"> <span class="attr">onChangeHandler</span>: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</div><div class="line"> <span class="keyword">this</span>.setState({</div><div class="line"> <span class="attr">count</span>: e.target.value</div><div class="line"> })</div><div class="line"> },</div><div class="line"> <span class="attr">render</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> Insert Your Count</div><div class="line"> <span class="tag"><<span class="name">input</span></span></div><div class="line"> <span class="attr">onChange</span>=<span class="string">{this.onChangeHandler}</span> <span class="attr">value</span>=<span class="string">{this.state.count}</span> /></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> )</div><div class="line"> }</div><div class="line">});</div><div class="line">ReactDOM.render(<span class="tag"><<span class="name">Count</span> /></span>, document.getElementById('app'));</div></pre></td></tr></table></figure></p>
<h2 id="extends-React-Component-ES6"><a href="#extends-React-Component-ES6" class="headerlink" title="extends React.Component (ES6)"></a>extends React.Component (ES6)</h2><p>随着ES6的流行，官方使用了ES6中的Class来创建组件，继承自React.Component，Component是React组件的基类，封装了react组件的属性与方法。在这种写法中，要注意的是this绑定，详情参见我的往期博文。<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><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">Count</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>{</div><div class="line"> <span class="keyword">constructor</span>(props) {</div><div class="line"> <span class="keyword">super</span>(props);</div><div class="line"> <span class="keyword">this</span>.state = {</div><div class="line"> <span class="attr">count</span>: <span class="number">0</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> onChangeHandler(e) {</div><div class="line"> <span class="keyword">this</span>.setState({</div><div class="line"> <span class="attr">count</span>: e.target.value</div><div class="line"> })</div><div class="line"> }</div><div class="line"></div><div class="line"> render() {</div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> Insert Your Count</div><div class="line"> <span class="tag"><<span class="name">input</span></span></div><div class="line"> <span class="attr">onChange</span>=<span class="string">{(e)</span>=>this.onChangeHandler(e)} value={this.state.count} /></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> )</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">Count.defaultProps = {</div><div class="line"> initialValue: 0</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h2 id="无状态组件-ES6"><a href="#无状态组件-ES6" class="headerlink" title="无状态组件 (ES6)"></a>无状态组件 (ES6)</h2><p>无状态函数式组件，使用纯函数定义的组件，很简洁，但是内部不能使用this，react的state和生命周期方法，所以称为无状态组件。这种组件开销低，在我们写应用时，基本的组件尽量使用它。<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> Header =<span class="function">(<span class="params">{ title }</span>) =></span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">h2</span>></span>{title}<span class="tag"></<span class="name">h2</span>></span></span></div><div class="line">)</div><div class="line"></div><div class="line"><span class="keyword">const</span> Text = <span class="function">(<span class="params">{ name }</span>) =></span> {</div><div class="line"> <span class="keyword">const</span> sayHello = <span class="function"><span class="params">()</span> =></span></div><div class="line"> alert(<span class="string">`hello <span class="subst">${name}</span>!`</span>);</div><div class="line"></div><div class="line"> <span class="keyword">return</span> (</div><div class="line"> <span class="xml"><span class="tag"><<span class="name">div</span>></span></span></div><div class="line"> Welcome to this room.</div><div class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{sayHi}</span>></span>Click It!<span class="tag"></<span class="name">button</span>></span> </div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> )</div><div class="line">}</div></pre></td></tr></table></figure></p>
]]></content>
<summary type="html">
<script src="/assets/js/APlayer.min.js"> </script><h1 id="React中的组件写法"><a href="#React中的组件写法" class="headerlink" title="React中的组件写法"></a>Rea
</summary>
</entry>
<entry>
<title>margin相关问题</title>
<link href="http://topgrd.me/2014/12/15/2014-12-15-marginproblem/"/>
<id>http://topgrd.me/2014/12/15/2014-12-15-marginproblem/</id>
<published>2014-12-14T16:00:00.000Z</published>
<updated>2017-04-27T02:17:21.997Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><a id="more"></a>
<p>##上下margin叠加<br>当两个元素为上下关系，且都具有margin属性时，此时margin会造成外边距叠加。<br>例如，页面有2个div id为a和b，他们的css如下:<br><figure class="highlight css"><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="selector-id">#a</span>{</div><div class="line"> <span class="attribute">width</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">height</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">background</span>:red;</div><div class="line"> <span class="attribute">margin</span>:<span class="number">10px</span>;</div><div class="line">} </div><div class="line"><span class="selector-id">#b</span>{</div><div class="line"> <span class="attribute">width</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">height</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">background</span>:red;</div><div class="line"> <span class="attribute">margin</span>:<span class="number">10px</span>;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>这两个元素都有上下边距为10px，按道理说他们两之间应该上下相隔20px。但浏览器显示结果并非这样。从下图通过左右的间距对比可以看出他们之间只相隔10px。<br> <img src="/img/margin1.jpg" alt="margin1"><br>为什么会这样呢，通过网上搜寻以后发现这是css设计造成的。因为他们考虑到如果我们要对段落进行控制，如果第一段与上方距离10px，那第二段与第一段之间的距离就变成20px，这不是我们想要的，因此设计出了空白边叠加规则。<br>空白边叠加时，以较大的margin值为准。<br>怎么解决这个问题呢，根据css解释规则，在把元素设置float后，将不再进行margin叠加<br><figure class="highlight css"><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="selector-id">#a</span>{</div><div class="line"> <span class="attribute">width</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">height</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">background</span>:red;</div><div class="line"> <span class="attribute">margin</span>:<span class="number">10px</span>;</div><div class="line"> <span class="attribute">float</span>:left;</div><div class="line">} </div><div class="line"><span class="selector-id">#b</span>{</div><div class="line"> <span class="attribute">width</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">height</span>:<span class="number">100px</span>;</div><div class="line"> <span class="attribute">background</span>:red;</div><div class="line"> <span class="attribute">margin</span>:<span class="number">10px</span>;</div><div class="line"> <span class="attribute">float</span>:left;</div><div class="line"> <span class="attribute">clear</span>:left;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>结果得到如下图的效果<br><img src="/assets/img/margin2.jpg" alt="margin2"><br>我们看到a和b之间的间隔已经变为20px。 </p>
<p>##IE6下元素float后margin左右边距加倍<br>在IE6下如果元素设置浮动后，元素的左右边距会加倍。也就是常听到的IE6双边距问题。但我们只需要在元素的样式中添加<code>display:inline</code>就可以解决。 </p>
]]></content>
<summary type="html">
<script src="/assets/js/APlayer.min.js"> </script><a id="more"></a>
<p>##上下margin叠加<br>当两个元素为上下关系，且都具有margin属性时，此时margin会造成外边距叠加。<br>例如，页面
</summary>
</entry>
<entry>
<title>node.js连接mysql数据库</title>
<link href="http://topgrd.me/2014/12/03/2014-12-03-nodejs_connect_mysql/"/>
<id>http://topgrd.me/2014/12/03/2014-12-03-nodejs_connect_mysql/</id>
<published>2014-12-02T16:00:00.000Z</published>
<updated>2017-04-27T02:17:15.727Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>今天在学习node时，发现书上的例子是node连接mongodb数据库的，没有提到mysql,而我还没有下载mongodb，就先想连接电脑上已经有点mysql，之前做的东西数据库基本上都用的mysql，经过上网查找相关信息，终于知道如何用node连接mysql进行数据库操作了.<br><a id="more"></a><br>首先安装mysql包(nodejs连接mysql的包有好几种(db-mysql..)，这里我用的是mysql。</p>
<p><code>npm install mysql</code></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><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * Created with IntelliJ IDEA.</div><div class="line"> * Creator: LeeZhuo</div><div class="line"> * Date: 2014/12/3</div><div class="line"> * Time: 22:22</div><div class="line"> */</div><div class="line"><span class="keyword">var</span> mysql = <span class="built_in">require</span>(<span class="string">'mysql'</span>);</div><div class="line"></div><div class="line"><span class="keyword">var</span> connection = mysql.createConnection({</div><div class="line"> <span class="attr">host</span>: <span class="string">'localhost'</span>, <span class="comment">//host</span></div><div class="line"> user: <span class="string">'topgrd'</span>, <span class="comment">//用户名</span></div><div class="line"> password: <span class="string">''</span>, <span class="comment">//密码</span></div><div class="line"> database: <span class="string">'library'</span> <span class="comment">//要连接的数据库</span></div><div class="line">});</div><div class="line"><span class="comment">/*</span></div><div class="line"> </div><div class="line">var connection = mysql.createConnection('mysql://user:password@host/database'); //另一种写法</div><div class="line">*/</div><div class="line">connection.connect();</div><div class="line"><span class="comment">/*定义数据库CRUD查询语句*/</span></div><div class="line"><span class="keyword">var</span> queryString = <span class="string">'select * from bookinfo'</span>;</div><div class="line"></div><div class="line">connection.query(queryString, <span class="function"><span class="keyword">function</span>(<span class="params">err, results, field</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (err) {</div><div class="line"> <span class="keyword">throw</span> err;</div><div class="line"> }</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> results) {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'bookname: '</span> + results[i].bookname + <span class="string">'\tauthor: '</span> + results[i].author + <span class="string">'\tpressyear: '</span> + results[i].pressyear);</div><div class="line"> }</div><div class="line">});</div><div class="line">connection.end(); <span class="comment">//关闭连接</span></div></pre></td></tr></table></figure></p>
<p> 上面的代码将我library数据库中bookinfo表的信息打印出来<br> <img src="/img/mysql.jpg" alt="photo"> </p>
]]></content>
<summary type="html">
<p>今天在学习node时，发现书上的例子是node连接mongodb数据库的，没有提到mysql,而我还没有下载mongodb，就先想连接电脑上已经有点mysql，之前做的东西数据库基本上都用的mysql，经过上网查找相关信息，终于知道如何用node连接mysql进行数据库操作了.<br>
</summary>
</entry>
<entry>
<title>正则表达式(三)</title>
<link href="http://topgrd.me/2014/12/01/2014-12-01-RegExp(3)/"/>
<id>http://topgrd.me/2014/12/01/2014-12-01-RegExp(3)/</id>
<published>2014-11-30T16:00:00.000Z</published>
<updated>2017-04-26T14:57:19.922Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>简单的正则验证<br><a id="more"></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><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//检查邮政编码</span></div><div class="line"><span class="keyword">var</span> p = <span class="regexp">/[1-9][0-9]{5}/</span>;</div><div class="line"><span class="keyword">var</span> s = <span class="string">'615400'</span>;</div><div class="line"><span class="comment">//alert(p.test(s)) //true</span></div><div class="line"></div><div class="line"><span class="comment">//检查文件压缩包</span></div><div class="line"><span class="keyword">var</span> p1 = <span class="regexp">/^[\w\-]+\.zip|rar|7z|gz$/</span>;</div><div class="line"><span class="keyword">var</span> s1 = <span class="string">'ko7.zip'</span>;</div><div class="line"><span class="keyword">var</span> s11 = <span class="string">'99.rar'</span>;</div><div class="line"><span class="keyword">var</span> s12 = <span class="string">'d-w.gz'</span>;</div><div class="line"><span class="comment">//alert(p1.test(s1)); //true</span></div><div class="line"><span class="comment">//alert(p1.test(s11)); // true</span></div><div class="line"><span class="comment">//alert(p1.test(s12)); // true</span></div><div class="line"></div><div class="line"><span class="comment">//去空格</span></div><div class="line"><span class="keyword">var</span> p2 = <span class="regexp">/\s/g</span>;</div><div class="line"><span class="keyword">var</span> s2 = <span class="string">'he da dd'</span>;</div><div class="line"><span class="comment">//alert(s2.replace(p2,'')); //hedadd</span></div><div class="line"></div><div class="line"><span class="comment">//去首尾空格</span></div><div class="line"><span class="keyword">var</span> p3 = <span class="regexp">/^\s+(.+?)\s+$/</span>; <span class="comment">//惰性模式</span></div><div class="line"><span class="keyword">var</span> s3 = <span class="string">' he ll o '</span>;</div><div class="line"><span class="keyword">var</span> res = p3.exec(s3)[<span class="number">1</span>];</div><div class="line"><span class="comment">//alert('|'+res+'|'); // |he ll o|</span></div><div class="line"></div><div class="line"><span class="comment">//简单邮箱验证</span></div><div class="line"><span class="keyword">var</span> p4 = <span class="regexp">/^([\w\.\-]+)@([\w\-]+)(\.([a-zA-Z]{2,4})){1,2}$/</span>;</div><div class="line"><span class="keyword">var</span> s4 = <span class="string">'[email protected]'</span>;</div><div class="line"><span class="keyword">var</span> s5 = <span class="string">'[email protected]'</span></div><div class="line"><span class="keyword">var</span> s6 = <span class="string">'[email protected]'</span></div><div class="line"> <span class="comment">//alert(p4.test(s4)) // true</span></div><div class="line"> <span class="comment">//alert(p4.test(s5)) // false</span></div><div class="line"> <span class="comment">//alert(p4.test(s6)) //true</span></div><div class="line"> <span class="comment">//alert(p4.exec(s4))</span></div><div class="line"> <span class="comment">//alert(p4.exec(s6))</span></div></pre></td></tr></table></figure>
]]></content>
<summary type="html">
<p>简单的正则验证<br>
</summary>
</entry>
<entry>
<title>正则表达式(二)</title>
<link href="http://topgrd.me/2014/11/30/2014-11-30-RegExp(2)/"/>
<id>http://topgrd.me/2014/11/30/2014-11-30-RegExp(2)/</id>
<published>2014-11-29T16:00:00.000Z</published>
<updated>2017-04-26T15:10:58.821Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><a id="more"></a>
<h1 id="正则"><a href="#正则" class="headerlink" title="正则"></a>正则</h1><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><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> pattern = <span class="regexp">/^([a-z]+)\s([0-9]{4})/</span>; <span class="comment">//使用分组</span></div><div class="line"><span class="keyword">var</span> str = <span class="string">'hello 2014'</span>;</div><div class="line"><span class="keyword">var</span> arr = pattern.exec(str);</div><div class="line"><span class="comment">//alert(arr[0]); //hello 2014 返回匹配到的整个字符串</span></div><div class="line"><span class="comment">//alert(arr[1]); //hello 返回匹配到了第一个分组的字符串</span></div><div class="line"><span class="comment">//alert(arr[2]); //2014 返回匹配到的第2个分组的字符串</span></div><div class="line"><span class="keyword">var</span> pat = <span class="regexp">/^([a-z]+)\s(?:[0-9]{4})/</span>;</div><div class="line"><span class="comment">//alert(pat.exec(str)); //hello 2014,hello </span></div><div class="line"><span class="comment">//使用?:设置非捕获分组,该分组不会返回</span></div><div class="line"><span class="keyword">var</span> p = <span class="regexp">/(a?(b?(c?)))/</span>; <span class="comment">//嵌套分组 从外向里捕获</span></div><div class="line"><span class="keyword">var</span> s = <span class="string">'abc'</span>;</div><div class="line"><span class="comment">//alert(p.exec(s)); //abc abc bc c</span></div><div class="line"><span class="keyword">var</span> p1 = <span class="regexp">/he(?=llo)/</span>; <span class="comment">//he后面必须跟llo f</span></div><div class="line"><span class="keyword">var</span> s1 = <span class="string">'hello'</span>;</div><div class="line"><span class="comment">//alert(p1.exec(s1)); //返回 he</span></div><div class="line"><span class="keyword">var</span> p2 = <span class="regexp">/\[/</span>; <span class="comment">// 用\来转义特殊字符</span></div><div class="line"><span class="keyword">var</span> s2 = <span class="string">'['</span>;</div><div class="line"><span class="comment">//alert(p2.test(s2)); //true</span></div><div class="line"><span class="keyword">var</span> p3 = <span class="regexp">/^\d+/gm</span>; <span class="comment">//m开启多行匹配 若没m则只替换第一行</span></div><div class="line"><span class="keyword">var</span> s3 = <span class="string">'1.first\n2.second\n3.third'</span>;</div><div class="line"><span class="comment">//alert(s3.replace(p3,'#'));</span></div><div class="line"><span class="comment">/* 结果</span></div><div class="line">#.first</div><div class="line">#.second</div><div class="line">#.third</div><div class="line">*/</div><div class="line"><span class="comment">//正则检测输入字符串是否大于5位且必须为字母与数字的混合</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">check</span>(<span class="params">str</span>) </span>{</div><div class="line"> <span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="regexp">/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/</span>);</div><div class="line"> <span class="keyword">if</span> (reg.test(str) && str.length > <span class="number">5</span>) {</div><div class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="comment">//alert(check('q52830to')); true</span></div><div class="line"> <span class="comment">//alert(check('q528o')); false</span></div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<script src="/assets/js/APlayer.min.js"> </script><a id="more"></a>
<h1 id="正则"><a href="#正则" class="headerlink" title="正则"></a>正则</h1><fi
</summary>
</entry>
<entry>
<title>正则表达式(一)</title>
<link href="http://topgrd.me/2014/11/30/2014-11-30-RegExp(1)/"/>
<id>http://topgrd.me/2014/11/30/2014-11-30-RegExp(1)/</id>
<published>2014-11-29T16:00:00.000Z</published>
<updated>2017-04-26T15:11:11.397Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>最近才发现原来我一直没学正则,之前学js一直跳过了这块,这两天赶紧补上.</p>
<a id="more"></a>
<pre><code>var box=/box/ig; //i代表不区分大小写 g代表全局匹配 还有个m表示多行匹配
var str='BOX';
//alert(box.test(str))
var dd='this is a Box!that is aa box!';
//alert(box.test(dd)) //true
//alert(dd.replace(box,'top')); // 替换 this is a top!that is aa top!
//alert(dd.search(box)); //查找box第一次出现的位置 10
//alert(dd.match(box).length) //匹配到2次
box.test(dd);
//alert(RegExp.input); //this is a Box!that is aa box! 返回被查找的字符串
//alert(RegExp.leftContext) //返回第一次匹配到的左边的字符串
//alert(RegExp.rightContext) //返回第一次匹配到的右边的字符串
var dox = /b.x/ig; //true .匹配任意字符
//alert(dox.test(dd))
var pa=/bo*x/i; //*表示匹配任意多个o
var st = 'booox';
//alert(pa.test(st)) true
var pad=/bo{2,4}x/; //匹配2~4个o
//alert(pad.test(st)) true
var pp=/[a-z]o{3}x/; //匹配3次o
//alert(pp.test(st)) true
var pat=/b[^0-9a-z]x/;
var ss='b0x';
//alert(pat.test(ss))//里面的^表示非
var pare=/^[a-z]ox/;//外面的^表示行首匹配
var xxx='bbox',xx2='box';
//alert(pare.test(xxx));
//alert(pare.test(xx2));
var ppp=/b\wx/; //\w表示匹配字母数字下划线_即[a-zA-Z0-9_]
//alert(ppp.test(ss));
var lol=/b\Wx/; //\W表示匹配非字母数字下划线_即[^a-zA-Z0-9_]
var so='b-x';
//alert(lol.test(so))
var og=/^google$/; //$行尾匹配 og表示前面后面都没有，完全匹配。
var gg='google';
//alert(og.test(gg));
var dd=/google\b/; // \b表示十否到达边界
//alert(dd.test(gg))；
var huo=/google||baidu/; //|表示或
var ci=/(google){2,4}/; //()表示分组 {}次数
var googles='googlegooglegoogle';
//alert(huo.test(googles));
var paten=/g(.*)e/;
paten.test(gg);
//alert(RegExp.$1); //RegExp.$1表示获取模式中第一个分组对应的字符串
document.write(gg.replace(paten,'this is a <strong>$1</strong><br>'));
var pard=/(.*)\s(.*)/;
var stt='google baidu';
document.write(stt.replace(pard,'$2 $1'));
var str5='3hello3 3hello3 3hello3'; //贪婪模式
var paten2=/3(.*)3/;
//alert(str5.replace(paten2,'$1'));
var paten3=/3(.*?)3/g; //惰性模式
//alert(str5.replace(paten3,'$1'));
var paten4=/3[^8]3/;
//alert(str5.replace(paten3,'$1'));
</code></pre>]]></content>
<summary type="html">
<p>最近才发现原来我一直没学正则,之前学js一直跳过了这块,这两天赶紧补上.</p>
</summary>
</entry>
<entry>
<title>一片叶子落下来</title>
<link href="http://topgrd.me/2014/11/26/2014-11-26-leavefallen/"/>
<id>http://topgrd.me/2014/11/26/2014-11-26-leavefallen/</id>
<published>2014-11-25T16:00:00.000Z</published>
<updated>2017-04-26T15:12:54.394Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>我喜欢的故事，关于生命，关于爱。 </p>
<a id="more"></a>
<p>春天已经过去，夏天也这样走了。叶子弗雷迪长大了。他长得又宽又壮，五个叶尖结实挺拔。春天的时候，他还是个初生的嫩芽，从一棵大树树顶的大枝上冒出头来。<br> <br> 弗雷迪的身旁有成百上千的叶子，都跟他一模一样——看起来是这样。不过，他很快就发现没有两片叶子是真的一样的，尽管大家都长在同一棵树上。弗雷迪的左边是阿弗烈，右边的叶子是班，他的头顶上是那个可爱的女孩子克莱。他们一起长大，学会了在春风吹拂时跳跳舞，在夏天懒洋洋地晒晒太阳，偶然来一阵清凉的雨就洗个干干净净的澡。<br> <br> 弗雷迪最好的朋友是丹尼尔。他是这根树枝上最大的叶子，好象在别的叶子都还没来的时候就先长出来了。弗雷迪还觉得丹尼尔是最聪明的。丹尼尔告诉大家说，他们都是大树的一部分，说他们生长在公园里，说大树有强壮的根深深埋在地底下。早上飞来枝头上唱歌的小鸟、天上的星星月亮和太阳，还有季节的变化，不管什么东西，丹尼尔都有一套道理解释。<br> <br> 弗雷迪觉得当叶子真好。他喜欢他的树枝、他轻盈的叶子朋友、他高高挂在天上的家、把他推来推去的风、晒得他暖洋洋的太阳，还有在他身上洒下温柔洁白身影的月亮。<br> <br> 夏天特别好。他喜欢漫长炎热的白天，而温暖的黑夜最适合做梦。那年夏天，公园里来了许多人。他们都来到弗雷迪的树下，坐在那里乘凉。<br> <br> 丹尼尔告诉他，给人遮荫是叶子的目的之一。“什么叫目的？” 弗雷迪问。“就是存在的理由嘛！” 丹尼尔回答。“让别人感到舒服，这是个存在的理由。为老人遮荫，让他们不必躲在炎热的屋子里，也是个存在的理由。让小孩子们有个凉快的地方可以玩耍，用我们的叶子为树下野餐的人扇风，这些，都是存在的目的啊！”<br> <br> 弗雷迪最喜欢老人了。他们总是静静坐在清凉的草地上，几乎动也不动。他们喃喃低语，追忆过去的时光。小孩子也很好玩，虽然他们有时会在树皮上挖洞，或是刻下自己的名字。不过，看到小孩子跑得那么快，那么爱笑，还是很过瘾。<br> <br> 但是弗雷迪的夏天很快就过完了。就在十月的一个夜里，夏天突然消失。弗雷迪从来没有这么冷过，所有的叶子都冷得发抖。一层薄薄的白色东西披在他们身上，太阳出来就马上融化，变成晶莹的露水，搞得大家全身湿漉漉的。<br> <br> 又是丹尼尔告诉他们：他们刚经历生平第一次降霜。表示秋天到了，冬天也不远了。<br> <br> 转瞬之间，整棵树，甚至整个公园，全染上了浓艳的色彩，几乎找不到绿色的叶子。阿弗烈变成深黄色，班成了鲜艳的橙色，克莱儿是火红色，丹尼尔是深紫，弗雷迪自己则是半红半蓝，还夹杂着金黄。多么美丽啊！弗雷迪和他的朋友把整棵树变成如彩虹一般。<br> <br> “我们都在同一棵树上，为什么颜色却各不相同呢？” 弗雷迪问道。“我们一个一个都不一样啊！我们的经历不一样，面对太阳的方向不一样，投下的影子不一样，颜色当然也会不一样。” 丹尼尔用他那“本来就是这样”的一贯口吻回答，还告诉弗雷迪，这个美妙的季节叫做秋天。<br> <br> 有一天，发生了奇怪的事。以前，微风会让他们起舞，但是这一天，风儿却扯着叶梗推推拉拉，几乎象是生气了似的。结果，有些叶子从树枝上被扯掉了，卷到空中，刮来刮去，最后轻轻掉落在地面上。<br> <br> 所有叶子都害怕了起来。“怎么回事？”他们喃喃地你问我，我问你。“秋天就是这样。” 丹尼尔告诉他们，“时候到了，叶子该搬家了。有些人把这叫做死。”“我们都会死么？” 弗雷迪问。“是的。” 丹尼尔说。“任何东西都会死。无论是大是小是强是弱。我们先做完该做的事。我们体验太阳和月亮、经历风和雨。我们学会跳舞、学会欢笑。然后我们就要死了。”“我不要死！” 弗雷迪斩钉截铁地说。“你会死吗，丹尼尔？”“恩。” 丹尼尔回答，“时候到了，我就死了。”“那是什么时候？” 弗雷迪问。“没有人知道会在哪一天。”丹尼尔回答。<br> <br> 弗雷迪发现其他叶子不断在掉落。他想：“一定是他们的时候到了。”他看到有些叶子在掉落前和风挣扎撕打，有些叶子只是把手一放，静静地掉落。<br> <br> 很快地，整棵树几乎都空了。“我好怕死。” 弗雷迪向丹尼尔说，“我不知道下面有什么。”<br> <br> “面对不知道的东西，你会害怕，这很自然。” 丹尼尔安慰着他，“但是，春天变夏天的时候，你并不害怕。夏天变秋天的时候，你也不害怕。这些都是自然的变化。为什么要怕死亡的季节呢？”<br> <br> “我们的树也会死么？” 弗雷迪问。<br> <br> “总有一天树也会死的。不过还有比树更强的，那就是生命。生命永远都在，我们都是生命的一部分。”<br> <br> “我们死了会到哪儿去呢？”<br> <br> “没有人知道，这是个大秘密！”<br> <br> “春天的时候，我们会回来吗？”<br> <br> “我们可能不会再回来了，但是生命会回来。”<br> <br> “那么这一切有什么意思呢？” 弗雷迪继续问。<br> <br> “如果我们反正是要掉落、死亡，那为什么还要来这里呢？”<br> <br> 丹尼尔用他那“本来就是这样”的一贯口吻回答，“是为了太阳和月亮，是为了大家一起的快乐时光，是为了树荫、老人和小孩子，是为了秋天的色彩，是为了四季，这些还不够吗？”<br> <br> 那天下午，在黄昏的金色阳光中，丹尼尔放手了。他毫无挣扎地走了。掉落的时候，他似乎还安详地微笑着。“暂时再见了，弗雷迪。”他说。然后就剩弗雷迪一个了，他是那根树枝仅存的一片叶子。<br> <br> 第二天清早，下了头一场雪。雪非常柔软、洁白，但是冷得不得了。那天几乎没有一点阳光，白天也特别短。弗雷迪发现自己的颜色褪了，变得干枯易碎。一直都好冷，雪压在身上感觉好沉重。凌晨，一阵风把弗雷迪带离了他的树枝。一点也不痛，他感觉到自己静静地温和地柔软地飘下。<br> <br> 往下掉的时候，他第一次看到了整棵树，多么强壮、多么牢靠的树啊！他很确定这棵树还会活很久，他也知道自己曾经是它生命的一部分，感到很骄傲。<br> <br> 弗雷迪落在雪堆上。雪堆很柔软，甚至还很温暖。在这个新位置上他感到前所未有的舒适。他闭上眼睛，睡着了。他不知道，冬天过了春天会来，也不知道雪会融化成水。他不知道，自己看来干枯无用的身体，会和雪水一起，让树更强壮。尤其，他不知道，在大树和土地里沉睡的，是明年春天新叶的生机。 </p>
]]></content>
<summary type="html">
<p>我喜欢的故事，关于生命，关于爱。 </p>
</summary>
</entry>
<entry>
<title>又是一年银杏季</title>
<link href="http://topgrd.me/2014/11/20/2014-11-20-feeling_11_20/"/>
<id>http://topgrd.me/2014/11/20/2014-11-20-feeling_11_20/</id>
<published>2014-11-19T16:00:00.000Z</published>
<updated>2017-04-27T02:17:04.993Z</updated>
<content type="html"><![CDATA[<script src="/assets/js/APlayer.min.js"> </script><p>又是一年银杏季，大学已经过去一半多。</p>
<a id="more"></a>
<p><img src="/img/xing.jpg" alt="银杏树"><br><img src="/img/feng.jpg" alt="枫树"><br> 今天是11月20号，最近又是学校一年一度的银杏节，想想我在这里已经是第3次了，我的大学已经过了一大半。大学这3年，有得有失，马上要找实习了，希望能获得一份好的工作。老天保佑，╭(′▽`)╯。</p>
]]></content>
<summary type="html">
<p>又是一年银杏季，大学已经过去一半多。</p>
</summary>
</entry>
</feed>