一定要看的前端codeReview规范指南
一、前言
针对目录结构、CSS规范、JavaScript规范、Vue规范
可参照官方给出的 风格指南
这里主要总结业务开发中常遇到的代码问题和实践,帮助大家后续各自做好codeReview,一些你遇到的典型问题,也可以在留言区评论,帮助团队共同进步。
二、实践规范
2.1 防止重复提交
--表单提交或者编辑新增数据时,按钮必须加loading,防止重复提交
<el-button type="primary" :loading="submitLoading" @click="handleSubmit"> 提交 </el-button>
--针对table的操作列中的操作项,没有二次确认的也要注意加loading
[图片]
<yun-table
:pagination="pagination"
:border="true"
:columns="columns"
:loading="loading"
:data="tableData"
@update:pagination="handlePageUpdate"
>
<template #action="{ row }">
<yun-rest>
<el-button
:loading="row.loadingSync"
type="action"
@click="handleAction(row, 'sync')"
>
同步
</el-button>
</yun-rest>
</template>
</yun-table>
...
<script setup>
const { result } = await fetchApi(data);
if (result) {
tableData.value = result.records.map((item) => {
return {
...item,
loadingSync: false,
};
});
total.value = result.total;
}
</script>
2.2 滚动到报错位置
--长表单页面或抽屉内容很长,点击提交时,有验证错误时,页面需要做好滚动到报错位置
const handleSubmit = async () => {
let flag = true;
formRef.value.elForm.validate((valid, noValidObj) => {
flag = valid;
if (!valid) {
const errorArr = Object.keys(noValidObj).filter(
(key) => Array.isArray(noValidObj[key]) && noValidObj[key][0]?.field
);
contractFormRef.value.elForm.scrollToField(errorArr[0]); // 滚动到报错位置
}
});
if (!flag) {
ElMessage.warning("表单未填写完成!");
return;
}
// 走后续提交请求
submitLoading.value = true;
...
2.3 模板上的多个判断条件,写成方法或者computed
<template>
// bad
<el-button
v-if="
['NORMAL', 'UNUSUAL'].includes(row.archiveType) &&
['ALREADY_SEND'].includes(row.contractStatus) &&
['ENABLED'].includes(row.enabledStatus)
"
type="action"
@click="handleAction(row, 'modify')"
>
变更
</el-button>
<el-button
v-if="
['NORMAL', 'UNUSUAL'].includes(row.archiveType) &&
['ALREADY_SEND'].includes(row.contractStatus) &&
['ENABLED'].includes(row.enabledStatus)
"
type="action"
@click="handleAction(row, 'renewal')"
>
续签
</el-button>
<el-button
v-if="
['NORMAL', 'UNUSUAL'].includes(row.archiveType) &&
['ALREADY_SEND'].includes(row.contractStatus) &&
['ENABLED'].includes(row.enabledStatus)
"
type="action"
@click="handleAction(row, 'rebook')"
>
改签
</el-button>
// good
<el-button
v-if="isChangeAvailiable(row)"
type="action"
@click="handleAction(row, 'modify')"
>
变更
</el-button>
<el-button
v-if="isChangeAvailiable(row)"
type="action"
@click="handleAction(row, 'renewal')"
>
续签
</el-button>
<el-button
v-if="isChangeAvailiable(row)"
type="action"
@click="handleAction(row, 'rebook')"
>
改签
</el-button>
</template>
<script setup>
// good
const isChangeAvailiable = (row) => {
return (
["ALREADY_SEND", "ALREADY_ARCHIVE"].includes(row.contractStatus) &&
["ENABLED"].includes(row.enabledStatus)
);
};
</script>
2.4 保持数据响应式
<script setup>
import { reactive } from "vue";
let state = reactive({
loading: false,
a: true,
});
function handleChange(){
// bad 无法实现数据响应式
state = {...state,b:'test'}
// bad 无法实现数据响应式
state = reactive({...state,b:'test'})
// correct 数据具有响应式
state.b = 'test';
// correct 数据具有响应式
Object.assign(state,{b:'test'});
}
</script>
2.5 避免使用 delete
delete 操作符并不会释放内存,而且会使得附加到对象上的 hidden class 失效,让对象变成 slow object。(hidden class 是 V8 为了优化属性访问时间而创建的隐藏类)
2.6 尽量使用 export 而 不是 export default 来导出
export default 有两个问题:1)不利于 tree shaking 2)如果使用了一个导出对象上不存在的属性,要运行时才能发现。
2.7 可选链访问数组元素
<template>
// bad
<span>{{row[0].contract.name}}<span>
<span>{{Array.isArray(row) && row[0].contract.name}}<span>
// good
<span>{{row?.[0]?.contract?.name}}<span>
</template>
2.8 参数硬编码
// bad 硬编码1001
const isActive = this.$route.query.id === '1001'
// good 写到配置信息中。这样,id和状态的对应关系一目了然,便于管理和维护。
const idConfig = {
1001: STATUS.ACTIVE
}
const isActive = idConfig[this.$route.query.id] === STATUS.ACTIVE
2.9 定时器是否及时清理
mounted () {
this.timer = setInterval(() => {
doSomething();
}, 300)
}
destroyed () {
if (this.timer) {
clearInterval(this.timer)
}
}
2.10 监听事件是否有解绑
在window/body 上的事件需要解绑:
mounted() {
window.addEventListener(‘resize’, this.func)
window.addEventListener(‘scroll’, this.func)
}
beforeDestroy () {
window.removeEventListener('resize', this.func);
window.removeEventListener('scroll', this.func);
}
三、总结
不积跬步,无以至千里。肯定还有很多遗漏的点,欢迎补充哟。
如果你觉得不错的话,右下角,随手点个推荐,鼓励支持hhh^_^