-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
145 lines (81 loc) · 41.6 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>美男子</title>
<subtitle>Hello World</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2018-05-06T14:13:50.168Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>Andy Xic</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>如何在疲劳的JS世界中持续学习(转载)</title>
<link href="http://yoursite.com/2018/05/06/%E5%A6%82%E4%BD%95%E5%9C%A8%E7%96%B2%E5%8A%B3%E7%9A%84JS%E4%B8%96%E7%95%8C%E4%B8%AD%E6%8C%81%E7%BB%AD%E5%AD%A6%E4%B9%A0-%E8%BD%AC%E8%BD%BD/"/>
<id>http://yoursite.com/2018/05/06/如何在疲劳的JS世界中持续学习-转载/</id>
<published>2018-05-06T14:03:36.000Z</published>
<updated>2018-05-06T14:13:50.168Z</updated>
<content type="html"><![CDATA[<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>]]></content>
<summary type="html">
<h1 id="如何在疲劳的JS世界中持续学习"><a href="#如何在疲劳的JS世界中持续学习" class="headerlink" title="如何在疲劳的JS世界中持续学习"></a>如何在疲劳的JS世界中持续学习</h1><blockquote>
<p>作者简介
</summary>
</entry>
<entry>
<title>webpack4学习之路</title>
<link href="http://yoursite.com/2018/04/08/webpack4%E5%AD%A6%E4%B9%A0%E4%B9%8B%E8%B7%AF/"/>
<id>http://yoursite.com/2018/04/08/webpack4学习之路/</id>
<published>2018-04-08T02:59:26.000Z</published>
<updated>2018-04-08T02:59:56.506Z</updated>
<summary type="html">
</summary>
<category term="webpack" scheme="http://yoursite.com/tags/webpack/"/>
</entry>
<entry>
<title>一道有意思的js面试题</title>
<link href="http://yoursite.com/2018/03/11/%E4%B8%80%E9%81%93%E6%9C%89%E6%84%8F%E6%80%9D%E7%9A%84js%E9%9D%A2%E8%AF%95%E9%A2%98/"/>
<id>http://yoursite.com/2018/03/11/一道有意思的js面试题/</id>
<published>2018-03-11T10:45:34.000Z</published>
<updated>2018-03-11T10:46:05.421Z</updated>
<content type="html"><![CDATA[<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>]]></content>
<summary type="html">
<h1 id="一道有意思的js面试题"><a href="#一道有意思的js面试题" class="headerlink" title="一道有意思的js面试题"></a>一道有意思的js面试题</h1><p>这几天忙着面试,遇到了一个有意思的面试题,记录一下,就当复习自己的j
</summary>
<category term="js" scheme="http://yoursite.com/tags/js/"/>
</entry>
<entry>
<title>js实现拖拽</title>
<link href="http://yoursite.com/2018/03/07/js%E5%AE%9E%E7%8E%B0%E6%8B%96%E6%8B%BD/"/>
<id>http://yoursite.com/2018/03/07/js实现拖拽/</id>
<published>2018-03-07T14:13:28.000Z</published>
<updated>2018-03-07T14:45:37.697Z</updated>
<content type="html"><![CDATA[<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>]]></content>
<summary type="html">
<h1 id="js实现元素拖拽效果"><a href="#js实现元素拖拽效果" class="headerlink" title="js实现元素拖拽效果"></a>js实现元素拖拽效果</h1><p>项目中写过不少鼠标拖拽事件,最近面试的时候要求实现一道元素拖拽效果,正所谓t
</summary>
<category term="js" scheme="http://yoursite.com/tags/js/"/>
</entry>
<entry>
<title>create project-cli</title>
<link href="http://yoursite.com/2018/03/04/create-project-cli/"/>
<id>http://yoursite.com/2018/03/04/create-project-cli/</id>
<published>2018-03-04T07:24:05.000Z</published>
<updated>2018-03-04T07:30:40.300Z</updated>
<content type="html"><![CDATA[<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>]]></content>
<summary type="html">
<h1 id="自建脚手架"><a href="#自建脚手架" class="headerlink" title="自建脚手架"></a>自建脚手架</h1><p>最近在捣鼓vue,觉得vue-cli这个脚手架不错,想来就自己也写一个吧,正好平时工作或者自己整个啥项目,也不用苦哈
</summary>
</entry>
<entry>
<title>新博客开张</title>
<link href="http://yoursite.com/2018/03/04/%E6%96%B0%E5%8D%9A%E5%AE%A2%E5%BC%80%E5%BC%A0/"/>
<id>http://yoursite.com/2018/03/04/新博客开张/</id>
<published>2018-03-04T06:41:27.000Z</published>
<updated>2018-03-04T07:34:45.989Z</updated>
<content type="html"><![CDATA[<h1 id="新博客开张啦"><a href="#新博客开张啦" class="headerlink" title="新博客开张啦"></a>新博客开张啦</h1><p>自从服务器中间一度停止续费,我的博客也正式下架了,前段时间一直想把之前做个博客系统新写一版,这段时间也算是完成了一点,前端当然是用的目前最火热的三大框架之Vue,后端也是我的最爱大python,不过目前博客还在搭建中,心想着怎么也得弄个博客,没事写写文章啥的,于是就有了这个博客的诞生</p><p>ps:本人技术渣,颜值低,博客只为巩固知识,记录新奇想法,如果您一不小心搜到此博客,发现博客太水,对不起,关我屁事?:)</p>]]></content>
<summary type="html">
<h1 id="新博客开张啦"><a href="#新博客开张啦" class="headerlink" title="新博客开张啦"></a>新博客开张啦</h1><p>自从服务器中间一度停止续费,我的博客也正式下架了,前段时间一直想把之前做个博客系统新写一版,这段时间也算是
</summary>
</entry>
</feed>