容易踩坑的前端开发规范

前言

因为之前公司就我一个前端，代码规范度有所不足。导致换工作后代码review经常出现一些问题，立贴记录一下自己遇到的问题，希望能帮到大家。

实例

常量及组件使用大驼峰

eg:Status、Type、Default

eg:HomePage、UserPage、Dashboard

变量及方法使用小驼峰

eg:studentInfo、userInfo、productInfo

eg:getUserInfo、setUserInfo、handleZeroNumber

函数的形参必须见名知意

const userInfo = ['小红','小绿','小白','小黑']

// not good
userInfo.forEach((item)=>{
    console.log(item)
})

// good
userInfo.forEach((name)=>{
    console.log(name)
})

处理函数调用最好有一个返回值

const userInfo = ['小红','小绿','小白','小黑']

// not good
function handleUserInfo(data){
    if(data.length === 0) return
    return data.map((name)=>{
        return name = '你好' + name
    })
}

// good
function handleUserInfo(data){
    if(data.length === 0) return []
    return data.map((name)=>{
        return name = '你好' + name
    })
}

接口返回变量初始化时增加默认值

// not good
const { num } = props

// good
const { num = 0 } = props

两行代码的碎式组件不要写

如果你需要提取一个公共的组件，比如说card

你只想改一下样式或者固定他的宽高之类的，最好写在调用的页面中，尽量不要写两行代码的碎式组件

条件判断

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。

// not good
if(flag){
    return 'open'
}else{
    return 'close'
}

// good
return flag ? 'open' : 'close'

页面中尽量不要写switch语句，使用type来替换

// not good
switch(num){
    case 0 :
    x = 'open';
    break;
    case 1 :
    x = 'close';
    break;
    default :
    x = 'loading'
}

// good
const Type = {
    open : 0,
    close: 1,
    loading: 2
}
return {
    [Type.open]:'open',
    [Type.close]:'close',
    [Type.loading]:'loading'
}[num]

属性中尽量不要写长表达式

// not good
import { Table } from 'antd';
<Table dataSource={data.sort((a, b) => b - a)} ... />

// good
const format = (data) => data.sort((a, b) => b - a)
<Table dataSource={format(data)} ... />

拆分代码

代码拆分的时候不能拆的太碎，也不能过长。尽量保证一个方法只干一件事。

全局函数

全局函数中尽量不要有修改，哪怕新建一个新方法包裹

function format(num){
    ...xxx
    return num
}

// not good
function format(num){
    ...xxx
    return num + 1
}

// good
function format(num){
    ...xxx
    return num
}
function customFormat(num){
    const format = format(xxx)
    return format + 1
}

删除代码

删除代码的时候一定要使用全局搜索，查查看这段代码在别的地方是否有调用，如果删错了就尴尬了😅

状态判断

在项目中如果状态特别多，建议使用枚举进行分类。如果项目中全是0 1 0 1的状态码，后期不管是整理代码还是修改 bug 都是非常头疼的一件事。

// not good
if(status === 0){
    ...
}else if(status ===1){
    ...
}

// good
const LoadingStatus = {
    Open: 0,
    Close: 1,
}
if(status === LoadingStatus.Open){
    ...
}else if(status === LoadingStatus.Close){ 
    ...
}

处理嵌套对象

在处理嵌套对象或者嵌套数组时一定要做类型判断或非空校验等

let data = {
    a: 'a',
    b: {
        b1: [{
            b11: 'b11',
            b12: 'b12'
        }]
    }
}

Object.keys(data.b).forEach((key)=>{
    if(Array.isArray(data.b[key])){
        ...
    }
})

css使用子选择器

我之前写代码经常使用后代选择器，最终的结果就是要么重新加class名，要么就换别的标签来使用，但是来来回回就那几个常用的标签，让人头疼。

所以我们在写代码中应该尽量使用子选择器，除非你是想设置所有的样式

// not good
.content div{
    ...
}

// good
.content > div{
    ...
}