JavaScript 规范及命名

1. 变量类型及声明

1.1 使用const赋值，避免使用var

确保初始值不容易改变，避免重复引用会导致许多bug

// bad
var num1 = 1
var num2 = 2

// good
const num1 = 1
const num2 = 2

1.2 如果需要对参数重新赋值，使用let，不使用var

// bad
var count = 1
if (true) {
  count += 1
}

// good
let count = 1
if (true) {
  count += 1
}

1.3 每个变量都用一个 const 或 let

// bad
const items = getItems(),
    onLine = true,
    boys= 'lwb'

// good
const items = getItems()
const onLine = true
const boys= 'lwb'

1.4 const放一起，let放一起

// bad
let i
const items = getItems()
let lwb
const onLine = true
let length

// good
const onLine = true
const items = getItems()

let lwb
let i
let length

1.5 不允许有定义后未使用的变量，或定义后未使用的参数

2. 类型基本规范

2.1 创建对象时，使用字面量创建方法

// bad
const item = new Object()

// good
const item = {}

2.2 单行定义的对象，最后一个成员不以逗号结尾；多行时，最后一个以逗号结尾

// bad
const object1 = { k1: v1, k2: v2, }

const object2 = {
  k1: v1,
  k2: v2
}

// good
const object1 = { k1: v1, k2: v2 }

const object2 = {
  k1: v1,
  k2: v2,
}

2.3创建数组时，使用字面量创建方法

// bad
const items = new Array()

// good
const items = []

2.4 向数组中添加值时，使用Array.push()

const arr= []

// bad
arr[arr.length] = 'test'

// good
arr.push('test')

2.5 拷贝数组时，使用扩展运算符（…）

// bad
const len = items.length
const arr= []
for (let i = 0; i < len; i++) {
  arr[i] = items[i]
}

// good
const arr= [...items]

2.6多行数组书写

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
]

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}]


// good
const arr = [[0, 1], [2, 3], [4, 5]]

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
]

2.7静态字符串一律使用单引号，连接用模板字符串

// bad
const a = "foobar"
const b = 'foo' + a + 'bar'

// good
const a = 'foobar'
const b = `foo${a}bar`

2.8函数默认值

// bad
function handleThings(opts) {
  opts = opts || {}
}

// good
function handleThings(opts = {}) {
  // ...
}

2.9箭头函数代替匿名函数

// bad
[1, 2, 3].map(function (x) {
  return x * x
})

// good
[1, 2, 3].map( x => {
  return x * x
})

2.10使用import取代require

// bad
const moduleA = require('moduleA')
const func1 = moduleA.func1
const func2 = moduleA.func2

// good
import { func1, func2 } from 'moduleA'

2.11 使用export取代module.exports

// bad
module.exports = Breadcrumbs

// good
export default Breadcrumbs

2.12 模块默认输出一个函数，函数名的首字母应该小写

function makeStyleGuide() {
}

export default makeStyleGuide

2.13 模块默认输出一个对象，对象名的首字母应该大写

const StyleGuide = {
  es6: {
  }
}

export default StyleGuide

2.14 数组解构赋值

const arr = [1, 2, 3, 4]

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr

2.15 访问属性时使用点符号.

const person = {
  name: 'lwb',
  age: 21,
}

// bad
const name1 = person['name']

// good
const name = person.name

2.16 避免不需要的三元表达式

// bad
const foo = a ? a : b
const bar = c ? true : false
const baz = c ? false : true
 
// good
const foo = a || b
const bar = !!c
const baz = !c

2.17 注释开头的空格

// bad
//解析文字
const active = true

// good
// 解析文字
const active = true

2.18 tab键 用两个空格

// bad
∙∙∙∙const name = 'lwb'

// bad
.const name = 'lwb'

// good
..const name = 'lwb'

2.19 在大括号前空一格

// bad
function test(){
  console.log('test')
}

// good
function test() {
  console.log('test')
}

2.20 用空格来隔开运算符

// bad
const x=y+5

// good
const x = y + 5

2.21 花括号中需要加空格

// bad
const person = {name: 'lwb'}

// good
const person = { name: 'lwb' }

2.22 对象的字面量属性中，key value 之间要有空格

// bad
var obj = { "foo" : 42 }
var obj2 = { "foo":42 }

// good
var obj = { "foo": 42 }

3. JavaScript 常规命名

3.1 避免用一个字母命名，名字有含义

// bad
function g() {
  // ...
}

// good
function getData() {
  // ...
}

3.2 用小驼峰式命名对象、函数、实例

// bad
const OBJEcttsssss = {}
const this_is_my_object = {}
function c() {}

// good
const myObject = {}
function getData() {}

3.3 vue 基础组件名

// bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue