Explication détaillée de 6 niveaux différents de concepts de réutilisabilité des composants

Cet article vous donnera une introduction détaillée aux concepts de 6 niveaux différents de réutilisabilité des composants. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Nous voulons tous écrire moins de code tout en en faisant plus. Pour y parvenir, nous construisons des composants afin qu’ils puissent être réutilisés plusieurs fois.

Certains composants ne nécessitent qu'une réutilisabilité de base, tandis que d'autres nécessitent des techniques de refactorisation plus complexes avant de pouvoir les réutiliser complètement.

Il existe 6 différents niveaux de concepts de réutilisabilité. Expérimentons-les d'abord, et nous en parlerons un par un dans les mises à jour ultérieures.

1. Modèles

Avec les modèles, nous encapsulons du code très répétitif dans son propre composant au lieu de le copier et de le coller tout autour du code.

Lorsque nous réutilisons le composant (au lieu d'utiliser le code directement), cela nous apporte deux avantages :

• Il sera beaucoup plus facile d'apporter des modifications à l'avenir, puisque nous n'avons besoin de changer qu'à un seul endroit

• nous n'avons pas besoin de nous rappeler où chaque code en double a été copié

C'est le plus La forme de réutilisation la plus basique et la plus communément évoquée.

2. Configurable

Pour certains composants, nous devons modifier leur fonctionnement en fonction des besoins, comme :

Button Composants avoir une version principale par défaut et une version avec une icône. Mais au lieu de créer un composant complètement nouveau pour chaque version, nous spécifions props pour basculer entre différents types.

L'ajout de ces props n'ajoute généralement pas beaucoup de complexité aux composants, et en même temps, cela nous donne plus de flexibilité dans l'utilisation des composants.

Remarque : Ceci est différent de l'utilisation de prop pour enregistrer un état ou des données, comme loading prop ou disabled prop.

3. Adaptabilité

Le plus gros problème du configurable est le manque de prévoyance. Nous devons anticiper les besoins futurs et les intégrer dans les composants en plaçant les prop correspondants.

Cependant, si vos composants sont adaptables suffisamment, vous n'aurez pas besoin de les modifier pour répondre aux besoins futurs.

Afin de rendre nos composants suffisamment adaptables, nous pouvons utiliser 插槽 pour y parvenir.

Par exemple, nous pouvons utiliser le emplacement par défaut au lieu du Button transmis au composant text :

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

Maintenant, nous ne sommes plus limités au transmis Le type est string ou number.

Si on veut ajouter Button sans modifier le composant loading, on peut faire ceci :

<template>
  <Button>
    <img
      v-if="loading"
      src="spinner.svg"
    />
    Click Me
  </Button>
</template>

4. Réversibilité

Dans. En plus de transmettre un bloc complet de balisage à notre composant enfant via 插槽, nous pouvons également transmettre un ensemble d'instructions sur la façon de rendre.

C’est comme si nous cuisinions à partir d’une recette au lieu de commander des plats à emporter. Lorsque nous suivons une recette, cela demande plus de travail, mais nous pouvons la réaliser à notre rythme. Nous pouvons faire des ajustements à tout moment, ou nous pouvons abandonner complètement le processus sans recette.

Nous utilisons des emplacements de portée pour ajouter plus de flexibilité à nos composants.

5. Extensions

Grâce à 适应性 et 反转性, nous disposons de certaines bases techniques nécessaires. Ces compétences peuvent maximiser la réutilisabilité des composants.

L'étape suivante consiste à appliquer ces techniques à l'ensemble du composant afin que nous puissions étendre plus facilement son comportement.

Nous utilisons 命名插槽 pour ajouter un ou plusieurs points d'extension à un composant. Juste 适应性 et 反转性 à eux seuls nous donnent une option pour étendre le comportement, tandis que le fait d'avoir plusieurs points d'extension nous donne de nombreuses options différentes.

Ici nous avons un composant Modal qui contient header, default et 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>

Il s'agit d'un exemple d'extension assez simple où nous avons déjà plusieurs options d'extension ce composant :

• Remplacez simplement default slot pour ajouter notre contenu

• est accessible par nom d'emplacement Écrasement du contenu de header

• peut écraser le contenu de footer via le nom de l'emplacement, et le contenu est toujours principalement constitué de boutons de styles différents

• et header sont davantage destinés à la personnalisation footer

6. Nesting

l'extension est l'imbrication. Nous pouvons utiliser plusieurs composants de base comme base. au sein des couches peut sembler fou au début, mais c'est très utile, en particulier dans les applications de taille moyenne à grande.

On commence par un composant de base qui a des fonctionnalités assez générales. Le composant suivant est plus spécifique, étendant le composant de base de plusieurs manières. Continuez ensuite à développer vers le haut à partir du composant de base précédent jusqu'à ce que nous ayons le composant final qui termine le travail proprement dit.

C'est similaire à la façon dont nous passons du 动物(Animal ) très général au 哺乳动物(Mammal ) plus spécifique, puis au 狗(Dog ), et finissons par 贵宾犬(Poodle). Si tout ce dont nous avons besoin, ce sont des 贵宾犬(Poodle) composants, il semble que nous perdons du temps en construisant de tels composants de base. Mais est différent dans les grandes applications. Nous devons apporter plusieurs changements sur le même concept de base pour répondre à différents besoins personnalisés. À l'heure actuelle, ce genre de groupe de baseL'idée de. les pièces imbriquées sont très importantes.

Nous pouvons étendre 犬类(Dog)组件 pour obtenir des composants 柯基犬(Corgi ) et 比格犬(Beagle). Ou étendez le composant 哺乳动物(Mammal ) pour obtenir le composant 猫(Cat ), afin de pouvoir ajouter à la fois les composants 老虎(Tiger) et 狮子(Lion).

Résumé

Ce qui précède est un aperçu des 6 niveaux de réutilisabilité. Bien sûr, il est très probable que certains contenus manquent, mais en gros, cela peut nous fournir. avec un composant d'encapsulation L'idée générale est également un très bon moyen.

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

Auteur : Michael Thiessen

Adresse de traduction : https://segmentfault.com/a/1190000039699016

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!