Regardons la composition des composants. Je vais essayer de démêler le fou qui se passe dans ma tête lors de la conception de composants dans un article étape par étape où nous allons construire ensemble un composant de la barre de recherche.
Un bon composant est comme un ?, il semble que ce soit un coup ou une erreur et la plupart du temps vous allez vous mettre en colère, triste ou un mélange des deux.
Mais n'ayez crainte! Je vais essayer de démêler le fou qui se passe dans ma tête lors de la conception de composants dans un article étape par étape où nous allons construire un composant Search Bar
ensemble. Gardez à l'esprit que je supposerai que vous avez une bonne connaissance du cadre pour pouvoir suivre cet article.
Entrer dans l'état d'esprit
La composition des composants est le plus souvent un processus d'essais et d'erreurs pour trouver l'endroit idéal pour faire ou casser un morceau de code dans une maison de bonté réutilisable.
Gardez avec moi et imaginez votre manette de jeu vidéo préférée – pour moi, c'était la tri-fourche N64 de fabrication de blisters. Prêt? Imaginez que ce contrôleur représente un site Web, du code, une collection d'entrées et de sorties.
Maintenant, je vais vous demander d'y penser en termes de morceaux et de pièces. Comment le déchirerais-tu? Je peux imaginer un conteneur, le plastique contenant les boutons et les boutons eux-mêmes.
Le contrôleur lui-même n'est pas très intéressant, mais jetons un œil aux boutons uniquement. De quels types est votre contrôleur? Certains d'entre eux partagent-ils des propriétés similaires
? Qu'en est-il des fonctionnalités similaires
?
Je pourrais décrire les boutons du contrôleur N64 comme faisant partie de deux groupes – les boutons ronds comme A, B et les boutons jaunes, et ceux surélevés comme les boutons d'épaule et le déclencheur Z.
Ces deux groupes partagent un modèle commun: ils sont tous les deux des boutons et ils émettent tous deux
une pression sur un bouton lorsque je les presse que le N64 peut interpréter. Ils partagent tous la propriété
d'avoir une couleur, qui varie à chaque occurrence d'un bouton.
Je ne me soucie pas vraiment à ce stade de la façon dont
ils fonctionnent en interne. Il y a des rouages pour que le bouton rebondisse après avoir été poussé, par exemple. Mais pour créer de meilleurs composants, plus réutilisables, je veux que vous vous concentriez sur la façon dont ils communiquent avec le monde extérieur, avec d'autres composants, via les événements
et
.
Lorsque vous commencez En travaillant sur un composant, si vous vous concentrez sur ces deux aspects (également connus sous le nom d'API publique du composant), vous pouvez presque garantir que ce composant sera hautement réutilisable car il est soigneusement emballé dans une boîte noire. Personne d'autre que lui-même n'a besoin de savoir comment cela fonctionne.
Maintenant que cela est dit, déchaînons la folie. Es-tu prêt? ES-TU? ? !!!!!! 111!
Création des composants de base
L'une des choses que j'aime faire chaque fois que je commence à travailler sur un nouvel ensemble de composants est de comprendre quelle est leur forme la plus élémentaire et comment peut capturer cela dans un composant. En pensant à une barre de recherche dans un site Web, je peux penser à deux éléments principaux – l'entrée
et un bouton de recherche
.
Commençons par créer un BaseButton
composant. Ce sera super simple, comme devrait l'être un bon composant de base
mais il ouvrira la voie à des composants plus spécifiques à l'avenir.
Le composant BaseButton
expose un emplacement par défaut unique et utilise v-on = "$ listeners"
pour s'assurer que tous les écouteurs d'événement ajoutés à l'instance sont définis sur l'élément bouton
. Je suis allé de l'avant et j'ai ajouté quelques classes Tailwind pour le rendre joli; nous y reviendrons plus tard.
Arrêtons-nous une seconde pour parler des slots
. Dans leur forme la plus simple, les emplacements
sont un outil très puissant. Ils nous permettent de mettre de côté une partie d'un composant qui sera défini par celui qui l'implémentera – vous pouvez le considérer comme un type d'espace réservé pour votre code.
Dans cet exemple particulier avec le bouton
, ce qui se passera, c'est que tout ce qui est défini dans la partie intérieure de l'élément
sera rendu à l'intérieur de l'espace réservé. Prenons l'exemple suivant:
Louez le magique ?
Recherche
?
Les trois cas ci-dessus sont du code tout à fait valide. Le
à l'intérieur de BaseButton
se chargera de rendre tout ce que nous plaçons entre les balises dans cet espace réservé. C'est un outil très puissant qui nous permet de rendre les composants super flexibles, et c'est un incontournable pour chaque boîte à outils de développeur Vue.
Semblable au BaseButton
nous allons construire un BaseInput
composant qui sera la forme la plus simple d'une entrée que nous pouvons rassembler pour cette application.
Maintenant, vous pourriez faire valoir, sur la base de ce que nous avons dit plus tôt, que ces composants sont trop spécifiques, qu'ils définissent un très ensemble strict de classes et de couleurs et qu'elles pourraient être rendues encore plus basiques en supprimant les classes de couleurs. Si vous l'avez remarqué, félicitations – vous commencez à vous mettre dans le bon état d'esprit.
La flexibilité ou non d'un composant dans le contexte de votre application dépend fortement des besoins de votre application. En tant que développeur unique et responsable de cet exemple, je sais que nous n'utiliserons pas beaucoup de types de boutons différents, je peux donc ignorer cela et simplement utiliser le composant tel quel. Mais si nous voulions rendre le bouton plus dynamique, par exemple, nous pourrions facilement créer une propriété color
qui modifie dynamiquement les classes selon les besoins de l'utilisateur.
Chargement automatique de nos composants de base
Vous vous demandez peut-être à ce stade pourquoi je suis si obstiné à tout nommer jusqu'à présent avec un préfixe de Base
. Vous êtes-vous déjà retrouvé à un point de votre application où vous avez un ensemble de composants que vous continuez à utiliser encore et encore? Et devoir les importer encore et encore?
Je sais à quoi vous pensez: Marina, je peux importer
tous ces éléments en tant que composants globaux et en finir avec ça. Mais que se passerait-il s'il y avait une manière plus agréable et plus propre?
Allez dans votre dossier composants
et créez un fichier globals.js
. A l'intérieur de celui-ci, placez le code suivant.
import Vue de 'vue'
const requireComponent = require.context (
'.', // Le chemin relatif du dossier des composants
true, // Rechercher ou non dans les sous-dossiers
/Base}19459058 diplomatiquew+.(vue|js)$/ // L'expression régulière utilisée pour faire correspondre les noms de fichiers des composants de base
)
requireComponent.keys (). forEach (fileName => {
const componentConfig = requireComponent (fileName)
const componentName = fileName
.Divisé('/')
.pop () // Récupère la dernière partie - nom du fichier
.replace (/ . w + $ /, '') // Supprime .vue
// Enregistrer le composant globalement
Vue.component (
Nom du composant,
// Recherchez les options des composants sur `.default`, qui
// existe si le composant a été exporté avec `export default`,
// sinon retomber à la racine du module.
componentConfig.default || componentConfig
)
})
Ce que cela va faire est de rechercher récursivement et d'importer automatiquement
tous les composants qui ont le préfixe Base
à partir de votre dossier de composants. Vous pouvez aller de l'avant dans main.js
et import '@ / components / globals.js
– de cette façon, vous n'aurez plus jamais à vous soucier de les ajouter dans un long, difficile à -lire la liste des composants globaux.
Cette astuce (sans quelques simplifications que j'ai faites) que j'ai reprise de Chris Fritz Vue Enterprise Boilerplate . Si vous en avez l'occasion, jetez-y un coup d'œil!
Assembler la barre de recherche
Maintenant que nous avons quelques composants de base, assembler une barre de recherche
devrait être une tâche assez simple. Réfléchissons à cela en termes de composant. Que voulons-nous que l'utilisateur ait à disposition lorsqu'il utilise un dans son code?
Je sais que je veux qu'il puisse écouter les événements d'entrée
. Je veux également qu'ils puissent définir un délai pour que l'événement d'entrée
soit déclenché une fois que l'utilisateur a arrêté de taper. Cela a du sens dans un SearchBar
parce que nous ne voulons pas qu'il soit appelé après chaque frappe!
Commençons par un composant simple, et nous pourrons ajouter ces fonctionnalités plus tard. Créez un fichier SearchBar.vue
pour notre nouveau composant.
Maintenant que nous avons la base de notre composant, nous pouvons commencer à réfléchir à la façon dont nous voulons que ce composant communique les événements d'entrée
au monde extérieur. Je veux seulement émettre
l'entrée lorsque le bouton est cliqué, nous devons donc écouter cet événement.
Amélioration de la barre de recherche
Et si nous voulions pousser ce composant plus loin? Je veux pouvoir l'utiliser de manière à ce que le bouton de recherche ne soit pas présent. Je veux recevoir les événements d'entrée directement lorsque l'utilisateur tape, mais seulement après un délai.
Nous avons deux options ici: continuer à agrandir ce composant (ce qui peut devenir problématique à mesure que de plus en plus de logique s'ajoute), ou créer un nouveau composant qui utilise celui-ci avec quelques modifications. Pour le plaisir, allons-y avec la porte numéro 2.
Tout d'abord, nous devons créer un nouveau composant AutomaticSearch
(épargnez-moi, j'ai du mal à nommer comme tous les autres développeurs ? – soyez simplement heureux de ne pas tout est nommé d'après les noms).
Pas très impressionnant jusqu'à présent. Ce que je veux faire ensuite, c'est modifier SearchBar
afin que je puisse masquer le bouton de recherche avec un accessoire, et pour qu'il émette
des événements de frappe que je peux capturer pour ce nouveau composant. Notez qu'aucune de ces modifications ne modifiera mon API de composant actuelle, elles ne feront que l'améliorer.
Notez que nous avons ajouté la propriété hideButton
qui est un booléen
nous pouvons basculer sur notre composant pour supprimer complètement le bouton de recherche, comme le montre le v-if
déclaration. Nous avons également ajouté un écouteur d'événements @input
au BaseInput
et supprimé le v-model
car nous voulons écouter manuellement ces événements, stocker la valeur dans le fichier indiquer rechercher
comme auparavant, mais aussi $ émettre
un nouvel événement searchChange
.
Si l'utilisateur du composant ne se soucie pas de cet événement, il peut l'ignorer en toute sécurité, mais nous pouvons l'utiliser pour notre composant AutomaticSearch
. Jetons un coup d'œil à celui-ci maintenant.
Ce composant implémente tout d'abord un SearchBar
comme élément racine, et applique avec force le prop hideButton
à true pour que nous puissions nous débarrasser du bouton embêtant. Nous allons également écouter l'événement @searchChange
que nous venons de créer.
Lorsque l'événement searchChange
se produit, nous allons vérifier si l'événement inputEventDelay
a été définie sur une valeur supérieure à 0. Si ce n'est pas le cas, nous allons simplement émettre
l'entrée
telle quelle.
Si la valeur, cependant, est supérieur à 0, nous allons effacer tous les anciens délais d'attente qui ont pu être démarrés par l'utilisateur en tapant dans la zone, puis créer un nouveau délai d'attente à sa place. Une fois cette temporisation terminée, nous déclenchons enfin l'événement input
.
Ce type d'approche est très bon lorsque vous avez un service de saisie semi-automatique, par exemple, et que vous allez appeler une API à chaque fois que l'utilisateur a fini de taper quelque chose dans la case MAIS vous voulez lui en donner place entre les frappes afin de ne pas inonder votre API d'un grand nombre de requêtes.
Je me suis installé avec une jolie petite aire de jeux pour tester le comportement de ces deux composants en ajoutant le code suivant à mon App.vue
.
Si vous voulez le code complet de cette folie, vous pouvez le trouver ici: https://gitlab.com/marinamosti/mindset-component-composition .
Wrapping Up
Le Le processus de création de nouveaux composants, la planification et les essais et erreurs, la rupture et la construction, et le sentiment gratifiant de celui-ci qui n'explose pas comme une bombe gaufrée lorsque vous avez terminé est l'une de mes parties préférées en tant que développeur. J'espère que vous avez apprécié ce petit voyage à travers le pays des fous qui est ma tête et que vous en avez retiré un petit quelque chose à mettre en œuvre dans vos propres projets.
Comme toujours, merci d'avoir lu et de partager avec moi votre propre fou sur Twitter : @marinamosti .
P.S. Saluez tous l'avocat magique! ?
P.P.S. ❤️??☠️
Source link