语言规范

类型

• 原始类型: 存取原始类型直接作用于值本身
• 布尔类型
• Null 类型
• Undefined 类型
• 数字类型
• BigInt 类型
• 字符串类型
• 符号类型 Symbol

• 复杂类型: 访问复杂类型作用于值的引用
• object
• array
• function

引用

• 请记得 const 和 let 都是块级作用域，var 是函数级作用域

• 对所有引用都使用 const，不要使用 var

• 如果引用是可变动的，使用 let代替 var

对象

• 使用字面量值创建对象

• 别使用保留字作为对象的键值

• 当使用动态属性名创建对象时，请使用对象计算属性名来进行创建

• 使用对象方法的简写方式

• 请使用对象属性值的简写方式

• 将简写的对象属性分组后统一放到对象声明的开头

• 只对非法标识符的属性使用引号

• 不要直接使用 Object.prototype的方法, 例如 hasOwnProperty, propertyIsEnumerable 和 isPrototypeOf方法

• 优先使用对象展开运算符 ... 来做对象浅拷贝而不是使用 Object.assign，使用对象剩余操作符来获得一个包含确定的剩余属性的新对象

数组

• 请使用字面量值创建数组

• 向数组中添加元素时，请使用 push 方法

• 使用展开运算符 ... 复制数组

• 把一个可迭代的对象转换为数组时，使用展开运算符 ... 而不是 Array.from

• 使用 Array.from 来将一个类数组对象转换为数组

• 遍历迭代器进行映射时使用 Array.from 代替扩展运算符 ..., 因为这可以避免创建中间数组

• 使用数组的 map等方法时，请使用 return声明，如果是单一声明语句的情况，可省略 return

• 如果一个数组有多行则要在数组的开括号后和闭括号前使用新行

解构赋值

• 当需要使用对象的多个属性时，请使用解构赋值

• 当需要使用数组的多个值时，请同样使用解构赋值

• 函数需要回传多个值时，请使用对象的解构，而不是数组的解构

字符串

• 字符串统一使用单引号的形式 ''

• 字符串太长的时候，请不要使用字符串连接符换行 \，而是使用 +

• 程序化生成字符串时，请使用模板字符串

• 不要对字符串使用eval()，会导致太多漏洞

• 不要在字符串中使用不必要的转义字符

函数

• 不要使用Function构造函数创建函数

• 在函数签名中使用空格

• 使用具名函数表达式而非函数声明

• 用圆括号包裹自执行匿名函数

• 不要在非函数代码块（if, while等）中声明函数

• 不要将参数命名为 arguments，会导致该参数的优先级高于每个函数作用域内原先存在的 arguments 对象

• 不要使用 arguments，使用 剩余运算符 ...

• 使用参数默认值语法而不是修改函数参数

• 避免参数默认值的副作用

• 将参数默认值放在最后

• 不要更改参数

• 不要给参数重新赋值

• 调用可变参数函数时建议使用展开运算符 ...

箭头函数

• 当你必须使用函数表达式（传递匿名函数）时，使用箭头函数标记

• 如果函数体只包含一条没有副作用的返回表达式的语句，可以省略花括号并使用隐式的 return ， 否则保留花括号并使用 return语句

• 一旦表达式跨多行，使用圆括号包裹以便更好阅读

• 函数如果只接收一个参数并且没使用用花括号，则省略圆括号，否则为了清晰明确则使用圆括号包裹参数，注意：总是使用圆括号也是可以接受的

类&构造函数

• 使用 class，避免直接操作 prototype

• 使用 extends 来实现继承

• 如果未声明构造函数，则类会有一个默认的构造函数，没必要用空的构造函数或者将其委托给父类

• 避免类成员重复

模块

• 使用标准的 ES6 模块语法 import 和 export

• 不要使用 import的通配符 *，这样可以确保你只有一个默认的 export

• 同个文件每个模块只允许 import一次，有多个 import请书写在一起

• 将所有 import语句放在文件最前方

• 多行导入应该像多行数组和对象文字一样缩进

• 在模块 import声明中禁止使用 Webpack的 loader语法

• 在模块导入之后保留一个空行

• 当模块内只有一个 export 时，使用 default export

迭代器

• 不要使用 iterators，建议使用 JS 更高优先级的函数代替 for-in 或 for-of 循环，除非迫不得已

• 现阶段请不要使用生成器 generator

对象属性

• 使用 . 来访问对象属性

• 当访问的属性是变量时使用 []

变量声明

• 声明变量时，请使用 const、let关键字，如果没有写关键字，变量就会暴露在全局上下文中，这样很可能会和现有变量冲突，另外，也很难明确该变量的作用域是什么。这里推荐使用 const来声明变量，我们需要避免全局命名空间的污染

• 将所有的 const和 let分组

• 变量不要进行链式赋值

• 不允许出现未被使用的变量

Hoisting

• var存在变量提升的情况，即 var声明会被提升至该作用域的顶部，但是他们的赋值并不会。而 const和 let并不存在这种情况

• 匿名函数的变量名会提升，但函数内容不会

• 命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会

比较运算符&相等

• 使用 === 和 !== 而非 == 和 !=

• 条件声明例如 if 会用 ToBoolean 这个抽象方法将表达式转成布尔值并遵循如下规则
• Objects 等于 true
• Undefined 等于 false
• Null 等于 false
• Booleans 等于 布尔值
• Numbers 在 +0, 0, 或者 NaN 的情况下等于 false, 其他情况是 true
• Strings 为 '' 时等于 false, 否则是 true

操作符

• 【强制】不要使用一元自增自减运算符
不要使用一元自增自减运算符（++ 和 --），除非在 for 循环条件中。
++ 和 -- 会带来值�是否会提前变化带来的理解成本，也可能因为自动添加分号机制导致一些错误，因此我们推荐使用 num += 1 来代替 num++。但出于习惯，在 for 循环的条件中依然可以使用自增自减运算符

• 避免嵌套的三元表达式

• 混合使用多种操作符时，用小括号包裹分组

分号

eval()

with() {}

修改内置对象的原型

代码规范

单行代码块

大括号风格

• One True Brace Style

变量命名

拖尾逗号

逗号空格

逗号风格

计算属性的空格

拖尾换行

函数调用

缩进

对象字面量的键值缩进

构造函数首字母大写

构造函数的参数

链式调用

空行

链式赋值

变量声明

分号

代码块空格

函数声明的空格

操作符的空格

最大字符数和最大行数

• 【推荐】单行最大字符数：120
我们推荐单行代码最多不要超过 100 个字符，除了以下两种情况：
• 字符串和模板字符串
• 正则表达式

• 文件最大行数：1000

• 函数最大行数：80

框架规范

命名规范

• 组件文件名
如果是组件文件，则使用 PascalCase，如 MyComponent.js
如果组件是一个目录，则组件主入口命名为 index，如 index.js

• 引用命名
React 组件使用 PascalCase，组件实例使用 CamelCase

• 组件命名

• 组件属性名
使用小驼峰式命名法来定义属性的名称

空格

• 自闭合的标签前要加一个空格

• 不要在花括号里边加空格

属性

• 属性名使用 CamelCase

• 当属性值为true时可以省略

• 避免使用数组的索引作为 key 属性值, 建议使用稳定的ID

• 为所有的非必需属性定义使用 defaultProps 明确的默认值

标签

• 没有子元素的标签请自闭合

• 如果组件包含多行属性，在新的一行闭合标签

方法

• 使用箭头函数包裹本地变量

• 类组件的内部方法不要使用下划线前缀

类型

类型检测

类型转换

注释

文件注释

命名空间注释

类注释

函数/方法注释

事件注释

常量注释

复杂类型注释

1. 概述 | Aotu.io - 前端代码规范

2. spec/javascript-style-guide.md at master · ecomfe/spec (github.com)