組件設計要求

来源: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
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...