JavaScript书写规范
书写规范
我们的代码必须尽可能的清晰和易读,这样我们才能在隔了一段时间再回头看的时候,读懂自己的程序。
语法
下面列出了一些建议的规则(详情请参阅下文):
没有什么规则是“必须”的,这些是风格偏好,为的是能更好的编写代码。
花括号
在大多数的 JavaScript 项目中,花括号以 “Egyptian” 风格(译注:“egyptian” 风格又称 K&R 风格 — 代码段的开括号位于一行的末尾,而不是另起一行的风格)书写,左花括号与相应的关键词在同一行上 — 而不是新起一行。左括号前还应该有一个空格,如下所示:
if (condition) { // do this // ...and that // ...and that }
单行构造(如 if (condition) doSomething())也是一个重要的用例。我们是否应该使用花括号?如果是,那么在哪里?
下面是这几种情况的注释,你可以自己判断一下它们的可读性:
初学者常这样写。非常不好!这里不需要花括号:
if (n < 0) {alert(`Power ${n} is not supported`);}
拆分为单独的行,不带花括号。强烈建议不要这样做,添加新行很容易出错:
if (n < 0) alert(`Power ${n} is not supported`);
如果代码短的话写成一行,不带花括号,也是可以的:
if (n < 0) alert(`Power ${n} is not supported`);
下面才是最好的方式,也是我们推荐的书写方式:
if (n < 0) { alert(`Power ${n} is not supported`); }
对于很短的代码,写成一行是可以的:例如 if (cond) return null。但是如果包含代码块则推荐使用上面例子这样的书写方式。
缩进
有两种类型的缩进:
水平方向上的缩进:2 或 4 个空格。
一个水平缩进通常由 2 或 4 个空格或者 “Tab” 制表符(Tab 键)构成,但是使用空格更普遍一点。
例如,我们可以将参数与左括号对齐,像下面这样:
show(parameters, aligned, // 左边有 5 个空格 one, after, another ) { // ... }
垂直方向上的缩进:用于将代码拆分成逻辑块的空行。
即使是单个函数通常也被分割为数个逻辑块。在下面的示例中,初始化的变量、主循环结构和返回值都被垂直分割了:
function pow(x, n) { let result = 1; // <-- for (let i = 0; i < n; i++) { result *= x; } // <-- return result; }
插入一个额外的空行有助于使代码更具可读性。写代码时,不应该出现连续超过 9 行都没有被垂直分割的代码。
分号
每一个语句后面都应该有一个分号,就算它不写也能正常运行,也要习惯性加上分号。
嵌套的层级
尽量避免代码嵌套层级过深。
例如,在循环中,有时候使用 continue 指令以避免额外的嵌套是一个好主意。
例如,不应该像下面这样添加嵌套的 if 条件:
for (let i = 0; i < 10; i++) { if (cond) { ... // <- 又一层嵌套 } }
我可以使用 continue 指令以避免额外的嵌套:
for (let i = 0; i < 10; i++) { if (!cond) continue;//遇到非cond的情况直接跳过,执行下一次循环 ... // <- 没有额外的嵌套 }
使用 if/else 和 return 也可以做类似的事情。
例如,下面的两个结构是相同的。
第一个:
function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); } else { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result; } }
第二个:
function pow(x, n) { if (n < 0) { alert("Negative 'n' not supported"); return; } let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result; }
第二个更具可读性,因为 n < 0 这个“特殊情况”在一开始就被处理了。一旦条件通过检查,代码执行就可以进入到“主”代码流,而不需要额外的嵌套。
函数位置
如果你正在写几个“辅助”函数和一些使用它们的代码,那么有三种方式来组织这些函数。
1、在调用这些函数的代码的 上方 声明这些函数:
// 函数声明 function createElement() { ... } function setHandler(elem) { ... } function walkAround() { ... } // 调用函数的代码 let elem = createElement(); setHandler(elem); walkAround();
2、先写调用代码,再写函数
// 调用函数的代码 let elem = createElement(); setHandler(elem); walkAround(); // --- 辅助函数 --- function createElement() { ... } function setHandler(elem) { ... } function walkAround() { ... }
3、混合:在第一次使用一个函数时,对该函数进行声明。
大多数情况下,第二种方式更好。第三种情况使用混合的方法,会造成到处是函数,你都不知道函数在哪里的尴尬。