Análisis de HeadFirst del marco de micro front-end maduro de Alibaba qiankun Qiankun gráficos fuente

Gracias por compartir la plataforma: http://bjbsair.com/2020-04-10/tech-info/53345.html

Enlace directo : https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md

Este artículo llevará a cabo un análisis en profundidad del código fuente de qiankun, un marco de micro front-end. Antes de explicar el código fuente, primero comprendamos qué es un micro front-end.

El micro front end es una arquitectura similar a los micro servicios: aplica el concepto de micro servicios al lado del navegador, es decir, transforma una aplicación front-end de una página de una sola aplicación monolítica a una combinación de múltiples aplicaciones front-end pequeñas. Cada aplicación front-end también se puede desarrollar e implementar de forma independiente. Al mismo tiempo, también se pueden desarrollar en paralelo mientras se comparten componentes: estos componentes se pueden administrar a través de NPM o Git Tag, Git Submodule.

qiankun (qiankun) es un marco front-end micro relativamente maduro lanzado por Ant Financial, basado en spa único para desarrollo secundario, utilizado para transformar aplicaciones web de una sola aplicación monolítica en múltiples aplicaciones front-end pequeñas y agregadas en una Solicitud (Ver imagen a continuación)

Bueno, sin más dilación, nuestro análisis del código fuente comenzó oficialmente.

Inicializar configuración global-inicio (opts)

Comenzamos con dos API básicas: registerMicroApps (aplicaciones, ¿LifeCycles?): Registrar sub-aplicaciones e iniciar (¿opts?)? Iniciar la aplicación principal, porque hay muchas funciones de devolución de llamada establecidas en la función registerMicroApps y leer la configuración establecida en la función de inicio Elementos de configuración inicial, por lo que comenzamos el análisis desde la función de inicio.

Comenzamos el análisis desde la función de inicio (ver figura a continuación):

Analizamos la función de inicio línea por línea:

• Línea 196: establezca la propiedad POWERED_BY_QIANKUN de la ventana en true y use window en la sub-aplicación. El valor POWERED_BY_QIANKUN determina si se ejecuta en el contenedor de la aplicación principal.
• Líneas 198 ~ 199: establezca los parámetros de configuración (con valores predeterminados) y almacene los parámetros de configuración en el objeto importLoaderConfiguration;
• Líneas 201 ~ 203: Verifique el atributo de captación previa. Si se requiere precarga, agregue el evento global single-spa: escucha de primer montaje. Después de montar la primera subapp, precargue otros recursos de subapp para optimizar las subapps posteriores. Velocidad de carga.
• Línea 205: establezca si se debe usar el modo de instancia única de acuerdo con el parámetro singularMode.
• Líneas 209 ~ 217: establezca si desea habilitar el entorno de ejecución de sandbox de acuerdo con el parámetro jsSandbox. Las versiones anteriores deben desactivar esta opción para ser compatibles con IE. (La nueva versión es compatible con IE de forma predeterminada en modo de instancia única, y IE todavía no es compatible en modo de instancia múltiple).
• Línea 222: Se llama al método startSingleSpa de spa único para iniciar la aplicación. Esto se analizará por separado en el artículo de spa único. Aquí, puede entenderse simplemente como el inicio de la aplicación principal.

Como se puede ver en lo anterior, la función de inicio es responsable de inicializar algunas configuraciones globales y luego iniciar la aplicación. Algunos de estos parámetros de configuración inicializados se usarán en la función de devolución de llamada de las sub-aplicaciones registradas registerMicroApps, seguiremos mirando hacia abajo.

Registrarse sub-apps-registerMicroApps (aplicaciones, ¿LifeCycles?)

La función de la función registerMicroApps es registrar una sub-aplicación, y cuando la sub-aplicación está activada, crea un sandbox en ejecución y llama a diferentes funciones de enlace de ciclo de vida en diferentes etapas. (Ver imagen a continuación)

Como se puede ver en lo anterior, la función registerMicroApps se procesa en las líneas 70 ~ 71 para evitar el registro repetido de la misma sub-aplicación.

En la línea 74, se llama al método de aplicación de registro de spa único para registrar la sub-aplicación.

Veamos directamente el método registerApplication, que es la función principal de registrar sub-aplicaciones en single-spa. La función tiene cuatro parámetros, que son

• nombre (el nombre de la sub-aplicación)
• Función de devolución de llamada (llamada cuando activeRule está activado)
• activeRule (reglas de activación para aplicaciones secundarias)
• accesorios (datos que la aplicación principal necesita pasar a la sub-aplicación)

Estos parámetros son implementados directamente por single-spa, que puede entenderse simplemente como una sub-aplicación registrada aquí (ampliaremos el artículo de spa único). Cuando se cumple la regla de activación activeRule, la sub-aplicación se activará, se ejecutará la función de devolución de llamada y se devolverán algunas funciones de enlace del ciclo de vida (consulte la figura a continuación).

Tenga en cuenta que estas funciones de enlace de ciclo de vida pertenecen a single-spa, y single-spa decide cuándo llamarlas. Aquí simplemente entendemos por el nombre de la función. (Sub-aplicación Bootstrap-initialize, sub-aplicación mount-mount, sub-aplicación desmontar-desmontar)

Si todavía te sientes un poco avergonzado, no importa, usamos una imagen para ayudarte a entender. (Ver imagen a continuación)

Obtener sub-application resources-import-html-entry

Podemos ver en el análisis anterior que el método registerMicroApps de qiankun es el primero en ingresar a la matriz de aplicaciones <RegistrableApp <T >> Hay tres parámetros nombre, activeRule, los accesorios se entregan a un solo spa y los parámetros de entrada y representación No usado aún.

Tenemos que prestar atención a los dos parámetros que aún no se utilizan, entrada (dirección de entrada de la sub-aplicación) y render (la regla de renderización se activa cuando se activa la sub-aplicación). Estos dos parámetros se retrasan hasta que se activa la devolución de llamada de la sub-aplicación de spa único La función se ejecuta.

Luego asumimos que nuestra sub-aplicación está activada en este momento, echemos un vistazo a lo que hemos hecho aquí. (Ver imagen a continuación)

Como se puede ver en la figura anterior, después de activar la sub-aplicación, la biblioteca import-html-entry se usa desde las líneas 81 a 84 para ingresar la sub-aplicación desde la entrada. Después de completar la carga, se devolverá un objeto (ver la siguiente figura)

Vamos a explicar estos campos.

La plantilla de explicación de campo html template file resourcePublicPath dirección de recurso ruta raíz después de comentar el contenido del archivo de secuencia de comandos, se puede utilizar para cargar recursos de sub-aplicación método getExternalScripts: obtener archivo de secuencia de comandos importado externamente Todos los archivos de script JS en el archivo, y puede especificar el alcance del objeto proxy de script

Primero imprimimos los resultados de ejecución de la plantilla de plantilla, getExternalScripts y getExternalStyleSheets, el efecto es el siguiente (ver la figura a continuación):

De la imagen de arriba, podemos ver que hemos introducido tres archivos de script js externos. Este archivo de plantilla no tiene una hoja de estilo css externa, y la matriz de hojas de estilo correspondiente también está vacía.

Luego analicemos el método execScripts. El propósito de este método es especificar un objeto proxy (ventana por defecto), luego ejecutar todo el JS en el archivo de plantilla y devolver la última propiedad del objeto proxy después de ejecutar el JS (ver Figura 1 a continuación). En la arquitectura de micro front-end, este objeto generalmente contiene algunas funciones de enlace de ciclo de vida de las sub-aplicaciones (ver Figura 2 a continuación). La aplicación principal puede montar y destruir sub-aplicaciones llamando a estas funciones de enlace de ciclo de vida en etapas específicas.

En la función importEntry de qiankun, también se pasa el elemento de configuración getTemplate. Este es en realidad un procesamiento secundario del archivo de destino html, y no se expandirá aquí. Aquellos que estén interesados ​​pueden averiguarlo por sí mismos.

Plantilla HTML de sub-aplicación de montaje de aplicación principal

Volvamos a la parte fuente de qiankun y continuemos viendo (vea la imagen a continuación)

Se puede ver en la figura anterior que en las líneas 85 ~ 87, la instancia única se detecta por primera vez. En el modo de instancia única, el nuevo comportamiento de montaje de la sub-aplicación no comenzará hasta que se desinstale la antigua sub-aplicación.

En la línea 88, se ejecuta la función de renderizado cuando se registra la sub-aplicación, y la Plantilla HTML y la carga se utilizan como parámetros de entrada. El contenido de la función de renderizado generalmente es montar HTML en el contenedor especificado (ver la figura siguiente).

En esta etapa, la aplicación principal ha montado la estructura HTML básica de la aplicación secundaria en un contenedor de la aplicación principal. A continuación, debe ejecutar el método de montaje correspondiente a la aplicación secundaria (como Vue. $ Mount) para montar el estado de la aplicación secundaria. Conjunto.

En este momento, la página también puede iniciar un efecto de carga similar según el parámetro de carga hasta que se cargue todo el contenido de la sub-aplicación.

Entorno operativo sandbox-genSandbox

Volvamos a la parte del código fuente qiankun y continuemos mirándolo. En este momento, sigue siendo la parte de la función de devolución de llamada cuando se activa la sub-aplicación (ver la figura a continuación)

Las líneas 90 ~ 98 son la parte central de qiankun, y la clave para el estado independiente entre varias sub-aplicaciones, es decir, el entorno de ejecución sandbox de js. Si la opción useJsSandbox está desactivada, el entorno de sandbox de todas las sub-aplicaciones es ventana, y es fácil contaminar el estado global.

Entremos en genSandbox y veamos cómo qiankun crea (JS) el entorno de ejecución de sandbox. (Ver imagen a continuación)

Se puede ver en la figura anterior que el sandbox dentro de genSandbox se divide principalmente en ProxySandbox y SnapshotSandbox si es compatible con window.Proxy (multi-instancia y un sandbox de LegacySandbox, no lo explicaremos aquí).

ProxySandbox

Echemos un vistazo a cómo el entorno limitado de ProxySandbox realiza el aislamiento de estado (consulte la figura a continuación)

Analicemos varias propiedades de la clase ProxySandbox:

Campo Explicación updateValueMap registra los valores actualizados en el sandbox, es decir, el objeto proxy proxy del nombre del grupo de estado independiente del nombre de sandbox en cada sub-aplicación, que puede entenderse como el objeto global / ventana del sandbox de sub-aplicación Ejecutando si el sandbox actual está activo en el sand activo Box, comience inactivo para cerrar el sandbox cuando la sub-aplicación esté montada, e inicie el constructor constructor cuando la sub-aplicación se desinstale para crear un entorno de sandbox

Ahora explicamos en detalle del conjunto y obtenemos las propiedades de window.Proxy cómo ProxySandbox implementa el entorno operativo sandbox. (Ver imagen a continuación)

Nota: El objeto proxy en el sandbox de la sub-aplicación puede entenderse simplemente como el objeto global de ventana de la sub-aplicación (el código es el siguiente). La operación del atributo global de la sub-aplicación es la operación del atributo del objeto proxy. Continúe mirando hacia abajo con esta comprensión. Derecho

// 子应用脚本文件的执行过程：  
eval(  
  // 这里将 proxy 作为 window 参数传入  
  // 子应用的全局对象就是该子应用沙箱的 proxy 对象  
  (function(window) {  
    /* 子应用脚本文件内容 */  
  })(proxy)  
);

Cuando se llama a set para aplicar un objeto proxy / ventana para establecer propiedades, todas las configuraciones de propiedad y actualizaciones presionarán updateValueMap y se almacenarán en la colección updateValueMap (línea 38) para evitar afectar el objeto de ventana (la versión anterior usaba el algoritmo diff Restaure la instantánea del estado del objeto de la ventana, el estado entre las aplicaciones secundarias está aislado y el objeto de la ventana entre las aplicaciones principales y secundarias se contaminará).

Al llamar a get para obtener el valor del objeto proxy / ventana de la sub-aplicación, se le da prioridad al valor del valor actualizado UpdateMap del grupo de estado de sandbox de la sub-aplicación. Si no hay acierto, el valor se toma del objeto de ventana de la aplicación principal (línea 49). Para valores no constructores, este puntero estará vinculado al objeto de la ventana antes de volver a la función.

De esta forma, se completa el aislamiento entre las aplicaciones de sandbox de ProxySandbox y se controla el acceso a los valores de objeto proxy / ventana de todas las sub-aplicaciones. El valor establecido solo actuará en la colección updateValueMap dentro del entorno limitado. El valor también es el valor en el grupo de estados independiente de la aplicación independiente (updateValueMap). Si no se encuentra, el valor se tomará del objeto proxy / ventana.

Dibujamos una imagen de la caja de arena de ProxySandbox para profundizar nuestra comprensión (ver imagen a continuación)

SnapshotSandbox

Cuando la propiedad window.Proxy no es compatible, se utilizará el sandbox SnapshotSandbox, echemos un vistazo a su implementación interna (consulte la figura a continuación)

Analicemos varias propiedades de la clase SnapshotSandbox:

Campo Explicación nombre sandbox nombre proxy proxy, aquí está el objeto de ventana sandbox Ejecutando si el sandbox actual está activado windowSnapshotwindow estado snapshot modifyPropsMap sandbox modificado constructor de propiedad de ventana constructor durante la operación, active sandbox active sandbox de activación, en la sub-aplicación Comience inactivo durante el montaje para cerrar el entorno limitado y comience cuando se desinstale la sub-aplicación

El entorno de sandbox de SnapshotSandbox se logra principalmente mediante la grabación de una instantánea de estado de la ventana cuando se activa y la restauración de los objetos de la ventana mediante una instantánea cuando se cierra. (Ver imagen a continuación)

Veamos primero la función activa: cuando se activa el sandbox, primero tomará una instantánea del objeto de la ventana actual y registrará el estado antes de que se active el sandbox (líneas 38 ~ 40). Después de tomar una instantánea, la función restaura internamente el estado de la ventana al último entorno operativo sandbox a través del registro modifyPropsMap, que es restaurar las propiedades de la ventana modificadas durante la activación del sandbox (historial).

Cuando se cierra el sandbox, llame a la función inactiva, compare cada propiedad atravesando antes de que se cierre el sandbox y registre el valor de propiedad del objeto de ventana modificado (línea 54) en la colección modifyPropsMap. Después de que se haya modificado modifyPropsMap, el objeto de ventana se restaura al estado antes de ser activado por el sandbox (línea 55) a través de snapshot windowSnapshot, que es equivalente a eliminar toda la contaminación causada por la ventana durante la ejecución de la sub-aplicación.

SnapshotSandbox sandbox es el uso de instantáneas para lograr la gestión del aislamiento del estado de los objetos de ventana. En comparación con ProxySandbox, SnapshotSandbox contaminará el objeto de la ventana durante la activación de la sub-aplicación. Pertenece a una solución compatible con versiones anteriores para navegadores que no admiten el atributo Proxy.

Dibujamos una imagen de la caja de arena SnapshotSandbox para profundizar nuestra comprensión (ver imagen a continuación)

Monte Sandbox-mountSandbox

Continuamos volviendo a esta imagen. La función genSandbox no solo devuelve un sandbox sandbox, sino que también devuelve un método de montaje y desmontaje, que se llama cuando la sub-aplicación se monta y desmonta, respectivamente.

Veamos primero la función de montaje (vea la figura a continuación)

Primero, el sandbox de sub-aplicación se activa dentro del montaje (línea 26). Después de que se inicia el sandbox, varios oyentes globales son secuestrados (línea 27). Aquí nos enfocamos en cómo se implementa patchAtMounting. (Ver imagen a continuación)

patchAtMounting llama internamente a las siguientes cuatro funciones:

• patchTimer (secuestro del temporizador)
• patchWindowListener (secuestro del detector de eventos de ventana)
• patchHistoryListener (secuestro del oyente del evento window.history)
• patchDynamicAppend (secuestro de evento de elemento principal de adición dinámica)

Las cuatro funciones anteriores dan cuenta del secuestro unificado del objeto de ventana especificado, podemos elegir un análisis para ver su implementación interna.

Temporizador secuestro-parche Temporizador

Primero echemos un vistazo al secuestro del temporizador de patchTimer (vea la imagen a continuación)

Como se puede ver en la figura anterior, patchTimer recarga internamente setInterval, recolectando el Id. De intervalo de cada temporizador habilitado (líneas 23 ~ 24), de modo que cuando se desinstala la sub-aplicación, se llama a la función libre para borrar todos los temporizadores ( (Ver imagen a continuación).

Echemos un vistazo a la verificación de la función setInterval cuando se carga la sub-aplicación (ver la figura a continuación)

Como se puede ver en la figura anterior, al ingresar a la sub-aplicación, setInterval ha sido reemplazado por la función secuestrada para evitar la contaminación por fugas del temporizador global.

Agregue dinámicamente hoja de estilo y archivo de secuencia de comandos secuestro-parcheDynamicAppend

La implementación de patchWindowListener y patchHistoryListener son similares a la implementación de patchTimer, y no se repetirán aquí.

Tenemos que centrarnos en analizar la función patchDynamicAppend. La función de esta función es secuestrar la operación en el elemento head (ver la figura a continuación)

Como se puede ver en la figura anterior, patchDynamicAppend trata principalmente con hojas de estilo y etiquetas de script agregadas dinámicamente.

Echemos un vistazo al procesamiento de la hoja de estilo primero (vea la imagen a continuación)

Como se puede ver en la figura anterior, la lógica de procesamiento principal está en las líneas 68 a 74. Si la sub-aplicación actual está en el estado activo (el estado de activación de la sub-aplicación se determina principalmente porque: cuando la aplicación principal cambia la ruta, se puede agregar automáticamente una hoja de estilo dinámica Cuando necesite evitar que la hoja de estilo de la aplicación principal se agregue al nodo principal de la sub-aplicación que causa errores), la hoja de estilo dinámica se agregará al contenedor de la sub-aplicación (vea la siguiente figura), cuando la sub-aplicación se desinstala, la hoja de estilo también puede ser Las aplicaciones se desinstalan juntas para evitar la contaminación del estilo. Al mismo tiempo, la hoja de estilo dinámica también se almacenará en la matriz dynamicStyleSheetElements, y su uso se mencionará más adelante.

Echemos un vistazo al procesamiento de archivos de script (consulte la figura a continuación)

El procesamiento de los archivos de script de script dinámico es más complicado, analicemos también una ola:

En las líneas 83 ~ 101, use fetch para obtener el archivo de script de script externo, y luego use execScripts para especificar el objeto proxy (como un objeto de ventana) y ejecute el contenido del archivo de script. Al mismo tiempo, también se activan los eventos de carga y error.

Agregue el contenido del archivo de script comentado al contenedor de la sub-aplicación en forma de comentarios en las líneas 103 ~ 106.

Las líneas 109 a 113 son el proceso de ejecución del archivo de script incrustado, por lo que no se repetirán.

Podemos ver que el objetivo principal de secuestrar el script agregado dinámicamente es reemplazar el objeto de la ventana cuando el script dinámico se ejecuta con el objeto proxy proxy, de modo que el contexto de ejecución del archivo de script agregado dinámicamente por la sub-aplicación también sea reemplazado por la sub-aplicación misma.

La lógica de HTMLHeadElement.prototype.removeChild es agregar un contenedor de sub-aplicación para juzgar, el otro es el mismo, por lo que no lo expandiré.

Finalmente, echemos un vistazo a la función gratuita (vea la imagen a continuación)

Esta función gratuita no es la misma que la implementación de otros parches (función de secuestro). Aquí se almacena en caché una caché de archivos. Al volver a montar, la función de reconstrucción se ejecutará para restaurarla. Esto se debe a que después de eliminar el elemento de estilo DOM del documento, el navegador borrará automáticamente la tabla de elementos de estilo. Si no hace esto, habrá una etiqueta de estilo al volver a montar, pero no hay ningún problema con los estilos de representación.

Desmontar Sandbox-unmountSandbox

Volvamos a la función de montaje en sí (vea la imagen a continuación)

Como se puede ver en la figura anterior, varios oyentes globales son secuestrados en la función patchAtMounting, y se devuelve la función gratuita para liberar el secuestro. Llame a la función gratuita al desinstalar la aplicación para liberar el comportamiento de secuestro de estos oyentes globales (consulte la figura a continuación)

Como puede ver en la imagen de arriba, se devolverán sideEffectsRebuilders después de liberarlos, y se llamará a reconstruir para reconstruir la hoja de estilo dinámica durante el montaje. Esta pieza se entrelaza, está un poco alrededor, y los estudiantes que no entienden demasiado pueden subirla y mirar de nuevo.

En este punto, la parte central del mecanismo de caja de arena qiankun, ya lo hemos analizado, y luego continuamos analizando otras partes.

Aquí dibujamos una imagen para hacer una revisión general del proceso de creación de sandbox (ver la figura a continuación)

Registrar funciones internas del ciclo de vida

Después de crear el entorno de sandbox, algunas funciones internas del ciclo de vida se registran en las líneas 100 ~ 106 (ver la figura a continuación)

En la figura anterior, el método mergeWith en la línea 106 se usa para combinar la función de ciclo de vida incorporada con la función de ciclo de vida de lifeCycles entrante.

La función de ciclo de vida aquí se refiere a la función de ciclo de vida compartida por todas las sub-aplicaciones, y puede usarse para realizar la misma operación lógica entre múltiples sub-aplicaciones, como los efectos de carga y similares. (Ver imagen a continuación)

Además de las funciones de ciclo de vida importadas externamente, también debemos prestar atención a lo que hacen las funciones de ciclo de vida incorporadas de qiankun (consulte la figura a continuación)

Analizamos el código de arriba uno por uno:

• Líneas 13 ~ 15: se inyecta una variable de entorno durante beforeLoad (que solo se ejecutará una vez) antes de cargar la sub-aplicación, indicando la ruta pública de la sub-aplicación.
• Líneas 17 a 19: esta variable de entorno también puede inyectarse cuando beforeMount (que puede ejecutarse varias veces) antes de montar la sub-aplicación.
• Líneas 23 ~ 30: Restaure las variables de entorno al estado original antes de Desmontar antes de la desinstalación de la sub-aplicación.

A través del análisis anterior, podemos llegar a la conclusión de que podemos obtener la variable de entorno en la sub-aplicación y establecerla en el valor de webpack_public_path , de modo que la sub-aplicación pueda coincidir con la ruta de recursos correcta cuando se ejecute en la aplicación principal. (Ver imagen a continuación)

Activar antes de cargar la función de enganche del ciclo de vida

Después de registrar la función del ciclo de vida, la función de enganche del ciclo de vida beforeLoad se activa inmediatamente (consulte la figura a continuación)

Como se puede ver en la figura anterior, en la línea 108, se activa la función de enlace del ciclo de vida beforeLoad.

Luego, en la línea 110, se ejecutó el método execScripts de import-html-entry. Se especifica el entorno limitado en ejecución (jsSandbox) del archivo de secuencia de comandos. Después de ejecutar el archivo de secuencia de comandos de la sub-aplicación, se devuelve un objeto y el objeto contiene la función de enlace del ciclo de vida de la sub-aplicación (ver la siguiente figura).

En las líneas 112 a 121, se realiza una comprobación de la función de enlace de ciclo de vida de la sub-aplicación. Si la función de enlace de ciclo de vida no se encuentra en el objeto exportado de la sub-aplicación, continuará buscando la función de enlace de ciclo de vida en el objeto sandbox. Si la función de enlace de ciclo de vida no se encuentra al final, se generará un error, por lo que nuestra sub-aplicación debe tener bootstrap, montar y desmontar estas tres funciones de enlace de ciclo de vida para que qiankun la incruste correctamente en la aplicación principal.

Aquí dibujamos una imagen para hacer una revisión general del proceso de inicialización antes de montar la sub-aplicación (ver la figura a continuación)

Ingrese al proceso de montaje

Después de que una configuración inicial (como recursos de sub-aplicación, ejecución de entorno de sandbox, función de enlace de ciclo de vida, etc.) esté lista, qiankun los ensambla internamente y devuelve tres funciones como la función de ciclo de vida dentro de spa único (ver Abajo)

La lógica dentro del spa individual se describirá más adelante, aquí podemos entenderla simplemente como tres funciones de enlace de ciclo de vida dentro del spa único:

• bootstrap: se llama cuando se inicializa la sub-aplicación, solo se llamará una vez;
• mount: se llama cuando se monta la sub-aplicación, se puede llamar varias veces;
• desmontar: se llama cuando la sub-aplicación se desmonta, se puede llamar varias veces;

Podemos ver que la función de ciclo de vida de arranque expuesta por la sub-aplicación se llama en la fase de arranque.

Expandamos aquí la fase de montaje y veamos qué funciones se ejecutan durante la fase de montaje de la sub-aplicación (ver figura a continuación)

Analizamos línea por línea:

• Líneas 127 ~ 133: Detecta el modo de instancia única. En el modo de instancia única, el nuevo comportamiento de montaje de la sub-aplicación no comenzará hasta que se desinstale la antigua sub-aplicación. (Como se trata de una ejecución secuencial en serie, si se produce un bloqueo en alguna parte, se bloqueará toda la ejecución de la función posterior)
• Línea 134: se ejecuta la función de procesamiento que se pasa al registrar la sub-aplicación, tomando la plantilla HTML y cargando como parámetros de entrada. Aquí, generalmente, después de que se produce un desmontaje, el HTML se monta en el contenedor especificado cuando el montaje se realiza nuevamente (consulte la figura a continuación). Dado que el renderizado se ha llamado una vez durante la inicialización, puede haberse ejecutado cuando se llama al montaje por primera vez. Una vez que el método de procesamiento. En el siguiente código también hay una declaración para juzgar la situación de montaje repetido if (frame.querySelector ("div") === nulo, para evitar el montaje repetido de sub-aplicaciones.

• Línea 135: se activa la función de enlace del ciclo de vida global beforeMount;
• Línea 136: Monte el sandbox. En este paso, se activa el sandbox de la sub-aplicación correspondiente, y algunos oyentes globales son secuestrados (como setInterval). En este punto, el código que inicia la sub-aplicación se ejecutará en el sandbox. (Inversamente, podemos ver que algunas operaciones globales antes de Mount causarán contaminación a la aplicación principal, como setInterval)
• Línea 137: desencadena la función de enlace de ciclo de vida de montaje de la sub-aplicación. En este paso, la operación de montaje de la sub-aplicación correspondiente generalmente se realiza (como ReactDOM.render, Vue. $ Mount. (Ver la siguiente figura)

• Línea 138: vuelva a llamar a la función de procesamiento. En este momento, el parámetro de carga es falso, lo que significa que la sub-aplicación se ha cargado.
• Línea 139: se activa la función de enlace del ciclo de vida global afterMount;
• Líneas 140 a 144: establezca el valor de prevAppUnmountedDeferred en modo de instancia única. Este valor es una promesa, que se resolverá solo cuando se descargue la sub-aplicación actual. Durante la ejecución de la sub-aplicación, bloqueará las acciones de montaje de otras sub-aplicaciones (la primera 134 líneas);

Hemos analizado el proceso de montaje de toda la sub-aplicación en detalle anteriormente. Si aún no lo ha resuelto, no importa, dibujaremos un diagrama de flujo para ayudarlo a comprender. (Ver imagen a continuación)

Ingrese al proceso de desmontaje

Acabamos de resolver el proceso de montaje de la sub-aplicación, ahora ingresamos al proceso de desmontaje y desmontaje de la sub-aplicación. En la fase de activación de la sub-aplicación, el desmontaje se activará cuando activeRule falla, el comportamiento específico es el siguiente (ver la figura a continuación)

Podemos ver en la imagen de arriba que el proceso de desmontaje y desmontaje es mucho más simple que el montaje, solucionémoslo directamente:

• Línea 148: se activa la función de enlace de ciclo de vida global beforeUnmount;
• Línea 149: La secuencia es ligeramente diferente del proceso de montaje. Aquí, la función de enganche del ciclo de vida desmontado de la sub-aplicación se ejecuta primero para asegurar que la sub-aplicación todavía se esté ejecutando en el sandbox para evitar la contaminación del estado. En general, aquí se trata de limpiar y desinstalar algún estado de la sub-aplicación. (Como se muestra a continuación, la instancia vue recién creada se destruye)

• Línea 150: el sandbox se desinstala y el estado activo del sandbox se cierra.
• Línea 151: se activa la función de enlace de ciclo de vida global afterUnmount;
• Línea 152: se activa el método de representación y el contenido de la aplicación entrante es una cadena vacía. Aquí, puede vaciar el contenido en el contenedor principal de la aplicación.
• Líneas 153 ~ 156: después de desinstalar la sub-aplicación actual, prevAppUnmountedDeferred.resolve () se activa en modo de instancia única para que el comportamiento de montaje de otras sub-aplicaciones pueda continuar sin bloqueo.

También dibujamos una imagen del proceso de descarga de desmontaje para ayudar a todos a comprender (ver la figura a continuación).

Resumen

En este punto, hemos ordenado el flujo general del marco qiankun. Aquí debería haber un resumen: todos han leído tantas palabras, se estima que todos están cansados, y finalmente resumen el proceso general de qiankun con una imagen.

Perspectiva

Las aplicaciones tradicionales de la consola en la nube casi siempre enfrentarán el problema de que las aplicaciones monolíticas se conviertan en aplicaciones de roca después del rápido desarrollo comercial. ¿Cómo mantenemos una aplicación gigante de Big Mac?

El problema anterior lleva al concepto de micro arquitectura front-end, por lo que el concepto de micro front-end se está volviendo cada vez más popular, y nuestro equipo recientemente ha intentado transformar la micro arquitectura front-end.

Los trabajadores primero deben agudizar sus herramientas para dar lo mejor de sí, por lo que este artículo interpreta el código fuente de qiankun y lo ayuda a comprender mientras comparte conocimientos.

Esta es la mejor práctica de nuestro equipo para la arquitectura de micro front-end (consulte la figura a continuación). Si tiene algún requisito, puede dejar un mensaje en el área de comentarios. Consideraremos un artículo "Mejores prácticas de Qiankun del Marco de Micro Front End" para ayudarlo a construir un conjunto Micro arquitectura front-end.

Ultima cosa

Pasé aproximadamente medio mes en este artículo para componer, ordenar y dibujar imágenes. Realmente no fue fácil seguirlo y escribirlo por completo.

Si ya has visto esto, ¡espero que te guste y te vayas!

Si este artículo te resulta útil, ¡por favor dale me gusta y dale me gusta!

Enlace directo : https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md