JavaScript 代码规范

本文翻译了 Mr.doob 提出的 JavaScript 代码规范，他是 Threejs 的作者，在他的开源项目中都是按照这个规范来要求的。按照这个规范书写代码时，要做到能使用空格的就要使用，用空行来分隔代码块的不同部分，整体感觉代码比较松散，缩放之后还能看得清楚。

1、基本要求

  • 代码使用 UTF-8 字符集；
  • 代码换行使用换行符 \n ；
  • 缩进必须用 Tab ；
  • 每一行代码的末尾不能有空格，可以在编辑器设置代码保存时去空格。

备注：
换行符 \n ，LF：Linefeed ；回车符 \r ， CR：Carriage Return ；回车并换行 \r\n CRLF：Carriage Return & Linefeed 。
换行符的本意是换到新的一行，但是水平位置是不变的；回车符正好相反，本意是回到行首，但是垂直位置不变；只有回车并换行才是我们想要的，但是现在对这三种字符都当作回车并换行的意思。

2、命名规则

命名要尽可能有语义，只有循环中的变量可以使用单个字母，从 i 开始的字母。

  • 变量名用小驼峰，如： variableNamesLikeThis ；
  • 函数名用小驼峰；
  • 类名用大驼峰，如： ClassNamesLikeThis ；
  • 方法名用小驼峰；
  • 常量名用大驼峰（在其它规则中可能要求用大写字母）；
  • 对象的私有属性和方法的名称开头加 _ ；

3、字面量要求

对象字面量

创建对象字面量使用 {} ，不用使用 new Object() ，创建空对象时不要留空格。
当创建有属性和值的对象字面量时：

  • 在左边花括号后留一个空格；
  • 在右边花括号后留一个空格；
  • 属性名最好不加引号；
  • 冒号前面不要留空格，后面留一个空格；
  • 逗号前面不要留空格，后面留一个空格，必须跟在属性值后面；
  • 最后一个属性值不要加逗号；

正确示范：

var obj = { A: 1, b: 2, C: 3 };

var obj = {
    A: 1, 
    b: 2, 
    C: 3 
};

错误示范：

var obj = {A:1,b:2,C:3};

var obj = {A:1, b:2, C:3};

var obj = {A : 1, b : 2, C : 3};

var obj = { "A" : 1, "b" : 2, "C" : 3 };

var obj = { A : 1, b : 2, C : 3 };

var obj = { A :1, b :2, C :3 };

var obj = { A : 1 , b : 2 , C : 3 };

var obj = {
    A : 1, 
    b : 2, 
    C : 3, 
};

var obj = {
    A : 1 
  , b : 2
  , C : 3 
};

数组

创建数组使用 [] ，不要使用 new Array() ，空的数组不要留空格。
创建有元素的数组时：

  • 左边中括号后面留一个空格；
  • 右边中括号前面留一个空格；
  • 逗号前面不留空格，后面留一个空格，必须跟在元素后面；
  • 最后的元素后面不加逗号；

正确示范：

var arr = [ 1, 2, 3 ];

var arr = [
    1, 
    2, 
    3 
];

错误示范：

var arr = [1,2,3];

var arr = [1, 2, 3];

var arr = [ 1 , 2 , 3 ];

var arr = [
    1, 
    2, 
    3,
];

var arr = [
    1
  , 2
  , 3 
];

分号

始终记得加个分号。

4、代码块要求

  • 开头花括号后面留一个空行；
  • 结尾花括号前面留一个空行；
  • 开头花括号前面留一个空格，不要另起一行。

正确示范：

if ( a === 0 ) {

   // 这是正确的示范
   return true;

}
if ( a === 0 ) {
    // 这是错误示范：在 '{' 后面少了一个空行 
    return true;

}

if ( a === 0 ) {

    // 这是错误示范：在 '}' 前面少了一个空行 
    return true;
}

if ( a === 0 ) { // 这是错误示范：注释跟在 '{' 后面

    return true;

}

if ( a === 0 ){

   // 这是错误示范：在 '{' 前面没有留一个空格
   return true;

}

5、条件表达式

If 表达式

  • if 后面留一个空格，左边圆括号留一个空格；
  • 条件判断语句后面留一个空格，右边圆括号后面留一个空格；
  • 必须包含代码块；
  • else 要跟前面代码块的花括号在同一行，前后都留一个空格；
  • 条件判断语句中不能有赋值语句。

正确示范：

if ( test ) { 

    // ... 

} else { 

    // ... 

}

错误示范：

if (test) { 

    // ... 

}

if( test ) { 

    // ... 

}

if (test ) { 

    // ... 

}

if ( test) { 

    // ... 

}

if ( test ){ 

    // ... 

}

if ( test ) { 

    // ... 

}else { 

    // ... 

}

if ( test ) { 

    // ... 

} else{ 

    // ... 

}

Switch 语句

  • switch 后面留一个空格，左边圆括号后面留一个空格；
  • 条件判断语句后面留一个空格，右边圆括号后面留一个空格；
  • 每一个 case 应该有 break 语句，除了 default 或者有返回值；
  • 每一个 case 后面留一个空格，判断的常量后面或冒号前面留一个空格；
  • 每一个 case 的代码块前面和后面留一个空行；
  • 在条件判断语句中不应该有赋值语句。
switch ( value ) { 

    case 1 : 

        // ... 
        break ;

    case 2 : 

        // ... 
        break ;

    default : 

        // ... 
        // 不使用 break 

}

6、循环语句

For 循环

  • 要注意 Foreach 和 For In 语句比 For 语句慢得多；
  • 在 for 后面留个空格，左边的括号后留个空格；
  • 赋值部分前面留个空格，后面跟分号和空格；
  • 条件判断部分前面留个空格，后面跟分号和空格；
  • 更新变量部分前面留个空格，后面留个空格，右边圆括号后留个空格。

7、操作符要求

With 操作符

不要使用

等号操作符

使用严格的等号操作符 === 和 !==

三元操作符

在问号和冒号之间都要留空格

一元操作符

一元操作符要跟着操作数，留个空格，如下所示：

var foo = ! bar;

eval 函数

尽量不使用，解析对象时使用 JSON.parse

undefined 检测

检测 undefined 时，使用严格的等号操作符，如下：

x === undefined;

错误的示范：

// 在现代浏览器中，已经定义了不可变的量 undefined
var undefined; 
x === undefined;

typeof x === 'undefined'

x === void 0