JavaScript规范
目录
- 类型
- 对象
- 数组
- 字符串
- 函数
- 属性
- 变量
- 条件表达式和等号
- 块
- 注释
- 空白
- 逗号
- 分号
- 类型转换
- 命名约定
- 存取器
- 构造器
- 事件
- 模块
- jQuery
- ES5 兼容性
- HTML、CSS、JavaScript分离
- 使用jsHint
- 前端工具
类型
- 原始值: 相当于传值(JavaScript对象都提供了字面量),使用字面量创建对象。
string
number
boolean
null
undefined
1 2 3 4 5 6 |
<span class="kwd">var</span><span class="pln"> foo </span><span class="pun">=</span> <span class="lit">1</span><span class="pun">,</span><span class="pln"> bar </span><span class="pun">=</span><span class="pln"> foo</span><span class="pun">;</span><span class="pln"> bar </span><span class="pun">=</span> <span class="lit">9</span><span class="pun">;</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">foo</span><span class="pun">,</span><span class="pln"> bar</span><span class="pun">);</span> <span class="com">// => 1, 9</span> |
复杂类型: 相当于传引用
object
array
function
1 2 3 4 5 6 |
<span class="kwd">var</span><span class="pln"> foo </span><span class="pun">=</span> <span class="pun">[</span><span class="lit">1</span><span class="pun">,</span> <span class="lit">2</span><span class="pun">],</span><span class="pln"> bar </span><span class="pun">=</span><span class="pln"> foo</span><span class="pun">;</span><span class="pln"> bar</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span> <span class="pun">=</span> <span class="lit">9</span><span class="pun">;</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">foo</span><span class="pun">[</span><span class="lit">0</span><span class="pun">],</span><span class="pln"> bar</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span> <span class="com">// => 9, 9</span> |
对象
- 使用字面值创建对象。
12345<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> item </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Object</span><span class="pun">();</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> item </span><span class="pun">=</span> <span class="pun">{};</span> - 不要使用保留字 reserved words 作为键。
12345678910111213<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> superman </span><span class="pun">=</span> <span class="pun">{</span><span class="kwd">class</span><span class="pun">:</span> <span class="str">'superhero'</span><span class="pun">,</span><span class="kwd">default</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> clark</span><span class="pun">:</span> <span class="str">'kent'</span> <span class="pun">},</span><span class="kwd">private</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">};</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> superman </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">klass</span><span class="pun">:</span> <span class="str">'superhero'</span><span class="pun">,</span><span class="pln">defaults</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> clark</span><span class="pun">:</span> <span class="str">'kent'</span> <span class="pun">},</span><span class="pln">hidden</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">};</span>
数组
- 使用字面值创建数组。
12345<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Array</span><span class="pun">();</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span> <span class="pun">[];</span> - 如果你不知道数组的长度,使用push。
1234567<span class="kwd">var</span><span class="pln"> someStack </span><span class="pun">=</span> <span class="pun">[];</span><span class="com">// bad</span><span class="pln">someStack</span><span class="pun">[</span><span class="pln">someStack</span><span class="pun">.</span><span class="pln">length</span><span class="pun">]</span> <span class="pun">=</span> <span class="str">'abracadabra'</span><span class="pun">;</span><span class="com">// good</span><span class="pln">someStack</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'abracadabra'</span><span class="pun">);</span> - 当你需要拷贝数组时使用slice. jsPerf。
1234567891011<span class="kwd">var</span><span class="pln"> len </span><span class="pun">=</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">length</span><span class="pun">,</span><span class="pln">itemsCopy </span><span class="pun">=</span> <span class="pun">[],</span><span class="pln">i</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">for</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> len</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln">itemsCopy</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> items</span><span class="pun">[</span><span class="pln">i</span><span class="pun">];</span><span class="pun">}</span><span class="com">// good</span><span class="pln">itemsCopy </span><span class="pun">=</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">slice</span><span class="pun">();</span> - 使用slice将类数组的对象转成数组。
1234<span class="kwd">function</span><span class="pln"> trigger</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> args </span><span class="pun">=</span> <span class="pun">[].</span><span class="pln">slice</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="pln">arguments</span><span class="pun">);</span><span class="pun">...</span><span class="pun">}</span>
字符串
- 对字符串使用单引号
''
(因为大多时候我们的字符串。特别html会出现"
)。
1234567891011<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">"Bob Parr"</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">'Bob Parr'</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> fullName </span><span class="pun">=</span> <span class="str">"Bob "</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">lastName</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> fullName </span><span class="pun">=</span> <span class="str">'Bob '</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">lastName</span><span class="pun">;</span> - 超过80(也有规定140的,项目具体可制定)个字符的字符串应该使用字符串连接换行。
- 注: 如果过度使用,长字符串连接可能会对性能有影响。
123456789101112131415161718<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> errorMessage </span><span class="pun">=</span> <span class="str">'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><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> errorMessage </span><span class="pun">=</span> <span class="str">'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><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> errorMessage </span><span class="pun">=</span> <span class="str">'This is a super long error that '</span> <span class="pun">+</span><span class="str">'was thrown because of Batman.'</span> <span class="pun">+</span><span class="str">'When you stop to think about '</span> <span class="pun">+</span><span class="str">'how Batman had anything to do '</span> <span class="pun">+</span><span class="str">'with this, you would get nowhere '</span> <span class="pun">+</span><span class="str">'fast.'</span><span class="pun">;</span> - 编程时使用join而不是字符串连接来构建字符串。
1234567891011121314151617181920212223242526272829303132333435363738<span class="kwd">var</span><span class="pln"> items</span><span class="pun">,</span><span class="pln">messages</span><span class="pun">,</span><span class="pln">length</span><span class="pun">,</span><span class="pln"> i</span><span class="pun">;</span><span class="pln">messages </span><span class="pun">=</span> <span class="pun">[{</span><span class="pln">state</span><span class="pun">:</span> <span class="str">'success'</span><span class="pun">,</span><span class="pln">message</span><span class="pun">:</span> <span class="str">'This one worked.'</span><span class="pun">},{</span><span class="pln">state</span><span class="pun">:</span> <span class="str">'success'</span><span class="pun">,</span><span class="pln">message</span><span class="pun">:</span> <span class="str">'This one worked as well.'</span><span class="pun">},{</span><span class="pln">state</span><span class="pun">:</span> <span class="str">'error'</span><span class="pun">,</span><span class="pln">message</span><span class="pun">:</span> <span class="str">'This one did not work.'</span><span class="pun">}];</span><span class="pln">length </span><span class="pun">=</span><span class="pln"> messages</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">function</span><span class="pln"> inbox</span><span class="pun">(</span><span class="pln">messages</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">items </span><span class="pun">=</span> <span class="str">'<ul>'</span><span class="pun">;</span><span class="kwd">for</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln">items </span><span class="pun">+=</span> <span class="str">'<li>'</span> <span class="pun">+</span><span class="pln"> messages</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">message </span><span class="pun">+</span> <span class="str">'</li>'</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">return</span><span class="pln"> items </span><span class="pun">+</span> <span class="str">'</ul>'</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pln"> inbox</span><span class="pun">(</span><span class="pln">messages</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">items </span><span class="pun">=</span> <span class="pun">[];</span><span class="kwd">for</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln">items</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> messages</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">message</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">return</span> <span class="str">'<ul><li>'</span> <span class="pun">+</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">'</li><li>'</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">'</li></ul>'</span><span class="pun">;</span><span class="pun">}</span>
函数
- 函数表达式:
1234567891011121314<span class="com">// 匿名函数表达式</span><span class="kwd">var</span><span class="pln"> anonymous </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span><span class="pun">};</span><span class="com">// 有名函数表达式</span><span class="kwd">var</span><span class="pln"> named </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> named</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span><span class="pun">};</span><span class="com">// 立即调用函数表达式</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Welcome to the Internet. Please follow me.'</span><span class="pun">);</span><span class="pun">})();</span> - 绝对不要在一个非函数块里声明一个函数,把那个函数赋给一个变量。浏览器允许你这么做,但是它们解析不同。
- 注: ECMA-262定义把
块
定义为一组语句,函数声明不是一个语句。阅读ECMA-262对这个问题的说明。
12345678910111213<span class="com">// bad</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">currentUser</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">function</span><span class="pln"> test</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Nope.'</span><span class="pun">);</span><span class="pun">}</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">currentUser</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> test </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> test</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Yup.'</span><span class="pun">);</span><span class="pun">};</span><span class="pun">}</span> - 绝对不要把参数命名为
arguments
, 这将会逾越函数作用域内传过来的arguments
对象。
123456789<span class="com">// bad</span><span class="kwd">function</span><span class="pln"> nope</span><span class="pun">(</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">,</span><span class="pln"> arguments</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pln"> yup</span><span class="pun">(</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">,</span><span class="pln"> args</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span>
属性
- 当使用变量和特殊非法变量名时,访问属性时可以使用中括号(
.
优先)。
12345678910<span class="kwd">var</span><span class="pln"> luke </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">jedi</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">age</span><span class="pun">:</span> <span class="lit">28</span><span class="pun">};</span><span class="kwd">function</span><span class="pln"> getProp</span><span class="pun">(</span><span class="pln">prop</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span><span class="pln"> luke</span><span class="pun">[</span><span class="pln">prop</span><span class="pun">];</span><span class="pun">}</span><span class="kwd">var</span><span class="pln"> isJedi </span><span class="pun">=</span><span class="pln"> getProp</span><span class="pun">(</span><span class="str">'jedi'</span><span class="pun">);</span>
变量
- 总是使用
var
来声明变量,如果不这么做将导致产生全局变量,我们要避免污染全局命名空间。
12345<span class="com">// bad</span><span class="pln">superPower </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">SuperPower</span><span class="pun">();</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> superPower </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">SuperPower</span><span class="pun">();</span> - 使用一个
var
以及新行声明多个变量,缩进4个空格。
123456789<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">();</span><span class="kwd">var</span><span class="pln"> goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span><span class="kwd">var</span><span class="pln"> dragonball </span><span class="pun">=</span> <span class="str">'z'</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln">goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">dragonball </span><span class="pun">=</span> <span class="str">'z'</span><span class="pun">;</span> - 最后再声明未赋值的变量,当你想引用之前已赋值变量的时候很有用。
1234567891011121314151617<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> len</span><span class="pun">,</span><span class="pln"> dragonball</span><span class="pun">,</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln">goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln">dragonball</span><span class="pun">,</span><span class="pln">goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">len</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln">goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">dragonball</span><span class="pun">,</span><span class="pln">length</span><span class="pun">,</span><span class="pln">i</span><span class="pun">;</span> - 在作用域顶部声明变量,避免变量声明和赋值引起的相关问题。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<span class="com">// bad</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">test</span><span class="pun">();</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'doing stuff..'</span><span class="pun">);</span><span class="com">//..other stuff..</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">name </span><span class="pun">===</span> <span class="str">'test'</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">return</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span><span class="pln">test</span><span class="pun">();</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'doing stuff..'</span><span class="pun">);</span><span class="com">//..other stuff..</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">name </span><span class="pun">===</span> <span class="str">'test'</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">return</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">}</span><span class="com">// bad</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">if</span> <span class="pun">(!</span><span class="pln">arguments</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span><span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span><span class="kwd">if</span> <span class="pun">(!</span><span class="pln">arguments</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span><span class="pun">}</span>
条件表达式和等号
- 合理使用
===
和!==
以及==
和!=
。 - 合理使用表达式逻辑操作运算。
- 条件表达式的强制类型转换遵循以下规则:
- 对象 被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
- 字符串 如果是空字符串
''
则被计算为 false, 否则为 true
1234<span class="kwd">if</span> <span class="pun">([</span><span class="lit">0</span><span class="pun">])</span> <span class="pun">{</span><span class="com">// true</span><span class="com">// An array is an object, objects evaluate to true</span><span class="pun">}</span>
- 使用快捷方式。
12345678910111213141516171819<span class="com">// bad</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">name </span><span class="pun">!==</span> <span class="str">''</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">name</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span><span class="com">// bad</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">collection</span><span class="pun">.</span><span class="pln">length </span><span class="pun">></span> <span class="lit">0</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">collection</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span> - 阅读 Truth Equality and JavaScript 了解更多。
块
- 给所有多行的块使用大括号。
12345678910111213141516171819<span class="com">// bad</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">test</span><span class="pun">)</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">test</span><span class="pun">)</span> <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">if</span> <span class="pun">(</span><span class="pln">test</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span><span class="com">// bad</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span> <span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span>
注释
- 使用
/** ... */
进行多行注释,包括描述,指定类型以及参数值和返回值。
123456789101112131415161718192021222324252627<span class="com">// bad</span><span class="com">// make() returns a new element</span><span class="com">// based on the passed in tag name</span><span class="com">//</span><span class="com">// @param <String> tag</span><span class="com">// @return <Element> element</span><span class="kwd">function</span><span class="pln"> make</span><span class="pun">(</span><span class="pln">tag</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="kwd">return</span><span class="pln"> element</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="com">/*** make() returns a new element* based on the passed in tag name** @param <String> tag* @return <Element> element*/</span><span class="kwd">function</span><span class="pln"> make</span><span class="pun">(</span><span class="pln">tag</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="kwd">return</span><span class="pln"> element</span><span class="pun">;</span><span class="pun">}</span> - 使用
//
进行单行注释,在评论对象的上面进行单行注释,注释前放一个空行。
12345678910111213141516171819202122232425<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> active </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span> <span class="com">// is current tab</span><span class="com">// good</span><span class="com">// is current tab</span><span class="kwd">var</span><span class="pln"> active </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">function</span><span class="pln"> getType</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'fetching type...'</span><span class="pun">);</span><span class="com">// set the default type to 'no type'</span><span class="kwd">var</span><span class="pln"> type </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">_type </span><span class="pun">||</span> <span class="str">'no type'</span><span class="pun">;</span><span class="kwd">return</span><span class="pln"> type</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pln"> getType</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'fetching type...'</span><span class="pun">);</span><span class="com">// set the default type to 'no type'</span><span class="kwd">var</span><span class="pln"> type </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">_type </span><span class="pun">||</span> <span class="str">'no type'</span><span class="pun">;</span><span class="kwd">return</span><span class="pln"> type</span><span class="pun">;</span><span class="pun">}</span> - 如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上
FIXME
或TODO
帮助其他人迅速理解。
1234567<span class="kwd">function</span> <span class="typ">Calculator</span><span class="pun">()</span> <span class="pun">{</span><span class="com">// FIXME: shouldn't use a global here</span><span class="pln">total </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="kwd">return</span> <span class="kwd">this</span><span class="pun">;</span><span class="pun">}</span>
1234567<span class="kwd">function</span> <span class="typ">Calculator</span><span class="pun">()</span> <span class="pun">{</span><span class="com">// TODO: total should be configurable by an options param</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">total </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="kwd">return</span> <span class="kwd">this</span><span class="pun">;</span><span class="pun">}</span> - 满足规范的文档,在需要文档的时候,可以尝试jsdoc。
空白
- 缩进、格式化能帮助团队更快得定位修复代码BUG。
- 将tab设为4个空格。
1234567891011121314<span class="com">// bad</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pun">∙∙</span><span class="kwd">var</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">}</span><span class="com">// bad</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pun">∙</span><span class="kwd">var</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pun">∙∙∙∙</span><span class="kwd">var</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">}</span> - 大括号前放一个空格。
123456789101112131415161718192021<span class="com">// bad</span><span class="kwd">function</span><span class="pln"> test</span><span class="pun">(){</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'test'</span><span class="pun">);</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pln"> test</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'test'</span><span class="pun">);</span><span class="pun">}</span><span class="com">// bad</span><span class="pln">dog</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="str">'attr'</span><span class="pun">,{</span><span class="pln">age</span><span class="pun">:</span> <span class="str">'1 year'</span><span class="pun">,</span><span class="pln">breed</span><span class="pun">:</span> <span class="str">'Bernese Mountain Dog'</span><span class="pun">});</span><span class="com">// good</span><span class="pln">dog</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="str">'attr'</span><span class="pun">,</span> <span class="pun">{</span><span class="pln">age</span><span class="pun">:</span> <span class="str">'1 year'</span><span class="pun">,</span><span class="pln">breed</span><span class="pun">:</span> <span class="str">'Bernese Mountain Dog'</span><span class="pun">});</span> - 在做长方法链时使用缩进。
1234567891011121314151617181920212223242526<span class="com">// bad</span><span class="pln">$</span><span class="pun">(</span><span class="str">'#items'</span><span class="pun">).</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.selected'</span><span class="pun">).</span><span class="pln">highlight</span><span class="pun">().</span><span class="kwd">end</span><span class="pun">().</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.open'</span><span class="pun">).</span><span class="pln">updateCount</span><span class="pun">();</span><span class="com">// good</span><span class="pln">$</span><span class="pun">(</span><span class="str">'#items'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.selected'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">highlight</span><span class="pun">()</span><span class="pun">.</span><span class="kwd">end</span><span class="pun">()</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.open'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">updateCount</span><span class="pun">();</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> leds </span><span class="pun">=</span><span class="pln"> stage</span><span class="pun">.</span><span class="pln">selectAll</span><span class="pun">(</span><span class="str">'.led'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="pln">data</span><span class="pun">).</span><span class="pln">enter</span><span class="pun">().</span><span class="pln">append</span><span class="pun">(</span><span class="str">'svg:svg'</span><span class="pun">).</span><span class="kwd">class</span><span class="pun">(</span><span class="str">'led'</span><span class="pun">,</span> <span class="kwd">true</span><span class="pun">)</span><span class="pun">.</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'width'</span><span class="pun">,</span> <span class="pun">(</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> margin</span><span class="pun">)</span> <span class="pun">*</span> <span class="lit">2</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">'svg:g'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'transform'</span><span class="pun">,</span> <span class="str">'translate('</span> <span class="pun">+</span> <span class="pun">(</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> margin</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">','</span> <span class="pun">+</span> <span class="pun">(</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> margin</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">')'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="pln">tron</span><span class="pun">.</span><span class="pln">led</span><span class="pun">);</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> leds </span><span class="pun">=</span><span class="pln"> stage</span><span class="pun">.</span><span class="pln">selectAll</span><span class="pun">(</span><span class="str">'.led'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pun">.</span><span class="pln">enter</span><span class="pun">().</span><span class="pln">append</span><span class="pun">(</span><span class="str">'svg:svg'</span><span class="pun">)</span><span class="pun">.</span><span class="kwd">class</span><span class="pun">(</span><span class="str">'led'</span><span class="pun">,</span> <span class="kwd">true</span><span class="pun">)</span><span class="pun">.</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'width'</span><span class="pun">,</span> <span class="pun">(</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> margin</span><span class="pun">)</span> <span class="pun">*</span> <span class="lit">2</span><span class="pun">)</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="str">'svg:g'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'transform'</span><span class="pun">,</span> <span class="str">'translate('</span> <span class="pun">+</span> <span class="pun">(</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> margin</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">','</span> <span class="pun">+</span> <span class="pun">(</span><span class="pln">radius </span><span class="pun">+</span><span class="pln"> margin</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">')'</span><span class="pun">)</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="pln">tron</span><span class="pun">.</span><span class="pln">led</span><span class="pun">);</span>
逗号
- 不要将逗号放前面。
12345678910111213141516171819202122232425<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> once</span><span class="pun">,</span><span class="pln"> upon</span><span class="pun">,</span><span class="pln"> aTime</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> once</span><span class="pun">,</span><span class="pln">upon</span><span class="pun">,</span><span class="pln">aTime</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> hero </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">firstName</span><span class="pun">:</span> <span class="str">'Bob'</span><span class="pun">,</span><span class="pln"> lastName</span><span class="pun">:</span> <span class="str">'Parr'</span><span class="pun">,</span><span class="pln"> heroName</span><span class="pun">:</span> <span class="str">'Mr. Incredible'</span><span class="pun">,</span><span class="pln"> superPower</span><span class="pun">:</span> <span class="str">'strength'</span><span class="pun">};</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> hero </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">firstName</span><span class="pun">:</span> <span class="str">'Bob'</span><span class="pun">,</span><span class="pln">lastName</span><span class="pun">:</span> <span class="str">'Parr'</span><span class="pun">,</span><span class="pln">heroName</span><span class="pun">:</span> <span class="str">'Mr. Incredible'</span><span class="pun">,</span><span class="pln">superPower</span><span class="pun">:</span> <span class="str">'strength'</span><span class="pun">};</span> - 不要加多余的逗号,这可能会在IE下引起错误,同时如果多一个逗号某些ES3的实现会计算多数组的长度。
123456789101112131415161718192021<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> hero </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">firstName</span><span class="pun">:</span> <span class="str">'Kevin'</span><span class="pun">,</span><span class="pln">lastName</span><span class="pun">:</span> <span class="str">'Flynn'</span><span class="pun">,</span><span class="pun">};</span><span class="kwd">var</span><span class="pln"> heroes </span><span class="pun">=</span> <span class="pun">[</span><span class="str">'Batman'</span><span class="pun">,</span><span class="str">'Superman'</span><span class="pun">,</span><span class="pun">];</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> hero </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">firstName</span><span class="pun">:</span> <span class="str">'Kevin'</span><span class="pun">,</span><span class="pln">lastName</span><span class="pun">:</span> <span class="str">'Flynn'</span><span class="pun">};</span><span class="kwd">var</span><span class="pln"> heroes </span><span class="pun">=</span> <span class="pun">[</span><span class="str">'Batman'</span><span class="pun">,</span><span class="str">'Superman'</span><span class="pun">];</span>
分号
- 语句结束一定要加分号。
1234567891011121314151617<span class="com">// bad</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">'Skywalker'</span><span class="kwd">return</span><span class="pln"> name</span><span class="pun">})()</span><span class="com">// good</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">'Skywalker'</span><span class="pun">;</span><span class="kwd">return</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">})();</span><span class="com">// good</span><span class="pun">;(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">'Skywalker'</span><span class="pun">;</span><span class="kwd">return</span><span class="pln"> name</span><span class="pun">;</span><span class="pun">})();</span>
类型转换
- 在语句的开始执行类型转换。
- 字符串:
12345678910111213<span class="com">// => this.reviewScore = 9;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> totalScore </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">reviewScore </span><span class="pun">+</span> <span class="str">''</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> totalScore </span><span class="pun">=</span> <span class="str">''</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">reviewScore</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> totalScore </span><span class="pun">=</span> <span class="str">''</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">reviewScore </span><span class="pun">+</span> <span class="str">' total score'</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> totalScore </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">reviewScore </span><span class="pun">+</span> <span class="str">' total score'</span><span class="pun">;</span> - 对数字使用
parseInt
并且总是带上类型转换的基数,如parseInt(value, 10)
。 -
123456789101112131415161718192021222324252627<span class="kwd">var</span><span class="pln"> inputValue </span><span class="pun">=</span> <span class="str">'4'</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Number</span><span class="pun">(</span><span class="pln">inputValue</span><span class="pun">);</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span> <span class="pun">+</span><span class="pln">inputValue</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span><span class="pln"> inputValue </span><span class="pun">>></span> <span class="lit">0</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">inputValue</span><span class="pun">);</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span> <span class="typ">Number</span><span class="pun">(</span><span class="pln">inputValue</span><span class="pun">);</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">inputValue</span><span class="pun">,</span> <span class="lit">10</span><span class="pun">);</span><span class="com">// good</span><span class="com">/*** parseInt was the reason my code was slow.* Bitshifting the String to coerce it to a* Number made it a lot faster.*/</span><span class="kwd">var</span><span class="pln"> val </span><span class="pun">=</span><span class="pln"> inputValue </span><span class="pun">>></span> <span class="lit">0</span><span class="pun">;</span>
- 布尔值:
12345678910<span class="kwd">var</span><span class="pln"> age </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="com">// bad</span><span class="kwd">var</span><span class="pln"> hasAge </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Boolean</span><span class="pun">(</span><span class="pln">age</span><span class="pun">);</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> hasAge </span><span class="pun">=</span> <span class="typ">Boolean</span><span class="pun">(</span><span class="pln">age</span><span class="pun">);</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> hasAge </span><span class="pun">=</span> <span class="pun">!!</span><span class="pln">age</span><span class="pun">;</span>
命名约定
- 避免单个字符名,让你的变量名有描述意义。
123456789<span class="com">// bad</span><span class="kwd">function</span><span class="pln"> q</span><span class="pun">()</span> <span class="pun">{</span><span class="com">// ...stuff...</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pln"> query</span><span class="pun">()</span> <span class="pun">{</span><span class="com">// ..stuff..</span><span class="pun">}</span> - 当命名对象、函数和实例时使用驼峰命名规则。
123456789101112131415<span class="com">// bad</span><span class="kwd">var</span> <span class="typ">OBJEcttsssss</span> <span class="pun">=</span> <span class="pun">{};</span><span class="kwd">var</span><span class="pln"> this_is_my_object </span><span class="pun">=</span> <span class="pun">{};</span><span class="kwd">var</span> <span class="kwd">this</span><span class="pun">-</span><span class="kwd">is</span><span class="pun">-</span><span class="kwd">my</span><span class="pun">-</span><span class="kwd">object</span> <span class="pun">=</span> <span class="pun">{};</span><span class="kwd">function</span><span class="pln"> c</span><span class="pun">()</span> <span class="pun">{};</span><span class="kwd">var</span><span class="pln"> u </span><span class="pun">=</span> <span class="kwd">new</span><span class="pln"> user</span><span class="pun">({</span><span class="pln">name</span><span class="pun">:</span> <span class="str">'Bob Parr'</span><span class="pun">});</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> thisIsMyObject </span><span class="pun">=</span> <span class="pun">{};</span><span class="kwd">function</span><span class="pln"> thisIsMyFunction</span><span class="pun">()</span> <span class="pun">{};</span><span class="kwd">var</span><span class="pln"> user </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">User</span><span class="pun">({</span><span class="pln">name</span><span class="pun">:</span> <span class="str">'Bob Parr'</span><span class="pun">});</span> - 当命名构造函数或类时使用驼峰式大写。
1234567891011121314151617<span class="com">// bad</span><span class="kwd">function</span><span class="pln"> user</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">name </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">name</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">var</span><span class="pln"> bad </span><span class="pun">=</span> <span class="kwd">new</span><span class="pln"> user</span><span class="pun">({</span><span class="pln">name</span><span class="pun">:</span> <span class="str">'nope'</span><span class="pun">});</span><span class="com">// good</span><span class="kwd">function</span> <span class="typ">User</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">name </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">name</span><span class="pun">;</span><span class="pun">}</span><span class="kwd">var</span><span class="pln"> good </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">User</span><span class="pun">({</span><span class="pln">name</span><span class="pun">:</span> <span class="str">'yup'</span><span class="pun">});</span> - 命名私有属性时前面加个下划线
_
:
123456<span class="com">// bad</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">__firstName__ </span><span class="pun">=</span> <span class="str">'Panda'</span><span class="pun">;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">firstName_ </span><span class="pun">=</span> <span class="str">'Panda'</span><span class="pun">;</span><span class="com">// good</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_firstName </span><span class="pun">=</span> <span class="str">'Panda'</span><span class="pun">;</span> - 当保存对
this
的引用时使用self(python 风格)
,避免this issue
.Angular建议使用vm(MVVM模式中view-model)
:
1234567<span class="com">// good</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span> <span class="kwd">self</span> <span class="pun">=</span> <span class="kwd">this</span><span class="pun">;</span><span class="kwd">return</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">self</span><span class="pun">);</span><span class="pun">};</span><span class="pun">}</span>
存取器
- 属性的存取器函数不是必需的。
- 如果你确实有存取器函数的话使用getVal() 和 setVal('hello'),
java getter、setter风格
或者jQuery风格
。 - 如果属性是布尔值,使用isVal() 或 hasVal()。
123456789<span class="com">// bad</span><span class="kwd">if</span> <span class="pun">(!</span><span class="pln">dragon</span><span class="pun">.</span><span class="pln">age</span><span class="pun">())</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">if</span> <span class="pun">(!</span><span class="pln">dragon</span><span class="pun">.</span><span class="pln">hasAge</span><span class="pun">())</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span><span class="pun">}</span> - 可以创建get()和set()函数,但是要保持一致。
12345678910111213<span class="kwd">function</span> <span class="typ">Jedi</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">options </span><span class="pun">||</span> <span class="pun">(</span><span class="pln">options </span><span class="pun">=</span> <span class="pun">{});</span><span class="kwd">var</span><span class="pln"> lightsaber </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">lightsaber </span><span class="pun">||</span> <span class="str">'blue'</span><span class="pun">;</span><span class="kwd">this</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="str">'lightsaber'</span><span class="pun">,</span><span class="pln"> lightsaber</span><span class="pun">);</span><span class="pun">}</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="kwd">set</span> <span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> val</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">[</span><span class="pln">key</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> val</span><span class="pun">;</span><span class="pun">};</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="kwd">get</span> <span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">key</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">this</span><span class="pun">[</span><span class="pln">key</span><span class="pun">];</span><span class="pun">};</span>
构造器
- 给对象原型分配方法,而不是用一个新的对象覆盖原型,覆盖原型会使继承出现问题。
1234567891011121314151617181920212223<span class="kwd">function</span> <span class="typ">Jedi</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'new jedi'</span><span class="pun">);</span><span class="pun">}</span><span class="com">// bad</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">fight</span><span class="pun">:</span> <span class="kwd">function</span><span class="pln"> fight</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'fighting'</span><span class="pun">);</span><span class="pun">},</span><span class="pln">block</span><span class="pun">:</span> <span class="kwd">function</span><span class="pln"> block</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'blocking'</span><span class="pun">);</span><span class="pun">}</span><span class="pun">};</span><span class="com">// good</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">fight </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> fight</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'fighting'</span><span class="pun">);</span><span class="pun">};</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">block </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> block</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'blocking'</span><span class="pun">);</span><span class="pun">};</span> - 方法可以返回
this
帮助方法可链。
1234567891011121314151617181920212223242526272829<span class="com">// bad</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">jump </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">jumping </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span><span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span><span class="pun">};</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">setHeight </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">height</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">height </span><span class="pun">=</span><span class="pln"> height</span><span class="pun">;</span><span class="pun">};</span><span class="kwd">var</span><span class="pln"> luke </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Jedi</span><span class="pun">();</span><span class="pln">luke</span><span class="pun">.</span><span class="pln">jump</span><span class="pun">();</span> <span class="com">// => true</span><span class="pln">luke</span><span class="pun">.</span><span class="pln">setHeight</span><span class="pun">(</span><span class="lit">20</span><span class="pun">)</span> <span class="com">// => undefined</span><span class="com">// good</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">jump </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">jumping </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span><span class="kwd">return</span> <span class="kwd">this</span><span class="pun">;</span><span class="pun">};</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">setHeight </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">height</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">height </span><span class="pun">=</span><span class="pln"> height</span><span class="pun">;</span><span class="kwd">return</span> <span class="kwd">this</span><span class="pun">;</span><span class="pun">};</span><span class="kwd">var</span><span class="pln"> luke </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Jedi</span><span class="pun">();</span><span class="pln">luke</span><span class="pun">.</span><span class="pln">jump</span><span class="pun">()</span><span class="pun">.</span><span class="pln">setHeight</span><span class="pun">(</span><span class="lit">20</span><span class="pun">);</span> - 可以写一个自定义的toString()方法,但是确保它工作正常并且不会有副作用。
123456789101112<span class="kwd">function</span> <span class="typ">Jedi</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">options </span><span class="pun">||</span> <span class="pun">(</span><span class="pln">options </span><span class="pun">=</span> <span class="pun">{});</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">name </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">name </span><span class="pun">||</span> <span class="str">'no name'</span><span class="pun">;</span><span class="pun">}</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">getName </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> getName</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">return</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">name</span><span class="pun">;</span><span class="pun">};</span><span class="typ">Jedi</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">toString </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> toString</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">return</span> <span class="str">'Jedi - '</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">getName</span><span class="pun">();</span><span class="pun">};</span>
事件
- 当给事件附加数据时,传入一个哈希而不是原始值,这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器。
12345678<span class="com">// bad</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">trigger</span><span class="pun">(</span><span class="str">'listingUpdated'</span><span class="pun">,</span><span class="pln"> listing</span><span class="pun">.</span><span class="pln">id</span><span class="pun">);</span><span class="pun">...</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'listingUpdated'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> listingId</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// do something with listingId</span><span class="pun">});</span>
更好:
12345678<span class="com">// good</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">trigger</span><span class="pun">(</span><span class="str">'listingUpdated'</span><span class="pun">,</span> <span class="pun">{</span><span class="pln"> listingId </span><span class="pun">:</span><span class="pln"> listing</span><span class="pun">.</span><span class="pln">id </span><span class="pun">});</span><span class="pun">...</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'listingUpdated'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> data</span><span class="pun">)</span> <span class="pun">{</span><span class="com">// do something with data.listingId</span><span class="pun">});</span>
模块
- 这个文件应该以驼峰命名,并在同名文件夹下,同时导出的时候名字一致。
- 对于公开API库可以考虑加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它。
- 总是在模块顶部声明
'use strict';
,引入[JSHint规范](http://jshint.com/)
:
123456789101112131415161718<span class="com">// fancyInput/fancyInput.js</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">global</span><span class="pun">)</span> <span class="pun">{</span><span class="str">'use strict'</span><span class="pun">;</span><span class="kwd">var</span><span class="pln"> previousFancyInput </span><span class="pun">=</span> <span class="kwd">global</span><span class="pun">.</span><span class="typ">FancyInput</span><span class="pun">;</span><span class="kwd">function</span> <span class="typ">FancyInput</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span> <span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">options </span><span class="pun">=</span><span class="pln"> options </span><span class="pun">||</span> <span class="pun">{};</span><span class="pun">}</span><span class="typ">FancyInput</span><span class="pun">.</span><span class="pln">noConflict </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> noConflict</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">global</span><span class="pun">.</span><span class="typ">FancyInput</span> <span class="pun">=</span><span class="pln"> previousFancyInput</span><span class="pun">;</span><span class="kwd">return</span> <span class="typ">FancyInput</span><span class="pun">;</span><span class="pun">};</span><span class="kwd">global</span><span class="pun">.</span><span class="typ">FancyInput</span> <span class="pun">=</span> <span class="typ">FancyInput</span><span class="pun">;</span><span class="pun">})(</span><span class="kwd">this</span><span class="pun">);</span>
jQuery
- 对于jQuery对象以
$
开头,以和原生DOM节点区分。
12345<span class="com">// bad</span><span class="kwd">var</span><span class="pln"> menu </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".menu"</span><span class="pun">);</span><span class="com">// good</span><span class="kwd">var</span><span class="pln"> $menu </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".menu"</span><span class="pun">);</span> - 缓存jQuery查询
12345678910111213141516171819202122<span class="com">// bad</span><span class="kwd">function</span><span class="pln"> setSidebar</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.sidebar'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="com">// ...stuff...</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.sidebar'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="str">'background-color'</span><span class="pun">:</span> <span class="str">'pink'</span><span class="pun">});</span><span class="pun">}</span><span class="com">// good</span><span class="kwd">function</span><span class="pln"> setSidebar</span><span class="pun">()</span> <span class="pun">{</span><span class="kwd">var</span><span class="pln"> $sidebar </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.sidebar'</span><span class="pun">);</span><span class="pln">$sidebar</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">();</span><span class="com">// ...stuff...</span><span class="pln">$sidebar</span><span class="pun">.</span><span class="pln">css</span><span class="pun">({</span><span class="str">'background-color'</span><span class="pun">:</span> <span class="str">'pink'</span><span class="pun">});</span><span class="pun">}</span> - 对DOM查询使用级联的
$('.sidebar ul')
或$('.sidebar ul')
,jsPerf。 - 对有作用域的jQuery对象查询使用
find
:
1234567891011121314151617<span class="com">// bad</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.sidebar'</span><span class="pun">,</span> <span class="str">'ul'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="com">// bad</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.sidebar'</span><span class="pun">).</span><span class="pln">find</span><span class="pun">(</span><span class="str">'ul'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="com">// good</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.sidebar ul'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="com">// good</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.sidebar > ul'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="com">// good (slower)</span><span class="pln">$sidebar</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'ul'</span><span class="pun">);</span><span class="com">// good (faster)</span><span class="pln">$</span><span class="pun">(</span><span class="pln">$sidebar</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]).</span><span class="pln">find</span><span class="pun">(</span><span class="str">'ul'</span><span class="pun">);</span> - 每个页面只使用一次document的ready事件,这样便于调试与行为流跟踪。
123<span class="pln">$</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="com">//do your page init. </span><span class="pun">});</span> - 事件利用
jQuery.on
从页面分离到JavaScript文件。
1234567<span class="com">// bad</span><span class="pun"><</span><span class="pln">a id</span><span class="pun">=</span><span class="str">"myLink"</span><span class="pln"