-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
882 lines (600 loc) · 59.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
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset="utf-8">
<title>Jesse</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="a Js Developer Programmer">
<meta property="og:type" content="website">
<meta property="og:title" content="Jesse">
<meta property="og:url" content="http://zhangyanjian.com/index.html">
<meta property="og:site_name" content="Jesse">
<meta property="og:description" content="a Js Developer Programmer">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Jesse">
<meta name="twitter:description" content="a Js Developer Programmer">
<link rel="icon" href="/css/images/Jesse.jpg" />
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/libs/open-sans/styles.css">
<link rel="stylesheet" href="/libs/source-code-pro/styles.css">
<link rel="stylesheet" href="/css/style.css">
<script src="/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
<link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
</head>
<body>
<div id="container">
<header id="header">
<div id="header-main" class="header-inner">
<div class="outer">
<a href="/" id="logo">
<i class="logo"></i>
<span class="site-title">Jesse</span>
</a>
<nav id="main-nav">
<a class="main-nav-link" href="/.">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
<a class="main-nav-link" href="/about">About</a>
</nav>
<nav id="sub-nav">
<div class="profile" id="profile-nav">
<a id="profile-anchor" href="javascript:;">
<img class="avatar" src="/css/images/Jesse.jpg" />
<i class="fa fa-caret-down"></i>
</a>
</div>
</nav>
<div id="search-form-wrap">
<form class="search-form">
<input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
<button type="submit" class="search-form-submit"></button>
</form>
<div class="ins-search">
<div class="ins-search-mask"></div>
<div class="ins-search-container">
<div class="ins-input-wrapper">
<input type="text" class="ins-search-input" placeholder="想要查找什么..." />
<span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
</div>
<div class="ins-section-wrapper">
<div class="ins-section-container"></div>
</div>
</div>
</div>
<script>
(function (window) {
var INSIGHT_CONFIG = {
TRANSLATION: {
POSTS: '文章',
PAGES: '页面',
CATEGORIES: '分类',
TAGS: '标签',
UNTITLED: '(未命名)',
},
ROOT_URL: '/',
CONTENT_URL: '/content.json',
};
window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>
</div>
</div>
</div>
<div id="main-nav-mobile" class="header-sub header-inner">
<table class="menu outer">
<tr>
<td><a class="main-nav-link" href="/.">Home</a></td>
<td><a class="main-nav-link" href="/archives">Archives</a></td>
<td><a class="main-nav-link" href="/about">About</a></td>
<td>
<div class="search-form">
<input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
</div>
</td>
</tr>
</table>
</div>
</header>
<div class="outer">
<aside id="profile">
<div class="inner profile-inner">
<div class="base-info profile-block">
<img id="avatar" src="/css/images/Jesse.jpg" />
<h2 id="name">Jesse</h2>
<h3 id="title">a Js Developer Programmer</h3>
<span id="location"><i class="fa fa-map-marker"></i>Shenzhen, China</span>
<a id="follow" target="_blank" href="https://github.com/Jesseszhang">关注我</a>
</div>
<div class="article-info profile-block">
<div class="article-info-block">
4
<span>文章</span>
</div>
<div class="article-info-block">
0
<span>标签</span>
</div>
</div>
<div class="profile-block social-links">
<table>
<tr>
<td>
<a href="https://github.com/Jesseszhang/" target="_blank" title="github" >
<i class="fa fa-github"></i>
</a>
</td>
<td>
<a href="http://weibo.com/p/1005053957363141/home?from=page_100505&mod=TAB#plac" target="_blank" title="weibo" >
<i class="fa fa-weibo"></i>
</a>
</td>
<td>
<a href="https://www.instagram.com/jesse_0814/" target="_blank" title="instagram" >
<i class="fa fa-instagram"></i>
</a>
</td>
<td>
<a href="https://youtube.com" target="_blank" title="youtube-play" >
<i class="fa fa-youtube-play"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</aside>
<section id="main">
<article id="post-bigNum" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/07/29/bigNum/">大数字相加前端js实现</a>
</h1>
<div class="article-meta">
<div class="article-date">
<i class="fa fa-calendar"></i>
<a href="/2017/07/29/bigNum/">
<time datetime="2017-07-29T12:30:50.000Z" itemprop="datePublished">2017-07-29</time>
</a>
</div>
</div>
</header>
<div class="article-entry" itemprop="articleBody">
<p>js能表示的最大数值是Number.MAX_VALUE，即1.7976931348623157e+308，在js中超过一定位数就会存在精度问题<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></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> number1 = <span class="number">10000000000000000000000000</span> + <span class="number">11111111111111111111111111</span> <span class="comment">//理论上number1的值应该是21111111111111111111111111（javascript中会表示为科学计数法：2.111111111111111e+25）</span></div><div class="line"><span class="keyword">var</span> number2 = <span class="number">21111111111111111111111000</span></div><div class="line"><span class="built_in">console</span>.log(number1 === number2) <span class="comment">//true</span></div></pre></td></tr></table></figure></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></pre></td><td class="code"><pre><div class="line"><span class="built_in">Math</span>.pow(<span class="number">2</span>, <span class="number">53</span>); <span class="comment">// 9007199254740992</span></div><div class="line"><span class="built_in">Math</span>.pow(<span class="number">2</span>, <span class="number">53</span>) === <span class="built_in">Math</span>.pow(<span class="number">2</span>, <span class="number">53</span>) + <span class="number">1</span>; <span class="comment">// true</span></div><div class="line"><span class="number">9007199254740992</span> === <span class="number">9007199254740992</span> + <span class="number">1</span>; <span class="comment">// true</span></div></pre></td></tr></table></figure>
<p>所以如何避免精度丢失或者就要实现大数的相加，解决方法的思路是以字符串的形式来相加<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><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></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">subString</span>(<span class="params">a, b</span>)</span>{</div><div class="line"> <span class="comment">// 传入前转换成字符串</span></div><div class="line"> <span class="keyword">let</span> stringA = <span class="string">"0"</span> + a</div><div class="line"> <span class="keyword">let</span> stringB = <span class="string">"0"</span> + b</div><div class="line"></div><div class="line"> <span class="keyword">let</span> arrA = stringA.split(<span class="string">''</span>)</div><div class="line"> <span class="keyword">let</span> arrB = stringB.split(<span class="string">''</span>)</div><div class="line"></div><div class="line"> <span class="keyword">let</span> distance = stringA.length - stringB.length;</div><div class="line"></div><div class="line"> <span class="keyword">let</span> maxlength = distance > <span class="number">0</span> ? stringA.length : stringB.length;</div><div class="line"> <span class="comment">// 给每一个加上0 以后好进位</span></div><div class="line"> <span class="keyword">if</span> (distance > <span class="number">0</span>) {</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < distance; i++) {</div><div class="line"> arrB.unshift(<span class="string">'0'</span>)</div><div class="line"> }</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="built_in">Math</span>.abs(distance); i++) {</div><div class="line"> arrA.unshift(<span class="string">'0'</span>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="comment">// 开始相加处理 从最后一个开始处理</span></div><div class="line"> <span class="keyword">let</span> temp = <span class="string">""</span>, res = [], upNum = <span class="number">0</span>;</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = maxlength <span class="number">-1</span>; j > <span class="number">0</span> ; j--) {</div><div class="line"> temp = <span class="built_in">parseInt</span>(arrA[j]) + <span class="built_in">parseInt</span>(arrB[j]) + upNum</div><div class="line"> <span class="keyword">if</span> (temp > <span class="number">10</span>) {</div><div class="line"> <span class="comment">// 最多两位数</span></div><div class="line"> upNum = <span class="number">1</span></div><div class="line"> <span class="keyword">let</span> curTemp = temp.toString().split(<span class="string">''</span>)</div><div class="line"> res.push(curTemp[<span class="number">1</span>])</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> res.push(temp)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> res.reverse().join(<span class="string">''</span>).replace(<span class="regexp">/^0/</span>, <span class="string">''</span>);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(subString(<span class="string">"1235435435435435435435345435345345454354354534534543543543512"</span>, <span class="string">"1111123232312354345345435435345435111111"</span>))</div></pre></td></tr></table></figure></p>
<p>参考文章<a href="http://www.plqblog.com/views/article.php?id=29" target="_blank" rel="external">js实现大数相加</a></p>
</div>
<footer class="article-footer">
<div class="share-container">
</div>
<a data-url="http://zhangyanjian.com/2017/07/29/bigNum/" data-id="cj6acwa3p0005ig4h64120eve" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
(function ($) {
// Prevent duplicate binding
if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
__SHARE_BUTTON_BINDED__ = true;
} else {
return;
}
$('body').on('click', function() {
$('.article-share-box.on').removeClass('on');
}).on('click', '.article-share-link', function(e) {
e.stopPropagation();
var $this = $(this),
url = $this.attr('data-url'),
encodedUrl = encodeURIComponent(url),
id = 'article-share-box-' + $this.attr('data-id'),
offset = $this.offset(),
box;
if ($('#' + id).length) {
box = $('#' + id);
if (box.hasClass('on')){
box.removeClass('on');
return;
}
} else {
var html = [
'<div id="' + id + '" class="article-share-box">',
'<input class="article-share-input" value="' + url + '">',
'<div class="article-share-links">',
'<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
'<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
'<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
'<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
'</div>',
'</div>'
].join('');
box = $(html);
$('body').append(box);
}
$('.article-share-box.on').hide();
box.css({
top: offset.top + 25,
left: offset.left
}).addClass('on');
}).on('click', '.article-share-box', function (e) {
e.stopPropagation();
}).on('click', '.article-share-box-input', function () {
$(this).select();
}).on('click', '.article-share-box-link', function (e) {
e.preventDefault();
e.stopPropagation();
window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
});
})(jQuery);
</script>
<a href="http://zhangyanjian.com/2017/07/29/bigNum/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://zhangyanjian.com/2017/07/29/bigNum/">评论</a>
</footer>
</div>
</article>
<article id="post-deepClone" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/07/26/deepClone/">实现一个简单的deepClone</a>
</h1>
<div class="article-meta">
<div class="article-date">
<i class="fa fa-calendar"></i>
<a href="/2017/07/26/deepClone/">
<time datetime="2017-07-26T12:30:50.000Z" itemprop="datePublished">2017-07-26</time>
</a>
</div>
</div>
</header>
<div class="article-entry" itemprop="articleBody">
<p>深复制和浅复制区别在于深复制能够递归复制所有层级，浅复制有可能复制后地址指针还是指向原来的对象。JSON.parse(JSON.stringify(Object))这种方法的clone不会复制对象内部的函数指针。<br>支持深度复制的有很多，像jQuery的$.clone()和$.extend()、Underscore的clone()以及react的<a href="https://facebook.github.io/immutable-js/" target="_blank" rel="external">immutable</a>等等</p>
<h3 id="一个简单的深度克隆实现"><a href="#一个简单的深度克隆实现" class="headerlink" title="一个简单的深度克隆实现"></a>一个简单的深度克隆实现</h3><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><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></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> testArray = {</div><div class="line"> <span class="attr">testString</span>: <span class="string">'testString'</span>,</div><div class="line"> <span class="attr">subArray</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>],</div><div class="line"> <span class="attr">subArrayString</span>: [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>],</div><div class="line"> <span class="attr">fun</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> <span class="literal">false</span></div><div class="line"> },</div><div class="line"> <span class="attr">testObject</span>: {</div><div class="line"> <span class="attr">subTestString</span>: <span class="string">'subTestString'</span>,</div><div class="line"> <span class="attr">subtestObject</span>: {</div><div class="line"> <span class="attr">subSecondArray</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>],</div><div class="line"> <span class="attr">subSecondString</span>: <span class="string">"subSecondString"</span></div><div class="line"> },</div><div class="line"> <span class="attr">subTestArray</span>: [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>],</div><div class="line"> <span class="attr">subTestArrayString</span>: [<span class="string">'1'</span>, <span class="string">'2'</span>, <span class="string">'3'</span>]</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">deepCopy</span>(<span class="params">targetObject, clone</span>) </span>{</div><div class="line"> <span class="keyword">var</span> cloneObject = clone || {}</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> targetObject) {</div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> targetObject[i] === <span class="string">'object'</span>) {</div><div class="line"> <span class="comment">/**</span></div><div class="line"> * typeof 无法判断array类型。其返回值有number、string、object、boolean、function、undefined</div><div class="line"> * typeof(null) => object tpyeof(array) => object</div><div class="line"> */</div><div class="line"> <span class="keyword">if</span> (targetObject[i].constructor === <span class="built_in">Array</span>) {</div><div class="line"> cloneObject[i] = []</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> cloneObject[i] = {}</div><div class="line"> }</div><div class="line"> <span class="comment">// 对象数组要再次递归调用直到没有</span></div><div class="line"> deepCopy(targetObject[i], cloneObject[i])</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="comment">// 不是对象和数据，直接赋值</span></div><div class="line"> cloneObject[i] = targetObject[i]</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> cloneObject</div><div class="line">}</div><div class="line"><span class="keyword">var</span> cloneTest = {</div><div class="line"> <span class="attr">cloneString</span>: <span class="string">'cloneString'</span>,</div><div class="line"> <span class="attr">cloneArray</span>: [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>],</div><div class="line"> <span class="attr">cloneObject</span>: {</div><div class="line"> <span class="attr">subCloneString</span>: <span class="string">'subCloneString'</span>,</div><div class="line"> <span class="attr">subCloneArray</span>: [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>],</div><div class="line"> }</div><div class="line">}</div><div class="line">result = deepCopy(testArray, cloneTest)</div><div class="line"><span class="built_in">console</span>.dir(result)</div><div class="line">result.subArray.push(<span class="number">10</span>)</div><div class="line"><span class="built_in">console</span>.dir(result.subArray)</div><div class="line"><span class="built_in">console</span>.dir(result.fun())</div><div class="line">result.fun()</div><div class="line"><span class="built_in">console</span>.dir(testArray.subArray)</div></pre></td></tr></table></figure>
<p>最后附上<a href="http://jerryzou.com/posts/dive-into-deep-clone-in-javascript" target="_blank" rel="external">深入剖析 JavaScript 的深复制</a>可以详细了解深度复制，同时可以参考知乎问题<a href="https://www.zhihu.com/question/47746441" target="_blank" rel="external">JavaScript 如何完整实现深度Clone对象</a></p>
</div>
<footer class="article-footer">
<div class="share-container">
</div>
<a data-url="http://zhangyanjian.com/2017/07/26/deepClone/" data-id="cj6acwa3m0004ig4hunpq8h1b" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
(function ($) {
// Prevent duplicate binding
if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
__SHARE_BUTTON_BINDED__ = true;
} else {
return;
}
$('body').on('click', function() {
$('.article-share-box.on').removeClass('on');
}).on('click', '.article-share-link', function(e) {
e.stopPropagation();
var $this = $(this),
url = $this.attr('data-url'),
encodedUrl = encodeURIComponent(url),
id = 'article-share-box-' + $this.attr('data-id'),
offset = $this.offset(),
box;
if ($('#' + id).length) {
box = $('#' + id);
if (box.hasClass('on')){
box.removeClass('on');
return;
}
} else {
var html = [
'<div id="' + id + '" class="article-share-box">',
'<input class="article-share-input" value="' + url + '">',
'<div class="article-share-links">',
'<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
'<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
'<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
'<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
'</div>',
'</div>'
].join('');
box = $(html);
$('body').append(box);
}
$('.article-share-box.on').hide();
box.css({
top: offset.top + 25,
left: offset.left
}).addClass('on');
}).on('click', '.article-share-box', function (e) {
e.stopPropagation();
}).on('click', '.article-share-box-input', function () {
$(this).select();
}).on('click', '.article-share-box-link', function (e) {
e.preventDefault();
e.stopPropagation();
window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
});
})(jQuery);
</script>
<a href="http://zhangyanjian.com/2017/07/26/deepClone/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://zhangyanjian.com/2017/07/26/deepClone/">评论</a>
</footer>
</div>
</article>
<article id="post-sort" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-inner">
<a href="/2017/07/24/sort/" itemprop="url">
<img src="/gallery/sort.png" class="article-banner" />
</a>
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/07/24/sort/">常用排序</a>
</h1>
<div class="article-meta">
<div class="article-date">
<i class="fa fa-calendar"></i>
<a href="/2017/07/24/sort/">
<time datetime="2017-07-24T10:18:18.000Z" itemprop="datePublished">2017-07-24</time>
</a>
</div>
</div>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="常用排序javascript示例"><a href="#常用排序javascript示例" class="headerlink" title="常用排序javascript示例"></a>常用排序javascript示例</h3><p><a href="http://jsdo.it/norahiko/oxIy/fullscreen" target="_blank" rel="external">动画查看排序过程</a></p>
<ul>
<li><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><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="keyword">const</span> curArr = [<span class="number">2</span>, <span class="number">5</span>, <span class="number">76</span>, <span class="number">879</span>, <span class="number">332</span>, <span class="number">11</span>, <span class="number">35</span>, <span class="number">7</span>, <span class="number">80</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">39</span>];</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">quickSort</span>(<span class="params">arr</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (arr.length <= <span class="number">1</span>) {</div><div class="line"> <span class="keyword">return</span> arr;</div><div class="line"> }</div><div class="line"> <span class="keyword">let</span> baseIndex = <span class="built_in">Math</span>.floor(arr.length / <span class="number">2</span>);</div><div class="line"> <span class="keyword">let</span> baseValue = arr.splice(baseIndex, <span class="number">1</span>);</div><div class="line"> <span class="keyword">let</span> leftArr = [],</div><div class="line"> rightArr = [];</div><div class="line"></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < arr.length; i++) {</div><div class="line"> <span class="keyword">if</span> (arr[i] < baseValue) {</div><div class="line"> leftArr.push(arr[i]);</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> rightArr.push(arr[i]);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> quickSort(leftArr).concat(baseValue, quickSort(rightArr))</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(quickSort(curArr))</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * @description sort(fun) fun可选，规定排序顺序，必须是函数</div><div class="line"> * @param {any} num1 </div><div class="line"> * @param {any} num2 </div><div class="line"> * @returns </div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">compare</span>(<span class="params">num1, num2</span>) </span>{</div><div class="line"> <span class="keyword">return</span> num1 - num2;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// sort函数是在原有的数组上排序</span></div><div class="line"><span class="built_in">console</span>.log(curArr.sort(compare))</div></pre></td></tr></table></figure>
</li>
<li><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><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @description 冒泡排序 相邻的两个数进行比较 </div><div class="line"> * @param {any} arr </div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">bubbleSort</span>(<span class="params">arr</span>) </span>{</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < arr.length - <span class="number">1</span>; i++) {</div><div class="line"> <span class="comment">// j < arr.length - i - 1 减少比较次数提高性能</span></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j < arr.length - i - <span class="number">1</span>; j++) {</div><div class="line"> <span class="keyword">if</span> (arr[j] > arr[j + <span class="number">1</span>]) {</div><div class="line"> <span class="keyword">let</span> temp = arr[j]</div><div class="line"> arr[j] = arr[j + <span class="number">1</span>]</div><div class="line"> arr[j + <span class="number">1</span>] = temp</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line">bubbleSort(curArr)</div><div class="line"><span class="built_in">console</span>.log(curArr)</div></pre></td></tr></table></figure>
</li>
<li><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><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * @description 插入排序. 认为该数组第一个元素为有序不需要，去下一个元素 如果下一个元素比上一个大 则移动这个元素</div><div class="line"> * @param {any} arr </div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">insertSort</span>(<span class="params">arr</span>) </span>{</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < arr.length; i++) {</div><div class="line"> <span class="keyword">if</span> (arr[i] < arr[i - <span class="number">1</span>]) {</div><div class="line"> <span class="comment">//需要移动的元素</span></div><div class="line"> <span class="keyword">var</span> temp = arr[i];</div><div class="line"> <span class="comment">//记住有序序列最后位置</span></div><div class="line"> <span class="keyword">var</span> j = i - <span class="number">1</span>;</div><div class="line"> arr[i] = arr[j];</div><div class="line"> <span class="keyword">while</span> (j >= <span class="number">0</span> && temp < arr[j]) {</div><div class="line"> arr[j + <span class="number">1</span>] = arr[j]</div><div class="line"> j--;</div><div class="line"> }</div><div class="line"> arr[j + <span class="number">1</span>] = temp</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> arr;</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(insertSort(curArr))</div></pre></td></tr></table></figure>
</li>
<li><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><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="comment">/**</span></div><div class="line"> * @description 选择排序, 在没有排序中找到最小的元素放在起始位置，再从剩下的再找一直找到最后一个。</div><div class="line"> * @param {any} arr </div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">selectSort</span>(<span class="params">arr</span>) </span>{</div><div class="line"> <span class="keyword">let</span> len = arr.length;</div><div class="line"> <span class="keyword">let</span> temp, minIndex;</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < len - <span class="number">1</span>; i++) {</div><div class="line"> minIndex = i</div><div class="line"> <span class="comment">// 遍历剩下的数组中的元素</span></div><div class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = i + <span class="number">1</span>; j < len; j++) {</div><div class="line"> <span class="keyword">if</span> (arr[j] < arr[minIndex]) {</div><div class="line"> <span class="comment">//替换最小索引</span></div><div class="line"> minIndex = j;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> temp = arr[i];</div><div class="line"> arr[i] = arr[minIndex]</div><div class="line"> arr[minIndex] = temp</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> arr;</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(selectSort(curArr))</div></pre></td></tr></table></figure>
</li>
<li><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><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="comment">/**</span></div><div class="line"> * @description 二分查找 折半查找 **前提是数组且有序** 首先要找到一个中间值，通过与中间值比较，大的放又，小的放在左边。再在两边中寻找中间值，持续以上操作，直到找到最后一个中间值，非递归可以用while实现</div><div class="line"> * @param {any} arr </div><div class="line"> * @param {any} item</div><div class="line"> * @param {any} startIndex </div><div class="line"> * @param {any} endIndex </div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">binarySearch</span>(<span class="params">arr, item, startIndex, endIndex</span>) </span>{</div><div class="line"> <span class="keyword">let</span> end = endIndex || arr.length - <span class="number">1</span>;</div><div class="line"> <span class="keyword">let</span> start = startIndex || <span class="number">0</span>;</div><div class="line"> <span class="keyword">let</span> middle = <span class="built_in">Math</span>.floor((end + start) / <span class="number">2</span>);</div><div class="line"> <span class="comment">// 递归出口，一直寻找中间值，知道找到最后一个中间值。</span></div><div class="line"> <span class="keyword">if</span> (item === arr[middle]) {</div><div class="line"> <span class="comment">// 返回索引</span></div><div class="line"> <span class="keyword">return</span> middle;</div><div class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (item < arr[middle]) {</div><div class="line"> <span class="keyword">return</span> binarySearch(arr, item, <span class="number">0</span>, middle - <span class="number">1</span>)</div><div class="line"> } <span class="keyword">else</span> {</div><div class="line"> <span class="keyword">return</span> binarySearch(arr, item, middle + <span class="number">1</span>, end);</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(binarySearch(curArr, <span class="number">5</span>))</div></pre></td></tr></table></figure></li>
</ul>
</div>
<footer class="article-footer">
<div class="share-container">
</div>
<a data-url="http://zhangyanjian.com/2017/07/24/sort/" data-id="cj6acwa3g0002ig4ho9fy5jxs" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
(function ($) {
// Prevent duplicate binding
if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
__SHARE_BUTTON_BINDED__ = true;
} else {
return;
}
$('body').on('click', function() {
$('.article-share-box.on').removeClass('on');
}).on('click', '.article-share-link', function(e) {
e.stopPropagation();
var $this = $(this),
url = $this.attr('data-url'),
encodedUrl = encodeURIComponent(url),
id = 'article-share-box-' + $this.attr('data-id'),
offset = $this.offset(),
box;
if ($('#' + id).length) {
box = $('#' + id);
if (box.hasClass('on')){
box.removeClass('on');
return;
}
} else {
var html = [
'<div id="' + id + '" class="article-share-box">',
'<input class="article-share-input" value="' + url + '">',
'<div class="article-share-links">',
'<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
'<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
'<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
'<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
'</div>',
'</div>'
].join('');
box = $(html);
$('body').append(box);
}
$('.article-share-box.on').hide();
box.css({
top: offset.top + 25,
left: offset.left
}).addClass('on');
}).on('click', '.article-share-box', function (e) {
e.stopPropagation();
}).on('click', '.article-share-box-input', function () {
$(this).select();
}).on('click', '.article-share-box-link', function (e) {
e.preventDefault();
e.stopPropagation();
window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
});
})(jQuery);
</script>
<a href="http://zhangyanjian.com/2017/07/24/sort/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://zhangyanjian.com/2017/07/24/sort/">评论</a>
</footer>
</div>
</article>
<article id="post-myblog" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-inner">
<a href="/2016/06/14/myblog/" itemprop="url">
<img src="/gallery/instarectangle1.jpg" class="article-banner" />
</a>
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/14/myblog/">工欲善其事，必先利其器</a>
</h1>
<div class="article-meta">
<div class="article-date">
<i class="fa fa-calendar"></i>
<a href="/2016/06/14/myblog/">
<time datetime="2016-06-14T03:18:01.000Z" itemprop="datePublished">2016-06-14</time>
</a>
</div>
</div>
</header>
<div class="article-entry" itemprop="articleBody">
<p>工欲善其事，必先利其器。mac不仅是制作音乐、设计、开发的很好的环境，上网娱乐也很不错，除了玩游戏其他都很强大。今天就聊一聊如何高效率的使用mac，以及介绍下mac那些好用的工具来提升自己的开发效率，文章会不定期更新。</p>
<h3 id="Alfred"><a href="#Alfred" class="headerlink" title="Alfred"></a>Alfred</h3><p>mac上的工具不得不首先要说Alfred，有了Alfred 你甚至无需鼠标就可以实现各种操作，快速打开各中应用。你还可以配置工作流来完成更强大的功能。<a href="http://xclient.info/s/alfred.html?_=28224c24c5d048ba73bf06b15e2a6668" target="_blank" rel="external">Alfred破解版</a><br><img src="/img/workflow.png" alt="强大的工作流" align="center/"><br>yd “需要翻译的词语” 之后按回车复制，比如你敲着代码需要查某个单词直接 option+空格 yd 输入你想查询的单词，以后再也不需要切换界面打开软件聚焦输入…这么繁琐的工作了。工作流一步搞定。<a href="http://alfredworkflow.com/" target="_blank" rel="external">Alfred2工作流</a></p>
<h3 id="BetterTouchTool"><a href="#BetterTouchTool" class="headerlink" title="BetterTouchTool"></a>BetterTouchTool</h3><p><img src="/img/touch.png" alt="BetterTouchTool" align="center/"><br>这个完全解决了我在mac上对全屏和缩小的不适应，可以定制很多手势来提高工作效率，例如mac上全屏和非全屏切换需要点击软件上的切换按钮，使用BetterTouchTool可以定义手势如双击全屏切换，拖拽等等，你可以定制很多你想要的想不到的手势超越mac官方自定义手势！</p>
<h3 id="Moon"><a href="#Moon" class="headerlink" title="Moon"></a>Moon</h3><p>Moon这个软件也是对mac上软件快速排版比如开发时候多开多个软件通过Moon可以快速对软件进行排版快速高效率谁用谁知道</p>
<h3 id="Dash"><a href="#Dash" class="headerlink" title="Dash"></a>Dash</h3><p><img src="/img/dash.jpg" alt="dash" align="center/"><br>一个强大的API开发手册查找，可以结合Alfred内置里面有工作流查找api很方便</p>
<h3 id="Tuxera-Disk-Manager"><a href="#Tuxera-Disk-Manager" class="headerlink" title="Tuxera Disk Manager"></a>Tuxera Disk Manager</h3><p>通常情况下mac外接移动硬盘是没有读写权限，之前用过Mounty不好用，但是Tuxera Disk Manager是直接更改权限，不需要自己手动设置其他东西，唯一缺点就是不是免费的</p>
<h3 id="Logic-pro-X"><a href="#Logic-pro-X" class="headerlink" title="Logic pro X"></a>Logic pro X</h3><p>mac上很强大的音乐制作软件，可以模拟很多效果器，玩音乐必备！同时还推荐Boom 3D这个听歌效果增强器，平时放歌打开还是不错的。</p>
<h3 id="IDE"><a href="#IDE" class="headerlink" title="IDE"></a>IDE</h3><p>开发者工具用过很多 Webstrom，Sublime, Atom, VScode, 不过用来用去还是感觉VScode很强大很好用，其他都有各自的有优势吧，Webstrom功能很多很强大代码提示集合了很多插件支持型很好但是打开一个项目等好久太重。Sublime还不是不错的，安装插件后很强大毕竟老牌功能支持性都很完美，Atom后起之秀功能上也很不错只是插件比较少不够成熟。</p>
</div>
<footer class="article-footer">
<div class="share-container">
</div>
<a data-url="http://zhangyanjian.com/2016/06/14/myblog/" data-id="cj6acwa2h0000ig4hzymwtx8f" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
(function ($) {
// Prevent duplicate binding
if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
__SHARE_BUTTON_BINDED__ = true;
} else {
return;
}
$('body').on('click', function() {
$('.article-share-box.on').removeClass('on');
}).on('click', '.article-share-link', function(e) {
e.stopPropagation();
var $this = $(this),
url = $this.attr('data-url'),
encodedUrl = encodeURIComponent(url),
id = 'article-share-box-' + $this.attr('data-id'),
offset = $this.offset(),
box;
if ($('#' + id).length) {
box = $('#' + id);
if (box.hasClass('on')){
box.removeClass('on');
return;
}
} else {
var html = [
'<div id="' + id + '" class="article-share-box">',
'<input class="article-share-input" value="' + url + '">',
'<div class="article-share-links">',
'<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
'<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
'<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
'<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
'</div>',
'</div>'
].join('');
box = $(html);
$('body').append(box);
}
$('.article-share-box.on').hide();
box.css({
top: offset.top + 25,
left: offset.left
}).addClass('on');
}).on('click', '.article-share-box', function (e) {
e.stopPropagation();
}).on('click', '.article-share-box-input', function () {
$(this).select();
}).on('click', '.article-share-box-link', function (e) {
e.preventDefault();
e.stopPropagation();
window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
});
})(jQuery);
</script>
<a href="http://zhangyanjian.com/2016/06/14/myblog/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://zhangyanjian.com/2016/06/14/myblog/">评论</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">最新文章</h3>
<div class="widget">
<ul id="recent-post" class="">
<li>
<div class="item-thumbnail">
<a href="/2017/07/29/bigNum/" class="thumbnail">
<span class="thumbnail-image thumbnail-none"></span>
</a>
</div>
<div class="item-inner">
<p class="item-category"></p>
<p class="item-title"><a href="/2017/07/29/bigNum/" class="title">大数字相加前端js实现</a></p>
<p class="item-date"><time datetime="2017-07-29T12:30:50.000Z" itemprop="datePublished">2017-07-29</time></p>
</div>
</li>
<li>
<div class="item-thumbnail">
<a href="/2017/07/26/deepClone/" class="thumbnail">
<span class="thumbnail-image thumbnail-none"></span>
</a>
</div>
<div class="item-inner">
<p class="item-category"></p>
<p class="item-title"><a href="/2017/07/26/deepClone/" class="title">实现一个简单的deepClone</a></p>
<p class="item-date"><time datetime="2017-07-26T12:30:50.000Z" itemprop="datePublished">2017-07-26</time></p>
</div>
</li>
<li>
<div class="item-thumbnail">
<a href="/2017/07/24/sort/" class="thumbnail">
<span style="background-image:url(/gallery/sort.png)" alt="常用排序" class="thumbnail-image"></span>
</a>
</div>
<div class="item-inner">
<p class="item-category"></p>
<p class="item-title"><a href="/2017/07/24/sort/" class="title">常用排序</a></p>
<p class="item-date"><time datetime="2017-07-24T10:18:18.000Z" itemprop="datePublished">2017-07-24</time></p>
</div>
</li>
<li>
<div class="item-thumbnail">
<a href="/2016/06/14/myblog/" class="thumbnail">
<span style="background-image:url(/gallery/instarectangle1.jpg)" alt="工欲善其事，必先利其器" class="thumbnail-image"></span>
</a>
</div>
<div class="item-inner">
<p class="item-category"></p>
<p class="item-title"><a href="/2016/06/14/myblog/" class="title">工欲善其事，必先利其器</a></p>
<p class="item-date"><time datetime="2016-06-14T03:18:01.000Z" itemprop="datePublished">2016-06-14</time></p>
</div>
</li>
</ul>
</div>
</div>
<div id="toTop" class="fa fa-angle-up"></div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2017 z Jesse<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
</div>
</div>
</footer>
<script>
var disqus_config = function () {
this.page.identifier = 'undefined';
};
(function() {
var d = document, s = d.createElement('script');
s.src = '//' + 'jesse-zyj' + '.disqus.com/count.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<script src="/libs/lightgallery/js/lightgallery.min.js"></script>
<script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
<script src="/libs/lightgallery/js/lg-pager.min.js"></script>
<script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
<script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
<script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
<script src="/libs/lightgallery/js/lg-hash.min.js"></script>
<script src="/libs/lightgallery/js/lg-share.min.js"></script>
<script src="/libs/lightgallery/js/lg-video.min.js"></script>
<script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
<!-- Custom Scripts -->
<script src="/js/main.js"></script>
</div>
</body>
</html>