前端代码审查(Code Review)
针对目录结构、SCSS规范、JS规范、Vue规范
具体实践规范
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)
相关文章
vue3+ts基于Element-plus再次封装基础组件文档
原文链接:https://juejin.cn/post/7328302288156590130 作者:wocwin