-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1393 lines (516 loc) · 57.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<link rel="alternate" href="/atom.xml" title="美男子" type="application/atom+xml" />
<meta name="description" content="一只专注前端，热爱python的单身狗">
<meta property="og:type" content="website">
<meta property="og:title" content="美男子">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="美男子">
<meta property="og:description" content="一只专注前端，热爱python的单身狗">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="美男子">
<meta name="twitter:description" content="一只专注前端，热爱python的单身狗">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Gemini',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title>美男子</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">美男子</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">Hello World</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/06/如何在疲劳的JS世界中持续学习-转载/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Andy Xic">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/logoR9.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="美男子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/05/06/如何在疲劳的JS世界中持续学习-转载/" itemprop="url">如何在疲劳的JS世界中持续学习(转载)</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-06T22:03:36+08:00">
2018-05-06
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="如何在疲劳的JS世界中持续学习"><a href="#如何在疲劳的JS世界中持续学习" class="headerlink" title="如何在疲劳的JS世界中持续学习"></a>如何在疲劳的JS世界中持续学习</h1><blockquote>
<p>作者简介 cnfi 蚂蚁金服·数据体验技术团队</p>
</blockquote>
<p><span data-type="color" style="color: rgb(140, 140, 140);">本文翻译自</span><a href="https://medium.com/@alonronin/stay-updated-in-js-fatigue-universe-3bf5c0d671a4" target="_blank" rel="noopener">《Stay updated in JS fatigue universe》</a><span data-type="color" style="color: rgb(140, 140, 140);">，并对内容有所补充和修改。</span><br><span data-type="color" style="color: rgb(140, 140, 140);">部分内容参考</span><a href="https://uptodate.frontendrescue.org/" target="_blank" rel="noopener">《HOW TO KEEP UP TO DATE ON FRONT-END TECHNOLOGIES》</a></p>
<blockquote>
<p>想要在“每天都有新事物冒出来”的前端世界中跟上步伐，眼下已经成为了一个艰巨的任务。<br>很多人都有这样的感觉：不需要几个月你的技术就会过时，全新的炒作、类库、框架总会让你迷失，面对这场比赛，你只能选择退出。</p>
</blockquote>
<p>我的许多同事都想知道我是如何设法保持最新的状态，并且仍能完成我的日常工作。在这篇文章中，我将分享我的日常生活，并告诉你如何找到有用的信息。</p>
<h3 id="关注大牛"><a href="#关注大牛" class="headerlink" title="关注大牛"></a>关注大牛</h3><p>我的许多资源来自twitter。去follow那些JavaScript社区的领袖们，可以让我很轻松的获取到有意思的东西，尽管找到这些人是多么地不容易。</p>
<p>由于我们非常关注开源社区，于是Github成了我的主要来源。 首先找到一个业界顶级的项目（比如React），点击“Contributors”标签，可以看到这些主要贡献者的档案。 他们中的一些人拥有twitter帐户，他们经常会发布一些有价值的信息。</p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b9ccb2dfac?w=2006&h=1550&f=png&s=384628" alt="20180429110352.png | center | 747x577"></p>
<h3 id="业界大牛不完全名单"><a href="#业界大牛不完全名单" class="headerlink" title="业界大牛不完全名单"></a>业界大牛不完全名单</h3><p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);"><strong>Addy Osmani</strong></span></span></p>
<div class="bi-table"><br> <table><br><colgroup><br> <col width="188px"><br> <col width="188px"><br> <col width="71px"><br> <col width="299px"><br></colgroup><br><tbody><br> <tr height="34px"><br> <td rowspan="3" colspan="1"><br> <div data-type="p"><br> <div id="mbgeky" data-type="image" data-display="block" data-align="" data-src="https://user-gold-cdn.xitu.io/2018/5/2/163200b9f6868a69?w=400&h=400&f=jpeg&s=27735" data-width="166"><br> <img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b9f6868a69?w=400&h=400&f=jpeg&s=27735" width="166"><br> </div><br> </div><br> </td><br> <td rowspan="3" colspan="1"><br> <h4 id="9972lt" data-type="h"><br> <a class="anchor" id="" href="#9972lt"></a><br> </h4><br> <div data-type="p">TodoMVC、Material-Design-Lite、Yeoman等项目作者，Google Chrome工程经理</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p">主页</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://addyosmani.com/" target="_blank" rel="noopener">https://addyosmani.com/</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">github</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://github.com/addyosmani" target="_blank" rel="noopener">https://github.com/addyosmani</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">twitter</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://twitter.com/addyosmani" target="_blank" rel="noopener">https://twitter.com/addyosmani</a></div><br> </td><br> </tr><br></tbody><br> </table><br></div>
<p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);"><strong>Lea Verou</strong></span></span></p>
<div class="bi-table"><br> <table><br><colgroup><br> <col width="188px"><br> <col width="188px"><br> <col width="78px"><br> <col width="294px"><br></colgroup><br><tbody><br> <tr height="34px"><br> <td rowspan="3" colspan="1"><br> <div data-type="p"><br> <div id="dchokd" data-type="image" data-display="block" data-align="" data-src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b4e775f5?w=300&h=300&f=png&s=11048" data-width="166"><br> <img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b4e775f5?w=300&h=300&f=png&s=11048" width="166"><br> </div><br> </div><br> </td><br> <td rowspan="3" colspan="1"><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p">麻省理工学院HCI研究员， W3C-CSSWG成员，github多个项目作者</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p">主页</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="http://lea.verou.me/" target="_blank" rel="noopener">http://lea.verou.me/</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">github</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://github.com/LeaVerou" target="_blank" rel="noopener">https://github.com/LeaVerou</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">推特</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://twitter.com/leaverou" target="_blank" rel="noopener">https://twitter.com/leaverou</a></div><br> </td><br> </tr><br></tbody><br> </table><br></div>
<p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);"><strong>Evan You 尤雨溪</strong></span></span></p>
<div class="bi-table"><br> <table></table><br><colgroup><br> <col width="191px"><br> <col width="190px"><br> <col width="80px"><br> <col width="285px"><br></colgroup><br><tbody><br> <tr height="34px"><br> <td rowspan="3" colspan="1"><br> <div data-type="p"><br> <div id="bdxalk" data-type="image" data-display="block" data-align="" data-src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b5953ab3?w=460&h=460&f=jpeg&s=34245" data-width="170"><br> <img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b5953ab3?w=460&h=460&f=jpeg&s=34245" width="170"><br> </div><br> </div><br> </td><br> <td rowspan="3" colspan="1"><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p">大名鼎鼎的Vue.js作者，前端布道者，业界大V</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p">主页</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="http://evanyou.me/" target="_blank" rel="noopener">http://evanyou.me/</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">github</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://github.com/yyx990803" target="_blank" rel="noopener">https://github.com/yyx990803</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">推特</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://twitter.com/youyuxi" target="_blank" rel="noopener">https://twitter.com/youyuxi</a></div><br> </td><br> </tr><br></tbody><br> <br></div>
<p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);"><strong>Axel Rauschmayer</strong></span></span></p>
<div class="bi-table"><br> <table><br><colgroup><br> <col width="194px"><br> <col width="188px"><br> <col width="77px"><br> <col width="288px"><br></colgroup><br><tbody><br> <tr height="34px"><br> <td rowspan="3" colspan="1"><br> <div data-type="p"><br> <div id="592zgo" data-type="image" data-display="block" data-align="" data-src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b5453e4f?w=400&h=400&f=jpeg&s=21547" data-width="172"><br> <img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b5453e4f?w=400&h=400&f=jpeg&s=21547" width="172"><br> </div><br> </div><br> </td><br> <td rowspan="3" colspan="1"><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p">2ality博主，写有《Speaking JavaScript》等著作，ES.next News刊物主编</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p">主页</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="http://2ality.com/" target="_blank" rel="noopener">http://2ality.com/</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">github</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">推特</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://twitter.com/rauschma" target="_blank" rel="noopener">https://twitter.com/rauschma</a></div><br> </td><br> </tr><br></tbody><br> </table><br></div>
<p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);"><strong>Ben Alman</strong></span></span></p>
<div class="bi-table"><br> <table><br><colgroup><br> <col width="195px"><br> <col width="188px"><br> <col width="86px"><br> <col width="279px"><br></colgroup><br><tbody><br> <tr height="34px"><br> <td rowspan="3" colspan="1"><br> <div data-type="p"><br> <div id="ggg7gf" data-type="image" data-display="block" data-align="" data-src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b581891f?w=400&h=400&f=jpeg&s=26263" data-width="174"><br> <img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8b581891f?w=400&h=400&f=jpeg&s=26263" width="174"><br> </div><br> </div><br> </td><br> <td rowspan="3" colspan="1"><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p">GruntJS作者，jQuery界大神，开发了jQuery BBQ等大量插件</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p">主页</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="http://benalman.com/" target="_blank" rel="noopener">http://benalman.com/</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">github</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://github.com/cowboy" target="_blank" rel="noopener">https://github.com/cowboy</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">推特</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://twitter.com/cowboy" target="_blank" rel="noopener">https://twitter.com/cowboy</a></div><br> </td><br> </tr><br></tbody><br> </table><br></div>
<p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);"><strong>Nicholas C. Zakas</strong></span></span></p>
<div class="bi-table"><br> <table><br><colgroup><br> <col width="188px"><br> <col width="188px"><br> <col width="100px"><br> <col width="272px"><br></colgroup><br><tbody><br> <tr height="34px"><br> <td rowspan="3" colspan="1"><br> <div data-type="p"><br> <div id="omr8pq" data-type="image" data-display="block" data-align="" data-src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8e418ca7d?w=400&h=400&f=jpeg&s=15493" data-width="167"><br> <img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8e418ca7d?w=400&h=400&f=jpeg&s=15493" width="167"><br> </div><br> </div><br> </td><br> <td rowspan="3" colspan="1"><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p"></div><br> <div data-type="p">著名的《JavaScript高级程序设计》作者，JS布道者</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p">主页</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://www.nczonline.net/" target="_blank" rel="noopener">https://www.nczonline.net/</a></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">github</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"></div><br> </td><br> </tr><br> <tr height="34px"><br> <td rowspan="1" colspan="1"><br> <div data-type="p">推特</div><br> </td><br> <td rowspan="1" colspan="1"><br> <div data-type="p"><a href="https://twitter.com/slicknet" target="_blank" rel="noopener">https://twitter.com/slicknet</a></div><br> </td><br> </tr><br></tbody><br> </table><br></div>
<h3 id="探索新项目"><a href="#探索新项目" class="headerlink" title="探索新项目"></a>探索新项目</h3><p>另一个巨大的信息来源地，是Github的“Explore”标签。那里有无尽的内容如“Topics”、“Trends”、“Resources”…，你完全可以呆上几天。</p>
<p>打开 <a href="https://github.com/trending" target="_blank" rel="noopener">https://github.com/trending</a> 可以看到最新的趋势库和开发者。 你还可以根据语言和时间跨度（今天，本周，本月）对它们进行过滤。</p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8f23ea13a?w=2084&h=1384&f=png&s=1157081" alt="20180429110717.png | center | 747x496"></p>
<h3 id="看最好的资讯"><a href="#看最好的资讯" class="headerlink" title="看最好的资讯"></a>看最好的资讯</h3><p>我每天都会访问这些网站。 我喜欢他们，因为他们没有垃圾邮件，他们的所有内容都来自社区。</p>
<h4 id="EchoJS"><a href="#EchoJS" class="headerlink" title="EchoJS"></a>EchoJS</h4><p> <a href="https://www.echojs.com/" target="_blank" rel="noopener">https://www.echojs.com/</a></p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b8e41bf3ae?w=2602&h=1524&f=png&s=467570" alt="20180429110936.png | center | 747x438"></p>
<h4 id="DailyJS"><a href="#DailyJS" class="headerlink" title="DailyJS"></a>DailyJS</h4><p><a href="https://medium.com/dailyjs" target="_blank" rel="noopener">https://medium.com/dailyjs/</a></p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b910c38556?w=2048&h=1506&f=png&s=1231490" alt="20180429111337.png | center | 747x549"></p>
<h4 id="Front-End-Front"><a href="#Front-End-Front" class="headerlink" title="Front-End Front"></a>Front-End Front</h4><p><a href="https://frontendfront.com/" target="_blank" rel="noopener">https://frontendfront.com/</a></p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b91114ee07?w=2062&h=1372&f=png&s=233201" alt="20180429111227.png | center | 747x497"></p>
<p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);">另外，我也会订阅以下两个前端领域的技术刊物</span></span></p>
<h4 id="ES-next-News"><a href="#ES-next-News" class="headerlink" title="ES.next News"></a>ES.next News</h4><p><a href="http://esnextnews.com/" target="_blank" rel="noopener">http://esnextnews.com/</a></p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b91f302a8f?w=1878&h=922&f=png&s=864003" alt="20180430165238.png | center | 747x367"></p>
<h4 id="Web-Design-Weekly"><a href="#Web-Design-Weekly" class="headerlink" title="Web Design Weekly"></a>Web Design Weekly</h4><p><a href="https://web-design-weekly.com/" target="_blank" rel="noopener">https://web-design-weekly.com/</a></p>
<p><img src="https://user-gold-cdn.xitu.io/2018/5/2/163200b93740518f?w=2310&h=1296&f=png&s=460047" alt="20180430165218.png | center | 747x419"></p>
<h3 id="怎么抽出时间？"><a href="#怎么抽出时间？" class="headerlink" title="怎么抽出时间？"></a>怎么抽出时间？</h3><p>很多人认为，白天忙于工作，晚上回家后又太累，所以根本无法抽出时间再去消化与工作相关的信息。当然我也不认为你应该在业余时间去做这件事。从“时间管理哲学”的角度看，这是一种非常糟糕的做法。 </p>
<p>在我看来，在工作时间内去丰富你的内在是一种不错的方式。每天早上到达工作岗位后，我开始浏览新闻网站。 如果我发现一些有趣的事情，我会将它加入书签供以后阅读。毕竟我们并不是机器，一天的工作中通常会有几个休息的间隙。 即使没有，我也会每天花半小时来阅读这些书签链接。每天下班之前，我会简要浏览github的“Trends”页面，并start一些我认为有意思的项目。 我会在30分钟内回顾它们，在我的下一个POC中小试牛刀，甚至在工作中使用它们。</p>
<h3 id="做一名贡献者"><a href="#做一名贡献者" class="headerlink" title="做一名贡献者"></a>做一名贡献者</h3><p>贡献可以成为一个很好的信息来源，同时也让你有能力亲自动手练习你所学到的东西。<br>你可以在<a href="https://stackoverflow.com/" target="_blank" rel="noopener">Stack Overflow</a>提出问题或者回答问题。在Github上提issue、提request、参与讨论等等，这将对你的知识和技能带来巨大的帮助。</p>
<h3 id="总结出自己的学习方法"><a href="#总结出自己的学习方法" class="headerlink" title="总结出自己的学习方法"></a>总结出自己的学习方法</h3><p><span data-type="color" style="color: rgb(51, 51, 51);"><span data-type="background" style="background-color: rgb(255, 255, 255);">总结出一套自己的方法来跟上最新方向是很重要的. 来看看这些厉害的开发者们是怎么做的吧!</span></span></p>
<p><strong>Axel Rauschmayer：</strong></p>
<blockquote>
<p>我推荐读以下3个资源来跟上最新发展.<br>1.推特. 先关注些你认识的知名前端开发者, 比如你经常用的某个库的作者. 然后从他的关注列表里面去挖掘, 迟早你会看到一些有用的推特.<br>2.<a href="http://www.echojs.com/" target="_blank" rel="noopener">Echo JS</a> 是个 JavaScript 新闻站. 它的布局和 <a href="https://news.ycombinator.com/" target="_blank" rel="noopener">Hacker News</a> 类似.<br>3.关注这些 <a href="https://cooperpress.com/" target="_blank" rel="noopener">每周邮件</a> (那啥: 我是 JavaScript 每周新闻的编辑).</p>
</blockquote>
<p><strong>Alex Sexton：</strong></p>
<blockquote>
<p>我发现对我来说, 只有不断实践才能跟上最新发展.<br>我在推特上关注了很多前端界的人, 也读博客和编程界新闻, 但我发现实践比纯读更能学到东西.<br>当我想学一样东西的时候, 我就直接开始做项目, 然后从中不断学习, 理解核心概念.</p>
</blockquote>
<p><strong>Addy Osmani：</strong></p>
<blockquote>
<p>为了知道前端界都在发生些什么, 我经常刷推特和 G+.<br>对于那些我经常使用的工具和库, 我会关注下作者的最新情况, 这样才能知道接下来会有什么发展.<br>关注下那些制定网络标准的人也很有好处, 这样你才能知道接下来的几年会有什么发展.</p>
</blockquote>
<p><strong>Lea Verou：</strong></p>
<blockquote>
<p>有几个订阅源(feeds) 我天天都读<br>我关注了很多人, 包括 Web 标准的制定者, 以及开发浏览器的, 还有厉害的其他类别的开发者.<br>我偶尔会阅读标准, 有些很好理解而且是一手资讯, W3C邮件列表(W3C mailing lists) 也很有帮助: 你在新技术出现的那一刻就能开始学习他们, 甚至你可以影响到这些新技术的发展!<br>参加会议</p>
</blockquote>
<p>End.</p>
<p>原文地址：<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FProtoTeam%2Fblog%2Fblob%2Fmaster%2F201805%2F1.md" target="_blank" rel="noopener">https://github.com/ProtoTeam/blog/blob/master/201805/1.md</a></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/04/08/webpack4学习之路/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Andy Xic">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/logoR9.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="美男子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/04/08/webpack4学习之路/" itemprop="url">webpack4学习之路</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-04-08T10:59:26+08:00">
2018-04-08
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/11/一道有意思的js面试题/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Andy Xic">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/logoR9.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="美男子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/11/一道有意思的js面试题/" itemprop="url">一道有意思的js面试题</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-03-11T18:45:34+08:00">
2018-03-11
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="一道有意思的js面试题"><a href="#一道有意思的js面试题" class="headerlink" title="一道有意思的js面试题"></a>一道有意思的js面试题</h1><p>这几天忙着面试，遇到了一个有意思的面试题，记录一下，就当复习自己的js基础了</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>{</span><br><span class="line"> getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">1</span>); };</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">}</span><br><span class="line">Foo.getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">2</span>);};</span><br><span class="line">Foo.prototype.getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">3</span>);};</span><br><span class="line"><span class="keyword">var</span> getName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ alert (<span class="number">4</span>);};</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>{ alert (<span class="number">5</span>);}</span><br><span class="line"></span><br><span class="line"><span class="comment">//请写出以下输出结果：</span></span><br><span class="line">Foo.getName();</span><br><span class="line">getName();</span><br><span class="line">Foo().getName();</span><br><span class="line">getName();</span><br><span class="line"><span class="keyword">new</span> Foo.getName();</span><br><span class="line"><span class="keyword">new</span> Foo().getName();</span><br><span class="line"><span class="keyword">new</span> <span class="keyword">new</span> Foo().getName();</span><br><span class="line"></span><br><span class="line"><span class="comment">//答案：</span></span><br><span class="line">Foo.getName();<span class="comment">//2</span></span><br><span class="line">getName();<span class="comment">//4</span></span><br><span class="line">Foo().getName();<span class="comment">//1</span></span><br><span class="line">getName();<span class="comment">//1</span></span><br><span class="line"><span class="keyword">new</span> Foo.getName();<span class="comment">//2</span></span><br><span class="line"><span class="keyword">new</span> Foo().getName();<span class="comment">//3</span></span><br><span class="line"><span class="keyword">new</span> <span class="keyword">new</span> Foo().getName();<span class="comment">//3</span></span><br></pre></td></tr></table></figure>
<h3 id="解析"><a href="#解析" class="headerlink" title="解析"></a>解析</h3><ol>
<li>首先定义了一个叫Foo的函数，之后为Foo创建了一个叫getName的<strong>静态属性</strong>存储了一个匿名函数，之后为Foo的<strong>原型对象</strong>新创建了一个叫getName的匿名函数。之后又通过<strong>函数变量表达式</strong>创建了一个getName的函数，最后再<strong>声明</strong>一个叫getName函数。第一问的 Foo.getName 自然是访问Foo函数上存储的静态属性，输出为2</li>
<li>直接调用 getName 函数。既然是直接调用那么就是访问当前上文作用域内的叫getName的函数，所以跟1 2 3都没什么关系。首先函数声明式以及变量声明会提升到顶部，当程序运行到赋值语句时，将覆盖getName函数声明，最终输出为4</li>
<li>运行Foo(),将全局变量getName重新赋值，返回this对象，由于当前调用上下文在全局。所以优先在全局查找getName属性，由于在函数内部修改了全局变量，所以最终输出为1</li>
<li>同理。由于已经改写getName，所以输出为1</li>
<li>.运算符优先于new运算符，所以先执行FOO.getName(),然后将该函数当成构造函数去实例化，所以最终输出为2</li>
<li>将FOO作为构造函数实例化，再去调用函数，优先查找函数内部属性，再向上去原型中查找，所以执行prototype中的方法，最终输出3</li>
<li>相当于5，6结合，将实例化对象作为构造函数创建实例对象，将在原型中层层寻找方法。最终输出3</li>
</ol>
<p>另外在网上找到关于5.6.7问题的详细解析：</p>
<blockquote>
<p>new Foo.getName(); 和 new Foo().getName(); 的区别在于</p>
<p>new Foo 结合属于 new 无参数列表的情况（17级）</p>
<p>new Foo() 结合属于 new 有参数列表的情况（18级）</p>
<p>成员访问运算符（.）优先级为 18 级，和 new Foo() 同级</p>
<p>对于同级运算符，按照从左到右的顺序依次计算</p>
<p>所以先执行 new Foo() 返回一个 Foo 的对象 ，对 Foo 对象调用 getName 时查找引用链，得到 Foo.prototype.getName</p>
<p>new Foo 结合被判定为无参数列表的new，优先级低于成员访问，所以先执行成员访问得到 Foo 的属性 getName， 然后 Foo.getName 和 new 结合，执行带参数列表的 new 运算</p>
<p>需要注意的是带参数列表的 new …(…) 看起来像是 new 后面跟了一个函数调用，但在判断运算符优先级时 new 运算是一个整体，不能把它分开</p>
<p>javascript 中设定带参数列表 new 的优先级高于函数调用，那么在满足带参数列表的 new 运算符时，就不存在函数调用了虽然带参数列表的 new 运算也会执行函数调用，但是在判断运算时不把 new 和 …(…) 分开。</p>
</blockquote>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/07/js实现拖拽/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Andy Xic">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/logoR9.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="美男子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/07/js实现拖拽/" itemprop="url">js实现拖拽</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-03-07T22:13:28+08:00">
2018-03-07
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="js实现元素拖拽效果"><a href="#js实现元素拖拽效果" class="headerlink" title="js实现元素拖拽效果"></a>js实现元素拖拽效果</h1><p>项目中写过不少鼠标拖拽事件，最近面试的时候要求实现一道元素拖拽效果，正所谓talk is cheap show me code，那就在写一个记录一下拖拽的实现及思路吧。</p>
<h3 id="拖拽思路"><a href="#拖拽思路" class="headerlink" title="拖拽思路"></a>拖拽思路</h3><ol>
<li>拖拽目标必须为已定位元素</li>
<li>获取拖拽目标当前坐标点</li>
<li>监听鼠标mousedown事件,读取当前鼠标坐标</li>
<li>监听鼠标mouseover事件，读取当前鼠标滑动坐标</li>
<li>测算鼠标移动距离，设置拖拽元素移动距离</li>
<li>监听鼠标mouseup事件，暂停响应鼠标移动事件</li>
</ol>
<h3 id="拖拽实现"><a href="#拖拽实现" class="headerlink" title="拖拽实现"></a>拖拽实现</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"drag"</span> <span class="attr">style</span>=<span class="string">"position:relative;width:100px;height:100px"</span>></span></span><br><span class="line"> 拖拽目标</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义绑定事件函数</span></span><br><span class="line"><span class="keyword">var</span> bindEvent = <span class="function"><span class="keyword">function</span>(<span class="params">target,event,fn</span>)</span>{</span><br><span class="line"> target.addEventListener(event,fn)</span><br><span class="line">}</span><br><span class="line"><span class="comment">//获取监听元素</span></span><br><span class="line"><span class="keyword">var</span> drag_target = <span class="built_in">document</span>.getElementById(<span class="string">"drag"</span>)</span><br><span class="line"><span class="comment">//定义拖动所需变量</span></span><br><span class="line"><span class="keyword">var</span> offset_X,</span><br><span class="line"> offset_Y,</span><br><span class="line"> isMove = <span class="literal">false</span></span><br><span class="line"><span class="comment">//绑定所需监听事件</span></span><br><span class="line"><span class="comment">//鼠标按下事件需要绑定在当前拖动元素上，监听鼠标滑动及抬起事件需绑定在document上</span></span><br><span class="line">bindEvent(drag_target,<span class="string">"mousedown"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> target_X = e.target.offsetLeft</span><br><span class="line"> <span class="keyword">var</span> target_Y = e.target.offsetTop</span><br><span class="line"> offset_X = e.pageX - target_X;</span><br><span class="line"> offset_Y = e.pageY - target_Y;</span><br><span class="line"> isMove = <span class="literal">true</span></span><br><span class="line">})</span><br><span class="line">bindEvent(<span class="built_in">document</span>,<span class="string">"mouseover"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(isMove){</span><br><span class="line"> drag_target.style.top = e.pageY - offsetX + <span class="string">"px"</span>;</span><br><span class="line"> drag_target.style.left = e.pageX - offsetY + <span class="string">"px"</span>;</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line">bindEvent(<span class="built_in">document</span>,<span class="string">'mouseup'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> isMove = <span class="literal">false</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>通过对元素事件绑定，获取当前元素偏移量，获取当前鼠标在元素内的坐标点，计算出当前鼠标到元素之间的距离，监听滑动事件，计算出当前元素需要偏移的距离，设置元素偏移量。当鼠标抬起，改变默认变量，取消对元素坐标的改变。由于IE浏览器没有pageX属性。需要获取鼠标当前坐标变为</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">x = e.clientX + <span class="built_in">document</span>.body.scrollLeft - <span class="built_in">document</span>.body.clientLeft;</span><br><span class="line"> y = e.clientY + <span class="built_in">document</span>.body.scrollTop - <span class="built_in">document</span>.body.clientTop;</span><br></pre></td></tr></table></figure>
<p>到此为止，简单的拖拽事件完成，新的H5实现了拖拽的API，可以更好的监听元素拖拽事件，本代码只是简单的实现了JavaScript拖拽元素事件，并未考虑浏览器兼容问题及性能优化，具体效果还需要多加修改</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/04/create-project-cli/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Andy Xic">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/logoR9.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="美男子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/04/create-project-cli/" itemprop="url">create project-cli</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-03-04T15:24:05+08:00">
2018-03-04
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="自建脚手架"><a href="#自建脚手架" class="headerlink" title="自建脚手架"></a>自建脚手架</h1><p>最近在捣鼓vue，觉得vue-cli这个脚手架不错，想来就自己也写一个吧，正好平时工作或者自己整个啥项目，也不用苦哈哈的敲命令了，毕竟程序员的捣鼓事情的最初想法就是因为懒嘛，废话不说，说干就干</p>
<p>打开百度，搜索了一下脚手架搭建，文章还真不少，看来跟我一样懒得同志不在少数，总结了几篇文章，得出个基本思路。</p>
<ol>
<li>基于本地文件生成模板，通过复制本地现有的模板自动搭建新项目</li>
<li>基于git仓库下载生成模板，通过下载git仓库中已有模板，生成本地模板</li>
</ol>
<p>基于想开发的脚手架本身就是为了方便工作的，所以选择利用git仓库来生成模板这一模式来开发</p>
<h3 id="使用的npm包"><a href="#使用的npm包" class="headerlink" title="使用的npm包"></a>使用的npm包</h3><ol>
<li>commander: Tj大神开发的命令行工具，可以简化命令行操作，可开发类似help，init，add等命令参数的调用</li>
<li>chalk: 命令行输出美化工具，也就是把文字美化一下</li>
<li>inquirer: 交互式命令行工具，yoeman就是用他开发的，可以实现模板筛选，</li>
<li>metalsmith: 静态模板生成器，不过这个版本没用到，看vue里面有用</li>
<li>download-git-repo: git仓库下载包，很方便将仓库项目下载到本地</li>
</ol>
<h3 id="项目目录"><a href="#项目目录" class="headerlink" title="项目目录"></a>项目目录</h3><p><img src="construction.png" alt=""></p>
<ol>
<li>bin: 程序入口文件夹</li>
<li>lib : 程序主逻辑文件夹</li>
</ol>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/04/新博客开张/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Andy Xic">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/logoR9.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="美男子">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/04/新博客开张/" itemprop="url">新博客开张</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-03-04T14:41:27+08:00">
2018-03-04
</time>