組件設計要求_ZenDei技術網路在線

前言在我們日常代碼開發過程中，組件的使用是必不可少的，我們也會去封裝組件。但是大家寫組件的風格各式各樣，沒有一個統一的準則。而且也沒有遵循軟體開發的原則：高內聚、低耦合；因為我是給行業提供代碼的，行業給交付提供代碼。我們要儘量去減少大家的接入成本，降低接入成本的最好方案就是我們在設計組件的時候編寫 ...

前言

在我們日常代碼開發過程中，組件的使用是必不可少的，我們也會去封裝組件。但是大家寫組件的風格各式各樣，沒有一個統一的準則。而且也沒有遵循軟體開發的原則：高內聚、低耦合；因為我是給行業提供代碼的，行業給交付提供代碼。我們要儘量去減少大家的接入成本，降低接入成本的最好方案就是我們在設計組件的時候編寫好文檔，保證職責單一，不要耦合業務，就在很多程度上降低了成本了。在我們平時開發過程中，也遇到過一些組件，一個組件的實現有上千行代碼，那種組件我是直接不想看的。所以我們在開發組件的時候如果你的代碼超過了300行，那你就需要好好思考一下，是否有需要優化的了，設計是否合理，是否有重覆的代碼可以封裝等等。

大家在看這個文檔時可以先詳細閱讀一下這個文檔

組件職責單一

比如商品列表篩選條件組件，提供篩選功能，輸出一個選擇的form提供給外部組件請求列表數據。

一個很簡單的功能，為了保證組件的功能的單一，不允許其他模塊往這個組件中新增篩選條件，如果在不修改組件的情況下可以直接使用這個組件

<template>
  <!--過濾器-->
  <el-form
    style="padding-right: 20px"
    inline
    class="goods-list-filter"
    :model="filter"
    ref="filter"
    label-position="right"
    label-width="120px"
  >
    <!-- 關鍵字搜索 -->
    <el-form-item label="商品標題：" prop="itemMainTitle">
      <el-input
        class="w220"
        placeholder="請輸入"
        size="mini"
        v-model.trim="filter.itemMainTitle"
        @input="checkFilterParam('itemMainTitle', 80)"
      />
    </el-form-item>

    <!-- barcode條形碼搜索 -->
    <el-form-item v-if="showBarcode" label="條形碼：" prop="barcode">
      <el-input
        class="w220"
        placeholder="條形碼搜索"
        prefix-icon="el-icon-search"
        size="mini"
        v-model.trim="filter.barcode"
        @input="checkFilterParam('barcode', 20)"
      />
    </el-form-item>

    <el-form-item label="商品分類：" prop="categoryId">
      <goods-category-cascader
        class="w220"
        :active-goods-type="goodsType"
        :with-all="true"
        size="mini"
        v-model="filter.categoryId"
        :reset-selecte="resetSelecte"
        @changeRestStatus="changeRestStatus"
      />
    </el-form-item>

    <el-form-item label="售賣類型：" prop="saleType">
      <el-select class="w220" v-model="filter.saleType" size="mini" placeholder="售賣類型">
        <el-option label="全部類型" :value="null"></el-option>
        <el-option label="普通售賣" :value="SaleChannel.Normal"></el-option>
        <el-option label="活動售賣" :value="SaleChannel.Activity"></el-option>
      </el-select>
    </el-form-item>

    <!-- 上下架狀態 -->
    <el-form-item v-if="showStatus" prop="itemActiveStatus" label="狀態：">
      <el-select class="w220" v-model="filter.itemActiveStatus" size="mini">
        <el-option label="全部狀態" :value="null"></el-option>
        <el-option label="啟用" :value="GoodsStatus.PullShelves"></el-option>
        <el-option label="禁用" :value="GoodsStatus.RemoveShelves"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="是否支持退款：" prop="notAllowRefund">
      <el-select class="w220" v-model="filter.notAllowRefund" size="mini" placeholder="是否支持退款">
        <el-option label="全部狀態" :value="null"></el-option>
        <el-option label="支持" :value="AllowRefund.Yes"></el-option>
        <el-option label="不支持" :value="AllowRefund.No"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item v-if="showPerformance" label="履約主體：" prop="performanceBuId">
      <slot></slot>
    </el-form-item>

    <el-button type="primary" @click="onFilter">搜索</el-button>
    <el-button v-if="!showLabel" plain @click="handleReset" style="margin-top: 2px">重置</el-button>
  </el-form>
</template>

體積要小

為了不讓組件去耦合業務，要儘可能的保證組件的純粹性，如上面講到的篩選條件組件，只需要保證輸出的篩選欄位正確性，而篩選的條件的值可以由外部組件提供（如商品分類的數據），

為什麼數據要外部傳入？

這是因為一般情況下存在的篩選條件，列表也肯定會有，而有時候後端在返回數據時只返回了id，就需要我們去通過id解析出對應的name，這就需要使用到對應的數據，這個時候就可以共用數據。

這樣也可以進一步降低耦合與體積

遵循使用習慣

很多組件都有他們的慣用方法，比如表單組件會使用 v-model 來進行綁定表單值、模態框我們會使用visible 或 show() 方法來控制顯示。

遵循這些慣用方法，可以減少開發者的心智負擔，維持介面的統一性，另外也更容易地被組合/集成(比如在 Ant-design 中 Form.Item 就依賴於這個協議)。

舉個例子，頭像選擇器：

export default {
  name: 'AvatarSelect',
  props: ['avatar'],
	methods: {
    handleSelect() {
			// ...
			this.$emit('avatar-change', value)
		}
  }
}

<avatar-select :avatar="form.avatar" @avatar-change="form.avatar = $event" />

謹防樣式污染

每個組件應該有一個命名空間。且這個命名空間最好避免和其他組件衝突。

<template>
	<div class="my-component">
    ...
  </div>
</template>

<style lang="scss">
  .my-component {
		// 下級組件樣式
	}
<style>

總是開啟 Scoped CSS. 這是一種最簡便的防止污染的方式

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

CSS 類嵌套不要超過兩級。否則從可讀性和可維護性上都會大打折扣

.foo {
  .bar {
		.baz {
		  // 幾百幾千行代碼
			}
		// 幾百幾千行代碼
	}
}

推薦使用 BEM 來作為CSS 類名。讓CSS 的語義和組件結構關聯起來。
```
.my-component {
  &__head {/*...*/}
  &__footer {/*...*/}
}
```

通過 class 或 style 來定製組件的樣式。不要使用直接給標簽加樣式

// ❌
<el-input />
<style>
  .el-input {
		// 樣式覆蓋
	}
</style>

// ✅
<el-input class="my-input" />
<style>
	.my-input {
		// 樣式覆蓋
	}
</style>

組件擴展

由於我們是基礎產品，那提供的組件也要儘量豐富，豐富並不是說要在組件中加各種判斷，而是在職責單一、體積、耦合間權衡利弊，也可以創建同類型組件，在同一個文件index.js中export

單向數據流

只通過 props 向下級傳遞狀態。不要通過 ref 這類方式，過程式地去影響下級組件的狀態。
下級組件只通過 event 向上級通信。
下級組件不准修改 props 源數據。
遵循 v-model, update:* 協議。

v-model 遵循數據不可變原則。即你不能直接修改 value，而是應該創建一個新的 value。

// 假設 value 是一個列表
handleRemove(item) {
  const idx = this.value.indexOf(item)
  if (idx !== -1) {
    const newValue = [...this.value]
		newValue.splice(idx, 1)
    this.$emit('input', newValue)
	}
}

使用 computed 來衍生數據。保持源數據的純潔。

分離業務狀態和視圖狀態。比如列表項的激活狀態就是視圖狀態，而後端返回的數據就是業務狀態。

// 推薦
<item :checked="item.id in checked" @click="checked.add(item.id)" />

// 不推薦: 直接在源數據上添加了一個欄位，污染了原有的數據。
<item :checked="item.checked" @click="item.checked = true" />

進階篇

用 JSX 賦能 Vue

Vue 本身是完全支持 JSX 渲染的，但是大部分情況我們還是習慣或者推薦使用模板。

如果你習慣了 React 的 renderProps ，覺得 Vue 的 slot 不夠用，那麼可以上 JSX。

使用依賴註入

為了更好點交流和學習，請大家在參閱博客後，留下你的疑問和寶貴意見。謝謝！！！！