Javascript编码规范

发表于 | 更新于 | 阅读次数：

1 变量

  1. 如非必要，请不要使用全局变量；局部变量应该尽可能缩小其作用域。

  2. 声明全局变量必须使用window.前缀；声明局部变量必须使用var关键字。比如

1
2
3
4
5
6
(function() {
    // 局部变量
    var config = {};
    // 全局变量
    window.global = {};
})();
  1. 同时声明多个变量时，每个变量独立申明。
1
2
3
4
// 好的做法
var var1 = 1;
var var2 = 'string';
var var3 = 3;

以前我们经常看到以下写法，以下做法会导致在末尾新增变量声明或者删除第一个变量声明时不方便。

1
2
3
4
// 不好的做法
var var1 = 1,
    var2 = 'string',
    var3 = 3;
  1. 鼓励延迟初始化
1
2
3
4
5
6
```

1. 命名规范：命名应能够表达该变量的含义，首字母小写的驼峰格式。比如：

```js
var isInited = false;

例外：在循环体内可以使用 i, j, k 等无意义但是被广泛使用的变量。

2 常量

  1. 命名规范：命名应能够表达该变量的含义，首字母小写的驼峰格式。比如Math的常量PI,SQRT1_2等等。
1
var SECONDS_IN_A_DAY = 60 * 60 * 24;

3 语句

3.1 行

  1. 语句必须以分号结束。
  2. 每一行要控制在 120 字符以内。

3.2 空格

  1. 数值操作符(如, +/-/*/% 等)两边留空;
  2. 赋值操作符/等价判断符两边留一空格;
  3. for 循环条件中, 分号后留一空格;
  4. 变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格;
  5. 行尾不要有空格;
  6. 逗号和冒号后一定要跟空格;
  7. 点号前后不要出现空格;
  8. 函数名末尾和左括号之间不要出现空格;

3.3 空行

  1. 函数与函数声明之间，加一空行
  2. 逻辑上独立的代码片段之间，加一空行。

3.4 缩进

  1. 缩进使用 2 个空格

3.5 小括号

  1. if/else if/while/for条件表达式必须有小括号;
  2. 一元操作符(如 delete, typeof, void)或在某些关键词(如return, throw, case, new) 之后, 不要使用括号;

3.6 大括号

  1. if/else if/else/while/for代码块中必须要有{}。
    例外：函数体顶部出现的某中条件下函数直接返回的情况：if(typeof arg !== 'string') return false;，这时可以省略大括号并且将条件表达式和代码块写在同一行中。

3.7 内置对象

  1. 禁止增加，删除或修改内置对象的方法，除非是 polyfill（在旧浏览器上实现最新的规范）。

3.8 with

  1. 禁止使用with，除非用于接续序列化字符串。

3.9 使用 Array/Object 直接量

  1. 尽量使用使用 Array/Object 直接量，避免使用 Array/Object 构造器

3.10 字符串

  1. 字符串应使用单引号。
  2. 多行字符串应该使用+或者Array.prototype.join拼接字符串，避免使用\拼接。

4 注释

4.1 注释格式

  1. 行级注释// comment主要用与代码行或代码片段
  2. 块状注释/* comment */主要用于函数。
1
2
3
4
5
6
7
/*
 * @desc 记忆函数，对于耗时的运算，运算一次以后就讲结果保存起来，下次就直接返回结果。
 * @param {function} func 运算非常耗时的函数。
 * @param {object} thisObject func的主体对象
 * @param {function} serialize 参数序列化函数，将参数序列化为一个字符串。
 */
function memorize(func, thisObject, serialize) {}

4.2 注释书写原则

  1. 在写注释之前，看看是否能够通过修改方法名，函数名让其变得见名知意，从而不需要注释。
  2. 注释应该记录代码不能明显体现出来的思路或你对代码的评价。
  3. 注释和代码一样，同样会占用屏幕空间，同样会分散阅读者的注意力，所以请保持言简意赅。
  4. 修改代码的同时，请修改注释以保证注释的有效性。

4.3 注释标记

  1. TODO 还没有完成的逻辑
  2. FIXME 有错误的逻辑

5 函数

  1. 函数行数不得超过 40 行，否则考虑拆分成小的函数。

  2. 函数体内变量声明应尽可能集中在顶部。

  3. 不要在块作用域中声明函数
    不要写成:

1
2
3
if (x) {
    function foo() {}
}

虽然有很多 JS 引擎都支持块做域内声明函数，但它不是 ECMAScript 规范(见ECMA-262, 第 13 和 14 条)。各个浏览器的实现可能不兼容, 也可能与未来的 ECMAScript 草案相违背。ECMAScript 只允许在脚本的根语句或函数中声明函数，如果确实需要在块中定义函数, 建议使用函数表达式来初始化变量:

1
2
3
if (x) {
    var foo = function() {};
}
  1. 命名规范：命名应能够表达该变量的含义，首字母小写的驼峰格式。比如：
1
2
3
function returnTrue() {
    return true;
}
  1. Getter/Setter 命名
    这里单独说明 Getter/Setter 命名规范，一般情况下不需要使用 Getter/Setter 方法，直接暴露相应地对象属性即可。如确有必要，请使用 getXxx 和 setXxx 命名，对于 boolean 值，可以使用 isXxx/hasXxx/canDoXxx 等命名。

6 模块

  1. 建议按照 CMD 或 AMD 规范实现模块，并使用 seajs 或 requirejs 等库加载或管理模块。
1
2
3
4
5
6
define(function(require, exports, module) {
    var $ = require('$');
    exports.init = function() {
        // do something
    };
});

7 文件

  1. 命名规范：命名应能表达该文件的作用。全部小写，单词以连字符分隔，比如category-manager.js。
  2. 编码规范：统一使用 UTF-8（无 BOM）格式。

8 HTML，CSS 和 Javascript

  1. HTML 中引用 javascript 文件时，建议去掉 type 属性。只有当 script 标签存放的不是 javascript 时才需要特别声明。
1
2
3
4
5
6
7
8
9
<script src="path/to/js.js"></script>
<script>
    $(function() {
        // do something
    });
</script>
<script type="text/template">
    <div>{i18n.noData}</div>
</script>

##终极条款

  1. 在修改别人的代码时，应该先学习别人的编码规范，并遵守该规范，如果有的话。

##参考

  1. Google JavaScript Style Guide
    http://codeguide.bootcss.com/