詳解6個不同等級的組件可重複使用性概念

本篇文章給大家詳細介紹一下6個不同等級的元件可重複使用性概念。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

我們所有人都希望寫更少的程式碼，同時也要做更多的事情。為了實現這一點，我們建立了元件，以便可以多次重複使用它們。

有些元件只需要基本的可重複使用性，而有些則需要更複雜的重構技術，我們才能充分重複使用它。

這裡有6個不同等級的可重用性概念，大家先來體會體會，後續更新會一個一個的講。

1.模板化

透過模板化，我們將一些重複性高的程式碼包裝在自己的元件中，而不是在周圍到處複製和貼上代碼。

當我們重複使用該元件（而不是直接使用程式碼）時，它為我們帶來了兩個好處：

• 將來進行更改就會容易得多，因為我們只需要在一個地方更改

• 我們不必記住每個重複程式碼複被複製到了哪些地方

這是最基本的，也是最常被談論的可重用性形式。

2. 可配置

對於某些元件，我們需要根據需求對它們的工作方式進行修改，如:

# Button元件預設有一個主版本，也有一個帶有圖示版本。但我們沒有為每個版本建立全新的元件，而是指定 props 做到不同類型之間切換。

加入這些props通常不會為元件增加很大的複雜度，同時，又能為我們在使用元件方面帶來更多在的靈活性。

注意:這不同於使用prop來保存狀態或數據，例如loading prop 或disabled prop。

3.適應性

可配置的最大問題是缺乏遠見。我們需要預見將來的需求，並透過放置對應的 prop 將它們建構到組件中。

但是，如果你的元件具有足夠適應性，則無需更改元件即應對未來的需求。

為了讓我們的元件有足夠的適應性，我們可以使用 插槽 來實作。

例如，我們可以使用預設的插槽來取代在傳入Button元件的text ：

<!-- Button.vue -->
<template>
  <button
    class="btn btn--default"
    @click="$emit(&#39;click&#39;)"
  >
    <slot />
  </button>
</template>

現在我們不限於傳入的型別是string 還是number。

如果我們想在不修改Button 元件的情況下加入loading ，我們可以這樣做:

<template>
  <Button>
    <img src="/static/imghwm/default1.png"  data-src="spinner.svg"  class="lazy" 
      v-if="loading"
      
    />
    Click Me
  </Button>
</template>

4.反轉性

除了透過插槽傳遞完整的標記區塊給我們的子元件，我們還可以傳遞一組有關如何渲染的指令。

這就像我們根據食譜來做菜，而不是叫外送。當我們遵循食譜時，需要做更多的工作，但是我們完全可以按自己的節奏來製製作， 我們可以隨時進行調整，也可以完全放棄不按食譜的流程來。

我們使用作用域插槽來為我們的元件增加更大的靈活性。

5. 擴展

透過適應性和反轉性，我們擁有必要的一些技術基礎，這些技能可以最大限度地提高組件的可重複使用性。

下一步是將這些技術應用於整個元件，以便我們更輕鬆地擴展其行為。

我們使用命名插槽在元件中新增一個或多個擴充點。僅適應性和反轉性本身為我們提供了擴展行為的一種選擇，而擁有多個擴展點則為我們提供了許多不同的選擇。

這裡，我們有一個Modal元件，其中包含header，default和footer：

<template>
  <div class="modal">
    <slot name="header">
      <h2 id="nbsp-title-nbsp">{{ title }}</h2>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>

這是一個相當簡單的擴充範例，其中我們已經有幾個擴充該元件的選項：

• #只需覆寫default slot即可添加我們的內容

• 可以透過插槽名稱來覆蓋header 的內容

• 可以透過插槽名稱來覆蓋footer 的內容，其內容還是以不同風格按鈕為主

• #header和footer的插槽更多是用於自訂

你不必擴充此元件的行為，但也可以擴充其一部分。無論哪種方式，我們都能獲得很大的靈活性和大量的程式碼重用性。

6. 巢狀

在擴充之上更高階重複使用性就是巢狀， 我們可以多個基本元件為基礎， 一層嵌套一層，一開始可能聽起來很瘋狂，但它非常有用，特別是在大中型應用程式中。

我們從一個通過基礎元件開始，該元件的功能相當普遍。下一個元件就更加具體，以幾種方式擴展了基礎元件。然後不斷以前面基礎元件為底往上擴展，直到我們擁有完成實際工作的最終元件。

這類似我們從非常普通的動物(Animal )到更特定的哺乳動物(Mammal )，然後是狗(Dog )，最後止於貴賓犬(Poodle)的方式。如果我們需要的只是貴賓犬(Poodle)組件，看上去，我們整這麼基礎組件就是浪費時間。 但是在大型應用程式中就不一樣了，我們需要在相同的基本概念上進行多次更改，來滿足不同的個性化需求，這時這種以基礎組件嵌套的思想就很重要。

我們可以擴展犬類(Dog)組件來獲得柯基犬(Corgi )和比格犬(Beagle)組件。或擴展哺乳動物(Mammal )組件以獲得貓(Cat )組件，這樣就可以添加老虎(Tiger)和獅子(Lion) 元件。

總結

以上是6個可重用性層級一些概述，當然很有可能會錯過一些內容，但基本上是可以為我們封裝元件提供了一個大致思路，也是很不錯的方式。

原文網址：https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss

##作者：Michael# Thiessen

譯文地址：https://segmentfault.com/a/1190000039699016

更多程式相關知識，請造訪：

程式設計教學！ ！

以上是詳解6個不同等級的組件可重複使用性概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！