背景

我就職的這家公司主要是為國內(nèi)的大中小型工業(yè)企業(yè)提供無人值守方案的，每年都會(huì)做大量的項(xiàng)目，幾年下來，積累了客觀的基于項(xiàng)目的代碼庫，為了提升開發(fā)效率，沉淀解決相同業(yè)務(wù)的公共組件就勢(shì)在必行了，這也是本文的開端，也是想要實(shí)現(xiàn)的效果，本文將會(huì)以下拉選擇+彈窗選擇為例，來嘗試說明：

• What 什么是公共業(yè)務(wù)組件，和公共組件的區(qū)別是什么
• Why 為什么要沉淀公共業(yè)務(wù)組件
• How 如何沉淀一個(gè)公共業(yè)務(wù)組件

公共組件與公共業(yè)務(wù)組件的區(qū)別

在開始之前，需要講清楚一個(gè)概念，就是公共組件與公共業(yè)務(wù)組件的區(qū)別，顧名思義，公共組件就是類似ANTD、ElemntUI等等提供的組件，這些組件通常實(shí)現(xiàn)了常見的交互需求但是無關(guān)業(yè)務(wù)，公共業(yè)務(wù)組件則不同，公共業(yè)務(wù)組件是為了實(shí)現(xiàn)某類特定需求而對(duì)公共組件進(jìn)行了有機(jī)組合，接下來，我們就通過2W1H分析法，來嘗試闡述我們?nèi)绾芜M(jìn)行公共業(yè)務(wù)組件的設(shè)計(jì)和沉淀

為什么要沉淀公共業(yè)務(wù)組件

當(dāng)一個(gè)需求反復(fù)在我們的項(xiàng)目中出現(xiàn)，而不同的項(xiàng)目里交互和所要實(shí)現(xiàn)的功能基本一致，僅僅是展示和要提交的字段不一樣的時(shí)候，我們就需要考慮針對(duì)這個(gè)需求定制一個(gè)公共業(yè)務(wù)組件了，現(xiàn)在我們有一個(gè)這樣的需求，我們希望可以模糊搜索客戶檔案，物料檔案，通過下拉的方式選擇，然后也可以彈窗查看更多的列，然后勾選選擇。如果沒有一個(gè)公共的業(yè)務(wù)組件，那就意味著，我們?yōu)榱诉m配物料檔案，需要寫一套代碼，為了適配客戶檔案，又需要寫一套代碼，這么來看，沉淀一個(gè)公共的業(yè)務(wù)組件是合理的，接下來，我們就圍繞這個(gè)需求，基于ElementUI來實(shí)現(xiàn)一個(gè)公共業(yè)務(wù)組件。

樣式參考

下拉樣式

彈窗樣式

如何沉淀一個(gè)公共業(yè)務(wù)組件

共性需求提取

• 一個(gè)可以模糊搜索的下拉框
• 下拉框選項(xiàng)內(nèi)容是動(dòng)態(tài)的
• 右邊有一個(gè)可以進(jìn)行彈窗的圖標(biāo)
• 彈窗里的字段是動(dòng)態(tài)的

需求分析

• 模糊搜索的下拉框本身ElementUI就支持
• 下拉選項(xiàng)的內(nèi)容el-select提供了默認(rèn)的插槽
• 彈窗圖標(biāo)el-select沒有提供插槽，需要我們自行實(shí)現(xiàn)
• -彈窗字段動(dòng)態(tài)與下拉選項(xiàng)內(nèi)容動(dòng)態(tài)本質(zhì)上需要解決的問題是一樣的，就是我們需要一個(gè)模板

模糊搜索的下拉框

 <el-select filterable remote :remote-method="querySearch">...</el-select>

• 設(shè)計(jì)展示模板所需要的屬性

{
    fieldName: 'id', // 后臺(tái)字段名
    fieldTitle: 'id', // 展示的字段名
    isLabel: false, // 是否是選擇以后展示在下拉框里的字段
    isValue: false, // 是否是選擇以后要提交給后臺(tái)的字段,
    isQuick: false, // 是否參與輸入框的模糊查詢（這是要解決既模糊搜名稱也要模糊搜編碼的需求）
    isSelectShow: false, // 是否在下拉選項(xiàng)內(nèi)展示當(dāng)前字段
}

• 設(shè)計(jì)需要從外部傳入的屬性

props: {
  //是否禁用
 disabled: {
   type: Boolean,
   default: false
 },
 // 是否多選
 multiple: {
   type: Boolean,
   default: null
 },
 // 要解析的模板
 temp: {
 },
 // 傳入的默認(rèn)值
 defaultVal：{
   type: [String,Number,Array],
   default: null
 }
}

• 根據(jù)傳入的模板對(duì)模板進(jìn)行解析處理選項(xiàng)默認(rèn)插槽 選項(xiàng)由一個(gè)不可編輯的模板表頭循環(huán)和實(shí)際數(shù)據(jù)循環(huán)構(gòu)成。

<el-select filterable remote :remote-method="querySearch">
// 模板表頭循環(huán)
<el-option
    disabled
    label="標(biāo)題"
    value="title"
    >
    <div class="flex jus-between">
      <div
        class="p-l-5 p-r-5 w-125px text-over"
        v-for="item in selectHeader"
        :key="item.fieldName"
      >
        {{ item.fieldTitle }}
      </div>
    </div>
</el-option>
// 真正的數(shù)據(jù)循環(huán)
<el-option
    v-for="(record, index) in tableData"
    :label="record[labelKey]"
    :value="record[valueKey]"
    :key="index"
  >
    <div class="flex jus-between">
      <div
        class="p-l-5 p-r-5 w-125px text-over"
        v-for="item in selectHeader"
        :key="item.fieldName"
      >
        <span>
          {{ record[item.fieldName] }}
        </span>
      </div>
    </div>
</el-select>
computed: {
// 需要在選項(xiàng)內(nèi)展示的列
  selectHeader () {
      return this.temp.filer(v => v.isSelectShow)
  }
}

• 彈窗圖標(biāo)的實(shí)現(xiàn) 我們需要一個(gè)容器，提供定位屬性，然后將彈窗圖標(biāo)與el-select放在容器里，通過:deep 與相鄰元素選擇器，來定義我們的公共業(yè)務(wù)組件的樣式

 <div class="refer-modal-box">
    <div
      @click.stop.self="showReferModal"
      class="iconfont icon-loadmore cursor loadmore"
    />
    <el-select
    ...
 ...
 .refer-modal-box{
  padding-right: 30px;
  position: relative;
  // 這里top為1px的原因是input高度比總高度低1像素，通過定位來拉伸高度。
  .loadmore{
    width: 30px;
    color: #999;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 0;
    margin: auto;
    box-sizing: border-box;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  // 相鄰元素選擇器定義input樣式，與彈窗圖標(biāo)一起拼成一個(gè)完整邊框
  .loadmore ~ .el-select:deep(input){
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #dcdfe6;
  }
  .loadmore:hover{
    color: #2e79ef;
  }
}

對(duì)外暴露的事件

事件我們可以提供一個(gè)獲取當(dāng)前選中值的方法，在組件外通過$refs.referModal.getChecked()來獲取,$refs.組件名可以直接拿到組件的vue實(shí)例，當(dāng)然可以調(diào)用聲明在methods內(nèi)的方法

總結(jié)

• 公共業(yè)務(wù)組件沉淀的必備基礎(chǔ) 技術(shù)體系已經(jīng)完成了收斂和統(tǒng)一
• 公共業(yè)務(wù)組件沉淀的時(shí)機(jī)： 當(dāng)某個(gè)需求多次出現(xiàn)，而現(xiàn)有的基礎(chǔ)組件無法cover的時(shí)候
• 公共業(yè)務(wù)組件沉淀的標(biāo)準(zhǔn)： 滿足當(dāng)下已經(jīng)出現(xiàn)的需求點(diǎn)，留出未來可能出現(xiàn)的擴(kuò)展點(diǎn)，怎么理解這句話呢？我舉一個(gè)簡單的例子，如果一個(gè)字段他的字段類型是個(gè)布爾值，那么未來他只能是true或者是false, 假如這個(gè)字段我們定義成一個(gè)枚舉值，那未來他就是可以無限擴(kuò)展的。同理，當(dāng)我們?cè)谔幚硇枰袛嗟那闆r時(shí)，定義外部傳入的prop盡量是個(gè)枚舉值而不是布爾值，這樣我們的組件解析就存在無限擴(kuò)展的可能。
• 公共業(yè)務(wù)組件的屬性設(shè)計(jì)： 要充分評(píng)估現(xiàn)存的已經(jīng)存在于業(yè)務(wù)代碼內(nèi)的需求，并根據(jù)需求去設(shè)計(jì)我們公共業(yè)務(wù)組件的屬性
• 模板與插槽： 模板本身所起到的作用就是減少重復(fù)代碼的編寫，所以公共業(yè)務(wù)組件的模板解析放在了組件內(nèi)而不是通過插槽的方式對(duì)外暴露，當(dāng)然我們也可以預(yù)留對(duì)應(yīng)的插槽，那么公共業(yè)務(wù)組件就變成了僅有樣式的殼，真正的業(yè)務(wù)實(shí)現(xiàn)由引用這個(gè)公共業(yè)務(wù)組件的頁面決定

綜上所述，當(dāng)你的團(tuán)隊(duì)已經(jīng)完成技術(shù)體系的收斂和統(tǒng)一，也就是產(chǎn)品體驗(yàn)一致、框架一致，以及基礎(chǔ)技術(shù)棧一致時(shí)，就已經(jīng)具備了公共業(yè)務(wù)組件沉淀的必要基礎(chǔ)，經(jīng)歷了長期的小步快跑，快速迭代，按項(xiàng)目交付這樣的技術(shù)積累后，根據(jù)本文的方式去構(gòu)建公共業(yè)務(wù)組件庫，應(yīng)該會(huì)有不錯(cuò)的效果。

以上就是ToB項(xiàng)目如何沉淀業(yè)務(wù)公共組件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于ToB項(xiàng)目沉淀業(yè)務(wù)公共組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論