代码优化方法记录

每次代码 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)
相关推荐
小小吱3 分钟前
HTML动画
前端·html
糊涂涂是个小盆友24 分钟前
前端 - 使用uniapp+vue搭建前端项目(app端)
前端·vue.js·uni-app
浮华似水1 小时前
Javascirpt时区——脱坑指南
前端
王二端茶倒水1 小时前
大龄程序员兼职跑外卖第五周之亲身感悟
前端·后端·程序员
_oP_i1 小时前
Web 与 Unity 之间的交互
前端·unity·交互
钢铁小狗侠1 小时前
前端(1)——快速入门HTML
前端·html
凹凸曼打不赢小怪兽1 小时前
react 受控组件和非受控组件
前端·javascript·react.js
狂奔solar2 小时前
分享个好玩的,在k8s上部署web版macos
前端·macos·kubernetes
qiyi.sky2 小时前
JavaWeb——Web入门(8/9)- Tomcat:基本使用(下载与安装、目录结构介绍、启动与关闭、可能出现的问题及解决方案、总结)
java·前端·笔记·学习·tomcat
清云随笔2 小时前
axios 实现 无感刷新方案
前端