命名规范

  1. 方法：handle + 动词 + 名词
  2. 接口： api + 动词 + 名词
  3. 是否/显示： is + 名词、show + 名词
  4. 变量名：尽量通俗易懂，避免出现错误单词

条件或三元运算符，可以转换为逻辑表达式

第一种||：item ? item.visitCount : 0 ⇿ item?.visitCount || 0 ⇿ item?.visitCount ?? 0
补充：?. 可选链没有值返回undefined。?? 左边为undefined或null执行右边，左边不为undefined或null执行左边

第二种&&：this.showScore ? (this.showScore =false) : ‘’ ⇿ this.showScore && (this.showScore = false)

第三种true/false： ⇿ this.isSmoke = data.isSmoke === 1

其他

  1. 最好用piui提供的样式和组件，不建议在模板做太多逻辑的判断，用:style=”[headerStyles]”
  2. 打印日志： console.log(TAG_NAME, xxx)
  3. 不变的数据定义计算属性
  4. 清空没用的代码、打印日志和默认参数
  5. 不建议在循环里直接对this进行操作，推荐通过map生成数组，然后统一再concat到this数组中
  6. promise方法，统一推荐使用async await 方式来调用，减少嵌套
  7. 不建议使用that，推荐使用箭头函数，确保this作用域
  8. 内外变量名避免一致
  9. 字符串拼接，推荐使用[].join(‘-‘)
  10. 可以通过ref调用子组件方法
  11. 复杂逻辑 和 数字状态判断需要注释说明
  12. lodash 分开引用

针对这段代码提出优化方案

image.png
方案一：按审核状态排序

  1. const sortMap = {0: 0, 2: 2}
  2. return this.records.map(i => {
  3.    i.sort = sortMap[i.auditStatus] || 1
  4.   return i
  5. }).sort((a, b) => return a.sort - b.sort )

方案二：过滤
image.png