-
Notifications
You must be signed in to change notification settings - Fork 0
/
selfcultivation-of-a-front-end-reproduced.html
1100 lines (739 loc) · 52.9 KB
/
selfcultivation-of-a-front-end-reproduced.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 style="display: none;" lang="zh">
<head>
<!--<meta name="google-site-verification" content="Gqq8bcz18JexfyTrefRi_JcHDmR8qCtN-v5Tn6M8a7Q" />-->
<meta charset="utf-8">
<!--
© Material Theme
https://github.com/viosey/hexo-theme-material
Version: 1.5.0 -->
<script>
window.materialVersion = "1.5.0"
// Delete localstorage with these tags
window.oldVersion = [
'codestartv1',
'1.3.4',
'1.4.0',
'1.4.0b1'
]
</script>
<!-- dns prefetch -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net/gh/viosey/hexo-theme-material@latest/source"/>
<!-- Title -->
<title>
一个前端的自我修养(转载) |
Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.
</title>
<!-- Meta & Info -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<meta name="theme-color" content="#0097A7">
<meta name="author" content="Zeddy">
<meta name="description" itemprop="description" content="">
<meta name="keywords" content=",学习,转载">
<!-- Import lsloader -->
<script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(key){try{localStorage.removeItem(key)}catch(e){}};lsloader.setLS=function(key,val){try{localStorage.setItem(key,val)}catch(e){}};lsloader.getLS=function(key){var val="";try{val=localStorage.getItem(key)}catch(e){val=""}return val};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var keys=[];for(var i=0;i<localStorage.length;i++){keys.push(localStorage.key(i))}keys.forEach(function(key){var data=lsloader.getLS(key);if(window.oldVersion){var remove=window.oldVersion.reduce(function(p,c){return p||data.indexOf("/*"+c+"*/")!==-1},false);if(remove){lsloader.removeLS(key)}}})}catch(e){}};lsloader.clean();lsloader.load=function(jsname,jspath,cssonload,isJs){if(typeof cssonload==="boolean"){isJs=cssonload;cssonload=undefined}isJs=isJs||false;cssonload=cssonload||function(){};var code;code=this.getLS(jsname);if(code&&code.indexOf(versionString)===-1){this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload,isJs);return}if(code){var versionNumber=code.split(versionString)[0];if(versionNumber!=jspath){console.log("reload:"+jspath);this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload,isJs);return}code=code.split(versionString)[1];if(isJs){this.jsRunSequence.push({name:jsname,code:code});this.runjs(jspath,jsname,code)}else{document.getElementById(jsname).appendChild(document.createTextNode(code));cssonload()}}else{this.requestResource(jsname,jspath,cssonload,isJs)}};lsloader.requestResource=function(name,path,cssonload,isJs){var that=this;if(isJs){this.iojs(path,name,function(path,name,code){that.setLS(name,path+versionString+code);that.runjs(path,name,code)})}else{this.iocss(path,name,function(code){document.getElementById(name).appendChild(document.createTextNode(code));that.setLS(name,path+versionString+code)},cssonload)}};lsloader.iojs=function(path,jsname,callback){var that=this;that.jsRunSequence.push({name:jsname,code:""});try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(path,jsname,xhr.response);return}}that.jsfallback(path,jsname)}};xhr.send(null)}catch(e){that.jsfallback(path,jsname)}};lsloader.iocss=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.iofonts=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.runjs=function(path,name,code){if(!!name&&!!code){for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code=code}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var script=document.createElement("script");script.appendChild(document.createTextNode(this.jsRunSequence[0].code));script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var that=this;var script=document.createElement("script");script.src=this.jsRunSequence[0].path;script.type="text/javascript";this.jsRunSequence[0].status="loading";script.onload=function(){that.jsRunSequence.shift();if(that.jsRunSequence.length>0){that.runjs()}};document.body.appendChild(script)}};lsloader.tagLoad=function(path,name){this.jsRunSequence.push({name:name,code:"",path:path,status:"failed"});this.runjs()};lsloader.jsfallback=function(path,name){if(!!this.jsnamemap[name]){return}else{this.jsnamemap[name]=name}for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code="";this.jsRunSequence[k].status="failed";this.jsRunSequence[k].path=path}}this.runjs()};lsloader.cssfallback=function(path,name,cssonload){if(!!this.cssnamemap[name]){return}else{this.cssnamemap[name]=1}var link=document.createElement("link");link.type="text/css";link.href=path;link.rel="stylesheet";link.onload=link.onerror=cssonload;var root=document.getElementsByTagName("script")[0];root.parentNode.insertBefore(link,root)};lsloader.runInlineScript=function(scriptId,codeId){var code=document.getElementById(codeId).innerText;this.jsRunSequence.push({name:scriptId,code:code});this.runjs()};lsloader.loadCombo=function(jslist){var updateList="";var requestingModules={};for(var k in jslist){var LS=this.getLS(jslist[k].name);if(!!LS){var version=LS.split(versionString)[0];var code=LS.split(versionString)[1]}else{var version=""}if(version==jslist[k].path){this.jsRunSequence.push({name:jslist[k].name,code:code,path:jslist[k].path})}else{this.jsRunSequence.push({name:jslist[k].name,code:null,path:jslist[k].path,status:"comboloading"});requestingModules[jslist[k].name]=true;updateList+=(updateList==""?"":";")+jslist[k].path}}var that=this;if(!!updateList){var xhr=new XMLHttpRequest;xhr.open("get",combo+updateList,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){that.runCombo(xhr.response,requestingModules);return}}else{for(var i in that.jsRunSequence){if(requestingModules[that.jsRunSequence[i].name]){that.jsRunSequence[i].status="failed"}}that.runjs()}}};xhr.send(null)}this.runjs()};lsloader.runCombo=function(comboCode,requestingModules){comboCode=comboCode.split("/*combojs*/");comboCode.shift();for(var k in this.jsRunSequence){if(!!requestingModules[this.jsRunSequence[k].name]&&!!comboCode[0]){this.jsRunSequence[k].status="comboJS";this.jsRunSequence[k].code=comboCode[0];this.setLS(this.jsRunSequence[k].name,this.jsRunSequence[k].path+versionString+comboCode[0]);comboCode.shift()}}this.runjs()}})();</script>
<!-- Import queue -->
<script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>
<!-- Favicons -->
<link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
<link rel="icon" sizes="192x192" href="/img/favicon.png">
<link rel="apple-touch-icon" href="/img/favicon.png">
<!--iOS -->
<meta name="apple-mobile-web-app-title" content="Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="480">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.">
<!-- Site Verification -->
<meta name="google-site-verification" content="Gqq8bcz18JexfyTrefRi_JcHDmR8qCtN-v5Tn6M8a7Q" />
<!-- RSS -->
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/ie-blocker.css">
<script src="/js/ie-blocker.zhCN.js"></script>
<![endif]-->
<!-- Import CSS -->
<style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","//cdn.jsdelivr.net/gh/viosey/hexo-theme-material@latest/source/css/material.min.css",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","//cdn.jsdelivr.net/gh/viosey/hexo-theme-material@latest/source/css/style.min.css",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Config CSS -->
<!-- Other Styles -->
<style>
body, html {
font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
overflow-x: hidden !important;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
a {
color: #00838F;
}
.mdl-card__media,
#search-label,
#search-form-label:after,
#scheme-Paradox .hot_tags-count,
#scheme-Paradox .sidebar_archives-count,
#scheme-Paradox .sidebar-colored .sidebar-header,
#scheme-Paradox .sidebar-colored .sidebar-badge{
background-color: #0097A7 !important;
}
/* Sidebar User Drop Down Menu Text Color */
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
color: #0097A7 !important;
}
#post_entry-right-info,
.sidebar-colored .sidebar-nav li:hover > a,
.sidebar-colored .sidebar-nav li:hover > a i,
.sidebar-colored .sidebar-nav li > a:hover,
.sidebar-colored .sidebar-nav li > a:hover i,
.sidebar-colored .sidebar-nav li > a:focus i,
.sidebar-colored .sidebar-nav > .open > a,
.sidebar-colored .sidebar-nav > .open > a:hover,
.sidebar-colored .sidebar-nav > .open > a:focus,
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
color: #0097A7 !important;
}
#post_entry-right-info .post_entry-tags{
margin: 0 15px;
}
#post_entry-right-info .post_entry-tags::before{
content: "<"
}
#post_entry-right-info .post_entry-tags::after{
content: ">"
}
.toTop {
background: #757575 !important;
}
.material-layout .material-post>.material-nav,
.material-layout .material-index>.material-nav,
.material-nav a {
color: #757575;
}
#scheme-Paradox .MD-burger-layer {
background-color: #757575;
}
#scheme-Paradox #post-toc-trigger-btn {
color: #757575;
}
.post-toc a:hover {
color: #00838F;
text-decoration: underline;
}
</style>
<!-- Theme Background Related-->
<style>
body{
background-color: #F5F5F5;
}
/* blog_info bottom background */
#scheme-Paradox .material-layout .something-else .mdl-card__supporting-text{
background-color: #fff;
}
</style>
<!-- Fade Effect -->
<style>
.fade {
transition: all 800ms linear;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.fade.out{
opacity: 0;
}
</style>
<!-- Import Font -->
<!-- Import Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- Import Material Icon -->
<link rel="stylesheet" href="//cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css">
<!-- Import jQuery -->
<script>lsloader.load("jq_js","//cdn.bootcss.com/jquery/2.2.4/jquery.min.js", true)</script>
<!-- The Open Graph protocol -->
<meta property="og:url" content="http://zhangdi.site">
<meta property="og:type" content="blog">
<meta property="og:title" content="一个前端的自我修养(转载) | Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.">
<meta property="og:image" content="http://zhangdi.site/img/favicon.png" />
<meta property="og:description" content="">
<meta property="og:article:tag" content="学习"> <meta property="og:article:tag" content="转载">
<meta property="article:published_time" content="Sat Aug 18 2018 20:08:53 GMT+0800" />
<meta property="article:modified_time" content="Fri Aug 31 2018 00:11:37 GMT+0800" />
<!-- The Twitter Card protocol -->
<meta name="twitter:title" content="一个前端的自我修养(转载) | Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="http://zhangdi.site/img/favicon.png">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="http://zhangdi.site" />
<!-- Add canonical link for SEO -->
<link rel="canonical" href="http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html" />
<!-- Structured-data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": "http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html",
"headline": "一个前端的自我修养(转载)",
"datePublished": "Sat Aug 18 2018 20:08:53 GMT+0800",
"dateModified": "Fri Aug 31 2018 00:11:37 GMT+0800",
"author": {
"@type": "Person",
"name": "Zeddy",
"image": {
"@type": "ImageObject",
"url": "http://oox9lo3vp.bkt.clouddn.com/17-12-14/73776896.jpg"
},
"description": "死亡是一座永恒的灯塔,不管你驶向何方,最终都会朝它转向.一切都将逝去,只有死神永生."
},
"publisher": {
"@type": "Organization",
"name": "Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.",
"logo": {
"@type":"ImageObject",
"url": "/img/favicon.png"
}
},
"keywords": ",学习,转载",
"description": "",
}
</script>
<!-- Analytics -->
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?9e11228d3158bca19d5fb7c05a0c2be2';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Custom Head -->
<link rel="stylesheet" href="/css/prism.css" type="text/css"></head>
<body id="scheme-Paradox" class="lazy">
<div class="material-layout mdl-js-layout has-drawer is-upgraded">
<!-- Main Container -->
<main class="material-layout__content" id="main">
<!-- Top Anchor -->
<div id="top"></div>
<!-- Hamburger Button -->
<button class="MD-burger-icon sidebar-toggle">
<span class="MD-burger-layer"></span>
</button>
<!-- Post TOC -->
<!-- Back Button -->
<!--
<div class="material-back" id="backhome-div" tabindex="0">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
href="#" onclick="window.history.back();return false;"
target="_self"
role="button"
data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons" role="presentation">arrow_back</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</a>
</div>
-->
<!-- Left aligned menu below button -->
<!-- Layouts -->
<!-- Post Module -->
<div class="material-post_container">
<div class="material-post mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<!-- Post Header(Thumbnail & Title) -->
<!-- Paradox Post Header -->
<!-- Random Thumbnail -->
<div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
<script type="text/ls-javascript" id="post-thumbnail-script">
var randomNum = Math.floor(Math.random() * 19 + 1);
$('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
$('.post_thumbnail-random').addClass('lazy');
</script>
<p class="article-headline-p">
一个前端的自我修养(转载)
</p>
</div>
<!-- Paradox Post Info -->
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
<!-- Author Avatar -->
<div id="author-avatar">
<img src="http://oox9lo3vp.bkt.clouddn.com/17-12-14/73776896.jpg" width="44px" height="44px" alt="Author Avatar"/>
</div>
<!-- Author Name & Date -->
<div>
<strong>Zeddy</strong>
<span>8月 18, 2018</span>
</div>
<div class="section-spacer"></div>
<!-- Favorite -->
<!--
<button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
<i class="material-icons" role="presentation">favorite</i>
<span class="visuallyhidden">favorites</span>
</button>
-->
<!-- Qrcode -->
<button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">devices other</i>
<span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
<li class="mdl-menu__item">在其它设备中阅读本文章</li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2CAAAAADAeSUUAAAC1ElEQVR42u3ay3IbMQwEQP3/TyfXVCWSZwArUcjmSbVeiWz6gMLj8ePK9cDGxsbGxsbGxsb+SPYjXn/4oV+eP/v87Mnr58le7ZmxsbGxz2bnW75+5/ctnx7iyZPkF2ZnxsbGxr6B/Xrj/BBJ8EvebM/zxamwsbGxsQN2Hq426RA2NjY29jvYyfNZ6SopYGFjY2Njt6X510Hoe5+34RAbGxv7TvYmDfhXn/9qfxsbGxv7g9ntmo3vtA2APHAWJ8fGxsY+lJ0Hhk2Kkn9r1hKIylLY2NjYh7Jn4WFWrJ+9ORsVwsbGxsaeJQyvA0zeNp4lP3VRCRsbG/sIdt4AaA+dX0fSPM4LVXWjFxsbG/sg9mzgMg9aeZOgTWmiXbCxsbGPZkdFmUUrd5PStC3nVVcEGxsb+z9kt0lFe01tMzhvIeTBFRsbG/tsdh4G2hZCW/RJLq4dCcLGxsbGbsdo9q3ZvPxUB1RsbGzsQ9mzJu6+2DQLkJtAi42NjX0DO2nZ5uWedpf8nXaQCBsbG/tsdgvIG7rvCEuzi8DGxsY+mz0rG7WrHeXZj2lGqQg2Njb2Eew88OSj7W0beN/QjYpW2NjY2Iey88PNgtYmNL6+4vbfgI2NjX0qOx+RfIzWPtXZBz9sbGzsG9j7dm9eqEoSjHy8skilsLGxsa9h51smCUObVLRpSd42xsbGxr6ZPQsb+Xdnf81DIDY2NvY97Dy1yC+r/Z0iIJWtC2xsbOwb2HkIyUtOUblnsWMSJrGxsbHPZu8HcWZlqX0xqy1OYWNjY5/Kng3ERNsEQWXT7q0DKjY2NvbR7CRo5Vu2jeE8UG1KS9jY2Ng3sNvWbF6an6Ul+4WNjY2NPSvuDxuxwS6r9AYbGxsbexHMZglJGyC/+GVsbGzsC9j5ofMt87CUXHHbnMDGxsa+hz0bavze69iP6byxv42NjY39wex7FjY2NjY2NjY2NvbHrJ8/ebnMVD+iYAAAAABJRU5ErkJggg==">
</ul>
<!-- Tags (bookmark) -->
<button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">bookmark</i>
<span class="visuallyhidden">bookmark</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
<li class="mdl-menu__item">
<a class="post_tag-link" href="/tags/学习/">学习</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/转载/">转载</a>
</ul>
<!-- Share -->
<button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
<!-- Share Weibo -->
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=一个前端的自我修养(转载)&url=http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html&pic=http://zhangdi.site/img/favicon.png&searchPic=false&style=simple" target="_blank">
<li class="mdl-menu__item">
分享到微博
</li>
</a>
<!-- Share Twitter -->
<a class="post_share-link" href="https://twitter.com/intent/tweet?text=一个前端的自我修养(转载)&url=http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html&via=Zeddy" target="_blank">
<li class="mdl-menu__item">
分享到 Twitter
</li>
</a>
<!-- Share Facebook -->
<a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html" target="_blank">
<li class="mdl-menu__item">
分享到 Facebook
</li>
</a>
<!-- Share Google+ -->
<a class="post_share-link" href="https://plus.google.com/share?url=http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html" target="_blank">
<li class="mdl-menu__item">
分享到 Google+
</li>
</a>
<!-- Share LinkedIn -->
<!-- Share QQ -->
<a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.&title=一个前端的自我修养(转载)&summary=&pics=http://zhangdi.site/img/favicon.png&url=http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html" target="_blank">
<li class="mdl-menu__item">
分享到 QQ
</li>
</a>
<!-- Share Telegram -->
</ul>
</div>
<!-- Post Content -->
<div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
<blockquote>
<p>读到好文必须收藏分享。</p>
<p>本文来自于 <strong><a href="http://taobaofed.org/" target="_blank" rel="noopener">淘宝前端团队(FED) </a></strong> 博客。</p>
<p>原文地址： <a href="http://taobaofed.org/blog/2016/03/23/the-growth-of-front-end/" target="_blank" rel="noopener">http://taobaofed.org/blog/2016/03/23/the-growth-of-front-end/</a></p>
<p>作者: 寒泉（winter） 发表于: 2016-03-23</p>
</blockquote>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/41525547.jpg" alt=""></p>
<p>今天给大家分享的主题是前端的自我成长，这是一个关于成长的话题。</p>
<p>很多人都有这样的感觉：听了很多技术圈子的分享，有的有深度，有的循循善诱，深入浅出，但是呢，几年下来，到底哪些用上了，哪些对自己真的有帮助了?反而有些模糊。</p>
<p>2015 年我在不同的场合分享了很多内容：有移动端的性能、有适配、有 Web vs Native，也有 hybrid，但是其实我一直比较担心，真正有深度的内容，其实面向的是比较小众的群体，比如说 Hybrid，其实它在大部分公司里面，是只能用现成的。</p>
<p>所以我这一次尝试分享一个我认为可以帮助到所有前端的话题，关于前端的成长，如果说这个分享的内容，听众里面有那么几十个人拿到 BAT 的 offer，或者升职加薪，那么我觉得我就认为我取得了成功。</p>
<p>前端其实是个特别苦逼的职业，因为前端技术一直革命的特别快，新技术、新技巧在不断地被发明出来。之前我有一个朋友，他讲说他对自己的认知是了解前端、熟悉前端、精通前端、熟悉前端、不懂前端。为什么呢，他说当他觉得自己对前端所有的东西觉得无所不知，无所不能的时候，忽然看到了一段代码，他完全无法理解，于是整个世界就崩塌了，从此再也不敢说自己会前端。</p>
<p>我就跟他说，这里，缺少的是一种正确的方法，你觉得无所不知、无所不能的标准是什么，是工作中很久没遇到解决不了的问题么？他说还真是这样。我就又问他，那你系统学过前端么？他想了想，还真没学过，大学里不开这个课。的确如此，到目前为止，还没有任何一个大学会教前端，倒是有些培训班，会讲网页开发三剑客。</p>
<p>我这里讲的内容，希望带给大家的，就是该如何学习前端，实现自身成长。</p>
<hr>
<p>关于成长，首先我得发一个免责声明，不是我对我讲的内容没有信心，而是成长是自己的事，英文有句话，在外企工作的人会经常听到，叫做：</p>
<p>You are the owner of your career.</p>
<p>你是你职业发展的责任人。这句话潜台词是，你（不是你老板，也不是你爸妈，也不是你女朋友）是你职业发展的责任人。</p>
<p>这句话我在我职业生涯的起点听说，一直指导我的职业发展，甚至在我带团队，培养团队的时候，也是中心的指导思想，之前我带的团队的同学，他们有不少人也在带团队，其实他们也在实践这句话，所以我这里，也把这句话、把这个道理分享给给大家。</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/91567954.jpg" alt=""></p>
<p>我们讲前端成长，<strong>我认为，主要在两个方面，一部分是“能力”，一部分是“知识”</strong>。我个人的观点，能力占百分之八十，知识占百分之二十。</p>
<p>从这个图上，大家可以看到，其实我们认为变化快的东西，最新出来的 Angular、React、ES2015，其实都在知识里面，知识又分成两部分，一部分我把它叫做标准，它是相对而言比较稳定的，很少会出现一个标准被推翻的事情。另一部分则是技术，像是 jQ、React 这些框架啦，像是 MVC、FLUX 这些架构的东西，这些东西是由各个公司主导的，变化就非常快，你看 Grunt 发展了没多久，Gulp 就来挑战他了，然后又有 browserify、webpack 这些东西。</p>
<p>而我认为占重点的能力，则是非常稳定的，我认为能力是三大块：编程能力、架构能力、工程能力。</p>
<p><strong>编程能力</strong>，就是用代码解决问题的能力，你编程能力越强，就能解决越复杂的问题，细分又有调试、算法、数据结构、OS 原理等这些的支撑，你才能解决各种麻烦的问题。</p>
<p><strong>架构能力</strong>，则是解决代码规模的问题，当一个系统足够复杂，你会写每一块，能解决每一个问题，不等于你能搞定整个系统，这就需要架构能力，架构能力包含了一些意识，比如解耦、接口隔离，也包含认识业务建立抽象模型，也有一些常见的模式，比如经典的 MVC，还有设计层面，面向对象、设计模式等等。</p>
<p>最后<strong>工程能力</strong>，则是解决协作的问题，当系统规模更大，光靠一个人，是没办法完成的，如何保证几个高手互相能够配合好？如何保证项目里面水平最差的人不拖后腿？这个工程化建设，往往会跨越多个业务，以汇报关系上的团队为单位来做。包括前后端解耦，模块化，质量保证，代码风格，等等。</p>
<p>其实不难看出来，这三项，其实是有顺序的，低等级、小团队，编程能力一项就能应付，越资深的前端，越大的公司和团队，越是需要后面的技能，但是这里我要强调一点，其实资深前端，大团队，对能力的需求，是既要还要——不是说资深的前端，编程能力就可以变差。</p>
<p>社区总会有一些声音，对工程能力，对架构能力持有一种抵触的态度，觉得比较虚，觉得不需要。实际上以某些人所在的岗位来说，也没错，毕竟公司、团队的状态确实可能用不到，但是以个人成长的角度来看，就是大错特错。</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/33977132.jpg" alt=""></p>
<p>下面我们来具体讲讲，关于知识的学习。</p>
<p>对知识，我一直有个观点，叫做宁缺毋滥，这个图片上写了一句好前端才分对错，是的，其实很多人，他学习东西的时候就喜欢挑，挑简单的学，书选择最”深入浅出”的，在这种心态下，没有任何一丝学好的可能性，</p>
<p>所以我对知识学习的目标，理解为亮点，一曰准确，二曰全面。当年学习一部分知识，如果你能做到这两点，那你将来在业务上做技术决策的时候，你面对面试官技术问题的时候，信心跟你只看过皮毛是完全不一样的。</p>
<p>怎么做到这两点呢？我想路子肯定有很多，而我的答案，我这里要分享的，是“建立自己的知识体系”。</p>
<p>如何建立自己的知识体系呢？我个人总结的经验，是下面几个步骤：</p>
<p><strong>第一步，寻找线索。</strong></p>
<p>你要了解一个知识，比如我想学 Web 平台的 API 了，当然可以先找一本书，看看别人都写了什么，但是我不喜欢这么干。</p>
<p>我大学里，学前端的东西，为了找个 id 和 name 的区别，曾经要借十几本书来，对比着看，那个时候，是真的没人告诉我，什么书比较好。所以我对别人总结好的知识，第一反应是质疑，不信。</p>
<p>所以我比较推荐，找一些比较准确的，你可以确定它真的足够全面的资料当作线索。对 Web 平台的 API，我就用反射：</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/94486923.jpg" alt=""></p>
<p>浏览器里给出来的这个属性列表是不会骗人的，用这个东西作为线索，我就很有信心。</p>
<p>同样可能比较适合做的资料，还有一些标准文档的附录，和源代码里的结构定义。</p>
<p><strong>第二步，是建立联系。</strong></p>
<p>比如说，看下面几个 DOM 属性：</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/90622726.jpg" alt=""></p>
<p>这里，左边一列是操作 Node 的，右边一列是操作 Element 的，它就存在一定的对应关系。</p>
<p>一般来说，我们找对应关系的方式有以下几个依据：</p>
<ul>
<li>美感</li>
<li>完备性</li>
<li>操作同一组数据</li>
</ul>
<p>特别提一下，操作同一组数据，正是面向对象的核心概念，对前端而言，有点不一样的是，所有的 API，根都是 window，所以，其实大部分的 API，可以依据面向对象的数据和操作的观点进行划分。</p>
<p><strong>第三步，是分类。</strong></p>
<p>这里我给出一个实际一些的例子，下图是我对 zepto(移动简化版jQuery)，的 API 分类</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/69533820.jpg" alt=""></p>
<p>建立联系以后，我们依据知识之间的联系，进行分类，就可以得到一张图谱，在这个图里面，你就可以非常清楚地知道，哪些知识，是非常重要的，哪些，其实是可以互相替代的。</p>
<p>而一旦有你之前没见过的东西，你又能通过把它放到图谱里，来快速理解它，或者找出一些很好的替代方案。</p>
<p>比如说面试的时候，如果面试官问你 bind 和 unbind 怎么用，你还不会，这时候，如果你心里有这张图，你就不至于一脸懵了，你可以说，虽然我不知道 bind 和 unbind，但是我知道 live 和 die 啊，我又知道 on 和 off 啊。</p>
<p>这张图里我们就可以看出，collection 里面的东西，多半没什么用，而节点操作里，肯定就都很有用。</p>
<p>第四步，是追本溯源。</p>
<p>当我对一个知识体系的全貌有了概念以后，占了全面两个字，接下来需要确认它的准确性。很多知识，在社区，会有很多的争议，该相信谁呢，这是个问题。而我的答案，就是追本溯源，去找它最初的讨论和定义。</p>
<p>有一个真实的案例，就是闭包这个概念，曾经我们很多人的理解都是错的，把闭包和 scope 的概念给混淆起来，认为闭包是函数的执行环境上下文，但是有一个叫做 hax 的（很多人应该都认识他，哈哈），他就对此提出了质疑，认为闭包就是函数。于是我就去查证闭包的概念。</p>
<p>大家都知道，wiki 其实是不准确的，但是其中有一段，基本不会太有问题，就是历史。下图是 closure 这个词条的历史部分：</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/58601066.jpg" alt=""></p>
<p>从这段历史里，我找到了一个名字， Peter J Landin，他是提出者，那么，我就去看看他到底是怎么说的，于是我去 google 学术搜索，找他的文章</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/917120.jpg" alt=""></p>
<p>果然找到了，于是我们看看原始的文件</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/71962363.jpg" alt=""></p>
<p>这个定义，对应到我们今天 JS 里的闭包，是稍微有点区别的，但是它毫无疑问，是包含了两个部分环境部分和控制（代码）部分，所以其实，闭包就是对应着 JS 的函数，而之前，普遍的观点是认为闭包只包含环境。</p>
<p>所以这个追溯的过程，能够帮我们真正搞清楚对错。</p>
<p>除了 wiki-google 学术搜索的组合，还有一些邮件列表和 github 提交历史，也是非常适合去查证一些概念和技术的历史的。</p>
<p>最后说，我讲的这个建立知识体系的过程，是不断接受新知识，挑战、质疑原有的体系，推翻再重建，每一次循环，你的知识体系都变得更加坚固，更加强大。</p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/25781080.jpg" alt=""></p>
<p><img src="http://oox9lo3vp.bkt.clouddn.com/18-8-18/20695727.jpg" alt=""></p>
<p>下面分享的一部分，是关于能力培养。</p>
<p>能力培养其实重要性很高，但是其实说起来，内容却很少。只有两点: 教材、训练。</p>
<p>对知识学习，我是主张建立自己的体系，不要去相信书，但是对能力培养，我的观点就刚好相反，我觉得能力的体系，恰恰是难以自己建立的，需要教材去指导。这是由两者的复杂程度和变化速度决定的。</p>
<p>想培养能力，就要找经典的教材来学习，像算法导论，The C++ Programming Language这些经典，几十年都没有过时。</p>
<p>注意这里我用了教材，而不是书。</p>
<p>教材和书最大的区别，就是有没有习题。</p>
<p>在我看来，内容再难的书可以一星期读两本，但是教材一定不行，教材一定得花几个月的时间，一边读一边做习题。</p>
<p>于是谈到训练。</p>
<p>其实有个事实是，工作以后，只有极少数人仍然能够做到训练，比如我自己的编程能力，我自觉工作 7、8 年，几乎没有过进步。</p>
<p>训练应该是系统的（需要教材）、主动的，这两个特点不可或缺，有人会觉得，我真的工作很辛苦，每天都要加班，但是其实，任何被动的痛苦，都没法给人带来进步，你的痛苦倒是可能给老板带来更多收入。</p>
<p>如果面临困境，可以选择系统训练来提升自己，但是对大部分人来说，可能更乐于选择一个一个变通的办法: 养成习惯，让工作变得更有挑战。</p>
<p>这个事情其实有不少理论，比较有名的是 Noel Tichy 提出的心理舒适区、学习区和恐慌区。选择一份对自己来说具有挑战性的工作，正面解决问题。</p>
<p>技术圈里流行一个笑话，说的是一个人，工作了三年，却只有一年的经验，因为后面两年都在重复第一年的工作。</p>
<p>所以我们要做的事，就是永远不重复劳动，当你觉得现在的工作，越来越舒适，越来越缺少风险的时候，就应该引起警惕了。</p>
<p>而虽然训练是个很困难的事情，其实大家也不必过于担忧，虽然到处都是“一万小时训练”的言论，现在各大公司的招聘门槛，在我看来应该都卡在几百小时训练的程度。所以我想说，一万小时太久，只争朝夕。希望看到大家成为更好的前端，做更好的自己。</p>
</div>
<!-- Post Comments -->
<!-- 使用 DISQUS -->
<div id="disqus-comment">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_config = function () {
this.page.url = 'http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = 'http://zhangdi.site/selfcultivation-of-a-front-end-reproduced.html'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
</script>
<script type="text/ls-javascript" id="disqus-thread-script">
queue.offer(function() {
(function() { // DON'T EDIT BELOW THIS LINE
var d = document;
var s = d.createElement('script');
s.src = '//zhangdi.disqus.com/embed.js';
s.setAttribute('data-timestamp', + new Date());
(d.head || d.body).appendChild(s);
})();
});
</script>
</div>
<style>
#disqus-comment{
background-color: #eee;
padding: 2pc;
}
</style>
</div>
<!-- Post Prev & Next Nav -->
<nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<!-- Prev Nav -->
<a href="/centos-builds-easymock-service.html" id="post_nav-newer" class="prev-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_back</i>
</button>
新篇
</a>
<!-- Section Spacer -->
<div class="section-spacer"></div>
<!-- Next Nav -->
<a href="/yahoos-35-military-regulations-for-optimization-of-frontend-performance-reproduced.html" id="post_nav-older" class="next-content">
旧篇
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</nav>
</div>
</div>
<!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
<div id="sidebar-main">
<!-- Sidebar Header -->
<div class="sidebar-header header-cover" style="background-image: url(http://oox9lo3vp.bkt.clouddn.com/17-12-14/47172263.jpg);">
<!-- Top bar -->
<div class="top-bar"></div>
<!-- Sidebar toggle button -->
<button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons">clear_all</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple">
</span>
</span>
</button>
<!-- Sidebar Avatar -->
<div class="sidebar-image">
<img src="http://oox9lo3vp.bkt.clouddn.com/17-12-14/73776896.jpg" alt="Zeddy's avatar">
</div>
<!-- Sidebar Email -->
<a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
<b class="caret"></b>
</a>
</div>
<!-- Sidebar Navigation -->
<ul class="nav sidebar-nav">
<!-- User dropdown -->
<li class="dropdown">
<ul id="settings-dropdown" class="dropdown-menu">
<li>
<a href="#" target="_blank" title="Email Me">
<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
Email Me
</a>
</li>
</ul>
</li>
<!-- Homepage -->
<li id="sidebar-first-li">
<a href="/">
<i class="material-icons sidebar-material-icons">home</i>
主页
</a>
</li>
<li class="divider"></li>
<!-- Archives -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">inbox</i>
归档
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/archives/2018/08/">八月 2018<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/07/">七月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/06/">六月 2018<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/05/">五月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/04/">四月 2018<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/02/">二月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/01/">一月 2018<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">12</span></a>
</ul>
</li>
<!-- Categories -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
分类
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/categories/hexo/">Hexo<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/share/">分享境<span class="sidebar_archives-count">14</span></a></li><li><a class="sidebar_archives-link" href="/categories/technology/">技术向<span class="sidebar_archives-count">28</span></a></li><li><a class="sidebar_archives-link" href="/categories/self-talk/">自言语<span class="sidebar_archives-count">2</span></a>
</ul>
</li>
<!-- Pages -->
<li>
<a href="/tags" title="标签云">
<i class="material-icons sidebar-material-icons">bookmark</i>
标签云
</a>
</li>
<li>
<a href="/about" title="关于我">
<i class="material-icons sidebar-material-icons">person</i>
关于我
</a>
</li>
<li class="divider"></li>
<!-- Article Number -->
</ul>
<!-- Sidebar Footer -->
<!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->
<!-- Sidebar Divider -->
<!-- Theme Material -->
<!-- custom -->
<!-- Resume -->
<a href="https://zhangdi666.gitee.io/resume/" class="sidebar-footer-text-a" target="_blank">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons sidebar-material-icons">assignment</i>我的简历
</div>
</a>
<!-- CNode -->
<a href="https://zhangdi666.gitee.io/vue-cnode" class="sidebar-footer-text-a" target="_blank">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons sidebar-material-icons">airplay</i>Zh-CNode
</div>
</a>
<!-- Help & Support -->
<!--
-->
<!-- Feedback -->
<!--
-->
<!-- About Theme -->
<!--
-->
</div>
<!-- Sidebar Image -->
</aside>
<!-- Footer Top Button -->
<div id="back-to-top" class="toTop-wrap">
<a href="#top" class="toTop">
<i class="material-icons footer_top-i">expand_less</i>
</a>
</div>
<!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
<!-- Paradox Footer Left Section -->
<div class="mdl-mini-footer--left-section sns-list">
<!-- Twitter -->
<!-- Facebook -->
<!-- Google + -->
<!-- Weibo -->
<!-- Instagram -->
<!-- Tumblr -->
<!-- Github -->
<a href="https://github.com/SuGod" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
<span class="visuallyhidden">Github</span>
</button><!--
--></a>
<!-- LinkedIn -->
<!-- Zhihu -->
<!-- Bilibili -->
<!-- Telegram -->
<!-- V2EX -->
</div>
<!--Copyright-->
<div id="copyright">
Copyright © 2015 -<script type="text/javascript">var fd = new Date();document.write(" " + fd.getFullYear() + " ");</script>Zhangdi'Blog --- 爱技术爱折腾,无折腾不技术.
<br>
蜀ICP备17019667号-1
<span>Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></span>
<span>Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></span>
</div>
<!-- Paradox Footer Right Section -->
<!--
I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
它不会影响美观并可以给开发者很大的支持。 :)
<div class="mdl-mini-footer--right-section">
<div>
<div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
<div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
</div>
</div>
-->
</footer>
<!-- Import JS File -->
<script>lsloader.load("lazyload_js","//cdn.jsdelivr.net/gh/viosey/hexo-theme-material@latest/source/js/lazyload.min.js", true)</script>
<script>lsloader.load("js_js","//cdn.jsdelivr.net/gh/viosey/hexo-theme-material@latest/source/js/js.min.js", true)</script>
<script>lsloader.load("np_js","//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js", true)</script>
<script type="text/ls-javascript" id="NProgress-script">
NProgress.configure({
showSpinner: true
});
NProgress.start();
$('#nprogress .bar').css({
'background': '#29d'
});