可以参考的 JavaScript 代码风格：

• Google JavaScript Style Guide (opens new window)
• airbnb/javascript: JavaScript Style Guide (github.com) (opens new window)
• JavaScript Standard Style (standardjs.com) (opens new window)

一个常见的 JavaScript 编写风格：

{} 花括号的使用

在大多数的 JavaScript 项目中，代码段的开括号位于一行的末尾（即与关键字在同一行，而不是新起一行），并且相对于 括号 () 有一个空格：

if (condition) {
  // ... 
}

提示

对于单行的构造，不应该使用花括号：

if (condition) return;

并且注意拆分单行时，最好添加花括号以免在添加新行时出错：

if (condition) {
	return;
	// ...
}

所以一般多行的构造最好使用 花括号。单行能完成的很短的代码，直接写成一行不带花括号的形式即可。

一行代码的最大长度

一般一个项目中的 编辑器代码美化 规范中有定义一行代码的最大长度。通常是 80 或者 120 个字符。

代码缩进

水平方向的缩进：一般为 2 或者 4 个空格。可以直接使用 Tab 键，也可以使用 空格。（使用空格能够更加灵活）

垂直方向的缩进：用于将代码拆分成逻辑块的空行。 使用额外的空行有助于代码更具有可读性。写代码时，不应该出现连续超过 9 行都没有被垂直分割的代码。

🌰 例子 / 垂直分割初始化的变量、主循环结构和返回值：

function pow(x, n) {
  let result = 1;
  
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  
  return result;
}

分号的使用

对于普遍的 JavaScript 脚本的编写，每一个代码语句都结尾都应该加上分号 ; 。可以根据 不同的代码风格选择是否添加分号。

JavaScript Standard Style (standardjs.com) (opens new window) 无分号代码风格。

避免过度的嵌套

尽量避免代码过度嵌套过深：

🌰 例子：

for (let i = 0; i < 10; i++) {
  if (condition) {
    // ... 
  }
}

改写写成：

for (let i = 0; i < 10; i++) {
  if (!condition) continue;
  // ...
}

🌰 例子：

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;
}

一开始处理了不符合条件的情况，就不必额外的嵌套。

函数的位置

三种编写函数的方式：

• 在函数调用之前，声明函数。

  🌰 例子：

  // 函数声明
  function createElement() {
    ...
  }
   
  function setHandler(elem) {
    ...
  }
    
  // 调用函数
  let element = createElement()
  setHandler(elem);
  

• 先调用函数，在声明函数。

  🌰 例子：

  // 调用函数
  let element = createElement()
  setHandler(elem);
  
  
  // 函数声明
  function createElement() {
    ...
  }
    
  function setHandler(elem) {
    ...
  }
  

• 混合声明与调用。

  🌰 例子：

  // 函数声明
  function createElement() {
    ...
  }
    
  // 调用函数
  let element = createElement()
  
  function setHandler(elem) {
    ...
  }
  
  setHandler(elem);
  

注释

一个好的注释应该包括的内容：能够直接理解函数的目的 Why（不需要研究其内部的实现代码，就可以直接正确地使用它）。而不应该是解释性的注释 how /what（一般可以通过 自描述型的代码（良好的函数命名） 能理解代码） 。

• 描述整体架构，高层次的观点。
• 记录函数的 参数和用法。
• 重要的解决方法。

好的注释可以使我们更好地维护代码，一段时间之后依然可以更高效地回到代码高效开发。

🌰 例子：

/**
 * 返回 x 的 n 次幂的值。
 *
 * @param {number} x 要改变的值。
 * @param {number} n 幂数，必须是一个自然数。
 * @return {number} x 的 n 次幂的值。
 */
function pow(x, n) {
  ...
}