代码规范

统一团队的编码规范,有助于代码的维护。本章是传统意义上的 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 的记事本改代码!

results matching ""

    No results matching ""