codereview 思考和前端规范_023

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 模块语法 importexport
// 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)
    原文作者:xiaoping
    原文地址: https://segmentfault.com/a/1190000019803458
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞