前端规范之命名

普通命名采用小驼峰式命名

1
const userName = 'Jerrry'

复数的时候需要加 s

1
const userNames = ['Jerrry', 'Tom']

每个常量都需命名，且名称全大写

1
const COL_NUM = 10

命名语义化

1
2
3
4
5
6
// good
const userDetails = {}

// not good
const item = {}

函数命名，采用加上动词前缀

  • can 判断是否可执行某个动作
  • has 判断是否含有某个值
  • is 判断是否为某个值
  • get 获取某个值
  • set 设置某个值

Vue

自定义组件名使用大驼峰

1
如：LeftBar

props尽量定义详细

1
2
3
4
5
6
7
// good
props: {
  status: String
}

// not good
props: ['status']

v-for 遍历必须添加 key（避免使用index作为key）

1
2
3
4
5
6
7
8
9
<!-- good -->
<ul>
  <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>

<!-- not good -->
<ul>
  <li v-for="todo in todos">{{ todo.text }}</li>
</ul>

组件内样式设置作用域或添加顶级作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* good  */
<style scoped>
.button-close {
  background-color: #ccc;
}
</style>

<style>
.homepage {
    .btn-close {
        background-color: #ccc;
    }
}
</style>

/* not good  */
<style>
.btn-close {
  background-color: #ccc;
}
</style>

代码片段

用字面量赋值

1
2
3
4
5
// good
const userNames = ['Jerrry', 'Tom']

// not good
const userNames = new Array('Jerrry', 'Tom')

用扩展运算符做浅拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// good
const userNames = ['Jerrry', 'Tom']
const copyUserNames = [...userNames]

// not good
const userNames = ['Jerrry', 'Tom']
const copyUserNames = []
for (let i = 0, len = userNames.length; i < len; i++) {
  copyUserNames[i] = userNames[i]
}


// good
const sources = {name: 'Jerry', age: 18}
const target = {...sources, sex: '男'} // 若sources中有sex字段，则会自动覆盖sources中的sex

// not good
const sources = {name: 'Jerry', age: 18}
const target = Object.assign({}, sources, { sex: '男' })

使用解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// good
const userNames = ['Jerrry', 'Tom']
const [firstName, secondName] = userNames

// not good
const userNames = ['Jerrry', 'Tom']
const firstName = userNames[0]
const secondName = userNames[1]

// good
const person = {name: 'Jerry', age: 18}
const {name, age} = person
// 使用别名
const {name: userName, age: userAge} = person

// not good
const person = {name: 'Jerry', age: 18}
const name = person.name
const age = person.age

对象使用属性缩写

1
2
3
4
5
6
7
8
9
// good
const name = 'Jerry'
const age = 18
const person = {name, age, sex:'男'} // 属性缩写放置在前面

// not good
const name = 'Jerry'
const age = 18
const person = {name: name, age: age}

函数参数使用默认值

1
2
3
4
5
6
7
8
9
10
// good
function createPerson(name = 'Jack') {
   ...
}

// not good
function createPerson(name) {
  name = name || 'Jack'
   ...
}

函数参数超过两个时使用对象结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// good
function createDialog({title, body, buttonText, cancelText}) {
   ...
}

createDialog({
  title: '确认弹窗',
  body: '是否确认删除？',
  buttonText: '确认',
  cancelText: '取消'
})

// not good
function createDialog(title, body, buttonText, cancelText) {
  // ...
}

for循环，数组的长度，使用一个变量来接收

1
2
3
4
5
6
7
8
9
10
// good
for(let i = 0; len = arr.length; i < len; i++){
        ...
}

// not good
for(var i = 0; i < arr.length; i++){
        ...
}
// 该方式的缺点在于当循环次数较多时，循环条件i < arr.length会多次arr.length造成性能损耗