Introduction aux outils de réutilisation des composants de l'interface utilisateur frontale

La « paresse » est la principale force productive.

La réutilisation du code est toujours populaire parmi les programmeurs. Le but ultime de la composantisation frontale est la réutilisation. Aujourd'hui, nous allons discuter en profondeur de la manière de réaliser la réutilisation des composants de l'interface utilisateur.

Habituellement, ce que nous appelons des composants sont souvent des composants frontaux qui contiennent une logique métier. En fait, il est difficile de réutiliser de tels composants au sens large, ils peuvent tout au plus être réutilisés dans le même secteur d'activité. mais les composants de l'interface utilisateur sont différents. Sans contraintes commerciales et sans réutilisation uniquement au niveau de l'interface utilisateur, il y a beaucoup de place pour l'imagination, nous ne discutons donc ici que des composants de l'interface utilisateur.

Tout d'abord, définissons-le. Le composant UI est le fragment de code frontal d'une interface Web. Bien qu'il n'inclut pas les affaires, des effets JS de base sont disponibles, tels que la vérification de formulaire, l'effet carrousel, effet d'onglet, etc., etc., ce qui signifie que les composants de l'interface utilisateur peuvent inclure htmlcssjs. Le but de notre réutilisation n'est pas simplement de copier et coller, mais d'atteindre un certain degré de personnalisation. Par exemple, le contenu de l'interface peut être ajusté, le style d'affichage peut être ajusté et même les effets JS peuvent être définis uniquement dans cela. de quelle manière cela peut-il vraiment avoir une valeur pratique.

Réfléchissons ensuite à la manière d’atteindre les objectifs ci-dessus. La première et la plus essentielle est la fonction de personnalisation des composants. La personnalisation signifie que le code htmlcssjs d'un composant peut être modifié et que le processus d'édition doit voir ce que vous obtenez. Nous pouvons implémenter cette fonction à l'aide d'un moteur de modèle. L'idée est d'écrire tous les codes de composants dans la syntaxe du modèle, puis d'extraire des données de configuration. Le moteur de modèle utilise ces données pour analyser le modèle, puis nous obtenons le code final. que le navigateur peut exécuter. Le processus de modification de la configuration est également le processus d'édition des données de configuration.Après l'édition, le moteur de modèle est appelé en temps réel, le nouveau code est réanalysé, puis le code est mis à jour dans le navigateur en temps réel, réalisant ainsi. ce que vous voyez est ce que vous obtenez pendant le processus d'édition.

En gros, cette fonction doit implémenter les parties suivantes : acquisition du code du composant, visualisation des données de configuration, appel du moteur de modèle, édition du fichier de configuration, démonstration du composant et code html/css/js du composant. copier.

Pour aller plus loin, l'acquisition automatique du code du composant doit s'appuyer sur certaines règles d'organisation, il faut donc au préalable convenir du mode de gestion du composant. Par exemple, le composant convenu se compose d'un dossier contenant temp.html/style.css/script.js trois fichiers modèles, plus un config.json fichier de données de configuration. Les composants doivent avoir un dossier de stockage général en tant que bibliothèque de composants. Afin d'obtenir des informations sur les composants, la bibliothèque de composants a également besoin d'un fichier de répertoire qui fournit une liste de tous les composants et des informations sur chaque composant, afin que les composants puissent être obtenus via ce répertoire. Modèles, configurations et toute information dont nous avons besoin.

Sur la base de l'analyse ci-dessus, nous pouvons commencer à développer un outil de gestion des composants de l'interface utilisateur, qui peut réaliser des fonctions de gestion des composants, de prévisualisation, d'édition et de copie de code.

Si vous vous arrêtez ici, alors la valeur pratique de cet outil n'est pas très grande. En se concentrant sur la réutilisation du code front-end, les fonctions peuvent être encore étendues. Par exemple, pouvons-nous participer à la gestion des composants front-end dès la phase de conception ? Le concepteur publie et gère la bibliothèque de composants d'interface utilisateur interne de l'entreprise. Au cours de la phase de conception du projet, les composants de base peuvent être sélectionnés dans la bibliothèque de composants à ajuster et les résultats sont transmis au front-end. composants pour obtenir la fonctionnalité. Il est directement utilisé dans le code front-end du projet.

Pour rappel, la fonction qui doit être implémentée par la bibliothèque de composants est de générer un code spécial à partir du résultat de l'édition du composant. Ce code est utilisé pour restaurer le site d'édition du composant dans l'outil de gestion. , réalisant ainsi le processus de conception jusqu'au développement front-end. Le principe de mise en œuvre de cette fonction est de fusionner la configuration originale du composant avec la configuration modifiée, d'obtenir la configuration modifiée du composant, puis de l'utiliser pour le rendu et l'affichage du composant, afin que la scène de conception puisse être restaurée.

À ce stade, les fonctions dont nous avons besoin sont pratiquement complètes. À l'heure actuelle, cet outil a été développé sur la base des fonctions ci-dessus, la gestion des utilisateurs et les statistiques d'utilisation ont été ajoutées pour aider à mieux optimiser la bibliothèque de composants. . construction.

Code source : Github
Aperçu :

Si le projet vous est utile, veuillez vous rendre sur Github et le mettre en vedette. Vous êtes les bienvenus.

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!