-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1158 lines (628 loc) · 51.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next use-motion ">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/css/main.css?v=0.4.5.1"/>
<meta name="keywords" content="PHP,程序员,React,js" />
<link rel="alternate" href="/atom.xml" title="Robbinhan's Blog" type="application/atom+xml" />
<link rel="shorticon icon" type="image/x-icon" href="/favicon.ico?v=0.4.5.1" />
<meta property="og:type" content="website">
<meta property="og:title" content="Robbinhan's Blog">
<meta property="og:url" content="http://robbinhan.github.io/index.html">
<meta property="og:site_name" content="Robbinhan's Blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Robbinhan's Blog">
<script type="text/javascript" id="hexo.configuration">
var CONFIG = {
scheme: '',
sidebar: 'post'
};
</script>
<title> Robbinhan's Blog </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="">
<!--[if lte IE 8]>
<div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;margin:0 auto;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://7u2nvr.com1.z0.glb.clouddn.com/picouterie.jpg" border="0" height="42" width="820"
alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today or use other browser ,like chrome firefox safari."
style='margin-left:auto;margin-right:auto;display: block;'/>
</a>
</div>
<![endif]-->
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?fb7093a406ece5b08b67a5501b5c6190";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<div class="container one-column
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><h1 class="site-meta">
<span class="logo-line-before"><i></i></span>
<a href="/" class="brand" rel="start">
<span class="logo">
<i class="icon-next-logo"></i>
</span>
<span class="site-title">Robbinhan's Blog</span>
</a>
<span class="logo-line-after"><i></i></span>
</h1>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu ">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon icon-next-home"></i> <br />
Startseite
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon icon-next-archives"></i> <br />
Archiv
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon icon-next-tags"></i> <br />
Tags
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/09/03/2016-09-03/" itemprop="url">
Unbenannt
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2016-09-03T23:13:25+08:00" content="2016-09-03">
2016-09-03
</time>
</span>
<span class="post-comments-count">
|
<a href="/2016/09/03/2016-09-03/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/09/03/2016-09-03/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><h1 id="JS优化"><a href="#JS优化" class="headerlink" title="JS优化"></a>JS优化</h1><p><a href="https://reaktor.com/blog/javascript-performance-fundamentals-make-bluebird-fast/?utm_source=javascriptweekly&utm_medium=email" target="_blank" rel="external">参考链接</a></p>
<p>##避免重复创建函数对象，分配过多的内存<br>Bad：<br><figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">readFileAsJson</span>(<span class="params">fileName, callback</span>) </span>{</div><div class="line"> fs.readFile(fileName, <span class="string">'utf8'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">error, result</span>) </span>{</div><div class="line"> <span class="comment">// This is a new function object created every time readFileAsJson is called</span></div><div class="line"> <span class="comment">// Since it's a closure, an internal Context object is also</span></div><div class="line"> <span class="comment">// allocated for the closure state</span></div><div class="line"> <span class="keyword">if</span> (error) {</div><div class="line"> <span class="keyword">return</span> callback(error);</div><div class="line"> }</div><div class="line"> <span class="comment">// The try-catch block is needed to handle a possible syntax error from invalid JSON</span></div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="keyword">var</span> json = <span class="built_in">JSON</span>.parse(result);</div><div class="line"> callback(<span class="literal">null</span>, json);</div><div class="line"> } <span class="keyword">catch</span> (e) {</div><div class="line"> callback(e);</div><div class="line"> }</div><div class="line"> })</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Good:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs-modified'</span>);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">internalReadFileCallback</span>(<span class="params">error, result</span>) </span>{</div><div class="line"> <span class="comment">// The modified readFile calls the callback with the context object set to `this`,</span></div><div class="line"> <span class="comment">// which is just the original client's callback function</span></div><div class="line"> <span class="keyword">if</span> (error) {</div><div class="line"> <span class="keyword">return</span> <span class="keyword">this</span>(error);</div><div class="line"> }</div><div class="line"> <span class="comment">// The try-catch block is needed to handle a possible syntax error from invalid JSON</span></div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="keyword">var</span> json = <span class="built_in">JSON</span>.parse(result);</div><div class="line"> <span class="keyword">this</span>(<span class="literal">null</span>, json);</div><div class="line"> } <span class="keyword">catch</span> (e) {</div><div class="line"> <span class="keyword">this</span>(e);</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">readFileAsJson</span>(<span class="params">fileName, callback</span>) </span>{</div><div class="line"> <span class="comment">// The modified fs.readFile would take the context object as 4th argument.</span></div><div class="line"> <span class="comment">// There is no need to create a separate plain object to contain `callback` so it</span></div><div class="line"> <span class="comment">// can just be made the context object directly.</span></div><div class="line"> fs.readFile(fileName, <span class="string">'utf8'</span>, internalReadFileCallback, callback);</div><div class="line">}</div></pre></td></tr></table></figure>
<h2 id="尽可能最小化对象大小"><a href="#尽可能最小化对象大小" class="headerlink" title="尽可能最小化对象大小"></a>尽可能最小化对象大小</h2><p>Bad:<br>对象用又创建了新的数组<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">EventEmitter</span> </span>{</div><div class="line"> <span class="keyword">constructor</span>() {</div><div class="line"> <span class="keyword">this</span>.listeners = [];</div><div class="line"> }</div><div class="line"></div><div class="line"> addListener(fn) {</div><div class="line"> <span class="keyword">this</span>.listeners.push(fn);</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>Good:<br>参数直接放入当前的属性<br><figure class="highlight javascript"><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="class"><span class="keyword">class</span> <span class="title">EventEmitter</span> </span>{</div><div class="line"> <span class="keyword">constructor</span>() {</div><div class="line"> <span class="keyword">this</span>.length = <span class="number">0</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> addListener(fn) {</div><div class="line"> <span class="keyword">var</span> index = <span class="keyword">this</span>.length;</div><div class="line"> <span class="keyword">this</span>.length++;</div><div class="line"> <span class="keyword">this</span>[index] = fn;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/04/23/2016-04-23/" itemprop="url">
Unbenannt
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2016-04-23T23:46:31+08:00" content="2016-04-23">
2016-04-23
</time>
</span>
<span class="post-comments-count">
|
<a href="/2016/04/23/2016-04-23/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/04/23/2016-04-23/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><h1 id="技术学习的一些看法"><a href="#技术学习的一些看法" class="headerlink" title="技术学习的一些看法"></a>技术学习的一些看法</h1><p>近两年全栈开发的概念越发的火了，很多公司也都开始招聘这方面的人才，一人能做多种活，省成本啊。全栈是非常考研个人学习能力的，要会的东西多，范围广；我也做了这么多年技术，也简单总结下技术学习的看法。</p>
<p>现在的技术圈发展太快，可以说每月都会有新的黑科技出现，对程序员的考验也是非常大；我们在面对这些新的技术时所要做的应该是先学会用，能开发，再考虑是否要深入学习底层知识；有时架构和底层的东西是有共通性的，例如web架构普遍都会采用MVC，httpserver都是基于tcp等，无论用哪种语言开发都离不开这些概念，但是使用的方式又是各不相同，需要我们能快速掌握，举一反三；而全栈技术需要各方面都会。</p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/04/13/2016-04-13/" itemprop="url">
Unbenannt
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2016-04-13T15:38:05+08:00" content="2016-04-13">
2016-04-13
</time>
</span>
<span class="post-comments-count">
|
<a href="/2016/04/13/2016-04-13/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/04/13/2016-04-13/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><h1 id="JS函数Curry化遇到的奇怪问题"><a href="#JS函数Curry化遇到的奇怪问题" class="headerlink" title="JS函数Curry化遇到的奇怪问题"></a>JS函数Curry化遇到的奇怪问题</h1><figure class="highlight javascript"><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">var</span> f = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">var</span> f1 = <span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>{</div><div class="line"> x += y;</div><div class="line"> <span class="keyword">return</span> f1</div><div class="line"> }</div><div class="line"> f1.toString = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> x;</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> f1;</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(f(<span class="number">3</span>)(<span class="number">2</span>)(<span class="number">1</span>))</div></pre></td></tr></table></figure>
<p>同样的代码在node下和chrome下执行的结果是不同的：<br>chrome下输出6，而node却是将整个function打出</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">{ [<span class="built_in">Function</span>] toString: [<span class="built_in">Function</span>] }</div></pre></td></tr></table></figure>
<p>firefox下和node类似输出</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>/<span class="title">f1</span>(<span class="params"></span>)</span></div></pre></td></tr></table></figure>
<p>可以在console下展开查看内容</p>
<p>而我起初一直以为重写function的toString方法是必须在他的prototype上重写的，但是发现在prototype重写后尽然不是我想要的</p>
<p>chrome下输出<br><figure class="highlight javascript"><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="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>{</div><div class="line"> x += y;</div><div class="line"> <span class="keyword">return</span> f1</div><div class="line"> }</div></pre></td></tr></table></figure></p>
<p>node下输出<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">[<span class="built_in">Function</span>]</div></pre></td></tr></table></figure></p>
<p>firefox下和之前类似输出，只是这次toString方法在prototype属性中</p>
<p>Google了下，发现prototype定义的方法是给他的实例或者他子类的实例用的，所以f1不会去调用，修改成这样后才会调用</p>
<figure class="highlight javascript"><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{</div><div class="line"> <span class="keyword">var</span> f1 = <span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>{</div><div class="line"> x += y;</div><div class="line"> <span class="keyword">return</span> f1</div><div class="line"> }</div><div class="line"> f1.prototype.toString = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="number">123</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">var</span> f2 = <span class="function"><span class="keyword">function</span> (<span class="params">y</span>) </span>{</div><div class="line"> x += y;</div><div class="line"> <span class="keyword">return</span> f2</div><div class="line"> }</div><div class="line"> f2.__proto__ = f1.prototype</div><div class="line"> f1.call(f2)</div><div class="line"> <span class="keyword">return</span> f2;</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(f(<span class="number">3</span>)(<span class="number">2</span>)(<span class="number">1</span>))</div></pre></td></tr></table></figure>
<p>当然此代码在node和firefox下仍然不能正常输出结果，也不知道是为什么!</p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/03/16/2016-03-16/" itemprop="url">
PHP的Cookie删除问题
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2016-03-16T13:27:19+08:00" content="2016-03-16">
2016-03-16
</time>
</span>
<span class="post-comments-count">
|
<a href="/2016/03/16/2016-03-16/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2016/03/16/2016-03-16/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p>正常情况下删除cookie就是调用setcookie方法，并且将过期时间设置为之前的时间；但是如果添加cookie的时候设置了path或者domain参数的话可能就会产生问题。<br>比方：</p>
<pre><code>setcookie('test','a',time()+3600,'/');
</code></pre><p>设置test一个小时后过期，路径在’/‘，域名默认是当前的域名，比如是’www.explame.com’，然后当去删除的时候</p>
<pre><code>setcookie('test','a',time()-24*3600,'/','www.explame.com');
</code></pre><p>如果这样写是无法删除的，因为setcookie时默认会在域名前加“.”号，就变成’.www.explame.com’，所以这样写会去删除’.www.explame.com’域名下的test的cookie，而之前添加的并没有删除，解决方法其实就是添加的时候怎么写，删除的时候也怎么写，就是过期时间修改下。</p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2015/12/25/2015-12-25/" itemprop="url">
JavaScript函数声明与函数表达式写法的区别
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2015-12-25T15:27:19+08:00" content="2015-12-25">
2015-12-25
</time>
</span>
<span class="post-comments-count">
|
<a href="/2015/12/25/2015-12-25/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/25/2015-12-25/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p>表面上的差异是“先与后”，使用函数表达式的方式，调用必须在表达式之后，而函数声明则无关前后问题。</p>
<figure class="highlight javascript"><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">alert(foo); <span class="comment">// function foo() {}</span></div><div class="line">alert(bar); <span class="comment">// undefined</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>{}</div><div class="line"><span class="keyword">var</span> bar = <span class="function"><span class="keyword">function</span> <span class="title">bar_fn</span>(<span class="params"></span>) </span>{};</div><div class="line">alert(foo); <span class="comment">// function foo() {}</span></div><div class="line">alert(bar); <span class="comment">// function bar_fn() {}</span></div></pre></td></tr></table></figure>
<p>可以看到 foo 的声明是写在 alert 之后，仍然可以被正确调用，因为 JavaScript 解释器会将其提升到 alert 前面，而以函数表达式创建的函数 bar 则不享受此待遇。</p>
<p>那么bar 究竟有没有被提升呢，其实用 var 声明的变量都会被提升，只不过是被先赋值为 undefined 罢了，所以第二个 alert 弹出了 undefined。这具体要涉及到js的<em>变量对象</em>和<em>执行环境</em>概念</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">hereOrThere</span>(<span class="params"></span>) </span>{ <span class="comment">//function statement</span></div><div class="line"> <span class="keyword">return</span> <span class="string">'here'</span>;</div><div class="line">}</div><div class="line"></div><div class="line">alert(hereOrThere()); <span class="comment">// alerts 'there'</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">hereOrThere</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'there'</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<p>以上代码hereOrThere函数声明两次，声明首先提升了优先级，并且第二次声明覆盖了第一次声明。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> hereOrThere = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="comment">// function expression</span></div><div class="line"> <span class="keyword">return</span> <span class="string">'here'</span>;</div><div class="line">};</div><div class="line"></div><div class="line">alert(hereOrThere()); <span class="comment">// alerts 'here'</span></div><div class="line"></div><div class="line">hereOrThere = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="string">'there'</span>;</div><div class="line">};</div></pre></td></tr></table></figure>
<p>以上代码hereOrThere表达式写法两次。</p>
<p>执行顺序是解释器先声明hereOrThere变量，此时值是undefined，然后将返回here的函数赋值，接着alert调用。这里因为是声明的变量，而js中不会对变量提升优先级，所以是顺序执行。</p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2015/12/25/2015-12-26/" itemprop="url">
Redux架构总结
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2015-12-25T15:27:19+08:00" content="2015-12-25">
2015-12-25
</time>
</span>
<span class="post-comments-count">
|
<a href="/2015/12/25/2015-12-26/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/25/2015-12-26/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p>社区内比较受推崇，因为用起来相对比较简单<br><img src="media/2869996312-56737fb328792_articlex.png" alt="2869996312-56737fb328792_articlex"></p>
<p>特性：</p>
<ul>
<li>分层设计，职责清晰。</li>
<li>要求store reducer都是页面单例，易于管理。</li>
<li>action为请求dto对象，是请求类型，请求数据的载体。</li>
<li>reducer是处理请求的方法。不允许有状态，必须是纯方法。必须严格遵守输入输出，中间不允许有异步调用。不允许对state直接进行修改，要想修改必须返回新对象。</li>
<li>store</li>
<li>维持应用的state；</li>
<li>提供 getState() 方法获取 state；</li>
<li>提供 dispatch(action) 方法分发请求来更新 state；门面模式，要求所有的请求满足统一的格式【可以进行路由、监控、日志等】，统一的调用方式。</li>
<li>通过 subscribe(listener) 注册监听器监听state的变化。</li>
<li>官方文档写的较为详细，从设计到开发都有，比flux要好</li>
</ul>
<p>redux的原则:</p>
<ol>
<li><p>state不能被修改。</p>
<ul>
<li>其实这个用react的state也会有同样的问题，最好把state设计的没有冗余，尽量少出这种情况</li>
<li>解决方案：参考官方：因为我们不能直接修改却要更新数组中指定的一项数据，这里需要先把前面和后面都切开。如果经常需要这类的操作，可以选择使用帮助类 React.addons.update，updeep，或者使用原生支持深度更新的库 Immutable。最后，时刻谨记永远不要在克隆 state 前修改它。</li>
</ul>
</li>
<li><p>单一的庞大的reducer的拆分</p>
<ul>
<li>这块设计也不好做，会让人疑惑</li>
<li>官方给的demo中直接按state的内容区分，我觉得这样做不好，如果后期有跨内容的情况，就比较奇怪了。官方给的combineReducers方案，也只是减少代码量，本质没有变化，state还是拆分处理，路由还是业务逻辑自己来做。</li>
<li>解决方案：还是处理一整个state，可以按照约定写reducer类而不是方法，类里按照actionType建方法，架构自动路由并调用。</li>
<li>以前做java架构，路由一定是架构来调用的，目前感觉各大flux框架都是解决问题不彻底。</li>
</ul>
</li>
<li><p>官方建议设计模式：顶层容器组件才对redux有依赖，组件间通过props来传递数据。按照这样设计还是没有解决组件间交互和数据传递的问题。官方react设计建议：react的设计建议：<a href="http://camsong.github.io/redux-in-chinese/docs/basics/UsageWithReact.html" target="_blank" rel="external">http://camsong.github.io/redux-in-chinese/docs/basics/UsageWithReact.html</a></p>
</li>
<li><p>使用connect将state绑定到component。此处有些黑盒了。</p>
</li>
<li><p>异步action用来请求服务端数据,利用middleware增强createStore的dispatch后即支持。</p>
</li>
</ol>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2015/12/23/2015-12-23/" itemprop="url">
Node技术进阶脑图
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2015-12-23T15:27:19+08:00" content="2015-12-23">
2015-12-23
</time>
</span>
<span class="post-comments-count">
|
<a href="/2015/12/23/2015-12-23/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/23/2015-12-23/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p><img src="http://i.imgur.com/nvmHDJ4.jpg" alt="Nodejs"></p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2015/12/23/2015-12-24/" itemprop="url">
Redis数据清理导致连接超时
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2015-12-23T15:27:19+08:00" content="2015-12-23">
2015-12-23
</time>
</span>
<span class="post-comments-count">
|
<a href="/2015/12/23/2015-12-24/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/23/2015-12-24/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p>看到一篇讲解Redis数据清理导致连接超时的问题的文章，之前开发系统时也出现过类似问题，但是一直没有确定具体的原因，当时的情况是crontab下有个每分钟都在执行的php脚本，脚本中是通过redis来做锁的控制，起初一切正常，突然有天脚本“卡住”了，redis中的锁没有删除，导致后续启动的脚本立即被退出；查了日志发现当时出现了连接超时的情况，但是不明白其原因，无奈之下我在程序执行一段后就调用一次ping命令希望能够保持连接，今天的这篇文章也是类似的问题，详细了解到了redis的数据清理机制。</p>
<blockquote>
<p>Redis提供了一套“美好”的过期数据清理机制:</p>
<p>主动过期: Redis对数据是惰性过期，当一个key到了过期时间，Redis也不会马上清理，但如果这个key过期后被再次访问，Redis就会主动将它清理掉。</p>
<p>被动过期: 如果过期的Key一直没被访问，Redis也不会一直把它放那不管，它会每秒10次的执行以下的清理工作：</p>
<p>随机从所有带有过期时间的Key里取出20个<br>如果发现有过期的，就清理<br>如果这里有25%的Key都是过期的，就继续回到第一步再来一次</p>
<p>这套过期机制设计的很赞，可以这样理解：如果当前有超过1/4的Key是过期的话，就不停地清理，直到只剩下1/4不到的Key是要过期的为止，然后就慢慢地随机抽查着清理。</p>
</blockquote>
<p>作者后来的解决方法是在业务逻辑中对需要过期处理的key做了分批删除的操作，自己来处理清理数据的工作，避免长时间处理。</p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2015/12/22/2015-12-22/" itemprop="url">
加密算法
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2015-12-22T20:11:19+08:00" content="2015-12-22">
2015-12-22
</time>
</span>
<span class="post-comments-count">
|
<a href="/2015/12/22/2015-12-22/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/22/2015-12-22/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p>#非对称加密<br>非对称加密具有以下的典型用法：</p>
<ul>
<li>对信息保密，防止中间人攻击：将明文通过接收人的公钥加密，传输给接收人，因为只有接收人拥有对应的私钥，别人不可能拥有或者不可能通过公钥推算出私钥，所以传输过程中无法被中间人截获。只有拥有私钥的接收人才能阅读。此用法通常用于交换对称密钥。</li>
<li>身份验证和防止篡改：权限狗用自己的私钥加密一段授权明文，并将授权明文和加密后的密文，以及公钥一并发送出来，接收方只需要通过公钥将密文解密后与授权明文对比是否一致，就可以判断明文在中途是否被篡改过。此方法用于数字签名。<br>著名的RSA算法就是非对称加密算法，RSA以三个发明人的首字母命名。</li>
</ul>
<p>非对称加密算法如此强大可靠，却有一个弊端，就是加解密比较耗时。</p>
<p>#数字签名</p>
<p>数字签名是非对称加密和摘要算法两者结合。假设，我们有一段授权文本，需要发布，为了防止中途篡改文本内容，保证文本的完整性，以及文本是由指定的权限狗发的。首先，先将文本内容通过摘要算法，得到摘要，再用权限狗的私钥对摘要进行加密得到密文，将源文本、密文、和私钥对应的公钥一并发布即可。那么如何验证呢？</p>
<p>验证方首先查看公钥是否是权限狗的，然后用公钥对密文进行解密得到摘要，将文本用同样的摘要算法得到摘要，两个摘要进行比对，如果相等那么一切正常。这个过程只要有一步出问题就视为无效。</p>
<p>#Base64<br>Base64编码的思想是是采用==64个基本的ASCII码字符对数据进行重新编码==。它将需要编码的数据拆分成字节数组。以3个字节为一组。按顺序排列24 位数据，再把这24位数据分成4组，即每组6位。再在每组的的最高位前补两个0凑足一个字节。这样就把一个3字节为一组的数据重新编码成了4个字节。当所要编码的数据的字节数不是3的整倍数，也就是说在分组时最后一组不够3个字节。这时在最后一组填充1到2个0字节。并在最后编码完成后在结尾添加1到2个 “=”。</p>
<p>例：将对ABC进行BASE64编码：</p>
<ol>
<li><p>首先取ABC对应的ASCII码值。A（65）B（66）C（67）；</p>
</li>
<li><p>再取二进制值A（01000001）B（01000010）C（01000011）；</p>
</li>
<li><p>然后把这三个字节的二进制码接起来（010000010100001001000011）；</p>
</li>
<li><p>再以6位为单位分成4个数据块,并在最高位填充两个0后形成4个字节的编码后的值，（00010000）（00010100）（00001001）（00000011），其中加色部分为真实数据；</p>
</li>
<li><p>再把这四个字节数据转化成10进制数得（16）（20）（9）（3）；</p>
</li>
<li><p>最后根据BASE64给出的64个基本字符表，查出对应的ASCII码字符（Q）（U）（J）（D），这里的值实际就是数据在字符表中的索引。</p>
</li>
</ol>
<p>解码过程就是把4个字节再还原成3个字节再根据不同的数据形式把字节数组重新整理成数据。</p>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2015/12/21/2015-12-21/" itemprop="url">
程序员最应该有的技能是什么？
</a>
</h1>
<div class="post-meta">
<span class="post-time">
Veröffentlicht am
<time itemprop="dateCreated" datetime="2015-12-21T14:11:19+08:00" content="2015-12-21">
2015-12-21
</time>
</span>
<span class="post-comments-count">
|
<a href="/2015/12/21/2015-12-21/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/12/21/2015-12-21/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body">
<span itemprop="articleBody"><p>本人根据这几年的工作经验及生活经验总结了几点：</p>
<ol>
<li>学习能力，尤其是快速的学习并掌握的能力，技术日新月异，程序员需要每天都吸取养分，不断接收新的信息，不断学习新的技术；比如当你开发项目时领导交给你个任务，但是你之前从没接触过此类技术，不知道从何入手，于是你google了，查到了些解决方法，但是他是个新的东西，时间又比较紧，你就需要快速学习并简单掌握他。</li>
<li>表达能力，也就是能否与其他同事朋友有效的沟通，注意是有效沟通，就是指用最精简的语言表达出100%的意思，表达能力少若些的也能表达自己的意思，但可能就需要花十几分钟或更久；最基础的是与同是技术人员的表达要清楚，快速；其次是同行业的非技术人员，比如产品，运营等；再就是非同行业的完全不懂的人，比如你的爸妈，爷爷奶奶等。</li>
</ol>
</span>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</section>
<nav class="pagination">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/18/">18</a><a class="extend next" rel="next" href="/page/2/">»</a>
</nav>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<section class="site-overview">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" src="/images/default_avatar.jpg" alt="robbinhan" itemprop="image"/>
<p class="site-author-name" itemprop="name">robbinhan</p>
</div>
<p class="site-description motion-element" itemprop="description"></p>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">175</span>
<span class="site-state-item-name">Artikel</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<span class="site-state-item-count">8</span>
<span class="site-state-item-name">Kategorien</span>
</div>