Un cas d'utilisation pratique pour les fonctions de rendu VUE: construire une grille de typographie du système de conception

Cet article détaille la création d'une grille de typographie du système de conception à l'aide de fonctions Vue Render. Une démo en direct et le code source sont fournis. Les fonctions de rendu offrent un contrôle supérieur sur la génération de HTML par rapport aux modèles Vue standard, mais des exemples pratiques au-delà des tutoriels sont rares. Ce projet vise à combler cet écart.

Les fonctions de rendu, bien que puissantes, peuvent se sentir contre-intuitives dans le cadre axé sur la simplicité de Vue. Leur mélange de HTML et JavaScript peut conduire à un code moins lisible. Par exemple, rendant un simple<div> avec un<code><p> nécessite une approche plus verbeuse avec <code>createElement .

Le défi consistait à construire une grille de typographie pour un système de conception, selon la maquette d'un concepteur, à l'aide de VuePress. Le CSS comprenait des classes séparées pour le poids et la taille de la police, ciblant les titres via des noms de balises et d'autres éléments via des noms de classe.

Plusieurs approches ont été prises en compte:

• Codage rigide: rejeté en raison de la répétition, du manque de séparation des données et de la difficulté à gérer les mises à jour.
• Modèles Vue traditionnels: jugés inadaptés en raison des énoncés v-if et v-else étendus nécessaires pour gérer le rendu conditionnel de diverses options de typographie et leurs variations.

Les fonctions de rendu sont devenues la solution optimale en raison de leur capacité à créer dynamiquement des nœuds enfants en fonction des critères prédéfinis.

Modèle de données: les données de typographie ont été stockées dans un fichier JSON distinct pour une modification facile. Chaque objet JSON représente une ligne, contenant des informations telles que le contenu texte, la balise d'élément racine ( h1 , p , etc.), les propriétés de style et les exemples d'utilisation. Arrays dans la structure JSON Les variations de gestion du style et des exemples d'utilisation multiples.

L'implémentation impliquait un composant parent ( TypographyTable.vue ) et un composant fonctionnel enfant ( TypographyRow.vue ). Le composant parent itère via les données JSON, passant chaque ligne au composant enfant. Le composant enfant utilise des fonctions de rendu pour générer le HTML.

Les fonctions de transformation des données étaient cruciales. Ces fonctions ont converti les données JSON brutes en un format structuré adapté à la fonction createElement . Cela impliquait de créer une structure en forme d'arbre pour chaque cellule, de gérer les variations du style et la présence de nœuds enfants. Les fonctions d'assistance ont analysé les noms de classe et généré des balises et classes HTML appropriées.

La fonction de rendu dans TypographyRow.vue utilise ces structures de données transformées pour générer le HTML pour chaque ligne. Une structure de fonction imbriquée améliore la lisibilité et la maintenabilité.

Bien que cette approche puisse sembler trop complexe pour une tâche relativement simple, elle priorise la séparation des données et simplifie les modifications futures. Les modifications de la typographie peuvent être apportées en mettant à jour le fichier JSON sans modifier les composants Vue. Le compromis entre la complexité initiale et la maintenabilité à long terme est discuté.