豆瓣Javascript代碼風格規範

Douban Javascript Core Style Guideline1. Javascript代碼應符合Douban-JSLint檢驗標準

 

1-1. 語句必須都有分號結尾，除了for, function, if, switch, try, while

 

1-2. 只有長語句可以考慮斷行，如：

 

                                 TEMPL_SONGLIST.replace('{TABLE}', da['results'])
                                               .replace('{PREV_NUM}', prev)
                                               .replace('{NEXT_NUM}', next)
                                               .replace('{CURRENT_NUM}', current)
                                               .replace('{TOTAL_NUM}', da.page_total);

 

為了避免和JSLint的檢驗機制衝突，“.”或“＋”這類操作符放在行尾，上面代碼應改為：

 

                                 TEMPL_SONGLIST.replace('{TABLE}', da['results']).
                                               replace('{PREV_NUM}', prev).
                                               replace('{NEXT_NUM}', next).
                                               replace('{CURRENT_NUM}', current).
                                               replace('{TOTAL_NUM}', da.page_total);

1-3. 避免額外的逗號。如：var arr = [1,2,3,];

 

1-4. 所有的迴圈體和判斷體都需要用"{}"括起來。如：

 

錯：

                                 if (condition)
                                     statement;
                                 或
                                  if (condition) statement;
                                 

對:

                                 if (condition) {
                                     statement;
                                 }
                                 或
                                 if (condition) { statement; }

1-5. for-in迴圈體中必須用hasOwnProperty方法檢查成員是否為自身成員。避免來自原型鏈上的汙染。

 

1-6. 變數聲明。變數聲明應放在function的最上面。避免使用未聲明的變數。

錯：

                                 if (n > 0) {
                                   var isvalid = true;
                                 }
                                 

對：

                                 var isvalid;
                                 if (n > 0) {
                                   isvalid = true;
                                 }

1-7. 不要使用with, void, evil。

 

1-8. 使用嚴格的條件判斷符。用===代替==，用!==代替!=。

 

1-9. 下面類型的對象不建議用new構造：new Number, new String, new Boolean, new Object(用{}代替), new Array(用[]代替)。

 

1-10. 引用對象成員用obj.prop1代替obj[“prop1”]，除非屬性名稱是變數。

 

註：Douban-JSLint是定製過的JSLint

註：如果模組代碼中，使用其它全域變數想跳過JSLint的檢查，可以在該檔案中加入/*global*/聲明，如： /*global alert: true, console: true, top: true, setTimeout: true */

2. Javascript命名規則

 

2-1. 構造器的首字母大寫。如：

 

                         function Dialog (config) {
                           statement;
                         }

                         var dlg = new Dialog({...});

 

2-2. 對象的屬性或方法名採用小駝峰式(lower camel-case)，如"init", "bindEvent", "updatePosition"：

                         Dialog.prototype = {
                           init: function () {},
                           bindEvent: function () {},
                           updatePosition: function () {}
                         ...
                         };

 

2-3. 私人變數名用底線開頭。如："_current", "_defaultConfig"

 

2-4. 常量名全部大寫，單詞間用底線分隔。如：“CSS_BTN_CLOSE”, "TXT_LOADING"

 

2-5. 變數名的首碼：

Prefix	Element	Example
n	integer	nVariableName
i,j,k,m,n, etc. *	integer as counter/iterator	(for i=0; i<=oArray.length; i++)
s	string	sVariableName
o	object	oObjectName
is, can, has	boolean	[Boolean name]ConditionName
event method	event attachment	[event type]_MethodName
get	accessor method	getMethodName
set	accessor method	setMethodName

Note: Only a counter/iterator should use a single-letter designation.

3. 代碼格式化要求

 

3-1. 語句中的必要空格和縮排

 

3-1-1. 用來包含語句的"()"前後需要跟空格，諸如： if / for / while / switch ( statements ) { … } 等

 

3-1-2. "="前後需要跟空格

 

3-1-3. 數群組成員間的","後面需要跟空格

 

不好：

 

             for (t in selected) { if (!hash[t]) deselect(t) }

 

好：

 

             for ( t in selected ) {
               if ( !hash[t] ) {
                deselect(t);
               }
             }

 

3-2. 長語句採用斷行:

 

不好：

 

 
           TEMPL_SONGLIST.replace('{TABLE}',
da['results']).replace('{PREV_NUM}', prev).replace('{NEXT_NUM}',
next).replace('{CURRENT_NUM}', current).replace('{TOTAL_NUM}',
da.page_total);

 

好：

 

             TEMPL_SONGLIST.replace('{TABLE}', da['results']).
                           replace('{PREV_NUM}', prev).
                           replace('{NEXT_NUM}', next).
                           replace('{CURRENT_NUM}', current).
                           replace('{TOTAL_NUM}', da.page_total);

 

3-3. 格式化對象參數：

 

不好：

 

 
            embedSWF(id, { url: '/swf/player30792.swf?url=' + el.href,
width: 261, height: 30, params: { wmode:'transparent' }, attributes: {
id: "player-sample" + i, name: "player-sample" + i }});

 

好：

 

              embedSWF(id, {
                 url: '/swf/player30792.swf?url=' + el.href,
                 width: 261,
                 height: 30,
                 params: { wmode:'transparent' },
                 attributes: {
                   id: "player-sample" + i,
                   name: "player-sample" + i
                 }
               });

             

相關工具

 Douban-JSLint

 Closure Linter

相關推薦

 Douglas Crockford: Code Conventions for the JavaScript Programming Language

 Google JavaScript Style Guide

 JQuery Core Style Guidelines

 

 

 

更新記錄：

2011/2/25 - 添加Douban-JSLint

2010/11/17 - 發布

轉自：<a href="https://docs.google.com/document/pub?id=17ICSeE4Qd04-1U-pphmKCAmfgJGEVjqDellbu4oAiqU">https://docs.google.com/document/pub?id=17ICSeE4Qd04-1U-pphmKCAmfgJGEVjqDellbu4oAiqU</a>