乐趣区

codereview-思考和前端规范023

jiezi

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)
退出移动版