# 代码规范

统一团队的编码规范，有助于代码的维护。本章是传统意义上的 Style Guideline，目的是统一一些相对主观化的代码风格。

# 单行代码块

在单行代码块中使用空格

// bad
function foo () {return true}
if (foo) {bar = 0}

// good
function foo () { return true }
if (foo) { bar = 0 }

# 大括号风格

在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。在 JavaScript 中，主要有三种风格，如下：

// bad
// Stroustrup
if (foo) {
  bar()
}
else {
  baz()
}

// Allman
if (foo)
{
  bar()
}
else
{
  baz()
}

// good
// 约定-One True Brace Style
if (foo) {
  bar()
} else {
  baz()
}

# 变量命名

当命名变量时，主流分为驼峰式命名（variableName）和下划线命名（variable_name）两大阵营。

# 约定

使用驼峰式命名

# 拖尾逗号

在 ECMAScript5 里面，对象字面量中的拖尾逗号是合法的，但在 IE8（非 IE8 文档模式）下，当出现拖尾逗号，则会抛出错误。拖尾逗号的例子：

var foo = {
  name: 'foo',
  age: '22',
}

拖尾逗号的好处是，简化了对象和数组添加或删除元素，我们只需要修改新增的行即可，并不会增加差异化的代码行数。

因为拖尾逗号有好也有不好，所以约定允许在最后一个元素或属性与闭括号 ] 或 } 在不同行时，可以（但不要求）使用拖尾逗号。当在同一行时，禁止使用拖尾逗号。

# 逗号空格

逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。

// bad
var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2

// good
var foo = 1, bar = 2

# 计算属性的空格

约定在对象的计算属性内，禁止使用空格

// bad
obj['foo' ]
obj[ 'foo']
obj[ 'foo' ]

// good
obj['foo']

# 拖尾换行

在非空文件中，存在拖尾换行是一个常见的 UNIX 风格，它的好处是可以方便在串联和追加文件时不会打断 Shell 的提示。在日常的项目中，保留拖尾换行的好处是，可以减少版本控制时的代码冲突。

// bad
function func () {
  // do something
}

// good
function func () {
  // do something
}
// 此处是新的一行

# 函数调用

为了避免语法错误，团队约定在函数调用时，禁止使用空格

// bad
fn ()
fn
()

// good
fn()

# 缩进

代码保持一致的缩进，是作为工程师的职业素养。但缩进用两个空格，还是四个空格，是用 Tab 还是空格呢？这样的争论太多了，也得不出答案。本规范结合了市面上优秀的开源项目，姑且约定使用 空格 来缩进，而且缩进使用两个空格。

那是不是不能使用 Tab 进行缩进了？我们可以通过配置 .editorconfig ，将 Tab 自动转换为空格。

# 对象字面量的键值缩进

约定对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格

// bad
var obj = { 'foo' : 'haha' }

// good
var obj = { 'foo': 'haha' }

# 构造函数首字母大写

在 JavaScript 中 new 操作符用来创建某个特定类型的对象的一个实例，该类型的对象是由一个构造函数表示的。由于构造函数只是常规函数，唯一区别是使用 new 来调用。所以我们团队约定构造函数的首字母要大小，以此来区分构造函数和普通函数。

// bad
var fooItem = new foo()

// good
var fooItem = new Foo()

# 构造函数的参数

在 JavaScript 中，通过 new 调用构造函数时，如果不带参数，可以省略后面的圆括号。但这样会造成与整体的代码风格不一致，所以约定使用圆括号。

// bad
var person = new Person

// good
var person = new Person()

# 链式调用

链式调用如果放在同一行，往往会造成代码的可读性差，但有些时候，短的链式调用并不会影响美观。所以本规范约定一行最多只能有四个链式调用，超过就要求换行。

# 空行

空白行对于分离代码逻辑有帮助，但过多的空行会占据屏幕的空间，影响可读性。约定最大连续空行数为 2

// bad
var a = 1



var b = 2

// good
var a = 1


var b = 2

# 链式赋值

链式赋值容易造成代码的可读性差，所以团队约定禁止使用链式赋值

// bad
var a = b = c = 1

// good
var a = 1
var b = 1
var c = 1

# 变量声明

JavaScript 允许在一个声明中，声明多个变量。团队约定在声明变量时，一个声明只能有一个变量

// bad
var a, b, c

// good
var a
var b
var c

# 分号

JavaScript 在所有类 C 语言中是比较独特的，它不需要在每个语句的末尾有分号。在很多情况下，JavaScript 引擎可以确定一个分号应该在什么位置然后自动添加它。此特征被称为自动分号插入 (ASI)，被认为是 JavaScript 中较为有争议的特征。

团队中对于是否应该使用分号，也有许多争论，本规范推荐不使用分号，因为我们认为好的工程师应该知道什么时候该加，什么时候不该加。

参考：semi

# 代码块空格

一致性是任何风格指南的重要组成部分。虽然在哪里放置块的开括号纯属个人偏好，但在整个项目中应该保持一致。不一致的风格将会分散读者阅读代码的注意力。约定代码块前要添加空格

// bad
if (a){
  b()
}

function fn (){}

// good
if (a) {
  b()
}

function fn() {}

# 操作符的空格

约定操作符前后都需要添加空格

// bad
var sum = 1+2

// good
var sum = 1 + 2

# BOM

Unicode 字节顺序标记 (BOM) 用来指定代码单元是高字节序还是低字节序。也就是说，是高位在前还是低位在前。UTF-8 不需要 BOM 来表明字节顺序，因为单个字节并不影响字节顺序。

相信不少同学遇到过 BOM 的坑，这里不多说了，切记不要使用 windows 的记事本改代码！

← JS 规范注释规范 →