豆瓣Javascript代码风格规范

kongxiantao

浏览: 112140 次
性别:
来自: 北京

最近访客更多访客>>

kongshanxuelin

freerambo

woodding2008

louhq306331808

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

规范

JavaScript jQuery Google CSS prototype

原文地址被墙

豆瓣 Javascript 代码风格规范

Douban Javascript Core Style Guideline

1. 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
}
});