代码优化方法记录

JHCan3332024-07-12 23:47

每次代码 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)