-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1405 lines (906 loc) · 159 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="https://erasermeng.github.io">
<title>孟健的个人博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="西安交通大学16级，就职于腾讯SNG，擅长前端开发各项技能，深入研究前端工程化及性能">
<meta name="keywords" content="前端开发,Webpack,Vue,Angular,React,Node.js,前端工程化,JavaScript,Gulp,CSS3,Vuex,Redux,Mobx,Express,Koa,HTML5">
<meta property="og:type" content="website">
<meta property="og:title" content="孟健的个人博客">
<meta property="og:url" content="https://erasermeng.github.io/index.html">
<meta property="og:site_name" content="孟健的个人博客">
<meta property="og:description" content="西安交通大学16级，就职于腾讯SNG，擅长前端开发各项技能，深入研究前端工程化及性能">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="孟健的个人博客">
<meta name="twitter:description" content="西安交通大学16级，就职于腾讯SNG，擅长前端开发各项技能，深入研究前端工程化及性能">
<link rel="alternative" href="/atom.xml" title="孟健的个人博客" type="application/atom+xml">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/./main.507b3a.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
</head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #4d4d4d"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="null" class="profilepic">
<img src="/avatar.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="null">erasermeng</a></h1>
</hgroup>
<p class="header-subtitle">每18至24个月，前端都会难一倍</p>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">归档</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/erasermeng" title="github"><i class="icon-github"></i></a>
<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/meng-jian-39-32/activities" title="zhihu"><i class="icon-zhihu"></i></a>
<a class="mail" target="_blank" href="mailto:[email protected]" title="mail"><i class="icon-mail"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #4d4d4d"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img src="/avatar.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author js-header-author">erasermeng</h1>
</hgroup>
<p class="header-subtitle"><i class="icon icon-quo-left"></i>每18至24个月，前端都会难一倍<i class="icon icon-quo-right"></i></p>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://github.com/erasermeng" title="github"><i class="icon-github"></i></a>
<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/meng-jian-39-32/activities" title="zhihu"><i class="icon-zhihu"></i></a>
<a class="mail" target="_blank" href="mailto:[email protected]" title="mail"><i class="icon-mail"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 50%">
<li style="width: 50%"><a href="/">主页</a></li>
<li style="width: 50%"><a href="/archives">归档</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-关于归纳的一些思考" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/11/02/关于归纳的一些思考/">关于归纳的一些思考</a>
</h1>
<a href="/2019/11/02/关于归纳的一些思考/" class="archive-article-date">
<time datetime="2019-11-02T14:22:20.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-11-02</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>归纳推理源自于逻辑学分支，常被用于数学证明等场景。在《金字塔原理》一书中，归纳推理被运用于理清思维的逻辑关系，本文将阐述一些对于归纳推理的一些思考。</p>
</blockquote>
<h2 id="三种逻辑顺序"><a href="#三种逻辑顺序" class="headerlink" title="三种逻辑顺序"></a>三种逻辑顺序</h2><img src="/2019/11/02/关于归纳的一些思考/1.png" alt="1.png" title="">
<p>如上图所示，在金字塔一书中，归纳的逻辑顺序被总结为以下三种：</p>
<ul>
<li>时间顺序</li>
<li>结构顺序</li>
<li>重要性顺序</li>
</ul>
<p>其实三种顺序在实际中或多或少的会用到：</p>
<ul>
<li>时间顺序最为简单直观，在许多情况下我们需要以时间为维度去思考、阐述问题，比如从一个项目的生命周期总结各个时间节点的思考方式，月度、年度的总结也是以时间作为基线，使用时间顺序来组织思维逻辑是看待事物演变历程的最佳方式。</li>
<li>结构顺序非常类似于我们写文章所用到的“总-分”结构思路，在实际思维、表达中运用的非常广泛，在阐述观点时，常需要寻求分论点的支撑，此时就是在天然地使用结构顺序组织逻辑。在我们客观地描述事物规律时，从不同层次方面进行剖析是最为合理的。</li>
<li>重要性顺序在结构顺序很难适用的场景下会用到，对于一些观点阐述、方案提出，我们不能枚举所有的互斥情况，常常隐含优先级关系在里面，会让整体的思维逻辑更加清晰、详略得当地展现出来。</li>
</ul>
<h2 id="一个案例"><a href="#一个案例" class="headerlink" title="一个案例"></a>一个案例</h2><p>引用《思维力：高效的系统思维》中的一个案例：</p>
<blockquote>
<p>假设你在公司承担了一个成本优化项目的项目经理，项目已经开展3周了。目前项目进展不太顺利，进度较计划进度落后了一周，但是项目成本却超支了30%。</p>
<p>主要原因是项目立项时对采集现有成本资料的困难估计不足。因为公司之前对文档管理的不重视，大部分部门都无法第一时间提供成本数据，需要重新安排人手去整理历史成本数据，为了不影响项目进度，只能安排更多的人员从事成本资料的采集，导致了人工成本的超支。</p>
<p>当然成本超支还跟项目成员经验不足有关。这次项目为了锻炼年轻人，项目组成员除了老张作为财务部的老员工，在公司工作了有5年外，其余5名项目成员都是由刚工作1年的年轻员工和刚毕业的大学生。</p>
<p>老张因为还有其它财务工作要做，在这个成本优化项目中是兼职，算是“专家”角色，给年轻成员提供专业指导意见的，一般不直接动手做事。项目组第一周在要求各部门提交成本数据时，因缺乏经验，没提供标准数据采集模板给部门。结果各部门交上了的报表形式五花八门，根本没法做汇总统计。</p>
<p>虽然项目组立马改正错误，给各部门重新发了新的数据采集模板，但是销售部、研发部都推脱说工作太忙了，没空再按新模板重新整理数据。因此，项目组只能安排晚上和周末加班，自己按照新的数据采集模板整理销售部、研发部的提交上来的成本数据。</p>
<p>某天下午16:00，你正在伏案查阅搜集上来的成本资料呢，公司总经理陈总来得到了你的项目办公室，表情略带严肃地问你：“听说项目进展得不太顺利，你接下来准备怎么做啊？”</p>
</blockquote>
<p>我们简单划一下重点：</p>
<p>结果：项目进度落后一周，成本超支30%</p>
<p>主要原因；对采集资料的人力成本估计有误。</p>
<p>其他原因：年轻员工经验不足、老员工兼职、其他部门不配合。</p>
<h3 id="运用归纳推理来总结问题"><a href="#运用归纳推理来总结问题" class="headerlink" title="运用归纳推理来总结问题"></a>运用归纳推理来总结问题</h3><p>简单起见，我们不妨先假设陈总的问题是“项目进展为什么不太顺利？”，分别运用三种逻辑顺序来考虑问题：</p>
<h4 id="时间顺序"><a href="#时间顺序" class="headerlink" title="时间顺序"></a>时间顺序</h4><p>时间顺序可以按照项目的开展过程来总结问题：</p>
<ul>
<li>项目前期，采集资料遇到困难，公司文档管理混乱导致需要投入更多的人力成本。</li>
<li>项目开始后，年轻人经验不足，老员工兼职，导致统计困难。</li>
<li>重新调整后，各部门不配合，无法重新整理数据。</li>
</ul>
<h4 id="结构顺序"><a href="#结构顺序" class="headerlink" title="结构顺序"></a>结构顺序</h4><p>我们可以将原因归纳为项目立项、人力安排、部门协作三个方面：</p>
<ul>
<li>项目立项方面，对采集资料的成本预估不足。</li>
<li>人力安排方面，老员工没有动手做事，全部交由年轻人，决策不当。</li>
<li>部门协作方面，跨部门支持度不够，协作出现问题。</li>
</ul>
<h4 id="重要性顺序"><a href="#重要性顺序" class="headerlink" title="重要性顺序"></a>重要性顺序</h4><p>重要性顺序的前提是要找出各个逻辑的共性，如果从“项目管理”这个共性来考虑，结构顺序中的三个方面可以分别按照重要性进行排序，由于以上三个方面并不能构成“项目管理”的全集，因此重要性顺序在这里是合适的。</p>
<h3 id="更多思考"><a href="#更多思考" class="headerlink" title="更多思考"></a>更多思考</h3><p>对于陈总的实际问题“怎么做”，可能不同的工作环境、不同的人会给出不同的答案，在《思维力》一书中也给出了从三种逻辑顺序方向思考的答案，有兴趣可参阅。</p>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>归纳推理在实际工作生活中是一个非常实用的技巧，帮助我们有条理、有层次地分析问题与解决问题，在实际中不妨多锻炼归纳推理的能力，不断从时间顺序、结构顺序和重要性顺序三个方面去思考，让整体思维更具有框架性，解决越来越多的实际问题。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">逻辑思维</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">思维力</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">管理</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/11/02/关于归纳的一些思考/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-高效编程——从代码规范做起" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/11/02/高效编程——从代码规范做起/">高效编程——从代码规范做起</a>
</h1>
<a href="/2017/11/02/高效编程——从代码规范做起/" class="archive-article-date">
<time datetime="2017-11-02T14:16:30.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-11-02</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>本文精心总结了适应新时代的代码规范，看起来虽然技术含量不高，经常被大家忽视，但却是我们能够实现高效编程的起点，也是能够体现专业素养的重要因素，遵循编码规范，养成一个良好的开发习惯对于日常开发至关重要。本文主要分为风格及业务里的编程规范两部分，以此奠定活动架构最基本的基石，高效编程还涉及到的设计模式、打包集成、架构思想等将在后续的文章中不断输出，敬请期待~</p>
</blockquote>
<h2 id="代码风格（ES-Next时代）"><a href="#代码风格（ES-Next时代）" class="headerlink" title="代码风格（ES.Next时代）"></a>代码风格（ES.Next时代）</h2><blockquote>
<p>JS代码风格及规范有很多，但适合ES时代的规范却较少，本小节选取了一个备受大家欢迎的AirBnb的ES6规范介绍(github star数高达6万+，且在不断上涨)，在规范代码的同时也向团队推广下ES2015/6/7/…(简便起见，统称为ES.Next)，努力将代码写的更加简洁优雅，可维护。</p>
<p>“程序是写给人读的，只是偶尔让计算机执行以下。”<br>——Donald Ervin Knuth（高德纳）</p>
</blockquote>
<a class="article-more-a" href="/2017/11/02/高效编程——从代码规范做起/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">代码规范</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">代码风格</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">编程模式</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">ES2015</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/11/02/高效编程——从代码规范做起/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-按需加载polyfill——babel7的正确打开方式" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/11/02/按需加载polyfill——babel7的正确打开方式/">按需加载polyfill——babel7的正确打开方式</a>
</h1>
<a href="/2017/11/02/按需加载polyfill——babel7的正确打开方式/" class="archive-article-date">
<time datetime="2017-11-02T14:11:52.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-11-02</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>babel7已经进入Beta 4阶段，对我而言，babel使用最大的诟病应该在于它过大的polyfill，尤其是在移动端还是会影响一些性能，今天试用了下最新版的babel-preset-env，发现它的useBuiltIns配置项添加了新的特性，支持真正的按需加载polyfill，剔除代码中没有用到的，简直不能太赞~</p>
</blockquote>
<h3 id="测试关于ES6-7的转义情况"><a href="#测试关于ES6-7的转义情况" class="headerlink" title="测试关于ES6/7的转义情况"></a>测试关于ES6/7的转义情况</h3><p>源代码如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var a = new Map();</div><div class="line">var b = Promise.resolve();</div><div class="line">Object.assign({}, {1: 1});</div><div class="line">"foobar".includes("foo");</div></pre></td></tr></table></figure></p>
<a class="article-more-a" href="/2017/11/02/按需加载polyfill——babel7的正确打开方式/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">babel7</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">polyfill</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">babel</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">babel-preset-env</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/11/02/按需加载polyfill——babel7的正确打开方式/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-你真的用好GIT吗" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/23/你真的用好GIT吗/">你真的用好GIT吗</a>
</h1>
<a href="/2017/10/23/你真的用好GIT吗/" class="archive-article-date">
<time datetime="2017-10-23T14:53:53.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-10-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>之前对于git的了解仅仅是在能用的程度上，没有去进一步使用思考（主要是没有使用场景），相信很多人也是一样。趁着这次新版活动开发迁移至git平台，撰写此文，也是对git的一个科普预热，之后在新版活动架构设计过程中，会不断输出此类总结文章，敬请期待~</p>
</blockquote>
<h2 id="你可能仅会的几个命令"><a href="#你可能仅会的几个命令" class="headerlink" title="你可能仅会的几个命令"></a>你可能仅会的几个命令</h2><ul>
<li><code>git init/clone</code>建立一个空仓库/从现有仓库clone</li>
<li><code>git config</code>设定用户名邮箱</li>
<li><code>git add</code>将文件提交到暂存区</li>
<li><code>git commit</code>文件提交至仓库</li>
<li><code>git push/pull</code>提交远程仓库/更新本地仓库</li>
<li><code>git status</code>查看git状态</li>
<li><code>git branch</code>建立分支</li>
<li><code>git checkout</code>切换分支</li>
</ul>
<a class="article-more-a" href="/2017/10/23/你真的用好GIT吗/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">工具</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">WebStorm</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">git</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">github</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/10/23/你真的用好GIT吗/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-WebStorm使用技巧整理" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/10/22/WebStorm使用技巧整理/">WebStorm使用技巧整理</a>
</h1>
<a href="/2017/10/22/WebStorm使用技巧整理/" class="archive-article-date">
<time datetime="2017-10-22T07:29:08.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-10-22</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="常用编辑技巧"><a href="#常用编辑技巧" class="headerlink" title="常用编辑技巧"></a>常用编辑技巧</h2><ul>
<li>按住<code>alt</code>键拖拽鼠标，可以进入多行编辑模式</li>
<li><code>ctrl+D</code>快速复制行</li>
<li><code>ctrl+/</code>快速注释，<code>ctrl+alt+/</code>快速多行注释</li>
<li><code>ctrl+z</code>撤销，<code>ctrl+shift+z</code>恢复撤销</li>
<li><code>shift+回车</code>向下插入空行, <code>shift+alt+回车</code>向上插入空行</li>
<li><code>ctrl+退格</code>快速删除本行</li>
<li><code>ctrl+shift+up</code>向上移动一行，<code>ctrl+shift+down</code>向下移动一行，选中代码片段则可直接移动整段代码</li>
<li><code>ctrl+shift+alt+left</code>可将HTML属性快速向左移位，<code>ctrl+shift+alt+right</code>可将HTML属性快速向右移位</li>
<li><code>tab</code>快速缩进，<code>shift+tab</code>快速取消缩进</li>
<li><code>ctrl+-</code>折叠行，<code>ctrl+shift+-</code>展开/折叠所有行</li>
<li><code>ctrl+shift+L</code>快速格式化代码</li>
<li><code>ctrl+鼠标点击，ctrl+[/]</code>进入函数方法，返回方法等操作</li>
</ul>
<h2 id="常用操作技巧"><a href="#常用操作技巧" class="headerlink" title="常用操作技巧"></a>常用操作技巧</h2><ul>
<li><code>ctrl+L</code>跳转到指定行(列)，常用来定位报错行</li>
<li><code>ctrl+F/R</code>用于快速查找和替换文本</li>
<li><code>ctrl+shift+F/R</code>用于对文本进行全局搜索和替换</li>
<li><code>右键-find usages</code>用于查看文件或变量的被使用情况</li>
<li><code>double shift</code>: search every where，很实用的功能，想搜什么搜什么</li>
</ul>
<h2 id="IDE设置"><a href="#IDE设置" class="headerlink" title="IDE设置"></a>IDE设置</h2><p>字体推荐——<code>Souce Code Pro</code>,<code>Menlo</code>,<code>Consolas</code>,<code>Monaco</code>,<code>Courier New</code><br>主题推荐——<code>one dark</code>,<code>seti</code></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">工具</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">WebStorm</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/10/22/WebStorm使用技巧整理/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-ECMAScript流程规范简介" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/07/12/ECMAScript流程规范简介/">ECMAScript流程规范简介</a>
</h1>
<a href="/2017/07/12/ECMAScript流程规范简介/" class="archive-article-date">
<time datetime="2017-07-12T11:59:20.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-07-12</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="ES6之前发生了什么"><a href="#ES6之前发生了什么" class="headerlink" title="ES6之前发生了什么"></a>ES6之前发生了什么</h2><p>在ES6出来之前，JavaScript程序员基本不怎么关心ECMAScript的制定和版本，甚至很多人不知道还有ESMAScript标准的存在。</p>
<p>造成这一现象的原因主要是在漫长的JS标准制定历史中，自NetScape制定了第一版ECMA-262规范后，1999年发布了第三个版本，而第四个版本由于不兼容的改动引起巨大争议而夭折，直到2009年才发布第五个版本，但浏览器支持却发展缓慢，2009年之后大部分人依旧用着ES3的语法，导致大多数开发人员对规范并不敏感。</p>
<p>接下来让我们简单看一看关于ECMAScript的发展史：</p>
<h2 id="ECMAScript发展史"><a href="#ECMAScript发展史" class="headerlink" title="ECMAScript发展史"></a>ECMAScript发展史</h2><p>ECMAScript实际上最初是由网景和微软之间浏览器大战的一个产物，网景在1995年优先发布了JavaScript，紧接着微软发布了JScript，修正了JavaScript的日期（2000年）问题，于1996年跟随IE3.0发布。</p>
<p>后来网景向ECMA International国际化组织提交了JavaScript标准方案，早期会议经过网景和微软的不断争议后，终于在1997年通过了ECMA-262的第一版，于是ECMAScript标准从此诞生。</p>
<p>以下是ECMAScript重要版本的简要介绍：<br>
<a class="article-more-a" href="/2017/07/12/ECMAScript流程规范简介/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">ECMAScript</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">TC39</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/07/12/ECMAScript流程规范简介/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-浅谈HTML5语义化" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/02/26/浅谈HTML5语义化/">浅谈HTML5语义化</a>
</h1>
<a href="/2017/02/26/浅谈HTML5语义化/" class="archive-article-date">
<time datetime="2017-02-26T07:44:03.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-02-26</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="关于语义化"><a href="#关于语义化" class="headerlink" title="关于语义化"></a>关于语义化</h2><p>所谓语义化，比较浅显的看，就是指在HTML中用正确的标签做正确的事情，便于浏览器、搜索引擎、屏幕阅读器等设备的解析，更加利于SEO。</p>
<p>追根溯源，HTML最初的设计思想就是作为一个内容的载体，它是用来发布Web内容和资源索引的，但随着Web规模不断扩大，各种UA不断出现，加上前端工程师良莠不齐的情况，就出现了HTML纷繁杂乱，很多时候只是关注展现方式，而不考虑标签语义，对于特殊群体的人群使用屏幕阅读器就会非常的不良好。</p>
<p>语义化最本质的定义就是让机器能够读懂内容，这也是我们作为编码开发者时刻不能忘记的一件事情。</p>
<a class="article-more-a" href="/2017/02/26/浅谈HTML5语义化/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">技术总结</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">html</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">语义化</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2017/02/26/浅谈HTML5语义化/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-基于gulp-js实现前端初步自动化" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/10/24/基于gulp-js实现前端初步自动化/">基于gulp.js实现前端初步自动化</a>
</h1>
<a href="/2016/10/24/基于gulp-js实现前端初步自动化/" class="archive-article-date">
<time datetime="2016-10-24T06:45:55.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-10-24</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>对接捷豹系统前，首先利用gulp+webpack对厘米秀前端的结构进行优化调整，满足对接需要，同时也提高开发效率，故将优化过程总结成本文。</p>
</blockquote>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><p>首先安装全局的gulp：</p>
<pre><code>npm install -g gulp
</code></pre>
<a class="article-more-a" href="/2016/10/24/基于gulp-js实现前端初步自动化/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">gulp</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">前端工程</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2016/10/24/基于gulp-js实现前端初步自动化/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-利用hexo快速搭建个人博客" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/10/09/利用hexo快速搭建个人博客/">利用hexo快速搭建个人博客</a>
</h1>
<a href="/2016/10/09/利用hexo快速搭建个人博客/" class="archive-article-date">
<time datetime="2016-10-09T12:51:36.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-10-09</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>今天重新搭建了hexo博客，随手简单地记录了一下。hexo是一个基于node.js开发的静态博客部署平台，它和github pages的搭配使用，不需要额外购买服务器空间或域名，不需要关心设计细节及自主开发，只需要关注我们博客内容本身，很轻松就能完成一个博客的上线，非常适合技术人员使用。</p>
</blockquote>
<h2 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h2><p>在电脑上已经有node环境的前提下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install -g hexo-cli</div></pre></td></tr></table></figure>
<a class="article-more-a" href="/2016/10/09/利用hexo快速搭建个人博客/#more">more >></a>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">hexo</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">博客</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2016/10/09/利用hexo快速搭建个人博客/">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>