Maison > Article > interface Web > 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.
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.
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.
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('click')" > <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>
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.
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
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)
.
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!