¡Preguntas de la entrevista UHF de front-end!

1. Pseudo-clases y pseudo-elementos en css para front-end

2. ¿Cuáles son las formas de limpiar el flotador?

• Respuesta: El primer método es usar nuestro principio BFC, es decir, incluso si el interior de la caja está flotando o posicionado, no afectará el diseño fuera de la caja. Agregue desbordamiento: oculto a la caja principal de la caja flotante.
• El segundo método: simplemente agregue una etiqueta div al cuadro grande, luego proporcione un nombre de clase y agregue una oración que quede en el estilo de este nombre de clase para resolver el problema del colapso, y no hay necesidad de escribir nada en la etiqueta
• El tercer método es agregar un pseudo-elemento a la caja grande, pero el estilo de este pseudo-elemento debe establecerse como un elemento a nivel de bloque para lograr una flotación clara. Su principio es el mismo que el del segundo método.

3. ¿Cuáles son los métodos de centrado horizontal y vertical?

• respuesta:
• display: flex; Luego configure el eje principal y los ejes laterales para que estén centrados para lograr el centrado de los elementos a nivel de bloque. Al configurar elementos en línea, se requiere display: inline-flex
• El centrado horizontal de los elementos a nivel de bloque es: margen 0 automático, luego proporcione la mitad superior del margen de la altura del cuadro grande menos la mitad de su propia altura, también puede usar transform:translateX(); con posicionamiento absoluto y relativo posicionamiento para lograr
• Elementos en línea: alineación de texto: centro; altura de línea de colocación: ; para establecer el centro vertical

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

• respuesta:
• 1. Los elementos a nivel de bloque pueden establecer el ancho y la altura, y ocupar una sola línea. Generalmente, hay
• 2. Los elementos en línea generalmente muestran múltiples elementos en una línea, y el ancho y la altura no se pueden establecer. Su ancho y altura solo pueden permitir que el contenido se expanda.

5. Prioridad de peso en css

• respuesta:
• El superlativo es! importante
• El segundo es el estilo en línea.
• El tercero es el selector de id.
• El cuarto es el selector de clase.
• El quinto es el selector de etiquetas.
• El sexto es herencia o * número

6. Habla sobre qué es prototipo y cadena de prototipos.

• El prototipo es: el constructor apunta al objeto prototipo a través del prototipo, y todas las instancias comparten las propiedades y los métodos del objeto prototipo.

• • En JavaScript, cada objeto tiene un objeto prototipo, que puede ser nulo u otro objeto. Un objeto prototipo se puede ver como una plantilla o modelo que contiene propiedades y métodos que se pueden compartir entre objetos de instancia. Cuando se crea un nuevo objeto, sus propiedades y métodos se heredan de su prototipo.Esta relación de herencia se denomina herencia prototípica.
    La herencia de prototipos es un concepto muy importante en JavaScript, lo que hace de JavaScript un poderoso lenguaje orientado a objetos. Usando prototipos, podemos implementar fácilmente la herencia entre objetos, logrando así la reutilización del código. Al mismo tiempo, los prototipos también son uno de los mecanismos principales para implementar la herencia en JavaScript.

• Cadena prototipo:

• • En JavaScript, cada objeto tiene una propiedad interna [[Prototype]] que apunta al prototipo del objeto. Si intentamos acceder a una propiedad o método que no existe en un objeto, el motor de JavaScript buscará el prototipo del objeto, y si la propiedad o método no existe en el prototipo, continuará buscando el prototipo. del prototipo hasta encontrarlo. Este proceso de búsqueda forma la cadena de prototipos.
  • La cadena de prototipos es la cadena del prototipo de cada objeto, que conecta un objeto a su prototipo, al prototipo de ese prototipo, y así sucesivamente, hasta llegar al objeto Object.prototype en la parte superior de la cadena de prototipos. Este objeto principal es la base de todos los objetos, que define algunas propiedades y métodos de uso común, como toString(), valueOf() y otros métodos. A través del mecanismo de cadena de prototipos, cada objeto puede acceder a las propiedades y métodos definidos en su prototipo, realizando así la reutilización del código y la relación de herencia entre objetos.
  • Permite que un objeto herede propiedades y métodos de su prototipo y puede encontrar las propiedades y métodos requeridos en la cadena de prototipos.

7. ¿Sabes cuál es el objeto de la promesa? Hable sobre sus ventajas y desventajas, y también hable sobre async y await

• • Los objetos Promise son una solución para manejar la programación asíncrona en JavaScript
  • La mayor ventaja del objeto Promise es evitar el infierno de devolución de llamada, es decir, evitar las funciones de devolución de llamada anidadas de múltiples capas, lo que hace que la programación asíncrona sea más fácil de entender y mantener.
  • Las desventajas son: No se admite la cancelación: una vez que se crea una Promesa, no se puede cancelar. . No se pueden manejar tareas síncronas: las promesas son excelentes para implementar operaciones asíncronas, pero no pueden manejar tareas síncronas.
  • asíncrono:

• • • Permite que las funciones devuelvan un objeto Promise.
    • Los errores dentro de las funciones asíncronas se pueden capturar y manejar usando try-catch
    • El código síncrono se puede usar dentro de una función asíncrona, al igual que las funciones normales. Después de usarlo, se siente más conveniente tratar con código asincrónico, y el código es más conciso y fácil de entender.

• • await: la palabra clave await solo se puede colocar en funciones asíncronas. 2. La palabra clave await se coloca delante del método cuyo valor de retorno es un objeto de promesa, y el siguiente código no se ejecutará hasta que se ejecute el método

8. Hable sobre el principio de empaque de webpack

• principio:

• • El paquete webpack trata todo como un módulo, ya sea html, css o js, ​​todos pueden referirse entre sí. El primer paso es analizar el archivo de entrada, el segundo paso es analizar los módulos dependientes y el tercer paso es analizar y cargar los módulos.

• • • El cuarto paso es ejecutar el complemento y el quinto paso es generar el resultado del empaquetado. Sin embargo, algunas gramáticas nuevas de es6, como los archivos less, sass y vue, requieren otras herramientas de procesamiento.

9. Hable sobre el ciclo de vida en vue2 y los detalles de los ganchos en el interior

• ciclo vital:

• • Antes de crear, después de crear, antes de colgar, después de colgar, antes de actualizar, después de actualizar, antes de destruir, después de destruir. Estos son los ganchos de uso común.
  • Generalmente, tan pronto como se abren algunas páginas, necesito tomarlas para solicitar datos. Las consigo creadas. Es un gancho después de la creación. Puede acceder a datos, calcular atributos, monitorear, etc.
  • Por lo general, a mis antiguos colegas les gusta colgar los datos en el
  • También habrá dos ganchos activados y desactivados cuando el componente se almacena en caché
  • Aprovecha para comparar vue3 con él

10. Cuénteme sobre su comprensión de vuex

• entender

• • En primer lugar, hay varios atributos en vuex 1, mutación (el lugar donde se coloca el método), 2, estado (el lugar donde se almacenan los datos y la variable), 3, acción (el lugar donde se se coloca el método asíncrono, y algunas solicitudes asíncronas públicas a menudo se colocan aquí)
  • 4, captadores (puede filtrar las variables en el estado, similar a las propiedades calculadas), 5, módulos (cuando el proyecto es particularmente complejo, cada módulo puede tener sus propias propiedades, lo que es más claro y fácil de administrar)
  • El procesamiento simplificado también se realiza cuando se llama a vuex.Por ejemplo, el procesamiento de funciones auxiliares puede simplificar el código cuando se llaman atributos en vuex.
  • Algunos escenarios de uso de vuex: como almacenar información del usuario, almacenar tokens, etc.

11. Hable sobre la diferencia entre vue2 y vue3: 1 diferencia en el ciclo de vida, 2 diferencias en el almacenamiento de datos

• la diferencia:

• • 1. Vue3 tiene un rendimiento optimizado para vue2. Vue3 tiene DOM virtual optimizado, lo que puede aumentar el rendimiento de representación y reducir el uso de memoria. Al empaquetar, eliminará el código no utilizado para reducir el tamaño del código.
  • 2. Vue3 está escrito en TS
  • 3. Los ciclos de vida de vue2 y vue3 también son un poco diferentes. La creación previa y posterior a la creación de vue2 se reemplazan por la configuración en vue3, y los dos últimos ganchos en vue3 también se denominan predesinstalación y posdesinstalación. .

• • • Los ganchos de Vue3 están precedidos por on

12. ¿Cómo se comunican los componentes hermanos?

• Los componentes de Brother pueden usar vuex para comunicarse
• También puede usar la comunicación Event Bus. El método de uso es activar un evento a través de $emit, escuchar un evento a través del método $on() y procesar datos en este método.

13. Cómo personalizar y escribir un filtro para vue

• respuesta:

• • Podemos registrar un filtro personalizado con el método Vue.filter(). Tiene dos parámetros, uno es el nombre del filtro, el otro es una función, y esta función también tiene un parámetro, que se pasa en
  • parámetro, devuelve el resultado del procesamiento después de procesar el valor.
  • Cuando se usa un filtro, las llaves dobles encierran el nombre del filtro | parámetros que se pasarán ------- { { nombre del filtro | parámetros que se pasarán}}

14. Hable acerca de keep-alive --- 1 keep-alive tiene restricciones

• Keep-alive es el caché de componentes.Después de que se active el caché de componentes, habrá dos ganchos más, uno se activa y el otro se desactiva
• Su uso es envolver los componentes a ser almacenados en caché.
• Su limitación: solo puede almacenar en caché componentes dinámicos, lo que puede causar pérdidas de memoria y también puede afectar el renderizado.

15. La diferencia y los escenarios de uso entre http y websocket

• la diferencia:

• • 1. HTTP es una conexión corta. Cada vez que se envía una solicitud, se creará una conexión corta y la conexión se cerrará inmediatamente cuando se reproduzca la solicitud.
  • Websocket es una conexión a largo plazo. Una vez establecida la conexión, el cliente y el servidor permanecerán conectados. Ambas partes pueden enviarse datos entre sí en cualquier momento, y la conexión se cerrará cuando se cierre la conexión.
  • El formato del mensaje también es diferente. El formato de mensaje de http es fijo, mientras que el formato de mensaje de websocket es que el cliente y el servidor pueden enviar mensajes libremente.

• Escenas a utilizar:

• • El cliente a menudo usa HTTP para enviar una solicitud al servidor, y la conexión se desconectará una vez que se complete la transmisión de datos.
  • Websocket se usa a menudo en salas de chat y escenarios de comunicación, y al usarlo, se deben considerar nuevos problemas de compatibilidad.Algunos navegadores de versiones bajas no son compatibles con websocket

16. ¿Cómo entiendes el cross-domain?

• Cross-domain es el mecanismo de protección de la política del mismo origen.Cuando una página solicita recursos de otra página, cualquiera de los puertos, nombres de dominio y protocolo es diferente, y cruzará dominios.
• El método para resolver cross-domain puede ser a través de CORS, JSONP, proxy, etc.,
• Entre ellos, JSONP es un método para generar dinámicamente etiquetas <script> para implementar solicitudes entre dominios.
• CORS es un método que permite que los servidores de dominio cruzado de páginas web inicien solicitudes ajax. La implementación de CORS debe establecer el encabezado correspondiente para controlar las reglas de dominio cruzado permitidas. El encabezado correspondiente es demasiado largo en inglés. Puede ver el comienzo de A en el informe de errores entre dominios.

17. Cómo realizar el agente

• Implementación de proxy:

• • El servidor proxy resuelve el problema de dominios cruzados, crea un servidor en el servidor proxy, escucha la solicitud de front-end, captura la solicitud de front-end en el lado del servidor y reenvía la solicitud al servidor de destino. , el servidor de destino devuelve el resultado de la respuesta al servidor proxy

18. ¿Cuáles son los problemas de seguridad entre los extremos delantero y trasero?

• XSS (Cross Site Scripting) Hay varios problemas de seguridad entre el front-end y el back-end, los siguientes son algunos de los problemas de seguridad comunes
• Fuga de información confidencial: parte de la información confidencial se almacena en el código de front-end, como las claves del algoritmo de cifrado, las claves de acceso a la interfaz API, etc. Sin el cifrado, los atacantes maliciosos pueden obtener esta información y causar daños al sistema.

19, hable sobre el enrutamiento dinámico del enrutamiento vue

20. Hablar sobre el proceso de pago

• Es decir, para realizar el pago se requiere front-end + back-end juntos. El back-end debe solicitar diferentes SDK de pago, como el SDK de WeChat o Alipay, y luego escribir la interfaz correspondiente en el back-end. El front-end proporciona Alipay, WeChat y otras interfaces de selección en la interfaz, y se llamará a la interfaz correspondiente cuando el usuario haga clic. Luego, la interfaz de backend genera el número de pedido y lo devuelve a la interfaz. Luego, el front-end llama a la API de pago correspondiente y espera a que el usuario ingrese la contraseña para obtener una devolución de llamada completa. Si el pago es exitoso, se muestra la página de éxito del pago. Y pase los datos al backend para grabar, si falla, pase la página de falla de pago

21. Hable acerca de la diferencia entre let const var. ¿Puede const definir un objeto no fijo?

• La diferencia entre let const var:

• • let se usa para definir variables que se pueden modificar, y su alcance es a nivel de bloque
  • const se usa generalmente para definir variables constantes, es decir, variables que no cambiarán
  • El alcance de las variables declaradas por var es el nivel de función, mientras que el alcance de las variables declaradas por let y const es el nivel de bloque.
  • Las variables declaradas por var se pueden declarar varias veces sin error, mientras que las variables declaradas por let y const solo se pueden declarar una vez, y las declaraciones repetidas provocarán errores.

22. ¿Qué componentes personalizados se han empaquetado?

• Las categorías comunes incluyen: componentes de botones, componentes de ventanas emergentes, componentes de opciones desplegables, etc. Se puede utilizar en varias páginas.
• Clase de componente de interfaz de usuario: como carrusel, navegación, lista, etc.
• Componentes funcionales: componentes de carga de imágenes, componentes de mapa, etc.

23. Cuéntame sobre websocket y cómo se implementa. y qué API hay en él

• WebSocket es un protocolo de comunicación full-duplex basado en el protocolo TCP. Una vez que se establece la conexión, tanto el servidor como el cliente pueden enviarse y recibir datos activamente entre sí, logrando una comunicación de red bidireccional, eficiente y en tiempo real. Dado que WebSocket es un protocolo estandarizado, puede usarse no solo en aplicaciones web, sino también en otras aplicaciones, como aplicaciones móviles, aplicaciones de escritorio, etc.
• lograr:

• • La implementación de WebSocket es principalmente para estrechar la mano a través del protocolo HTTP y luego actualizar al protocolo WebSocket

• Qué API hay en él

• • 1. WebSocket: indica una conexión WebSocket a través de la cual se pueden enviar y recibir datos.
  • 2. onopen: la función de devolución de llamada después de que la conexión WebSocket se haya establecido correctamente.
  • 3. cerrar: el método para cerrar la conexión.
  • También hay algunas funciones de devolución de llamada para aceptar información y enviar mensajes.

24. Hablar de pinia

• la diferencia:

• • Más pequeño y más rápido: Pinia tiene menos código y mejor rendimiento que Vuex.
  • Más fácil: la API relativamente simple de Pinia hace que sea más fácil de aprender y usar.
  • Más seguro: Pinia usa escritura fuerte, lo que puede proporcionar una mejor verificación de tipos y avisos de error.
  • En comparación con vuex, pinia tiene menos API, intuitivas y simples, pero vuex es relativamente complejo y poderoso
  • El soporte modular es diferente: en Vuex, todo el estado se almacena en un solo objeto de tienda, mientras que Pinia admite la agrupación de estados en varios módulos de tienda, lo que hace que la aplicación sea más modular y fácil de mantener.

25. ¿Cuáles son las diferencias entre macro tareas y micro tareas?

• Las tareas de macro comunes son: setTimeout, setInterval, eventos DOM, solicitudes AJAX
• Las microtareas comunes son: Promise, async/await
• ¿Cual es la diferencia?

• • La diferencia entre ellos radica en el tiempo de ejecución y la prioridad. El tiempo de ejecución de las microtareas es anterior al de las macrotareas, y el tiempo de ejecución de la representación DOM también es anterior al de las macrotareas ----- microtarea > representación DOM > macrotarea

26. Dime qué es vue.use