本次代码评审的项目是“天天访客小程序”。评审内容是代码规范问题，没有涉及复杂逻辑。

评审总结

问题1：命名规范

事件命名：handle + 动词 + 名词
接口命名：api + 动词 + 名词

错误示范：pullVisitorMP（不明确）、handleBtnCLick（单词拼写错误）、leaveModalShow（很奇怪）、handlePic（缺少动词）
正确示范：handleJumpFaceCollect、handleClickBtn、showLeaveModal、handleUploadPic

问题2：大部分三元运算符，可以转换为逻辑表达式

  1. return item ? item.visitCount : 0  //优化之前
  3. item?.visitCount || 0   //优化之后
  1. this.showScore ? (this.showScore = false) : ''  //优化之前
  3. this.showScore && (this.showScore = false)   //优化之后

问题3：在模板做太多逻辑的判断，用:style=”[headerStyles]”

  1. :style="
  2.         !isGuide
  3.           ? $consts.get('ARRIVE_STATUS').LEAVED !== detail.arriveStatus && info
  4.             ? 'position: absolute; bottom: 96rpx;'
  5.             : 'position: absolute; bottom: -32rpx;'
  6.           : ''
  7. "

问题4：console.log没有按照规范写

规范写法：console.log(TAG_NAME,’rolecode发生改变’)

  1. roleCode(val, newVal) {
  2.       console.log('rolecode发生改变')  // 优化之前
  3.       console.log(TAG_NAME,'rolecode发生改变')  //优化之后
  4.       this.initButtons()
  5. }

问题5：计算属性

技巧：定义后不再赋值

  1. photoClarity: [
  2.         {
  3.           id: 0,
  4.           status: '人脸照片不合格，有遮挡',
  5.           color: '#E83838',
  6.           info: '人脸信息不通过,请重新上传'
  7.         },
  8.         {
  9.           id: 1,
  10.           status: '人脸模糊',
  11.           color: '#E83838',
  12.           info: '人脸信息不通过,请重新上传'
  13.         },
  14.         {
  15.           id: 2,
  16.           status: '人脸不完整',
  17.           color: '#E83838',
  18.           info: '人脸信息不通过,请重新上传'
  19.         },
  20.         {
  21.           id: 3,
  22.           status: '人脸匹配成功',
  23.           color: '#E83838',
  24.           info: '人脸信息通过,可进行绑定'
  25.         },
  26.         {
  27.           id: 4,
  28.           status: '人脸匹配成功',
  29.           color: '#01B3B7',
  30.           info: '人脸信息通过,可进行绑定'
  31.         }
  32. ],

问题6：清空默认参数、打印日志和注释的代码

默认参数应使用特殊值或在发布前清空，避免正式环境接口返回异常时导致页面上出现误导用户的错误数据

  1. item: {
  2.       require: false,
  3.       default() {
  4.         return {
  5.           name: '吴银丽',
  6.           visitType: '商务洽谈',
  7.           enterDate: '2021/4/28 10:00',
  8.           leaveDate: '2021/4/28 10:00',
  9.           auditStatus: 0
  10.         }
  11.       }
  12.     }

问题7：在循环里直接对this进行操作

不建议在循环里对this进行操作，这样每循环一次，就会引起一次数据更新，推荐做法是通过map生成数组，然后统一再concat到this数组中，也可以使用piui封装的方法groupbyForm

  1. // 优化之前
  2. groups.forEach(groupItem => {
  3.         this.groupName.push(groupItem.groupName)
  4.         this.formInfo.push(groupItem.groupData.sort((a, b) => a.sort - b.sort))
  5. })
  1. // 优化之后 数组排序
  2. const formInfo = this.$utils.common.groupbyForm(data.formInfo)
  3. this.groupName = formInfo.groupName
  4. this.formInfo = formInfo.formGroup

问题8：promise方法，没有使用async await 方式来调用

  1. 推荐使用async await 方式来调用，减少嵌套
  2. 推荐使用箭头函数，确保this作用域
    1. // 优化之前
    2. scanCode() {
    3.    // 允许从相机和相册扫码
    4.    const that = this
    5.    uni.scanCode({
    6.      success: function(res) {
    7.        const result = that.$utils.common.qrCode2Router(res.result)
    8.        if (result) {
    9.          that.$pi.navi.navigateTo(result.path, result.params)
    10.        } else {
    11.          that.$toast('无效二维码')
    12.        }
    13.      }
    14.    })
    15.  },
    1. // 优化之后
    2. async scanCode() {
    3.    let [, res] = await uni.scanCode()
    4.    if (res?.errMsg !== 'scanCode:ok') return // 非二维码
    5.    const result = this.$utils.common.qrCode2Router(res.result)
    6.    if (!result) return this.$toast('无效二维码')
    7.    this.$pi.navi.navigateTo(result.path, result.params)
    8. }

问题9：内外变量名一致

  1. // 优化之前
  2. val.forEach(item => {
  3.             item.forEach(val => {})
  4. })
  1. // 优化之后
  2. formGroup.forEach(formList => {
  3.         formList.forEach(formItem => {
  4.           form[formItem.code] = this.getFormValue(formItem)
  5.           rules[formItem.code] = this.$utils.common.getRuleItem(formItem)
  6.     })
  7. })

问题10：字符串拼接

拼接地址，推荐使用[].join(‘-‘)

  1. // 优化之前
  2. let myPosition = country + '-' + province + '-' + city + '-' + district
  1. // 优化之后
  2. let myPosition = [country, province, city, district, street, streetNum, poiName].join('-')

问题11：可以通过ref调用子组件方法

  1. // 优化之前
  2. this.refresh = false
  3.   setTimeout(() => {
  4.         this.refresh = true
  5. }, 50)
  1. // 优化之后
  2. handleDataRefresh() {
  3.       const currentList = this.$refs[this.currentItem.id]
  4.       currentList && currentList[0].refresh()
  5. }

问题12：复杂逻辑 和 数字状态判断 没有注释说明

添加注释说明，为了自己过段时间忘记逻辑，也为了看代码的人更好的理解

  1. // 优化之前
  2. if (data.faceStatus === 3 || data.faceStatus === 4) {
  3.         // 上传用户人脸照片
  4.         this.handleUploadFacePic()
  5.         return
  6. }
  1. // 优化之后
  2. //faceStatus 3 & 4 人脸信息通过,可进行绑定
  3. if (data.faceStatus === 3 || data.faceStatus === 4) {
  4.         // 上传用户人脸照片
  5.         this.handleUploadFacePic()
  6.         return
  7. }