项目产出及思考【未完成】

项目1：数据可视化

产出1：多接口复用

背景

多个功能，本质上都是对表格数据进行筛选
和后端同学达成一致意见，这些功能只用一个接口搞定
前端这边的工作就是每个功能传输不一样的参数

初期处理

每个功能对应一个函数，触发时创造参数对象，然后调用 getTableList 方法

async functionN (){
    const params = {
        ...
    };
    const res = await getTableList(params);
    console.log(res);
}

问题出现及分析

无法记忆/修改之前的操作：

分析：这些功能都是为了筛选表格数据，用的是同一个接口，只是传递参数不一样而已

优化解决

设定一个共同的容器，往里面新增、删除、修改参数

结果

可以记忆和修改之前的筛选条件

产出2：多弹窗复用

背景弹窗种类繁多，但彼此包含相同的子模块
初期处理

虽然用的是同一个弹窗，但是内容是用 if....else 来分开内容

<template>
  <modal v-if="type==='copy'">
  </modal>
  <modal v-else-if="type==='rename'">
  </modal>
  <modal v-else-if="type==='remove'">
  </modal>
  ...
</template>

问题出现

if...else... 的数量取决于弹窗种类数量，并没有从本质上解决问题

优化解决

不要用 if...else... 来控制弹窗内容，而是用 if...else... 来控制子模块在哪种类型的弹窗中显示

结果

if...else... 的数量不是取决于弹窗种类数量，而是取决于子模块的种类数量

<template>
  <section v-if="type==='copy'">
  </section>
  <section v-else-if="type==='copy'||type==='publish'">
  </section>
  <section v-else-if="type==='remove'||type==='publish'">
  </section>
  ...
</template>