L'état d'esprit de la composition des composants dans Vue

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. ❤️??☠️