¿Tienes hambre? Análisis de principios del complemento de pantalla esqueleto de código abierto
1. Page-framework-network package-plugin
Page-skeleton-webpack-plugin es un complemento de paquete web desarrollado por el equipo de ElemeFE. El propósito de este complemento es generar las páginas de pantalla de esqueleto correspondientes en función de las diferentes páginas de enrutamiento de su proyecto y empaquetar las páginas de pantalla de esqueleto en las páginas de enrutamiento estáticas correspondientes a través del paquete web.
2. El principio fundamental del complemento que genera automáticamente una pantalla de esqueleto.
La demostración primero muestra cómo generar automáticamente una pantalla de esqueleto y luego analiza cómo generar una pantalla de esqueleto. a través del código:
Instalación y entorno operativo
Entorno dependiente:
Consulte: /p/a9a55c03f768 para obtener información sobre la instalación de Puppet Master.
Inicia Puppetry y abre la página donde deseas generar la pantalla del esqueleto.
A continuación, analice cómo makeSkeleton genera el código de pantalla esqueleto.
El código de entrada está en page-skeleton-web pack-plugin/src/skeleton.js.
Lógica central de inicialización:
Se analizará uno por uno cómo generar la estructura esqueleto de cada bloque.
1. El bloque SVG genera una estructura esquelética
Los elementos no ocultos eliminarán todos los elementos en el elemento svg, reduciendo así el tamaño de la página del marco final. En segundo lugar, establezca el ancho, el alto y la forma del elemento svg.
2. El bloque de botones genera una estructura esquelética.
El procesamiento del bloque de botones es relativamente simple. Elimine el borde y la sombra, establezca un color de fondo y un texto uniformes y el bloque de botones estará listo.
3. La estructura esqueleto se genera a partir de los bloques de fondo.
Un bloque de fondo es un elemento que tiene una imagen de fondo o un color de fondo. Establezca el color de fondo de manera uniforme.
4. Los bloques de imágenes generan una estructura esquelética.
5. Estructura esquelética del procesamiento de bloques de pseudoelementos
6. Estructura esquelética del procesamiento de bloques de texto
Los bloques de texto son relativamente complejos de procesar, por lo que son colocado en último lugar.
Definición de bloque de texto: Cualquier elemento que contenga un nodo de texto es un bloque de texto.
Calcule el número de líneas de texto y la altura del texto del bloque de texto (es decir, la altura del bloque de texto a dibujar = tamaño de fuente):
Genere un bloque de texto con un fondo rayado mediante degradado lineal;
p>
El texto de una sola línea requiere el cálculo del ancho del texto y los atributos de alineación del texto.
Lo anterior es la lógica principal del complemento de pantalla esqueleto de código abierto elementUI. Por supuesto, también existe una lógica relacionada con la ingeniería, que no publicaré aquí y la discutiré más adelante.
Dediqué tiempo a extraer por separado la lógica para generar la pantalla del esqueleto, de modo que se pueda personalizar el procesamiento de ingeniería y la depuración de la pantalla del esqueleto.
/wookaoer/page-skeleton-core