代码优化方法记录

每次代码 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)
相关推荐
北海-cherish4 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909066 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist6 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师7 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang7 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_7 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含7 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端7 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友8 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端