Auteur : JD Logistics Ning Chong
1. Introduction
Que sont les micro-interfaces ?
Les micro-interfaces sont des microservices qui résident dans le navigateur.
Cet article analyse principalement la bibliothèque de fonctions single-spa-vue de la sous-application de chargement de l'application de base single-spa du micro-front-end framework, et utilise l'analyse de dimension de code pour permettre à chacun de comprendre ce qui est fait lorsque single-spa charge le sous-application. Comment maintenir l'état des sous-applications en optimisant la bibliothèque de fonctions mono-spa-vue.
Étant donné que l'analyse est effectuée dans la dimension du code, les lecteurs doivent avoir une certaine compréhension du spa unique, et l'effet de lecture sera meilleur.
2 Le processus de chargement des sous-applications d'un seul spa
La configuration de sous-application de chargement configurée dans l'application de base insérera les sous-applications chunk-vendors.js et app.js dans la page de la méthode app de configuration de l'objet de sous-application, et exécutera les deux sous-applications chunk- vendors.js et app.js Le js dont dépend l'application.
Une fois la méthode app exécutée, le js dont dépend la sous-application est inséré dans la structure dom après la page.
À partir du processus d'exécution de la méthode app ci-dessus, nous pouvons voir que l'application de base charge des sous-applications, ce qui est similaire à la façon dont le framework vue charge les ressources js après l'empaquetage. Alors pourquoi vous avez seulement besoin de charger les app.js et chunk-vendors.js de la sous-application pour afficher la sous-application sur la page. Voyons maintenant comment la méthode main.js du fichier d'entrée de la sous-application est configurée.
3 Configuration dans le main.js de la sous-application
Dans le main.js de la sous-application, on peut voir que la configuration classique 1 est remplacée par le format de la configuration 2.
Dans la configuration 2, nous passerons la configuration de vue actuelle à la bibliothèque de fonctions single-spa-vue. Y compris el, méthode de rendu, objet Vue. Grâce à l'emballage de singleSpaVue, renvoyez les méthodes de démarrage, de montage et de démontage du cycle de vie du spa unique.
- bootstrap : fonction bootstrap, qui est appelée avant que le contenu de l'application ne soit monté sur la page pour la première fois, et ne sera exécutée qu'une seule fois.
- mount : fonction de montage, qui sera exécutée à chaque fois que la sous-application sera montée.
- unmount : fonction de démontage, qui sera exécutée à chaque désinstallation de la sous-application.
C'est-à-dire que lorsque l'application de base charge des sous-applications, elle utilise la fonction single-spa-vue pour générer chaque cycle de vie de single-spa, qui est appelée par l'application de base lors du chargement des sous-applications.
Voyons comment single-spa-vue génère diverses fonctions de cycle de vie.
4 structure de code source à vue unique sur le spa
La bibliothèque de fonctions mono-spa-vue peut nous aider à générer le cycle de vie du chargement des sous-applications. Vous pouvez télécharger le code source de la bibliothèque de fonctions single-spa-vue via le lien suivant : adresse GIT single-spa-vue.
Le code source de single-spa-vue est très simple, il n'y a que quelques fonctions qui génèrent le cycle de vie de single-spa.
- méthode single-spa-vue : la seule méthode que la bibliothèque de fonctions single-spa-vue fournit à des services externes pour recevoir des éléments de configuration et renvoyer un objet contenant chaque cycle de vie de spa unique.
- D'autres méthodes d'amorçage, de montage, de mise à jour et de démontage d'un seul spa-vue sont des méthodes utilisées pour générer des fonctions de cycle de vie correspondantes à un seul spa.
Introduisons en détail la fonction et la mise en œuvre de ces méthodes.
5 analyse du code source d'une vue unique sur le spa
La méthode singleSpaVue fournie dans single-spa-vue recevra les informations de configuration userOpts, et les informations de configuration seront fusionnées avec l'élément de configuration par défaut defaultOpts avant le traitement ultérieur.
5.1 Elément de configuration defaultOpts
Pour les éléments de configuration par défaut, il y a les éléments suivants. Ici, nous n'introduisons que les éléments requis, appOptions, Vue/createApp. Le modèle qu'il contient n'est pas utilisé dans single-spa-vue, mais il est utilisé dans single-spa-html.
// 默认配置项列表
const defaultOpts = {
// required opts
appOptions: null,
template: null,
// sometimes require opts
Vue: null,
createApp: null,
handleInstance: null
}1) Introduction aux éléments de configuration appOptions
- appOptions : les éléments de configuration de l'application seront passés en tant que paramètres à la méthode Vue lors de l'initialisation de l'instance de Vue. Les éléments de configuration dans appOptions seront présentés en détail ci-dessous.
- el : le dom de base que la sous-application doit monter, c'est-à-dire le dom que vue doit monter.
- render/template : élément de configuration du rendu/modèle de vue.
- data : l'objet de paramètre initialisé sera directement monté sur l'instance de vue lorsque la fonction de montage mount sera exécutée.
2) Introduction aux éléments de configuration de Vue/createApp
L'élément de configuration Vue/createApp est utilisé pour générer une instance Vue, et la bibliothèque de fonctions mono-spa-vue peut générer une instance Vue dans la méthode mount via l'objet Vue entrant. Vous pouvez également transmettre la méthode createApp et la sous-application renvoie l'instance de Vue dans la méthode createApp.
Nous verrons ci-dessous le rôle de ces éléments de configuration dans la méthode de génération du cycle de vie
5.2 Mode d'inscription : singleSpaVue
La méthode singleSpaVue effectuera d'abord les contrôles de validité suivants sur les paramètres d'entrée, et les contrôles spécifiques incluent les quatre éléments suivants.
- Indique si l'élément de configuration userOpts est un objet.
- Si la configuration Vue/createApp utilisée pour créer une instance de vue existe.
- Si l'élément de configuration appOptions utilisé pour générer l'instance de vue existe.
- Si le dom monté par l'instance de vue est correct, vérifiez la validité de appOptions.el.
Une fois le contrôle de validité réussi, les méthodes d'amorçage, de montage, de démontage et de mise à jour seront appelées pour générer respectivement les fonctions de cycle de vie de la sous-application de chargement de spa unique.
Ce qui suit décrit en détail comment chaque fonction de cycle de vie est générée.
5.3 Fonction bootstrap : bootstrap
La fonction bootstrap bootstrap est appelée lorsque le contenu de l'application est monté pour la première fois sur la page.
La fonction d'amorçage déterminera d'abord si loadRootComponent existe dans l'élément de configuration. L'auteur comprend que l'élément de configuration loadRootComponent peut être utilisé pour charger l'application parente ou d'autres ressources dépendantes dont dépend la sous-application actuelle.
Par exemple, la page A dépend du composant B. Lors du chargement de la page A, vous pouvez charger les ressources statiques du composant B dans la méthode loadRootComponent et les afficher sur la page. La page A peut utiliser directement certaines ressources ou dom fournis par le composant B.
Si loadRootComponent n'est pas configuré, il reviendra directement sans aucun traitement.
5.4 Cycle de vie du montage de la sous-application : montage
Lorsque la sous-application est montée sur la page à chaque fois, single-spa exécute la fonction de cycle de vie de montage, single-spa-vue est utilisé dans la fonction de montage pour initialiser l'instance vue de la sous-application et monter l'instance à la page. La fonction de montage recevra trois paramètres, qui sont les options de paramètres transmises par singleSpaVue, la liste des instances de sous-application actuellement montées globalement par single-spa-vue mountInstances et les accessoires d'instance de spa unique
de la sous-application actuelle. enregistré dans l'application de base
Entrez les données reçues, seul l'attribut name de props est utilisé ici pour identifier la sous-application actuellement montée.
Dans la méthode de montage, les choses suivantes sont principalement effectuées
1) Formatez l'élément de configuration de l'application appOptions
La méthode de montage utilisera la méthode resolveAppOptions pour formater l'élément de configuration appOptions de l'application.
Dans la méthode resolveAppOptions, si appOptions est une méthode, exécutez la méthode et transmettez le paramètre props transmis par l'application de base via le paramètre customProps.
La sous-application peut obtenir les paramètres passés par l'application mère dans la méthode appOptions, et effectuer différents traitements selon le statut de l'application mère.
2) Initialisez l'objet DOM que la sous-application doit monter.
Il existe de nombreuses configurations et méthodes pour initialiser dom, et el sera obtenu à partir de nombreux éléments de configuration. Le code est relativement simple, je n'entrerai donc pas dans les détails ici. Seule la priorité de la valeur est répertoriée pour votre référence.
appOptions.el > props.domElement > props.name
Une fois le nœud dom formaté, ce qui suit commence à monter la page sur le dom.
3) Créez un exemple de vue et montez-le sur la page
Avant de charger la page, il y aura un élément de configuration : replaceMode, l'élément de configuration replaceMode est utilisé pour identifier si le contenu sous le nœud el doit être remplacé. Si le replaceMode par défaut est false, une div vide avec la classe single-spa-container sera créée sous le nœud el pour enregistrer la sous-application.
Prenons le code de la démo comme exemple :
Lorsque le replaceMode par défaut est false, le contenu de la base et le contenu de vue1 coexisteront. Comme indiqué ci-dessous:
Si vous changez replaceMode en true, vous constaterez que le contenu de la base sera écrasé par le contenu de vue1.
Comme indiqué ci-dessous:
Après avoir défini la méthode de montage, commencez à monter la sous-application sur le dom.
Deux méthodes de montage sont prises en charge ici, l'une consiste à monter à l'aide de la méthode createApp de vue3 et l'autre à monter à l'aide de la nouvelle méthode Vue de vue2. La méthode de montage ici est en fait la même que notre configuration consistant à utiliser vue pour monter sur dom.
Grâce aux étapes ci-dessus, la sous-application est maintenant montée sur le dom dans la page html.
5.5 Fonction de cycle de vie de mise à jour : mise à jour
Lorsque parcel.update() est appelée, la méthode de mise à jour sera déclenchée. Puisque l'auteur n'utilise pas la fonctionnalité avancée parcel, je ne la présenterai pas ici.
5.6 Cycle de vie de la désinstallation des sous-applications : démonter
Lorsque l'URL de la page change, la méthode de démontage sera déclenchée en quittant la route de la page de la sous-application.
Les principales choses à faire dans la méthode de démontage sont :
- Désinstaller l'application vue
- supprimer l'instance de vue
- En même temps, effacez la page dom.
Après avoir effectué l'opération de démontage, les données et le dom de la sous-application seront effacés.
5.7 Résumé
Ce qui précède est l'ensemble du processus de montage des sous-applications avec la bibliothèque de fonctions single-spa-vue officiellement fournie par single-spa. Grâce à l'analyse ci-dessus, nous avons constaté que la bibliothèque de fonctions single-spa-vue renverra un objet contenant quatre méthodes d'amorçage, de montage, de mise à jour et de démontage en appelant la méthode singleSpaVue. La méthode correspondante sera exécutée dans le cycle de vie du chargement des sous-applications dans l'application de base, et la sous-application est montée sur l'application de base ou détruite de l'application de base via la méthode d'exécution.
Grâce au processus de chargement des sous-applications dans single-spa-vue, single-spa assemble chaque sous-application dans une application complexe et gère chaque sous-application séparément sans que l'utilisateur ne s'en aperçoive.
Lorsque single-spa charge des sous-applications, il existe d'autres versions que la version vue, mais l'idée de chargement est similaire. Elles sont toutes chargées en html dans la bibliothèque de fonctions, et aucune autre ne sera introduite ici. type de chargement.
single-spa Autres façons de charger des sous-applications : single-spa-react, single-spa-html
6 Conservation de l'état de la sous-application
Dans le processus de développement proprement dit, l'auteur a rencontré certaines pages qui doivent utiliser keep-alive en vue pour préserver l'état. Bien que la page soit détruite pendant le processus de changement de page, l'état de la page doit être préservé, mais nous analysons un seul spa-vue Lorsque la méthode unmount est implémentée, on constate que si la page est commutée, la sous-application et l'instance de vue sont détruites, et le keep-alive dans la sous-application ne prend pas effet à ce moment.
Comme indiqué ci-dessous:
Après avoir saisi le contenu dans l'entrée, le projet de spa traditionnel peut enregistrer l'état via keep-alive, et lorsque l'itinéraire de page est commuté, revenir en arrière et conserver l'état. Mais si vous utilisez directement single-spa-vue, le contenu d'entrée 1111 dans input sera effacé lorsque la sous-application déclenchera le démontage. En réponse à cette situation, l'auteur a apporté quelques modifications à la bibliothèque de classe single-spa-vue.
Le contenu de la modification est le suivant :
6.1 La sous-application est passée de détruite à masquée
Un élément de configuration est ajouté à l'élément de configuration single-spa-vue.Selon la présence ou non d'un élément de configuration isKeepAlive dans l'élément de configuration, il est jugé s'il faut masquer le dom actuel ou le supprimer. Ainsi, lorsque la méthode de démontage de la sous-application est déclenchée, la sous-application n'est pas supprimée, mais reste.
Dans le même temps, l'auteur a également apporté quelques optimisations à la configuration de la route de vue. Lorsque la page n'existe pas, un composant vide dans la sous-application sera monté sur le dom à ce moment, afin d'éviter que bien que la page est masquée, le dom est toujours dans le html , ce qui entraîne trop de dom de page.
6.2 Sous-application changée de nouvelle à affichage
Lorsque la méthode de montage est appelée dans l'élément de configuration single-spa-vue pour monter la sous-application, elle jugera si la sous-application actuelle existe. Si la sous-application existe, la sous-page sera affichée directement. la sous-application n'a pas été détruite, à ce moment la sous-application Le keep-alive dans l'application prendra toujours effet et enregistrera l'état de la page.
Grâce à l'optimisation des méthodes de montage et de démontage de la bibliothèque de classes mono-spa-vue, l'utilisateur peut vraiment utiliser la page aussi facilement qu'avec vue, et peut maintenir l'état de la page pour améliorer l'expérience utilisateur.