前端开发过程中的规范总结（持续更新~）

JS

1.不要直接使用 undefined 进行变量判断；使用 typeof 的字符串’undefined’对变量进行判断。

//bad:如果person未定义 这会引发 ReferenceError
if (person === undefined) { ... }
//good
if (typeof person === 'undefined') { ... }

2.用枚举替代大量的if/else

const parseState = (state) => {
    const stateMap = {
        0: '待付款',
        1: '代发货',
        2: '待收货',
        3: '确认收货'
    }
    return stateMap[state]
}

3.Ajax请求时要做非空判断

const result = await axios.get('/path/test)
if (result && result.data) {
    console.log(result.data.message)
}

CSS

1.善用mixin

@mixin text-overflow() {
   display: inline-block;
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
}
.title {
   @include text-overflow();
}
.describe {
   @include text-overflow();
}

Vue

1.路由路径和对应组件的路径最好保持一致

const routes = [
    {
        path: '/page/home',
        component: () => import('@/page/Home')
    },
    {
        path: '/page/list',
        component: () => import('@/page/List')
    }
]

理由：路由路径和组件路径保持一致，可以通过路由地址轻松定位到其对应组件，非常方便开发调试定位目标组件。