从同事写的代码中，学习如何写代码3

首先我的理念代码优不优秀

1. 依赖关系清晰 （本次新增）
2. 直观 （让兄弟们看到就能看懂大概意思）
3. 参数精简 （精妙的构思）
4. 可拓展性（函数足够精简 功能单一）

下面这代码有问题嘛，其实是有的，因为写的时候相互的依赖关系，太耦合

<!-- flow buttons -->
<flow-op-btns ref="flowOp" v-if="flowButtons.length != 0 && accessHandle"
    :buttons="flowButtons"
    @ajaxBegin="flowAjaxBeginHandle"
    @ajaxEnd="flowAjaxEndHandle"
    @printPreview="handlePrintPreview"
    @save="save"
    @iKnow="iKnow"
    @submit="submit"
    @recall="recall"
>
  <template v-if="flowButtons.includes('printPreview')">
    <t-button
      class="border-0 iconfont cmccui-hr-xiazai"
      @click="downloadUnsignedCertificate">
      下载未签章证明
    </t-button>
    <t-button
      v-if="isShowSignedCertificate"
      class="border-0 iconfont cmccui-hr-xiazai"
      @click="downloadSignedCertificate">
      下载已签章证明
    </t-button>
  </template>
</flow-op-btns>

第一次改造

<template>
    <!-- flow buttons -->
    <flow-op-btns ref="flowOp" v-if="flowButtons.length != 0 && accessHandle"
        :buttons="flowButtons"
        @ajaxBegin="flowAjaxBeginHandle"
        @ajaxEnd="flowAjaxEndHandle"
        @printPreview="handlePrintPreview"
        @save="save"
        @iKnow="iKnow"
        @submit="submit"
        @recall="recall"
    >
      <template v-if="showSignBtnList">
        <t-button
          class="border-0 iconfont cmccui-hr-xiazai"
          @click="downloadUnsignedCertificate">
          下载未签章证明
        </t-button>
        <t-button
          v-if="isShowSignedCertificate"
          class="border-0 iconfont cmccui-hr-xiazai"
          @click="downloadSignedCertificate">
          下载已签章证明
        </t-button>
      </template>
    </flow-op-btns>
</template>

export defautl {
    computed: {
        showPrintPreview() {
            return this.userInfo.roleCodeList.includes(`previewRoleCode`)
        },
        showSignBtnList() {
            return this.showPrintPreview
        },
    }
}

我们用计算属性来将flowButtons.includes('printPreview')替换了

变了什么？

1. 原始依赖关系 roleCodeList -> showPrintPreview -> flowButtons -> showSignBtnList
2. 现在依赖关系 roleCodeList -> showPrintPreview -> showSignBtnList

我们在做什么

减少冗余的依赖关系

第二次改造

export defautl {
    computed: {
        showPrintPreview() {
            return this.userInfo.roleCodeList.includes(`previewRoleCode`)
        },
        showSignBtnList() {
            return this.userInfo.roleCodeList.includes(`signRoleCode`)
        },
    }
}

变了什么？

现在依赖关系 roleCodeList -> showSignBtnList 至此依赖关系十分清晰

对我有什么用？

1. 代码中很多地方都有依赖关系，我们要做的就是让他足够精简
2. 下次我们考虑相互有依赖关系的时候，是不是可以用依赖关系来达到它的精简