-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
410 lines (310 loc) · 13.9 KB
/
index.html
File metadata and controls
410 lines (310 loc) · 13.9 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn & Share</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description">
<meta property="og:type" content="website">
<meta property="og:title" content="Learn & Share">
<meta property="og:url" content="http://henrydf.github.io/index.html">
<meta property="og:site_name" content="Learn & Share">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Learn & Share">
<meta name="twitter:description">
<link rel="alternate" href="/atom.xml" title="Learn & Share" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Learn & Share</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="搜索"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://henrydf.github.io"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-Airbnb-Javascript-GUIDE" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/30/Airbnb-Javascript-GUIDE/" class="article-date">
<time datetime="2016-03-30T06:06:04.000Z" itemprop="datePublished">2016-03-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/30/Airbnb-Javascript-GUIDE/">Airbnb Javascript GUIDE</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p><em><a href="https://github.com/airbnb/javascript#functions" target="_blank" rel="external">原文链接</a></em></p>
<h1 id="7-Functions-函数"><a href="#7-Functions-函数" class="headerlink" title="7 Functions 函数"></a>7 Functions 函数</h1><ul>
<li><p>7.1 Use function declarations instead of function expressions. jscs: requireFunctionDeclarations<br> 使用函数定义代替函数表达式。</p>
<p> <em>Why? Function declarations are named, so they’re easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use Arrow Functions in place of function expressions.</em></p>
<p> <em>为什么？函数定义是有名字的，所以他们可以更容易的在调用栈中识别出来。同样，方法定义的整个方法体被提前到最前面，而函数表达式只有对方法的引用会被提到最前。这条规则让总是用箭头函数替换函数表达式可行。</em></p>
<pre><code>// bad
const foo = function () {
};
// good
function foo() {
}
</code></pre></li>
<li><p>7.2 Immediately invoked function expressions: eslint: wrap-iife jscs: requireParenthesesAroundIIFE<br> IIFE:必须用小括号包围。</p>
<p> <em>Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE.</em></p>
<p> <em>为什么？一个IIFE是一个完整的单位——包括它的定义和它的调用括号。把IIFE写在括号里，可以清楚的表达这个意思。注意，在一个到处都是在modules的世界里，你几乎用不到IIFE。</em></p>
<pre><code>// immediately-invoked function expression (IIFE)
(function () {
console.log('Welcome to the Internet. Please follow me.');
}());
</code></pre></li>
<li><p>7.3 Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: no-loop-func</p>
<p> 绝对不要在一个非函数语句块里定义一个函数（例如，if/while）。用把函数赋给一个变量代替。浏览器允许你做这个，但是它们解释起来不一样，这是一个很糟糕的记忆。</p>
</li>
<li><p>7.4 Note: <a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf" target="_blank" rel="external">ECMA-262</a> defines a block as a list of statements. A function declaration is not a statement. Read ECMA-262’s note on this issue.</p>
<p> 注意，ECMA-262定义了“一个语句块是一组语句”。函数定义不是语句。读ECMA-262的<a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97" target="_blank" rel="external">Note</a>关注这个问题。</p>
<pre><code>// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}
</code></pre></li>
<li><p>7.5 Never name a parameter arguments. This will take precedence over the arguments object that is given to every function scope.</p>
<p> 不要把一个参数命名成arguments。这会覆盖每个函数都有的arguments。</p>
<pre><code>// bad
function nope(name, options, arguments) {
// ...stuff...
}
// good
function yup(name, options, args) {
// ...stuff...
}
</code></pre><p> <em>*函数会有一个叫arguments的参数，来代表所有的参数。</em></p>
<pre><code>x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i;
var max = -Infinity;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
</code></pre></li>
<li><p>7.6 Never use arguments, opt to use rest syntax … instead. prefer-rest-params</p>
<p>永远不要用arguments，用rest语法<code>...</code>代替。</p>
<p><em>Why? … is explicit about which arguments you want pulled. Plus, rest arguments are a real Array, and not merely Array-like like arguments.<br>为什么？<code>...</code>能明确的标示哪一个参数你想展开。另外，rest参数是一个真实的数组，而不是像arguments那样，只是一个类似数组的变量。</em></p>
<pre><code>// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
</code></pre></li>
<li><p>7.7 Use default parameter syntax rather than mutating function arguments.</p>
<p>用默认参数的语法，而不是修改函数的参数。</p>
<pre><code>// really bad
function handleThings(opts) {
// No! We shouldn't mutate function arguments.
// Double bad: if opts is falsy it'll be set to an object which may
// be what you want but it can introduce subtle bugs.
opts = opts || {};
// ...
}
// still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
// ...
}
</code></pre></li>
<li><p>7.8 Avoid side effects with default parameters.</p>
<p>避免在默认参数中的副作用。<em>不要在默认参数中修改外部的变量</em> <a href="https://www.zhihu.com/question/30779564" target="_blank" rel="external">参考</a></p>
<p><em>Why? They are confusing to reason about.<br>为什么？因为会让你迷惑为什么会这样。</em></p>
<pre><code>var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3
</code></pre></li>
<li><p>7.9 Always put default parameters last.</p>
<p>总是把默认参数放到最后。</p>
<pre><code>// bad
function handleThings(opts = {}, name) {
// ...
}
// good
function handleThings(name, opts = {}) {
// ...
}
</code></pre></li>
<li><p>7.10 Never use the Function constructor to create a new function.</p>
<p>永远不要用函数构建器去创建一个新的函数。</p>
<p><em>Why? Creating a function in this way evaluates a string similarly to eval(), which opens vulnerabilities.<br>为什么？用这种方法去创建一个函数就像用<code>eval()</code>，非常容易被攻击。</em></p>
</li>
<li><p>7.11 Spacing in a function signature.</p>
<p>在函数签名中保留空格。</p>
<p><em>Why? Consistency is good, and you shouldn’t have to add or remove a space when adding or removing a name.<br>为什么，因为这样统一性很好。并且你在添加或删除名字的时候去添加、删除空格。</em></p>
<pre><code>// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};
</code></pre></li>
<li><p>7.12 Never mutate parameters. eslint: no-param-reassign</p>
<p>永远不要修改参数。</p>
<p><em>Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.<br>为什么？操作参数里传进来的对象能导致调用者中不想要的副作用变化。</em></p>
<pre><code>// bad
function f1(obj) {
obj.key = 1;
};
// good
function f2(obj) {
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
};
</code></pre></li>
<li><p>7.13 Never reassign parameters. eslint: no-param-reassign</p>
<p>永远不要重新给参数赋值。</p>
<p><em>Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the arguments object. It can also cause optimization issues, especially in V8.<br>为什么？重新给参数赋值能导致不可预期的行为，特别是访问arguments对象。这么做同样能引起优化问题，特别是在V8引擎中。</em></p>
<pre><code>// bad
function f1(a) {
a = 1;
}
function f2(a) {
if (!a) { a = 1; }
}
// good
function f3(a) {
const b = a || 1;
}
function f4(a = 1) {
}
</code></pre></li>
</ul>
</div>
<footer class="article-footer">
<a data-url="http://henrydf.github.io/2016/03/30/Airbnb-Javascript-GUIDE/" data-id="cimei2bh90000ekvixjz5dola" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript-guide/">javascript guide</a></li></ul>
</footer>
</div>
</article>
<article id="post-Say-Hello" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/25/Say-Hello/" class="article-date">
<time datetime="2016-03-25T07:48:27.000Z" itemprop="datePublished">2016-03-25</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/25/Say-Hello/">Say Hello</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>真不容易啊。。。喊个Hello World!</p>
</div>
<footer class="article-footer">
<a data-url="http://henrydf.github.io/2016/03/25/Say-Hello/" data-id="cimei2bhf0001ekvi4bl7fwod" class="article-share-link">Share</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">标签</h3>
<div class="widget">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript-guide/">javascript guide</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">标签云</h3>
<div class="widget tagcloud">
<a href="/tags/javascript-guide/" style="font-size: 10px;">javascript guide</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">三月 2016</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">最新文章</h3>
<div class="widget">
<ul>
<li>
<a href="/2016/03/30/Airbnb-Javascript-GUIDE/">Airbnb Javascript GUIDE</a>
</li>
<li>
<a href="/2016/03/25/Say-Hello/">Say Hello</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2016 Henry<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>