代码规范

京东凹凸实验室前端开发规范;

概览 📋

内容 👹

单行代码块

在单行代码块中使用空格

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

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

大括号风格

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

我们团队约定使用 One True Brace Style 风格
One True Brace Style

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

Stroustrup

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

Allman

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

变量命名

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

团队约定使用驼峰式命名

拖尾逗号

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

拖尾逗号的例子：

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

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

TIP

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

逗号空格

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

const foo = 1, bar = 2

const foo = 1,bar = 2
const foo = 1 , bar = 2
const foo = 1 ,bar = 2

逗号风格

逗号分隔列表时，在 JavaScript 中主要有两种逗号风格：

标准风格，逗号放置在当前行的末尾
逗号前置风格，逗号放置在下一行的开始位置

const foo = 1,
    bar = 2

const foo = ['name',
            'age']

const foo = 1
,
bar = 2

const foo = 1
, bar = 2

const foo = ['name'
          , 'age']

计算属性的空格

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

obj['foo']

obj['foo' ]
obj[ 'foo']
obj[ 'foo' ]

拖尾换行

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

TIP

可以通过 .editorconfig 添加 EOL

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

function func () {
  // do something
}

函数调用

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

fn()

fn ()
fn
()

缩进

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

TIP

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

对象字面量的键值缩进

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

const obj = { 'foo': 'haha' }

const obj = { 'foo' : 'haha' }

构造函数首字母大写

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

const fooItem = new Foo()

const fooItem = new foo()

构造函数的参数

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

const person = new Person()

const person = new Person

链式调用

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

空行

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

const a = 1


const b = 2

const a = 1



const b = 2

链式赋值

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

const a = 1
const b = 1
const c = 1

const a = b = c = 1

变量声明

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

const a
const b
const c

const a, b, c

分号

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

TIP

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

代码块空格

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

TIP

团队约定代码块前要添加空格

if (a) {
  b()
}

function a () {}

if (a){
  b()
}

function a (){}

函数声明的空格

当格式化一个函数，函数名或 function 关键字与左括号之间允许有空白。命名函数要求函数名和 function 关键字之间有空格，但是匿名函数要求不加空格。

TIP

团队约定函数括号前要加空格

function func (x) {
  // ...
}

function func(x) {
  // ...
}

操作符的空格

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

const sum = 1 + 2

const sum = 1+2

BOM

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

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

# 代码规范

# 概览 📋

# 内容 👹

# 单行代码块

# 在单行代码块中使用空格

# 大括号风格

# 变量命名

# 拖尾逗号

# 逗号空格

# 逗号风格

# 计算属性的空格

# 拖尾换行

# 函数调用

# 缩进

# 对象字面量的键值缩进

# 构造函数首字母大写

# 构造函数的参数

# 链式调用

# 空行

# 链式赋值

# 变量声明

# 分号

# 代码块空格

# 函数声明的空格

# 操作符的空格

# BOM