Front end-1

Acumulación de puntos de conocimiento. Reimpreso.

HTML

1. Elementos en línea / elementos a nivel de bloque / elementos variables

Elementos en línea (elementos en línea): span común / a / label / strong / b / em / br / mg / input / textarea y otras etiquetas HTML son todos elementos en línea
Elementos a nivel de bloque: las etiquetas html comunes como div / p / ul / li / ol / hr / table / h1 ~ h6 / form son elementos a nivel de bloque
Elemento variable (determine si el elemento es un elemento en línea o un elemento a nivel de bloque según el contexto): botón / script (script del cliente) / del (eliminar texto) / map (mapa de bloques de imagen) / objeto objeto
configuración de pantalla
- display: inline: establecido en elemento en línea / elemento en línea
- display: block: establecido como un elemento a nivel de bloque
- display: inline-block: establecido en elementos de nivel de bloque en línea

La diferencia entre elementos en línea y elementos a nivel de bloque:

Elemento a nivel de bloque	Elementos en la línea
El elemento a nivel de bloque estará en su propia línea y su ancho llenará automáticamente el ancho de su elemento padre.	Los elementos en línea adyacentes se organizarán en la misma línea y no volverán a ser una sola línea. Si una línea no cabe en una línea, se ajustará. El ancho variará con el contenido del elemento.
Los elementos a nivel de bloque se pueden establecer en ancho / alto (si no se establece el ancho, se establecerá directamente por defecto en el 100% del elemento principal)	La configuración del ancho / alto del elemento en línea no es válida, pero puede ser la altura de la línea y su ancho es compatible directamente con el texto o la imagen internos.
Los elementos a nivel de bloque pueden establecer margen / relleno	El padding-left / right y margin-left / right de los elementos en línea en la dirección horizontal tendrán efectos de margen, pero el padding-top / bottom y margin-top / bottom en la dirección vertical no tendrán ningún efecto (válido en la dirección horizontal, dirección no válida vertical)
Los elementos a nivel de bloque pueden contener elementos en línea y elementos a nivel de bloque	Los elementos en línea no pueden contener elementos a nivel de bloque
Las etiquetas de atributo de elemento a nivel de bloque se pueden anidar directamente	Las etiquetas de atributos de línea no se pueden anidar dentro de las etiquetas de atributos de elementos en línea

CSS establece que los elementos a nivel de bloque se centren:

absolutelograr

   div{
      
      
     height: 500px;
     position: relative;
     background: papayawhip;
   }

   div p{
      
      
     width: 100px;
     height: 100px;
     background: peru;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
   }

absolute+translatelograr

   div{
      
      
     height: 500px;
     position: relative;
     background: papayawhip;
   }

   div p{
      
      
     width: 100px;
     height: 100px;
     background: peru;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

flexlograr

    div{
      
      
      height: 500px;
      background: papayawhip;
      display: flex;
      justify-content: center;   /*实现水平居中*/
      align-items: center;   /*实现垂直居中*/
    }

    div p{
      
      
      width: 100px;
      height: 100px;
      background: peru;
    }

2. ¿Cuáles son los métodos para la comunicación front-end entre páginas?

¿Qué es la comunicación entre páginas de front-end?

En el navegador, se pueden abrir varias páginas de pestañas al mismo tiempo. Cada página de pestañas puede entenderse aproximadamente como un entorno operativo "independiente". Incluso si se trata de un objeto global, no se compartirá entre varias páginas de pestañas. Sin embargo, a veces, esperamos sincronizar los datos, la información y el estado de la página entre estas páginas de pestañas independientes.

Por ejemplo, si el enlace está conectado por la línea roja a continuación, la página btn de la página de detalles se convierte en favorita después de hacer clic en el favorito en la página de la lista, y la página de la lista también cambiará después de que la página de detalles se marque como favorita. Esta es la comunicación entre páginas de front-end
Comunicación entre páginas entre páginas
del mismo origen La política del mismo origen del navegador restringe algunos métodos de comunicación entre páginas. Veamos qué tecnologías pueden realizar la comunicación entre páginas bajo la premisa de satisfacer la política del mismo origen.
- BroadCast Channel
  BroadCast Channel puede ayudarnos a crear un canal de comunicación para la transmisión.Cuando todas las páginas escuchan los mensajes del mismo canal, los mensajes enviados por una página a través de él serán recibidos por todas las demás páginas.
- Service Worker
  Service Worker es un trabajador que puede ejecutarse en segundo plano durante mucho tiempo y puede realizar una comunicación bidireccional con la página. Se pueden compartir los trabajadores de servicios entre el uso compartido de varias páginas. El trabajador del servicio puede utilizarse como centro de procesamiento de mensajes (estación central) para lograr el efecto de transmisión.
- LocalStorage
  Cuando LocalStorage cambia, se activará el evento de almacenamiento. Usando esta función, podemos escribir el mensaje en un LocalStorage al enviar un mensaje; luego, en cada página, podemos recibir notificaciones escuchando el evento de almacenamiento.
```
window.addEventListener('storage', function (e) {
        
        
    if (e.key === 'ctc-msg') {
        
        
        const data = JSON.parse(e.newValue);
        const text = '[receive] ' + data.msg + ' —— tab ' + data.from;
        console.log('[Storage I] receive message:', text);
    }
});
```
  Agregue el código anterior en cada página para monitorear los cambios de LocalStorage. Cuando una página necesita enviar un mensaje, simplemente use el conocido método setItem:
```
mydata.st = +(new Date);
window.localStorage.setItem('ctc-msg', JSON.stringify(mydata));
```
  Tenga en cuenta que aquí hay un detalle: agregamos un atributo .st a mydata que toma la marca de tiempo actual en milisegundos. Esto se debe a que el evento de almacenamiento solo se activa cuando el valor cambia realmente. por ejemplo:
```
window.localStorage.setItem('test', '123');
window.localStorage.setItem('test', '123');
```
  Dado que el segundo valor '123' es el mismo que el primer valor, el código anterior solo activará el evento de almacenamiento cuando se establezca el primer setItem. Por lo tanto, establecemos st para asegurarnos de que el evento de almacenamiento se active cada vez que se llame.
Anteriormente, hemos visto tres formas de lograr la comunicación entre páginas, ya sea un canal de transmisión que establece un canal de transmisión, una estación de transferencia de mensajes utilizando Service Worker, o algunos eventos de almacenamiento complicados, todos son modos de transmisión : una página notificará el mensaje Dar una "estación central", y luego la "estación central" notificará a cada página.
En el ejemplo anterior, esta "estación central" puede ser una instancia de BroadCast Channel, un Service Worker o LocalStorage.

Los otros dos métodos de comunicación entre páginas , los llamo "almacenamiento compartido + modo de sondeo".
- Trabajador compartido Trabajador
  compartido es un miembro de la familia Trabajador. Los trabajadores ordinarios se ejecutan de forma independiente y los datos no están conectados entre sí; mientras que los registros de varias pestañas son trabajadores compartidos, que pueden realizar el intercambio de datos .
  El problema con Shared Worker en la implementación de la comunicación entre páginas es que no puede notificar activamente a todas las páginas, por lo que necesita usar el sondeo para extraer los datos más recientes. La idea es la siguiente:
  Permita que Shared Worker admita dos tipos de mensajes. Uno es publicar, Shared Worker guardará los datos después de recibirlos; el otro es get, Shared Worker pasará los datos guardados a través de postMessage a la página que lo registró, es decir, dejar que la página tome la iniciativa a través de get Get (sincronizar) las últimas noticias.
- Además de usar Shared Worker para compartir datos de almacenamiento, IndexedDB también puede usar otras soluciones de almacenamiento "globales" (compatibles con varias páginas), como IndexedDB o cookies. Esta es la idea de IndexedDB:
  Similar a Shared Worker, el mensaje el remitente El mensaje se almacena en IndexedDB rojo, y el receptor (como todas las páginas) obtiene las últimas noticias a través de un sondeo.
De hecho, a veces, cuando se utiliza la forma de "almacenamiento compartido", no es necesario realizar un sondeo prolongado.
Por ejemplo, en un escenario de múltiples pestañas, podemos dejar que la pestaña A opere en otra pestaña B; después de un tiempo, cuando cambiamos de la pestaña B a la pestaña A, esperamos sincronizar la información de la operación anterior en la pestaña B . En este momento, de hecho, solo necesita monitorear eventos como el cambio de visibilidad en la pestaña A para sincronizar la información una vez.
- window.open + window.opener
  Cuando usamos window.open para abrir la página, el método devolverá una referencia a la ventana de la página abierta. Cuando no se muestra el noopener especificado, la página abierta puede obtener una referencia a la página que la abrió a través de window.opener. De esta manera, hemos establecido una conexión entre estas páginas (una estructura de árbol).
  Idea de implementación : recopile los objetos de ventana de la página abierta por window.open. Cuando se necesita enviar un mensaje, como iniciador del mensaje, una página debe notificarle la página abierta y la página que la abrió al mismo tiempo. tiempo; en este momento, uno recibe la página del mensaje, además de mostrar el mensaje recibido, también necesita entregar el mensaje a las personas que "conoce" (abierto y la página abierta por él), de modo que cada nodo (página ) es responsable de transmitir el mensaje. La responsabilidad de esto es lo que quiero decir con el boca a boca , y las noticias circulan en esta estructura de árbol. Hay un problema con el modelo de
  boca en boca : si la página no se abre a través de window.open en otra página (por ejemplo, escribiendo directamente en la barra de direcciones o enlazando desde otro sitio web), la conexión se interrumpe.
Comunicación entre páginas que no
son del mismo origen Hay dos líneas de productos con diferentes nombres de dominio, y también espero que todas las páginas debajo de ellas puedan comunicarse entre sí sin barreras ¿Cómo lograrlo?

Para lograr la comunicación entre páginas que no son del mismo origen, puede utilizar un iframe invisible como " puente ". Dado que la política del mismo origen se puede ignorar entre el iframe y la página principal al formular el origen, es posible incrustar un iframe (como: http://sample.com/bridge.html) en cada página, y estos Los iframes usan la misma URL, por lo que pertenece a la misma página de origen, y su método de comunicación puede usar los diversos métodos mencionados anteriormente.

Idea de implementación : La comunicación entre la página y el iframe es muy simple, primero debes monitorear el mensaje enviado por el iframe en la página y hacer el procesamiento comercial correspondiente. Luego, cuando la página quiera comunicarse con otras páginas homólogas o que no sean del mismo origen, primero enviará un mensaje al iframe. Una vez que el iframe recibe el mensaje, utiliza algún tipo de tecnología de mensajería entre páginas para sincronizar el mensaje entre todos los iframes. Cuando otros iframes reciben la notificación, sincronizarán el mensaje con la página a la que pertenecen.

HTML

1. Elementos en línea / elementos a nivel de bloque / elementos variables

2. ¿Cuáles son los métodos para la comunicación front-end entre páginas?

3.Árbol DOM

Supongo que te gusta