每次代码 review 之后,对 review 的情况进行总结记录,产出实际经验,方便组内学习、分享。
1、提取公共内容
公共内容要提取,避免重复编写;
2、css 色值使用变量
css 中的色值、字体,都换成组件库中的变量、class;
3、v-if、v-show要用对时机
如果就是不加载对应组件可以用 v-if,否则,尽量用 v-show。比如多tab切换的时候,可以保存客户的使用状态;
4、无用代码去除
无用代码、注释掉的代码,记得删除,否则后期改造或者进行逻辑梳理的时候会造成干扰。
5、解构赋值
善用解构赋值,优化代码, 避免重复长链路获取
反面示例:
const isEmbed = this.$route.query.isEmbed
const isEmbed2 = this.$route.query.isEmbed2
期望示例
const {isEmbed,isEmbed2} = this.$route.query
6、加好注释
业务逻辑类的判断,要加注释,否则别人不知道是什么意思。
7、善用三元表达式
用三元表达式来写,简化代码,避免大片的 if-else
反面示例:
if (this.loginType === 'certLoginProcess') {
this.$Message.error(loginErrorMessage || '登录认证失败!')
} else {
this.$Message.error(loginErrorMessage || '无感登录失败!')
}
期望示例
this.$Message.error(loginErrorMessage || (this.loginType === 'certLoginProcess' ? '登录认证失败!' : '无感登录失败!'))
8、善用 Array.includes()
同字段多个逻辑或( || )判断,可以改为使用 includes
反面示例:
if (result.dictCode === 'STAR' || result.dictCode === 'SPACE') {}
期望示例
['STAR','SPACE'].includes(result.dictCode)
9、善用逻辑或 ||
善用逻辑或(||)运算符处理,避免大片if else
反面示例:
if (this.formData.affiliatedBusiness === '10') {
return true
} if (this.formData.affiliatedBusiness.includes('10')) {
return true
}
期望示例
let { affiliatedBusiness } = this.formData
if(affiliatedBusiness === '10' || affiliatedBusiness.includes('10')){
return true
}
10、驼峰命名
反面示例:
const testTel = utilFun.is_valid_phone_number(taxTel)
期望示例
const testTel = utilFun.isValidPhoneNumber(taxTel)