TDS前端代码优化

优化维度及参考标准

• 是否使用 ES6及以后的新语法
• 前端开发规范
• 组建使用的规范

• 代码质量

  常见问题汇总

• 创建多余变量未使用，引入公共方法未使用

• 调试代码用console.log()未删除

• 未抽离公共代码，导致代码冗余

• 页面name建议用菜单事务码，防止重复影响缓存

top-filter 初始化默认查询条件建议写法

<template>
  <div>
    <top-filter 
        ref="topFilter"
        :initialValue="initialValue"  // 设置初始化页面展示的查询条件字段的value
        :list="filterList" 
        @change="filterChangeHandle" 
        @collapseChange="collapseChangeHandle" 
    />
    ....
  </div>
</template>
<script>     
// 正确的使用方式
import { generateParams } from '@/utils';
// generateParams 调用该方法的用途是在请求接口之前处理初始化的查询条件数据
const filterInitialValue = generateParams({
  datetype: '1',
  'startTime|endTime': [getCurrentMonthFirstDay('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
  vfinishstates: ['00', '15'],
  vflag: '0'
});
export default {
  data () {
    return{
    initialValue: { ...filterInitialValue },
    fetch: {
        api: getList,
        params: {
          ...filterInitialValue, // 确保页面展示的查询条件和接口的查询入参数保持一致
          ndealerid: ''
        },
        dataKey: 'items',
      }, 
  }
}
</script>

关于try{}catch(err){}的正确用法

   // 目前项目里对try{}catch(err){}用的比较少
   // 下面这个例子是用了但用的不标准
   //  1.loading结束的时机不对，这个loading基本等于没加
   //  2.需要对catch (err) {}进行异常捕获,
   async handleSendGoods(row) {
      try {
        this.divloading = true;
        const { msg, code } = await sendGoods(row);
        this.divloading = false;
        if (code === 200) {
          notifyAction(msg, 'success');
          this.fetch.params = Object.assign({}, this.fetch.params);
        }
      } catch (err) {} 
     ......
    },
    // 请求需要用接用 try{}catch(err){}的意义
    // 1.可以保证代码报错loading状态仍然可以取消，优化用户体验。
    // 2.可以捕获更详细的异常信息
    // 修改后
    async handleSendGoods(row) {
      try {
        this.divloading = true;
        const { msg, code } = await sendGoods(row);
        if (code === 200) {
          notifyAction(msg, 'success');
          this.fetch.params = Object.assign({}, this.fetch.params);
        }
      } catch (err) {
        // 这里如果不输出如果代码报错,控制台看不到报错信息，增加处理bug的难度及时间
        console.log(err)
      } 
      // 关掉loading的正确触发时机
       this.divloading = false
    },

优化项建议

• 非响应式变量创建方式

代码参考：EP项目下 tds-vue-svc/pages/mntn/UI_SVC_20_020/index.vue

• 用ES6的模板字符串替代字符串拼接 “ `` ” ```javascript // 字符串拼接 let val.endtime = val.endtime + ‘ ‘ + ‘23:59:59’;

// 模板字符串 let val.endtime = ${val.endtime} 23:59:59;

- table组件uniqueKey建议用事务码，uniqueKey作用是保存用户对table操作，比如用户对table样式的调整，单元格的列款操作，字段的位置的切换等操作  会通过该字段作为key把用户设置保存到服务器，每次初始化会从服务器读取该用户的设置
```javascript
<template>
  <div> 
    <virtual-table
      ref="table"
      // TODO
      uniqueKey="UI_SPT_MDA_023" 
    >
    </virtual-table>
  </div>
</template>