前端代码审查（Code Review）

针对目录结构、SCSS规范、JS规范、Vue规范

可参照官方给出的风格指南（Code Review）

具体实践规范

1、POST/PUT/DELETE 请求按钮需要添加 loading 状态，防止重复提交。

建议使用 Element UI 提供的button 组件的loading属性，或者自己封装一个 loading 状态的按钮组件。

<el-button type="primary" :loading="loading" @click="handleSubmit"> 提交 </el-button>

2、模板上超过两个的判断条件，写成方法或者computed

<!--bad-->
<template>
  <t-table v-if="satus==1&&orderStatus==2&&isShowTable"/>
</template>
<!--good-->
<template>
  <t-table v-if="isChangeAvailiable"/>
</template>
<script>
 computed: {
    isChangeAvailiable() {
      return (
        this.satus==1&&this.orderStatus==2&&this.isShowTable
      );
    },
  },
</script>

3、可选链访问数组/对象元素

//bad
cosnt obj = {}
cosnt b = obj.a && obj.a.b
console.log(b)	// undefined
//good
cosnt obj = {}
cosnt b = obj?.a?.b
console.log(b)	// undefined

4、定时器及时清理

mounted () {
  this.timer = setInterval(() => {
    ...
  }, 1000)
}
destroyed () {
  if (this.timer) {
    clearInterval(this.timer)
  }
}

5、window/body上的监听事件–需要解绑

mounted() {
  window.addEventListener('resize', this.fun)
}
beforeDestroy () {
  window.removeEventListener('resize', this.fun);
}

6、async await 结合使用(调用接口)

export default {
  created() {
    this.getOrderNo()
  },
  methods:{
    async getOrderNo() {
      const res = await this.$api.getOrderNo()
      if(res.success){
        // 成功处理
        }
    }
  }
}

7、使用try…catch…时–错误代码需要提示

try {
  // 成功处理
} catch (error) {
  // 处理异常的代码
  this.$message.error(error.message)
}

8、函数有很多参数，需要封装成一个对象

// bad--->这个方式参数就必须按顺序传递
const getUserInfo =(name,age,sex,mobile,hobby)=> {
  // 函数逻辑
}
// good
const getUserInfo =(userInfo)=> {
  // 函数逻辑
  const {name,age,sex,mobile,hobby} = userInfo
}

9、简化switch case判断

// bad
const counter =(state=0,action)=>{
  switch (action.type) {
    case 'ADD':
      return state + 1
    case 'MINUS':
      return state - 1
    default:
      return state
  }
}
// good
const counter =(state=0,action)=>{
  const step={
    'ADD':1,
    'MINUS':-1
  }
  return state + (step[action.type] ?? 0)
}

10、判断条件过多需要提取出来

// bad
const checkGameStatus =()=>{
  if(status===0||(satuas===1&&isEnd===1)||(isEnd===2)){
    // 调用
  }
}
// good
const isGaneOver =()=>{
  return (status===0||(satuas===1&&isEnd===1)||(isEnd===2))
}
const checkGameStatus =()=>{
  if(isGameOver()){
    // 调用
  }
}

11、if 判断嵌套—>错误前置

补充常规的—>目录结构规范：

项目根目录下创建 src 目录，src 目录下创建 api 目录、assets 目录、components 目录、directive 目录、router 目录、store 目录、utils 目录、views 目录。

1、api 目录存放所有页面API。

建议将每个页面的API封装成一个单独的js文件，文件名与页面名称相同（防止增删查改接口命名重复），并且都放在api下的modules目录下。

建议API目录下新建index.js文件，用于统一导出所有API,在main.js引入并将api挂载到vue的原型上Vue.prototype.$api = api；在页面直接使用this.$api.xxx调用接口。

WebPack自动加载配置API(使用require.context)

Vite自动加载配置API(使用import.meta.globEager)

(注册全局api方法 )instance.config.globalProperties.$api = api;

2、assets 目录存放静态资源，如图片、字体、公共scss等。

3、components 目录存放公共组件(store也可以如下方式自动导入)。

建议将公共组件拆分为基础组件(baseComponents)和业务组件(pageComponents)，基础组件存放一些通用的组件，如按钮、输入框、表格等，业务组件存放与具体业务相关的组件，如用户管理组件、权限管理组件等。

基础组件命名方式大驼峰，如：TTable;业务组件命名方式是小驼峰，如：importExcel。

组件文件夹下必须包含index.vue文件，index.vue文件中必须包含组件的name属性，name属性值必须与组件文件夹名一致。

基础组件复用性高，通常情况都是全局注册

components 目录下的index.js–全局导入

全局注册main.js

页面组件使用

4、utils 目录存放公共方法，如全局loading,axios封装，正则校验等。

axios封装（request.js）

相关文章

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

原文链接：https://juejin.cn/post/7328302288156590130 作者：wocwin