Javascript代码规范

这是一篇翻译的文章,原文链接(http://javascript.crockford.com/code.html)

Javascript代码规范

这部分讲有关javascript的代码规范及规则。

软件的长期价值和它的代码质量是成正比的。在软件的声明周期中,代码可能会被很多人阅读和修改。如果程序具有良好的结构及特性,那么在修改过程会不那么容易崩溃,良好的代码规范可以增加程序的健壮性。

所有的javascript代码都直接呈现在公众的面前,我们需要注重它的质量和整洁性。

Javadcript文件

Javascript文件以.js命名

Javascrip代码不应该嵌入html代码中,除非是用于一次特定的会话,javascript代码加入到html中会增加文件的大小消耗资源,并且不能通过缓存和压缩的方式来减少消耗。

空行空格

在可能的情况下,这些规则与几个世纪的文学风格的良好实践是一致的。如果有强有力的证据表明有显着的好处,那么可以应该容忍与文学风格的偏差。

空行将代码断开为具有逻辑联系的代码段,来增加可读性。

空行的使用场景如下:

1)在关键字跟着左括号的情况下,关键字与左括号之间应该存在空格,这样可以很好的区分调用和那些非调用的情况,例如在if和while之后应在有空格

While  (

2)调用函数时,函数名字和左括号之间不应该有空格。这样可以很好的区分开关键字和函数调用的情况

3)在一元运算符和操作数之间不应该存在空格,除非一元操作符是一个单词,例如typeof

4)每个二元运算符及其操作数应该通过一侧的空格隔开,除了句点(.)、左中括号([)、左括号((

5)每个逗号之后应该是一个空格或者是一个空行

6)在程序语句中,分号后面应该跟着空行

7)在流程控制语句中,分号应该跟着一个空格

每个语句开始前应该缩进对齐,最外层代码应该和左边缘对其,每次缩进增长4个单位,如果上一行的最后一个字符是(、[、{等符号,那么它的闭合符号应该在新的一行的第一个字符位置。

由于三目运算表达式非常容易导致混淆,所以应该将问号(?)作为一行的开头,且缩进四个单位,对于冒号(:)应该重新开始一行,和上一行问号对齐。三目运算表达式的条件应该包含在括号中。

var integer = function (

value,

default_value

) {

value = resolve(value);

return (typeof value === "number")

? Math.floor(value)

: (typeof value === "string")

? value.charCodeAt(0)

: default_value;

};

如果句点(.)在一行的第一个位置,应该增加4个缩进。

避免一行语句太长,如果一条语句在一行之内看起来不是那么合适,应该把它断开为多行。在左大括号({)左中括号([)左括号(()之后的语句,或是在逗号(,)、句号(.)、问号(?)、冒号(:)之前的语句最好是断开。如果以上面方式断开时不可行的,那就在操作符之后断开,在下一行开始相对上一行开始增加8个缩进,那八个缩进不能影响正在递增进行的全局缩进。

这些子句(case, catch, default, else, finally)不是顺序语句,不应该像顺序语句那样缩进。

制表符和空格符不应该被混淆。我们应该选择其中一个符号来做分割使用,来避免两者混淆问题。个人偏好一个标准。无论是制表符还是空格都没有提供极大的优势,五年前制表符的优势在于消耗更少的内存空间,但是摩尔定律消除了这一优势,空格相对于制表符的优势在于更清晰,所以经常使用空格,你可以在编辑的时候使用制表符,但是在提交的时候需要确保它被替换成空格。可能会在某一天,我们会得到一个通用的标准,使更好的选择是空格。

注释

注释是很常用的,它让以后读代码的人更好的理解你的代码。应该认真的写注释,而且写得很清晰,应该像那些非常好的注释一样。偶尔可以有一些幽默感,但是不应该包含沮丧和抱怨。保持注释随代码修改而更新是很重要的。错误的注释会使程序更加难理解。

注释应该是有意义的,不应该为那些显而易见的代码加上注释,例如

i = 0; // Set i to zero.

不应该以此浪费读者的时间。

变量声明

所有变量在使用之前都应该被定义,虽然javascript并没有强制要求,但是在使用之前声明变量可以使变量更加的清楚,且更容易发现未被声明的隐藏变量。不应该使用隐含的全局变量,应该尽可能的减少全局变量的使用。

最好对每个变量进行声明和注释,并且尽可能按照字典的顺序排列。

var currentEntry; // currently selected table entry

var level;        // indentation level

var size;         // size of table

javascript变量没有块范围,所以在块中定义变量时可能会使那些对C相类似语言非常有经验的人产生混淆。

函数声明

所有都需要函数在使用之前被定义,内部函数应该遵循var语句形式。这样可以很清楚的看出函数内部包含哪些变量。函数名字和函数参数列表的左括号之间没有空格,函数参数列表的右括号和函数语句之前的大括号之间应该存在一个空格,函数内部语句应该缩进四个空格,函数的最后一个大括号应该和函数最开始声明处对齐。

function outer(c, d) {

var e = c * d;

function inner(a, b) {

return (e * a) + b;

}

return inner(0, 1);

}

这对于javascript来说是一个很好的约定,在javascript中函数和对象自变量可以出现在任何的地方,上述约定可以使复杂的javascript代码结构有很好的阅读性。

function getElementsByClassName(className) {

var results = [];

walkTheDOM(document.body, function (node) {

var array;                // array of class names

var ncn = node.className; // the node's classname

// If the node has a class name, then split it into a list of simple names.

// If any of them match the requested name, then append the node to the list of results.

if (ncn && ncn.split(" ").indexOf(className) >= 0) {

results.push(node);

}

});

return results;

}

If a function literal is anonymous, there should be one space between the word function and the ( left parenthesis. If the space is omitted, then it can appear that the function's name is function, which is an incorrect reading.

div.onclick = function (e) {

return false;

};

that = {

method: function () {

return this.datum;

},

datum: 0

};

如果是匿名函数,在function和其后的左括号之间应该存在一个空格,如果空格被省略,那么函数的名字可能会被错认为是function,这是一个不正确的读法。

div.onclick = function (e) {

return false;

};

that = {

method: function () {

return this.datum;

},

datum: 0

};

应该尽量减少全局函数的使用,当一个函数要被立即调用时,整个调用表达式应该被包装在括号中,这样就可以清楚地看到产生的值是函数的结果,而不是函数本身。

var collection = (function () {

var keys = [];

var values = [];

return {

get: function (key) {

var at = keys.indexOf(key);

if (at >= 0) {

return values[at];

}

},

set: function (key, value) {

var at = keys.indexOf(key);

if (at < 0) {

at = keys.length;

}

keys[at] = key;

values[at] = value;

},

remove: function (key) {

var at = keys.indexOf(key);

if (at >= 0) {

keys.splice(at, 1);

values.splice(at, 1);

}

}

};

}());

Names

名字应该只由26个大写或者小写字母(A .. Z, a .. z),十个数字(0 .. 9)、以及下划线组成。尽量避免使用两个国家以上的字符,那样可能造成阅读和理解上的麻烦。在名字中不应该使用反斜杠和美元符号。在名字中,不要使用下划线作为第一个字符或者最后一个字符,下划线作为第一个和最后一个字符常用来表示私有的,但是在程序语言中并没有实际的语义。如果私有性是很重要的,应该尽量使用关闭,而不是使用缺少约束力的约定。大多数属性和函数值应该使用小写字母开始。必须和new一起使用的构造函数名字应该以大写字母开始。Javascript的new省略并不会在编译时和运行时产生警告和错误。但是会产生不好的事情,所以我们唯一能做的是用大写的形式约定。浏览器中的所有全局变量应该被大写。

语句

简单语句

每行最多包含一条语句,并以分号结束,函数或者对象字面量赋值语句也必须以分号结束。

JavaScript允许任何表达式成为语句。这很容易造成误解,特别是存在分号作为嵌入成分时。任何表达式应该被用作语句,例如赋值,调用,delete.

复合语句

1)混合语句是指被包含在花括号中的语句。嵌套的语句应该缩进更多的单位

2)左花括号应在复合语句开始行的末尾

3)右花括号应该重新开始一行,并与含有相对应的左花括号的行的开始对齐

4)在控制语句中,大括号应该用于所有语句,甚至是单个语句,这样可以很方便的增加新的语句,且不易引入错误。

标签

除了while、do、for、switch,其它语句是不允许被标记的。

返回

返回值必须和return关键字必须在同一行。

If语句

if语句应该是如下格式

if (condition) {

statements

}

if (condition) {

statements

} else {

statements

}

if (condition) {

statements

} else if (condition) {

statements

} else {

statements

}

For语句

for语句存在如下格式:

for (initialization; condition; update) {

statements

}

While语句

while (condition) {

statements

}

Do语句

do {

statements

} while (condition);

Switch语句

switch (expression) {

case expression:

statements

default:

statements

}

Try语句

try {

statements

} catch (variable) {

statements

}

try {

statements

} catch (variable) {

statements

} finally {

statements

}

Continue语句

尽量避免使用continue语句,它会导致控制语句的结构混乱

With语句

with语句应该避免使用

{} 和 []

使用{}代替new Object(),[]代替new Array()

当成员名是连续的整数时,使用数组,当成员名是字符串或者其他类型时使用对象

逗号

反对使用逗号

赋值表达式

在if和while条件部分反对赋值表达式

if (a = b) {

同时也应该避免

if (a == b) {

=== and !== Operators

应该尽量使用===和!==,避免使用==和!=

易混淆的加减号

不要在a+后面跟着+好,避免和++混淆,此处可以使用括号使表达式更清晰

total = subtotal + +myInput.value;可以更好的写成

total = subtotal + (+myInput.value);

eval是邪恶的

Eval是javascript最被滥用的特性,避免使用它。

eval有别的名字。 不要使用Function构造函数。 不要将字符串传递给setTimeout或setInterval。

f

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容