1、if 判断的优化

  1. // 优化之前
  3. const { head } = await apiSaveOrUpdate(this.form)
  4. if (head.ret === this.$consts.RET_CODE.SUCCESS) {
  5.   this.$notify({
  6.     title: '成功',
  7.     message: this.form.id ? '更新成功' : '创建成功',
  8.     type: 'success'
  9.   })
  10.   TrafficRecordModule.handleQuery() // 数据更新
  11.   this.handleNaviBack()
  12. } else {
  13.   this.$notify.error({
  14.     title: '错误',
  15.     message: head.msg
  16.   })
  17. }

优化原则:

错误优先返回，先返回逻辑少的分支，减少代码层次的嵌套

  1. // 优化之后
  3. const { head } = await apiSaveOrUpdate(this.form)
  4. if (head.ret !== this.$consts.RET_CODE.SUCCESS) {
  5.   this.$notify.error({
  6.     title: '错误',
  7.     message: head.msg
  8.   })
  9. }
  10. this.$notify({
  11.   title: '成功',
  12.   message: this.form.id ? '更新成功' : '创建成功',
  13.   type: 'success'
  14. })
  15. TrafficRecordModule.handleQuery() // 数据更新
  16. this.handleNaviBack()

2、 定义计算属性

优化原则:

能定义为计算属性的，都在 computed 中定义属性

不好的示例：

1）、表达式中不要嵌套多层三目运算的判断，可以拿个变量接收，复杂的可以定义成一个对象去匹配。
image.png
2）、无需变化的属性
image.png
image.png
3）、定义成计算属性，不要在模板直接写。
确定范围的取值可以定义成枚举，变量只限于列举出来的值的范围内取值。
image.png
修改：
image.png

  • 总结：

    无需变化的变量，依赖data函数中属性的变化而变化的属性，模板中的复杂逻辑判断和计算等，都写成计算属性。

3、绝对定位和相对定位

组件内部的绝对定位应该相对于组件内部的某个位置，而不应该把相对定位加在父组件容器上


修改之前：image.png
image.png
修改之后：
image.png

4、布局不用 float，用 flex

使用 float 会脱离文档流不占位置（但是仍然占有正常文档流的文本空间）， 会导致父元素高度塌陷，需要手动清除浮动

修改前：
image.png
修改后：
image.png

5、删除无用代码

对于 没用到/注释掉 的代码，要及时进行删除，保持整体代码的干净和整洁。 如果是未完成的功能或者需要用到的代码，要 TODO 高亮并注明情况

image.png
vscode 有 时间线 的功能，可以查看每次操作的代码记录，做好提交备注就能及时找回之前删除的注释掉的代码

6、合理使用装饰器

在 vue 支持 Typescript 写法中，项目集成了 vue-class-component（用类的方式写组件），提供了@Component() 装饰器，vue-property-decorator 新增了更多结合vue特性的装饰器，vuex-module-decorators 支持 vuex modules 的写法

image.png
对于 装饰器 和 vuex modelus 的 用法 ， 需要熟悉并且按照相应的语法规范进行书写，避免出现用写js的方式来书写 vue & Typescript 的项目。

不好的示例：
image.png
修改：
image.png
image.png

7、复杂逻辑函数适当空换行

关联性强的代码放到一块，便于阅读和理解。对于不同的逻辑处理代码，要适当对不同分块进行空换行操作

不好的体验：
image.png

8、写代码要有优化意识

参数命名合理性，选择最优的 api 进行数组操作; 拿数组元素操作需要判空，防止报错; 善用解构。

修改之前：
image.png
代码重构：
image.png

9、异步方法使用 async / await

代替 promise 方法 通过多次 .then() 解决回调嵌套，便于阅读和降低代码复杂度

image.png

10、使用项目集成的工具库

使用项目集成的 store 的相关 api 和 plugin 代替自己实现 cookie 存储

image.png

image.png
对于长字符串的拼接，使用模板字符串代替
image.png