Detaillierte Erläuterung von 6 verschiedenen Ebenen von Konzepten zur Wiederverwendbarkeit von Komponenten

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Konzepte von 6 verschiedenen Ebenen der Wiederverwendbarkeit von Komponenten. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Wir alle möchten weniger Code schreiben und gleichzeitig mehr tun. Um dies zu erreichen, bauen wir Komponenten so, dass sie mehrfach wiederverwendet werden können.

Einige Komponenten erfordern nur eine grundlegende Wiederverwendbarkeit, während andere komplexere Refactoring-Techniken erfordern, bevor wir sie vollständig wiederverwenden können.

Hier sind 6 verschiedene Stufen von Wiederverwendbarkeitskonzepten. Lassen Sie uns diese zunächst ausprobieren und in den folgenden Updates einzeln darüber sprechen. 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
      v-if="loading"
      src="spinner.svg"
    />
    Click Me
  </Button>
</template>

4.反转性

除了通过插槽传递完整的标记块给我们的子组件，我们还可以传递一组有关如何渲染的指令。

这就像我们根据食谱来做菜，而不是叫外卖。 当我们遵循食谱时，需要做更多的工作，但是我们完全可以按自己的节奏来制制作， 我们可以随时进行调整，也可以完全放弃不按食谱的流程来。

我们使用作用域插槽来为我们的组件增加更大的灵活性。

5. 扩展

通过适应性和反转性，我们拥有必要的一些技术基础，这些技能可以最大限度地提高组件的可重用性。

下一步是将这些技术应用于整个组件，以便我们更轻松地扩展其行为。

我们使用命名插槽在组件中添加一个或多个扩展点。 仅适应性和反转性本身给我们提供了扩展行为的一种选择，而拥有多个扩展点则为我们提供了许多不同的选择。

这里，我们有一个Modal组件，其中包含header，default和footer：

<template>
  <div class="modal">
    <slot name="header">
      <h2>{{ 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

1. Templating

Mit Templating verpacken wir einen sich stark wiederholenden Code in einer eigenen Komponente, anstatt Code überall zu kopieren und einzufügen.

Wenn wir diese Komponente wiederverwenden (anstatt Code direkt zu verwenden), bringt uns das zwei Vorteile:

Es erleichtert zukünftige Änderungen. Es wird viel sein einfacher, weil wir ihn nur an einer Stelle ändern müssen

Wir müssen uns nicht merken, wo jeder doppelte Code kopiert wurde

🎜🎜🎜Dies ist die grundlegendste und am häufigsten erwähnte sexuelle Form der Wiederverwendbarkeit. 🎜🎜🎜2. Konfigurierbar🎜🎜🎜Für einige Komponenten müssen wir ihre Funktionsweise je nach Bedarf ändern, wie zum Beispiel: 🎜🎜Button-Komponente hat standardmäßig eine Hauptversion und auch eine Hauptversion mit Icon-Version. Aber anstatt für jede Version eine völlig neue Komponente zu erstellen, geben wir props an, um zwischen verschiedenen Typen zu wechseln. 🎜🎜Das Hinzufügen dieser props erhöht normalerweise nicht die Komplexität der Komponente und gibt uns gleichzeitig mehr Flexibilität bei der Verwendung der Komponente. 🎜🎜Hinweis: Dies unterscheidet sich von der Verwendung von prop zum Speichern von Status oder Daten, wie z. B. der loading-Requisite oder der disabled-Requisite. 🎜🎜🎜 3. Anpassungsfähigkeit 🎜🎜🎜🎜Das größte Problem bei konfigurierbaren 🎜 ist mangelnde Weitsicht. Wir müssen zukünftige Anforderungen antizipieren und sie in die Komponente integrieren, indem wir das entsprechende prop platzieren. 🎜🎜Wenn Ihre Komponenten jedoch 🎜anpassungsfähig genug🎜 sind, müssen Sie sie nicht ändern, um zukünftige Anforderungen zu erfüllen. 🎜🎜Um unsere Komponenten 🎜anpassbar🎜 zu machen, können wir Slots verwenden, um dies zu erreichen. 🎜🎜Zum Beispiel können wir den 🎜Standard-Slot🎜 verwenden, um den Text zu ersetzen, der an die Button-Komponente übergeben wurde: 🎜rrreee🎜Jetzt sind wir nicht auf den übergebenen Typ beschränkt in string oder number. 🎜🎜Wenn wir loading hinzufügen möchten, ohne die Button-Komponente zu ändern, können wir Folgendes tun:🎜rrreee🎜🎜4. Reversibilität🎜🎜🎜Zusätzlich zur Übergabe von Slot Übergibt den gesamten Markup-Block an unsere untergeordnete Komponente. Wir können auch eine Reihe von Anweisungen zum Rendern übergeben. 🎜🎜Es ist, als würden wir nach einem Rezept kochen, anstatt etwas zum Mitnehmen zu bestellen. Wenn wir einem Rezept folgen, erfordert das mehr Arbeit, aber wir können es in unserem eigenen Tempo umsetzen. Wir können jederzeit Anpassungen vornehmen oder den Nicht-Rezept-Prozess ganz aufgeben. 🎜🎜Wir verwenden 🎜Scope-Slots🎜, um unseren Komponenten mehr Flexibilität zu verleihen. 🎜🎜🎜5. Erweiterung🎜🎜🎜Durch Anpassungsfähigkeit und Reversibilität verfügen wir über einige notwendige technische Grundlagen, um die Wiederverwendbarkeit von Komponenten zu maximieren. 🎜🎜Der nächste Schritt besteht darin, diese Techniken auf die gesamte Komponente anzuwenden, damit wir ihr Verhalten einfacher erweitern können. 🎜🎜Wir verwenden benannte Slots, um der Komponente einen oder mehrere Erweiterungspunkte hinzuzufügen. Nur Adaptability und Reversibility allein bieten uns eine Option zur Verhaltenserweiterung, während mehrere Erweiterungspunkte uns viele verschiedene Optionen bieten. 🎜🎜Hier haben wir eine Modal-Komponente, die header, default und footer enthält: 🎜rrreee🎜This ist ein recht einfaches Erweiterungsbeispiel, bei dem wir bereits einige Optionen zum Erweitern dieser Komponente haben: 🎜

• 🎜Einfach den default slots code> überschreiben können Fügen Sie unseren Inhalt hinzu. Der Inhalt basiert hauptsächlich auf Schaltflächen verschiedener Stile. Die Slots <li>🎜<code>header und footer dienen eher der Anpassung. 🎜🎜🎜 🎜Sie müssen die nicht erweitern Verhalten dieser Komponente, Sie können jedoch Teile davon erweitern. So oder so gewinnen wir viel Flexibilität und viel Wiederverwendbarkeit des Codes. 🎜🎜🎜6. Die erweiterte Wiederverwendbarkeit zusätzlich zu 🎜Erweiterungen ist die Verschachtelung mehrerer Grundkomponenten, die auf den ersten Blick verrückt klingt, aber vor allem sehr nützlich ist in mittleren bis großen Anwendungen. 🎜

  Wir beginnen mit einer Basiskomponente, die über eine ziemlich allgemeine Funktionalität verfügt. Die nächste Komponente ist spezifischer und erweitert die Basiskomponente auf verschiedene Weise. Erweitern Sie dann mit den vorherigen Grundkomponenten weiter nach oben, bis wir die letzte Komponente haben, die die eigentliche Arbeit abschließt.

  Dies ähnelt der Art und Weise, wie wir vom sehr häufigen Animal zum spezifischeren Säugetier und dann zu Dog übergehen und schließlich im ... enden Weg von Pudel. Wenn alles, was wir brauchen, die Poodle-Komponente ist, scheinen unsere 动物(Animal )到更特定的哺乳动物(Mammal )，然后是狗(Dog )，最后止于贵宾犬(Poodle)的方式。 如果我们需要的只是贵宾犬(Poodle)组件，看上去，我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了，我们需要在相同的基本概念上进行多次更改，来满足不同的个性化需求，这时这种以基础组件嵌套的思想就很重要。

  我们可以扩展犬类(Dog)组件来获得柯基犬(Corgi )和比格犬(Beagle)组件。或者扩展哺乳动物(Mammal )组件以获得猫(Cat )组件，这样就可以添加老虎(Tiger)和狮子(Lion)Grundkomponenten

  Zeitverschwendung zu sein.

  Bei großen Anwendungen ist es jedoch anders. Wir müssen mehrere Änderungen am gleichen Grundkonzept vornehmen, um unterschiedliche personalisierte Anforderungen zu erfüllen. Wir können die Dog-Komponente erweitern, um die Corgi- und Beagle-Komponenten zu erhalten. Oder erweitern Sie die Komponente Mammal, um die Komponente Cat zu erhalten, sodass Sie die Komponenten Tiger und Lion (Lion) hinzufügen können .

  Zusammenfassung

  Das Obige ist eine Übersicht über die 6 Wiederverwendbarkeitsstufen. Natürlich kann es sein, dass einige Inhalte übersehen werden, aber es liefert uns grundsätzlich eine allgemeine Idee, Komponenten zu verpacken, was auch eine sehr gute Möglichkeit ist.

  Originaladresse: https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss

  Autor: Michael Thiessen

  Übersetzungsadresse: https:// segmentfault.com/a/1190000039699016

  🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von 6 verschiedenen Ebenen von Konzepten zur Wiederverwendbarkeit von Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!