組件設計要求

来源:https://www.cnblogs.com/fshmjl/archive/2022/05/10/16253936.html
-Advertisement-
Play Games

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


前言

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

單向數據流

  • 只通過 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。

使用依賴註入


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,非常 ...
  • OpenHarmony電話子系統為 OS 提供了基礎的無線通信能力。支持 TD-LTE/FDD-LTE/TD-SCDMA/WCDMA/EVDO/CDMA1X/GSM 等網路制式的通信模塊,能夠提供高速的無線數據傳輸、互聯網接入等業務,具備語音、簡訊、彩信、SIM 卡等功能。 ...
  • 在直播、語聊房、K 歌房場景中,為增加趣味性和互動性,玩家可以通過變聲來搞怪,通過混響烘托氣氛,通過立體聲使聲音更具立體感。ZegoExpress SDK 提供了多種預設的變聲、混響、混響回聲、立體聲效果,開發者可以靈活設置自己想要的聲音,如果需要試聽,可以啟用耳返進行測試。 ...
  • 在 OpenHarmony 生態發展過程中,涌現了大批優秀的代碼貢獻者,本專題旨在表彰貢獻、分享經驗,文中內容來自嘉賓訪談,不代表 OpenHarmony 工作委員會觀點。 ...
  • 如今,身材管理已成為人們日常生活中重點關註的內容,除了運動之外,熱量的攝入也是重中之重,想要維持理想的身體健康和體重狀態,人們需要長期測量自己每日攝入食物的體量、熱量和營養價值,這需要實踐者有極強的耐心、執行力和知識儲備,從而成為了一部分身材管理道路上的攔路虎。 因此很多運動健康類App中支持食物識 ...
  • 今天內容挺多,因為想的是必須在一天內把這個vuex完成,說實話這裡面要記得東西還是蠻多的,主要是分為原生的和簡便方法兩種都是vue官方定義的,只不過看你要用哪種,vuex感覺要是用熟練了不得了,直接可以把vue起飛了,數據到處用,那種起飛的感覺,曾經體驗過,所以這個應該還是可以多練練的。 明天進入v ...
  • 8 個你應該立即停止使用的無效 HTML 元素 HTML 規範的開發是一個漸進的過程,有時會出現問題。隨著時間的推移,許多元素和屬性被添加到 HTML 中,直到後來 Web 社區集體意識到有更好的方法時才被刪除。由於已棄用和過時的元素和屬性已經存在於網路上,因此許多現代瀏覽器繼續支持它們的使用。儘管 ...
一周排行
    -Advertisement-
    Play Games
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...