-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
167 lines (145 loc) · 44.8 KB
/
Copy pathatom.xml
File metadata and controls
167 lines (145 loc) · 44.8 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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Kasim's Blog</title>
<link href="/atom.xml" rel="self"/>
<link href="http://kaxium.github.io/"/>
<updated>2017-04-12T15:25:54.000Z</updated>
<id>http://kaxium.github.io/</id>
<author>
<name>Kasim</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Hello World</title>
<link href="http://kaxium.github.io/2017/04/12/hello-world/"/>
<id>http://kaxium.github.io/2017/04/12/hello-world/</id>
<published>2017-04-12T15:25:54.000Z</published>
<updated>2017-04-12T15:25:54.000Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
<entry>
<title>Javascript代码规范</title>
<link href="http://kaxium.github.io/2016/06/06/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/"/>
<id>http://kaxium.github.io/2016/06/06/代码规范/</id>
<published>2016-06-06T02:06:03.000Z</published>
<updated>2017-07-01T03:20:31.000Z</updated>
<content type="html"><![CDATA[<p>JMFE Javascript代码规范v1.0。抛砖引玉，请大家多给建议，多做补充。定稿后组内使用统一Linter配置。</p>
<a id="more"></a>
<p><img src="/gallery/code_standard1.jpg" alt=""></p>
<h2 id="命名规范"><a href="#命名规范" class="headerlink" title="命名规范"></a>命名规范</h2><hr>
<h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><ul>
<li><p>避免单字母名称，让名称具有描述性</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">query</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">q</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>使用驼峰写法</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> thisIsMyObj = {};</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">thisIsMyFun</span>(<span class="params"></span>) </span>{}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> OBJEcttsssss = {};</div><div class="line"><span class="keyword">var</span> this_is_my_object = {};</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>{}</div></pre></td></tr></table></figure>
</li>
<li><p>多词相连时，>=6个字母的词使用缩写</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> people = {};</div><div class="line"><span class="keyword">var</span> compListTpl = [];</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fmtDate</span>(<span class="params"></span>) </span>{};</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> componentListTemplate = [];</div><div class="line"><span class="keyword">var</span> formatDate() {};</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="私有属性"><a href="#私有属性" class="headerlink" title="私有属性"></a>私有属性</h3><ul>
<li>封装私有属性时使用<code>_</code>前缀<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">people</span>(<span class="params">name</span>) </span>{</div><div class="line"> <span class="keyword">var</span> _ageMap = {</div><div class="line"> <span class="string">"张三"</span> : <span class="string">"21"</span>,</div><div class="line"> <span class="string">"小红"</span> : <span class="string">"20"</span></div><div class="line"> }</div><div class="line"> <span class="keyword">this</span>.name = name;</div><div class="line"> <span class="keyword">this</span>.age = _ageMap[name];</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="this"><a href="#this" class="headerlink" title="this"></a>this</h3><ul>
<li>保存this引用时使用self<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> self = <span class="keyword">this</span>;</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(self);</div><div class="line"> };</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> that = <span class="keyword">this</span>;</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(that);</div><div class="line"> };</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> _this = <span class="keyword">this</span>;</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(_this);</div><div class="line"> };</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="jQuery变量"><a href="#jQuery变量" class="headerlink" title="jQuery变量"></a>jQuery变量</h3><ul>
<li>jQuery对象变量使用<code>$</code>前缀<figure class="highlight js"><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><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> $sidebar = $(<span class="string">'.sidebar'</span>);</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> sidebar = $(<span class="string">'.sidebar'</span>);</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="文件名"><a href="#文件名" class="headerlink" title="文件名"></a>文件名</h3><ul>
<li>如果文件作为一个依赖被导出，文件名和导出名保持一致<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// file contents</span></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">CheckBox</span> </span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="built_in">module</span>.exports = CheckBox;</div><div class="line"></div><div class="line"><span class="keyword">var</span> CheckBox = <span class="built_in">require</span>(<span class="string">'./CheckBox'</span>);</div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> CheckBox = <span class="built_in">require</span>(<span class="string">'./CheckBox'</span>);</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> CheckBox = <span class="built_in">require</span>(<span class="string">'./checkBox'</span>);</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> CheckBox = <span class="built_in">require</span>(<span class="string">'./check_box'</span>);</div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="语句规范"><a href="#语句规范" class="headerlink" title="语句规范"></a>语句规范</h2><hr>
<h3 id="空格-缩进"><a href="#空格-缩进" class="headerlink" title="空格 缩进"></a>空格 缩进</h3><ul>
<li><p>缩进使用tab设置四个空格</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line">∙∙∙∙<span class="keyword">var</span> name;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"><span class="keyword">var</span> name;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line">∙∙<span class="keyword">var</span> name;</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>对象声明格式</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> coder = {</div><div class="line"> <span class="attr">name</span> : <span class="string">"张三"</span>,</div><div class="line"> <span class="attr">age</span> : <span class="number">21</span>,</div><div class="line"> <span class="attr">girlFreind</span> : {</div><div class="line"> <span class="attr">name</span> : <span class="string">"小红"</span>,</div><div class="line"> <span class="attr">age</span> : <span class="number">20</span></div><div class="line"> }</div><div class="line">};</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> coder = {</div><div class="line"> <span class="attr">name</span> : <span class="string">"张三"</span>,<span class="attr">age</span> : <span class="number">21</span>,<span class="attr">girlFreind</span> : {<span class="attr">name</span> : <span class="string">"小红"</span>,<span class="attr">age</span> : <span class="number">20</span>}</div><div class="line">};</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> coder =</div><div class="line">{</div><div class="line"> <span class="attr">name</span> : <span class="string">"张三"</span>,<span class="attr">age</span> : <span class="number">21</span>,<span class="attr">girlFreind</span> : {<span class="attr">name</span> : <span class="string">"小红"</span>,<span class="attr">age</span> : <span class="number">20</span>}</div><div class="line">};</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> coder={</div><div class="line"> <span class="attr">name</span>:<span class="string">"张三"</span>,</div><div class="line"> <span class="attr">age</span>:<span class="number">21</span>,</div><div class="line"> <span class="attr">girlFreind</span>:{</div><div class="line"> <span class="attr">name</span>:<span class="string">"小红"</span>,</div><div class="line"> <span class="attr">age</span>:<span class="number">20</span></div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure>
</li>
<li><p>函数声明格式</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'test'</span>);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span> (<span class="params"></span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'test'</span>);</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span> (<span class="params"></span>)</span>{<span class="built_in">console</span>.log(<span class="string">'test'</span>);}</div></pre></td></tr></table></figure>
</li>
<li><p>用空白分隔运算符</p>
<figure class="highlight js"><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><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> x = y + <span class="number">5</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> x=y+<span class="number">5</span>;</div></pre></td></tr></table></figure>
</li>
<li><p>if、while语句块</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">if</span> () {</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">} <span class="keyword">else</span> {</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">if</span> () {</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"><span class="keyword">else</span> {</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">if</span> () <span class="comment">// ...</span></div><div class="line"><span class="keyword">else</span> <span class="comment">// ...</span></div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">if</span> (){ <span class="built_in">console</span>.log(<span class="string">"one line"</span>); }</div><div class="line"><span class="keyword">else</span>{ <span class="built_in">console</span>.log(<span class="string">"one line"</span>); }</div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">while</span> () {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>switch语句块</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">switch</span> () {</div><div class="line"> <span class="keyword">case</span> <span class="string">"1"</span>:</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> <span class="keyword">break</span>;</div><div class="line"> <span class="keyword">case</span> <span class="string">"2"</span>:</div><div class="line"> <span class="comment">// ...</span></div><div class="line"> <span class="keyword">break</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h3><ul>
<li>使用快捷方式计算布尔值<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">if</span> (name) {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">if</span> (name !== <span class="string">''</span>) {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">if</span> (collection.length) {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">if</span> (collection.length > <span class="number">0</span>) {</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="创建变量"><a href="#创建变量" class="headerlink" title="创建变量"></a>创建变量</h2><hr>
<h3 id="基本规则"><a href="#基本规则" class="headerlink" title="基本规则"></a>基本规则</h3><ul>
<li><p>使用var声明每个变量，结构整洁，并且容易添加新的变量声明，而不用去担心多用<code>;</code></p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> items = getItems();</div><div class="line"><span class="keyword">var</span> name = <span class="string">"张三"</span>;</div><div class="line"><span class="keyword">var</span> age = <span class="number">21</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> items = getItems(),</div><div class="line"> name = <span class="string">"张三"</span>,</div><div class="line"> age = <span class="number">21</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="comment">// (compare to above, and try to spot the mistake)</span></div><div class="line"><span class="keyword">var</span> items = getItems(),</div><div class="line"> name = <span class="string">"张三"</span>;</div><div class="line"> age = <span class="number">21</span>;</div></pre></td></tr></table></figure>
</li>
<li><p>在作用域顶部一次性声明所有变量，并最后声明未赋值的变量</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> items = getItems();</div><div class="line"><span class="keyword">var</span> name;</div><div class="line"><span class="keyword">var</span> age;</div><div class="line"><span class="keyword">var</span> sex;</div><div class="line"><span class="comment">//...</span></div><div class="line">name = <span class="string">"张三"</span>;</div><div class="line"><span class="comment">//...</span></div><div class="line">age = <span class="number">21</span>;</div><div class="line">sex = <span class="string">"male"</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> items = getItems();</div><div class="line"><span class="comment">//...</span></div><div class="line"><span class="keyword">var</span> name = <span class="string">"张三"</span>;</div><div class="line"><span class="comment">//...</span></div><div class="line"><span class="keyword">var</span> age = <span class="number">21</span>;</div><div class="line"><span class="keyword">var</span> sex = <span class="string">"male"</span>;</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><ul>
<li>使用字面量创建对象<figure class="highlight js"><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><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> item = {};</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> item = <span class="keyword">new</span> <span class="built_in">Object</span>();</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><ul>
<li><p>使用字面量创建数组</p>
<figure class="highlight js"><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><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> item = [];</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> items = <span class="keyword">new</span> <span class="built_in">Array</span>();</div></pre></td></tr></table></figure>
</li>
<li><p>添加删除数组元素时，使用push、pop、unshift、shift，不直接操作数组元素</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> someStack = [];</div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line">someStack.push(<span class="string">'aaa'</span>);</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line">someStack[someStack.length] = <span class="string">'aaa'</span>;</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><ul>
<li><p>使用双引号包裹字符串</p>
<figure class="highlight js"><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><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> name = <span class="string">"张三"</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> name = <span class="string">'张三'</span>;</div></pre></td></tr></table></figure>
</li>
<li><p>超过80个字符的字符串使用字符串连接符进行换行</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="keyword">var</span> errorMessage = <span class="string">'This is a super long error that was thrown because '</span> +</div><div class="line"> <span class="string">'of Batman. When you stop to think about how Batman had anything to do '</span> +</div><div class="line"> <span class="string">'with this, you would get nowhere fast.'</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> errorMessage = <span class="string">'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> errorMessage = <span class="string">'This is a super long error that was thrown because \</span></div><div class="line">of Batman. When you stop to think about how Batman had anything to do \</div><div class="line">with this, you would get nowhere \</div><div class="line">fast.';</div></pre></td></tr></table></figure>
</li>
<li><p>以编程方式创建字符串时使用Array的join方法而不是通过连接符</p>
<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> items;</div><div class="line"><span class="keyword">var</span> messages;</div><div class="line"><span class="keyword">var</span> length;</div><div class="line"><span class="keyword">var</span> i;</div><div class="line"></div><div class="line">messages = [{</div><div class="line"> <span class="attr">state</span>: <span class="string">'success'</span>,</div><div class="line"> <span class="attr">message</span>: <span class="string">'This one worked.'</span></div><div class="line">}, {</div><div class="line"> <span class="attr">state</span>: <span class="string">'success'</span>,</div><div class="line"> <span class="attr">message</span>: <span class="string">'This one worked as well.'</span></div><div class="line">}, {</div><div class="line"> <span class="attr">state</span>: <span class="string">'error'</span>,</div><div class="line"> <span class="attr">message</span>: <span class="string">'This one did not work.'</span></div><div class="line">}];</div><div class="line"></div><div class="line">length = messages.length;</div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">inbox</span>(<span class="params">messages</span>) </span>{</div><div class="line"> items = [];</div><div class="line"></div><div class="line"> <span class="keyword">for</span> (i = <span class="number">0</span>; i < length; i++) {</div><div class="line"> items.push(<span class="string">'<li>'</span> + messages[i].message + <span class="string">'</li>'</span>);</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> <span class="string">'<ul>'</span> + items.join(<span class="string">''</span>) + <span class="string">'</ul>'</span>;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">inbox</span>(<span class="params">messages</span>) </span>{</div><div class="line"> items = <span class="string">'<ul>'</span>;</div><div class="line"></div><div class="line"> <span class="keyword">for</span> (i = <span class="number">0</span>; i < length; i++) {</div><div class="line"> items += <span class="string">'<li>'</span> + messages[i].message + <span class="string">'</li>'</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">return</span> items + <span class="string">'</ul>'</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h2><hr>
<h3 id="单行"><a href="#单行" class="headerlink" title="单行"></a>单行</h3><ul>
<li>单行注释使用<code>//</code>，注释符后空一格，把单行注释放在语句的上一行，并且在注释之前空一行<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="comment">// is current tab</span></div><div class="line"><span class="keyword">var</span> active = <span class="literal">true</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="keyword">var</span> active = <span class="literal">true</span>; <span class="comment">// is current tab</span></div><div class="line"></div><div class="line"><span class="comment">// good</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'fetching type...'</span>);</div><div class="line"></div><div class="line"> <span class="comment">// set the default type to 'no type'</span></div><div class="line"> <span class="keyword">var</span> type = <span class="keyword">this</span>._type || <span class="string">'no type'</span>;</div><div class="line"></div><div class="line"> <span class="keyword">return</span> type;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getType</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'fetching type...'</span>);</div><div class="line"> <span class="comment">//set the default type to 'no type'</span></div><div class="line"> <span class="keyword">var</span> type = <span class="keyword">this</span>._type || <span class="string">'no type'</span>;</div><div class="line"></div><div class="line"> <span class="keyword">return</span> type;</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="多行"><a href="#多行" class="headerlink" title="多行"></a>多行</h3><ul>
<li>多行注释使用<code>/* */</code>，注释符前后换行，缩进4格开始写注释<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// good</span></div><div class="line"><span class="comment">/* </span></div><div class="line"> this is an </div><div class="line"> annotation example </div><div class="line">*/</div><div class="line"><span class="keyword">var</span> active = <span class="literal">true</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="comment">/* this is an annotation example */</span></div><div class="line"><span class="keyword">var</span> active = <span class="literal">true</span>;</div><div class="line"></div><div class="line"><span class="comment">// bad</span></div><div class="line"><span class="comment">// this is an </span></div><div class="line"><span class="comment">// annotation example</span></div><div class="line"><span class="keyword">var</span> active = <span class="literal">true</span>;</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="方法注释"><a href="#方法注释" class="headerlink" title="方法注释"></a>方法注释</h3><ul>
<li>注明方法作用、入参类型和说明、返回类型和说明<figure class="highlight js"><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><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"> * 格式化金额 1234567.890 -> 1,234,568 || 1234567.9 | 1234567.89 | 1234567.8900</div><div class="line"> * @param {anytype} str 待格式化数字，可为任何类型 传入非数字时直接返回</div><div class="line"> * @param {[Number | String]} fixedNum 四舍五入几位，取值0-20，可不传，小数默认截取两位 </div><div class="line"> * @return {String} 格式化后的数字，String类型</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">splitMoney</span>(<span class="params">str, fixedNum</span>) </span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div></pre></td></tr></table></figure></li>
</ul>
]]></content>
<summary type="html">
Javascript代码规范
</summary>
<category term="文档" scheme="http://kaxium.github.io/categories/%E6%96%87%E6%A1%A3/"/>
<category term="代码规范" scheme="http://kaxium.github.io/tags/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/"/>
</entry>
</feed>