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

函数命名

注释规范

文件顶部注释

/*
 * @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)