编写可维护的JavaScript

”编程风格“和”编程规范“,两个经常听到的名词。编程风格是编程规范的一种,用来约束单文件中的代码的规范。编码规范还包括编程最佳实践文件和目录规范注释等方面。对于团队的整体发展,规范还是必须和有效的。

编程风格

1.缩进层级

  • 制表符缩进(推荐

    优点:可以配合编辑器,控制一个制表符的展现长度。

    缺点:不同系统对制表符的解释不一致。

  • 空格符缩进

    2个或者4个空格表示一个缩进。

2.语句结尾

是否在每行结束添加分号结尾。

依赖于分析器的自动分号插入机制,JavaScript会自动插入分号,大多说场景下都会正确插入分号,一些特殊情况会出错,比如return

个人感觉良好的代码习惯可以省略分号。(推荐

3.行的长度

由于历史问题,编辑器单行限制,建议单行长度80~100个字符。(推荐

4.换行

换行位置,运算符后换行,下一行增加两个层级的缩进。

特殊情况,赋值语句保持左对齐

5.空行

  • 控制语句之前增加空行(if/for)。
  • 控制语句块内第一条语句(可选)。
  • 方法之间。
  • 方法内第一条语句之前(可选)。
  • 变量命名与下一条语句。
  • 多行或单行注释之前。
  • 逻辑片段之间。
  • return语句之前。

6.运算符间距

运算符前后必须使用一个空格来保持表达式整洁。

1
2
3
4
5
var found = (values[i] === item)
for (var i = 0; i < count; i++) {
process(i)
}

7.命名

  • 变量和函数

    变量和函数均遵循驼峰命名法,变量前缀应当是名词,函数前缀应当是动词

    函数命名常见约定

动词 含义
can 返回一个布尔值
has 返回一个布尔值
is 返回一个布尔值
get 返回一个非布尔值
set 保存
add 添加
remove 删除
create 创建
destory 销毁
start 开始
stop 停止
insert 插入
delete 移除
clean 清理
update 更新
find 查找
search 搜索
refresh 刷新
enable 启用
disable 关闭
  • 常量

​ 使用大写字母下划线命名。

  • 构造函数

    使用“大驼峰”命名,首字母大写。

8.直接量

  • 字符串

    使用单引号表示直接量。

  • 数字

  • null

    null可以理解为对象的占位符,以下场景使用null。

    • 初始化变量,这个变量可能赋值为一个对象。
    • 用来和一个已知初始化的变量比较。
    • 当函数的参数期望是对象时,用作参数传入。
    • 当函数的返回值期望是对象,作为返回值。
  • undefined

    undefined可以理解为初始化变量等待赋值,在JavaScript中未声明的变量也可以被理解为“undefined”。在比较一个变量是否未赋值使用typeof

    1
    2
    3
    4
    5
    var person
    typeof person
    typeof foo
    person === undefined
    foo === undefined

9.变量声明

每行一个变量,所有行都应当多一层缩进,初始化的变量应当在未初始化的变量之前。

10.函数声明

函数名和开始圆括号之间不应当有空格,结束的圆括号和左边的花括号之间应该留一个空格。

1
2
3
4
5
6
7
function doSomething(arg1, arg2) {
}
object.method = function() {
}

11.语句

if一样的语句,其后面应该紧跟一个空格。

1
2
3
4
5
6
7
8
if (condition) {
}
for (initialization; condition; update) {
}

12.注释

  • 单行注释

    • 双斜线之后保留一个空格。
    • 独占一行的注释与下一行代码缩进保持一致。
    • 代码行尾部的注释之间要保留一个空格。
    • 禁止用多条单行注释表示多行注释。
  • 多行注释

  • 文档注释

    遵循JSDoc规范。

  • 注释声明

    • TODO

    • HACK

      说明使用hack的原因。

    • FIXME

      代码有问题应尽快修复。

    • REVIEW

      代码的改动需要评审。