JavaScript 代码风格指南

这份指南列出了编写 JavaScript 时需要遵守的规范, 指明哪些应该提倡, 哪些应该避免.
本文基于 google 的规范翻译整理(JavaScript 是许多 Google 开源项目使用的主要客户端脚本语言).

(5)

JavaScript 代码风格规范(4)

编译

应该如此.

所有面向消费者的代码项目都应该使用像 the Closure Compiler 这样的 JS 编译器.

提示与技巧

JavaScript 小花絮

真或假 布尔表达式

下列表达式皆为假:

  • null
  • undefined
  • ‘’ 空字符串
  • 0 数字0

但切记小心, 因为下面这些都为’真’:

  • ‘0’ ‘0’的字符串
  • [] 空数组
  • {} 空对象

这意味着与其这样写:

1
while (x != null) {

不如写得更短一些 (只要你能确定 x 不会是 0, 空串或者其他假值就行):

1
while (x) {

如果想要判断字符串是否为空串或者为 null 类型, 你可以这样写:

1
if (y != null && y != '') {

但直接写成这样其实更短更好:

1
if (y) {

警告: 还有很多不那么直观的布尔表达式, 比如下面这些:

  • Boolean('0') == true
    '0' != true
  • 0 != null
    0 == []
    0 == false
  • Boolean(null) == false
    null != true
    null != false
  • Boolean(undefined) == false
    undefined != true
    undefined != false

  • Boolean([]) == true
    [] != true
    [] == false

  • Boolean({}) == true
    {} != true
    {} != false

条件操作符/三元操作符 (?:)

与其这样写:

1
2
3
4
5
if (val) {
  return foo();
} else {
  return bar();
}

不如像这样:

1
return val ? foo() : bar();

在生成 HTML 时三元操作符也非常有用:

1
2
3
4
var html = '<input type="checkbox"' +
    (isChecked ? ' checked' : '') +
    (isEnabled ? '' : ' disabled') +
    ' name="foo">';

#####　&& and ||

这些二元布尔操作符都可以进行短路求值，　以此来决定是否需要计算最后一项．

|| 有时也被认为默认操作符，　因为与其写成这样:

1
2
3
4
5
6
7
8
9
10
/** @param {*=} opt_win */
function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  }
  // ...
}

其实还可以写成这样:

1
2
3
4
5
/** @param {*=} opt_win */
function foo(opt_win) {
  var win = opt_win || window;
  // ...
}

&& 也能够用于缩短代码. 举例来说, 与其这样写:

1
2
3
4
5
6
7
if (node) {
  if (node.kids) {
    if (node.kids[index]) {
      foo(node.kids[index]);
    }
  }
}

不如像这样写:

1
2
3
4
5
6
7
8
9
if (node && node.kids && node.kids[index]) {
  foo(node.kids[index]);
}
or this:

var kid = node && node.kids && node.kids[index];
if (kid) {
  foo(kid);
}

不过如何像这样, 就有点玩过头了:

1
node && node.kids && node.kids[index] && foo(node.kids[index]);
迭代节点列表

通常我们使用过滤器将节点列表作为节点迭代器引入. 这意味着得到节点的属性所需的时间复杂度为 O(n), 而通过 length 遍历整个列表则需要 O(n^2).

1
2
3
4
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

更好的写法是这样的:

1
2
3
4
var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
  doSomething(paragraph);
}

这种写法适合于各种集合和数组, 只要数组元素中不包含为假值的布尔量.

你也可以使用 firstChild 和 nextSibling 来遍历子节点.

1
2
3
4
var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}

结语

保持风格统一.

如果你正在编辑代码, 花几分钟检测下手头的代码来确定它属于何种风格. 如果他们都在运算符周围使用空格, 那你也应该照办. 如果他们的注释都放在用虚线围成的小盒子里, 那你的注释也同样应该用虚线小盒子围起来.

使用代码风格规范的重点在于, 建立一个共通的代码语汇, 这样人们就能将重点更多放在你要表述的内容而非你怎样去表述内容. 我们提出一份基本的规范让人们了解这些语汇, 但具体项目中使用的局部规范也很重要. 如果你编写的代码看上去与项目中已经存在的其他代码大相径庭, 那么就会扰乱阅读者的节奏. 理应避免这样.

  • 修订版本 2.93

作者列表:

  • Aaron Whyte
  • Bob Jervis
  • Dan Pupius
  • Erik Arvidsson
  • Fritz Schneider
  • Robby Walke

汉化列表:

  • crafteverywhere