codereview 思考
- 提升代码质量
- 代码复盘
- 有利于规范的落地
- 对业务的理解加深
- 表达沟通能力的增强
- 相互学习
- 仪式感
前端代码规范
Airbnb 代码规范 https://github.com/airbnb/jav...eslint 代码检查 https://cn.eslint.org
korofileheader 注释生成 https://marketplace.visualstu...
凹凸实验室代码规范 https://guide.aotu.io/index.html
react 代码规范 https://github.com/airbnb/jav...
vue 代码规范 https://cn.vuejs.org/v2/style...
命名规则
Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo
Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo
函数命名
动词 | 含义 | 返回值 |
---|---|---|
can | 判断是否可执行某个动作(权限) | 函数返回一个布尔值。true:可执行;false:不可执行 |
has | 判断是否含有某个值 | 函数返回一个布尔值。true:含有此值;false:不含有此值 |
is | 判断是否为某个值 | 函数返回一个布尔值。true:为某个值;false:不为某个值 |
get | 获取某个值 | 函数返回一个非布尔值 |
set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象 |
load | 加载某些数据 | 无返回值或者返回是否加载完成的结果 |
注释规范
文件顶部注释
/*
* @description:
* @Author: xiaoping.zhang
* @Date: 2019-02-17 10:22:28
* @LastEditors: xiaoping.zhang
* @LastEditTime: 2019-02-17 10:22:28
*/
代码片段注释
/**
* @Author: xiaoping.zhang
* @description:
* @return:
* @Date: 2019-07-17 22:35:35
*/
类型
基本类型
- 字符串
- 数值
- 布尔类型
- null
- undefined
const foo = 1
let bar = foo
bar = 9
console.log(foo, bar) // 1, 9
复杂类型
- object
- array
- function
const foo = [1, 2, 3]
const bar = foo
bar[0] = 9
console.log(foo[0], bar[0]) // 9, 9
引用
- 对所有引用都使用
const
,不要使用var
// bad
var a = 1
var b = 2
// good
const a = 1
const b = 2
- 如果引用是可变动的,则使用
let
// bad
var count = 1
if (count < 10) {
count += 1
}
// good
let count = 1
if (count < 10) {
count += 1
}
对象
- 请使用字面量值创建对象
/ bad
const a = new Object{}
// good
const a = {}
- 别使用保留字作为对象的键值,这样在 IE8 下不会运行
// bad
const a = {
default: {}, // default 是保留字
common: {}
}
// good
const a = {
defaults: {},
common: {}
}
- 请使用对象方法的简写方式
const job = 'FrontEnd'
// bad
const item = {
job: job
}
// good
const item = {
job
}
-对象属性值的简写方式要和声明式的方式分组
onst job = 'FrontEnd'
const department = 'JDC'
// bad
const item = {
sex: 'male',
job,
age: 25,
department
}
// good
const item = {
job,
department,
sex: 'male',
age: 25
}
数组
- 请使用字面量值创建数组
// bad
const items = new Array()
// good
const items = []
- 向数组中添加元素时,请使用
push
方法
const items = []
// bad
items[items.length] = 'test'
// good
items.push('test')
- 使用拓展运算符
...
复制数组
// bad
const items = []
const itemsCopy = []
const len = items.length
let i
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i]
}
// good
itemsCopy = [...items]
-使用数组的 map
等方法时,请使用 return
声明,如果是单一声明语句的情况,可省略 return
// good
[1, 2, 3].map(x => {
const y = x + 1
return x * y
})
// good
[1, 2, 3].map(x => x + 1)
// bad
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
const flatten = memo.concat(item)
flat[index] = flatten
})
// good
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
const flatten = memo.concat(item)
flat[index] = flatten
return flatten
})
// bad
inbox.filter((msg) => {
const { subject, author } = msg
if (subject === 'Mockingbird') {
return author === 'Harper Lee'
} else {
return false
}
})
// good
inbox.filter((msg) => {
const { subject, author } = msg
if (subject === 'Mockingbird') {
return author === 'Harper Lee'
}
return false
})
解构赋值
- 当需要使用对象的多个属性时,请使用解构赋值
// bad
function getFullName (user) {
const firstName = user.firstName
const lastName = user.lastName
return `${firstName} ${lastName}`
}
// good
function getFullName (user) {
const { firstName, lastName } = user
return `${firstName} ${lastName}`
}
// better
function getFullName ({ firstName, lastName }) {
return `${firstName} ${lastName}`
}
- 当需要使用数组的多个值时,请同样使用解构赋值
const arr = [1, 2, 3, 4]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first, second] = arr
- 函数需要回传多个值时,请使用对象的解构,而不是数组的解构
// bad
function doSomething () {
return [top, right, bottom, left]
}
// 如果是数组解构,那么在调用时就需要考虑数据的顺序
const [top, xx, xxx, left] = doSomething()
// good
function doSomething () {
return { top, right, bottom, left }
}
// 此时不需要考虑数据的顺序
const { top, left } = doSomething()
字符串
- 字符串统一使用单引号的形式
' '
// bad
const department = "JDC"
// good
const department = 'JDC'
- 字符串太长的时候,请不要使用字符串连接符换行
\
,而是使用+
const str = '前端js规范' +
'前端js规范' +
'前端js规范前端js规范前端js规范'
- 程序化生成字符串时,请使用模板字符串
const test = 'test'
// bad
const str = ['a', 'b', test].join()
// bad
const str = 'a' + 'b' + test
// good
const str = `ab${test}`
函数
- 请使用函数声明,而不是函数表达式
/ bad
const foo = function () {
// do something
}
// good
function foo () {
// do something
}
- 不要在非函数代码块中声明函数
// bad
if (isUse) {
function test () {
// do something
}
}
// good
let test
if (isUse) {
test = () => {
// do something
}
}
- 不要使用
arguments
,可以选择使用...
// bad
function test (opts) {
opts = opts || {}
}
// good
function test (opts = {}) {
// ...
}
模块
- 使用标准的
ES6
模块语法import
和export
// bad
const util = require('./util')
module.exports = util
// good
import Util from './util'
export default Util
// better
import { Util } from './util'
export default Util
- 不要使用
import
的通配符*
,这样可以确保你只有一个默认的export
// bad
import * as Util from './util'
// good
import Util from './util'
迭代器
- 不要使用
iterators
const numbers = [1, 2, 3, 4, 5]
// bad
let sum = 0
for (let num of numbers) {
sum += num
}
// good
let sum = 0
numbers.forEach(num => sum += num)
// better
const sum = numbers.reduce((total, num) => total + num, 0)