Preguntas y respuestas de la entrevista web front-end 2023 (2)

1. Describa brevemente la comprensión de BFC, cómo crear BFC y sus funciones.

BFC: el contexto de formato de bloque (BFC) es parte de la representación visual CSS de una página web. Es el área donde se generan cuadros a nivel de bloque durante el proceso de diseño y también es el área limitada para la interacción entre elementos flotantes y otros. elementos.

Condiciones para crear BFC :

• Elemento raíz: cuerpo;
• Configuración del elemento flotante: valor flotante distinto de ninguno;
• Conjunto de elementos de posicionamiento absoluto: posición (absoluta, fija);
• Los valores de visualización son: bloque en línea, celda de tabla, título de tabla, flex, etc .;
• Los valores de desbordamiento son: oculto, automático, desplazamiento; 

función BFC

• Evite que los márgenes se superpongan. Los márgenes de los subelementos que pertenecen al mismo BFC se superponen debido a la superposición de BFC (la distancia vertical de la Caja está determinada por el margen. Los márgenes de dos Cajas adyacentes que pertenecen al mismo BFC se superpondrán). Podemos envolver un contenedor fuera del div y activa el contenedor para generar un BFC. Entonces los dos divs no pertenecen al mismo BFC y no se producirá superposición de márgenes.
• Elimina el impacto de la flotación: los elementos secundarios a nivel de bloque están flotando. Si el elemento principal a nivel de bloque no establece una altura, su altura colapsará. Motivo: después de que los elementos secundarios flotan, BFC se activa y los elementos secundarios no expandirán el elemento principal. Solución: Al calcular la altura de BFC, los elementos flotantes también participan en el cálculo. Así que simplemente configure el contenedor principal en bfc para incluir los elementos secundarios: este contenedor contendrá los elementos secundarios flotantes y su altura se expandirá para contener a sus elementos secundarios, por lo que en este BFC esos elementos volverán al flujo de documentos normal de la página.
• Evitar el ajuste de texto

2. ¿Cuáles son las formas de retrasar la carga de scripts Javascript?

 1. Carga asincrónica

Cargue archivos JavaScript de forma asincrónica agregando el atributo "async" para evitar bloquear la descarga y representación de otros recursos durante la carga de la página. La carga asincrónica no garantiza el orden de ejecución de los scripts, pero es adecuada para componentes independientes y bibliotecas de herramientas.

<script src="../test.js" async/>

2. Carga diferida

Retrase la carga de archivos JavaScript agregando el atributo "diferir" para garantizar que otros recursos de la página se carguen y representen primero. A diferencia de la carga asincrónica, la carga diferida garantiza que los scripts se ejecuten en el orden en que aparecen, por lo que es más adecuada para componentes y bibliotecas dependientes que deben cargarse en orden.

<script src="../test.js" aplazar="aplazar"/>

3. Carga dinámica

Agregue o elimine dinámicamente etiquetas HTML mediante código JavaScript para cargar o descargar archivos de script. Este enfoque es adecuado para situaciones en las que es necesario cargar y descargar componentes y funciones en función del comportamiento del usuario o las necesidades comerciales.

4. Carga diferida

Cargue archivos JavaScript cuando sea necesario, no cuando la página se carga inicialmente. La carga diferida puede reducir el tamaño y el tiempo de carga de la página inicial y optimizar la experiencia del usuario. Por lo general, la carga diferida es adecuada para imágenes, videos, anuncios y algún código JavaScript no crítico.

3. Utilice 5 para seleccionar aleatoriamente 10 números entre 10 y 100, guárdelos en una matriz y ordénelos

    function randomNub(arr,len,min,max){
        //如果给的长度大于取值范围，则超出提示
        if(len>=(max-min)){
            return "超过"+min+"-"+max+"之间的个数范围"+(max-min-1)+"个的总数";
        }
        //从小到大排序，实现该数组的降序排列
        if(arr.length>=len){
            arr.sort(function(a,b){
                return a-b;
            });
            return arr;
        }
        //定义当前的数字
        var nowNub=parseInt(Math.random()*(max-min-1))+(min+1);
        //当生产的随机数==数组中的一个数字时，
        for(var j=0;j<arr.length;j++){
            if(nowNub==arr[j]){
                randomNub(arr,len,min,max);
                return;
            }
        }
        arr.push(nowNub);
        randomNub(arr,len,min,max);
        return arr;
    }
    var arr=[];
    //调用该函数，实现功能
    console.log(randomNub(arr,10,10,100))

4. JS implementa una copia profunda

Copia profunda : se construirá una nueva matriz u objeto compuesto y la copia continuará cuando encuentre el tipo de datos de referencia al que apunta la referencia.

Copia superficial : se refiere a copiar solo el primer nivel de un objeto o matriz, y otros niveles copian la dirección de memoria almacenada.

方式一：通过JSON对象的stringify和parse方法实现
let obj = {

name: '小红',

age: 13,

arr: [3, 4],

}

let obj1= JSON.parse( JSON.stringify(obj) )

方式二：jquery的extend()方法进行深拷贝（推荐在JQ中使用）
仅适用于JQuery构建的项目。JQuery自身携带的extend
let newObj = $.extend(true, {}, obj);
 //拷贝完成obj.b = 20;console.log(newObj.b); //输出 4

5. Extraiga los resultados ["2023","09","15","09","10","23"] de "2023-09-15T09:10:23 Europe/Paris"

    let str = '2023-09-15T09:10:23 Europe/Paris';
    let arr2 = str.match(  /\d{1,}/g);

// \d:返回的是数字
// {1,} 至少返回的是由一个长度的数据

6. Implementar una función de enlace

Explicación del sitio web oficial: El método bind() crea una nueva función. Cuando se llama a bind(), esta nueva función se especifica como el primer parámetro de bind(), y los parámetros restantes se usarán como parámetros del nueva función utilizada al llamar.

• 1. Bind es un atributo de Function.prototype en la cadena de prototipos de función. Es una función que modifica este puntero, fusiona los parámetros y los pasa a la función original, y el valor de retorno es una nueva función.
• 2. La función devuelta por bind se puede llamar a través de new, en este momento este parámetro proporcionado se ignora y apunta al nuevo objeto generado por new. La simulación interna implementa el nuevo operador.

lograr:

①

Primero implemente el más simple fn.bind(context). Como se mencionó anteriormente, bindla función devolverá una función. Esta función thises lo que usted pasa context. Luego podemos devolver una callfunción que se llama. Pero lo que hay que tener en cuenta aquí es que debido a que bindel método de llamada en sí es fn.bind(context), entonces binden realidad hay uno dentro de la función thiseste thises fn, no contextlo confundas con:

 

② Implementación fn.bind(context, p1, p2): Este requisito es muy simple: solo necesitamos bindpasar todos los parámetros recibidos por la función, excepto el primer parámetro, a la función devuelta internamente, de la siguiente manera

③

Implementación fn.bind(context, p1, p2)(p3, p4), este requisito es similar al segundo requisito, excepto que la posición donde se reciben los parámetros se convierte en la bindfunción devuelta, entonces solo necesita pasarle los parámetros de la función devuelta this.call: 

7. Describe el mecanismo de Eventloop.

El bucle de eventos es una forma de ejecutar código de forma asincrónica, lo que permite a JavaScript manejar eventos concurrentes en un entorno de ejecución de un solo subproceso. Cuando se encuentra un evento asincrónico, se colocará en la cola de eventos EventQueue para esperar su ejecución, y Eventloop lo sacará y ejecutará cuando sea apropiado. EventLoop es un proceso en ejecución continua que verificará constantemente si el evento en la cola de eventos necesita ser ejecutado If El evento se eliminará y ejecutará hasta que no haya eventos en la cola de eventos.

El mecanismo de bucle de eventos nos ayuda a escribir código asincrónico eficiente sin preocuparnos por la sincronización de subprocesos y los problemas de bloqueo, porque el motor Javascript los manejará automáticamente.

8. Describa brevemente las diferencias entre MVC, MVP y MVVM.

El nombre completo de MVC es Model View Controller, que es la abreviatura de model-view-controller. Es un modelo de diseño de software que organiza el código de una manera que separa la lógica empresarial, los datos y la visualización de la interfaz. La lógica empresarial se reúne en un componente, y no es necesario reescribir la lógica empresarial mientras se mejora y personaliza la interfaz y la interacción del usuario. MVC fue desarrollado exclusivamente para mapear funciones tradicionales de entrada, procesamiento y salida en una estructura lógica de interfaz gráfica de usuario.

 Patrón MVP  : Modelo-Vista-Presentador; MVP evolucionó del patrón clásico MVC. Sus ideas básicas son similares: Controlador/Presentador es responsable del procesamiento lógico, Modelo proporciona datos y Vista es responsable de la visualización.

MVVM es la abreviatura de Model-View-ViewModel. Es esencialmente una versión mejorada de MVC. MVVM abstrae el estado y el comportamiento de la Vista, lo que nos permite separar la interfaz de usuario de la vista y la lógica empresarial. Por supuesto, ViewModel ya ha hecho estas cosas por nosotros: puede extraer los datos del Modelo y ayudar a manejar la lógica de negocios involucrada en la Vista debido a la necesidad de mostrar contenido. WPF de Microsoft trae nuevas experiencias técnicas, como Silverlight, audio, vídeo, 3D, animación..., lo que da como resultado que la capa UI del software sea más detallada y personalizable. Al mismo tiempo, a nivel técnico, WPF también trae nuevas características como enlace, propiedad de dependencia, eventos enrutados, comando, plantilla de datos, plantilla de control, etc. El origen del marco MVVM (Model-View-ViewModel) es un nuevo marco arquitectónico que evolucionó a partir del método de aplicación que combina el patrón MVP (Model-View-Presenter) con WPF. Se basa en el marco MVP original e incorpora las nuevas características de WPF para hacer frente a cambios cada vez más complejos en las necesidades de los clientes.

9. Describir la secuencia de ejecución del ciclo de vida de los componentes padre e hijo.

1. Proceso de carga y renderizado
padre antes de Crear->padre creado->padre beforeMount->hijo beforeCreate->hijo creado->hijo beforeMount->hijo montado->padre montado 2.
Proceso de actualización del componente hijo
padre beforeUpdate->hijo beforeUpdate-> hijo actualizado->padre actualizado
3. Proceso de actualización del componente padre
padre beforeUpdate->padre actualizado
4. proceso de destrucción
padre beforeDestroy->hijo beforeDestroy->hijo destruido->padre destruido

10. Describa el principio del enlace de datos bidireccional de Vue.

El principio del enlace de datos bidireccional : utilizando "secuestro de datos" combinado con el modelo "editor-suscriptor", utilizando el método "Object.defineProperty()" para secuestrar los establecedores y captadores de cada propiedad, y publicar mensajes a los suscriptores cuando los datos cambian O activa la devolución de llamada de escucha correspondiente.

Proceso de implementación

Ya sabemos que para implementar el enlace bidireccional de datos, primero debemos secuestrar y monitorear los datos, por lo que necesitamos configurar un observador para monitorear todas las propiedades. Si el atributo cambia, debe informarle al observador del suscriptor para ver si es necesario actualizarlo. Debido a que hay muchos suscriptores, necesitamos un departamento de suscriptores de mensajes para recopilar específicamente estos suscriptores y luego administrarlos de manera uniforme entre el observador y el observador. A continuación, también necesitamos un analizador de instrucciones Compile para escanear y analizar cada elemento del nodo, inicializar las instrucciones relevantes en un Vigilante del suscriptor y reemplazar los datos de la plantilla o vincular la función correspondiente. En este momento, cuando el Vigilante del suscriptor recibe el cambio de el atributo correspondiente, se ejecutará la función de actualización correspondiente para actualizar la vista. Por lo tanto, a continuación realizamos los siguientes tres pasos para lograr la vinculación bidireccional de datos:

1. Implemente un observador oyente para secuestrar y monitorear todas las propiedades. Si hay algún cambio, se notificará al suscriptor.

2. Implemente un Vigilante de suscriptor que pueda recibir notificaciones de cambios de propiedad y ejecutar las funciones correspondientes para actualizar la vista.

3. Implemente un analizador, Compile, que pueda escanear y analizar las instrucciones relevantes de cada nodo e inicializar los datos de la plantilla y los suscriptores correspondientes de acuerdo con la inicialización.

11. ¿Cómo monitorear los cambios de matriz en vue2?

En Vue 2, la capa inferior es para monitorear los cambios en la matriz anulando el método prototipo de la matriz.

Específicamente, al llamar a los métodos de mutación de la matriz (como push, pop, shift, unshift, splice, sort y reverse), Vue realizará los siguientes pasos:

1. Llame al método de matriz original y realice las operaciones de mutación correspondientes en la matriz.

2. Después de realizar la operación de mutación, Vue activará una notificación para notificar a las dependencias relacionadas (como las vistas) que se actualicen.

3. Durante el proceso de notificación, Vue atravesará todos los observadores (Observadores) de la matriz y llamará a sus métodos de actualización para actualizar las dependencias relacionadas.

De esta manera, Vue puede capturar cambios en la matriz en tiempo real y actualizar las dependencias relacionadas de manera oportuna, logrando así monitorear y responder a la matriz.

Cabe señalar que Vue 2 solo puede detectar cambios en la matriz mediante métodos de mutación, pero no puede detectar cambios en la matriz modificando directamente un elemento de la matriz o utilizando métodos sin mutación (como filtro, concat, etc.). Si necesita monitorear estos cambios de matriz no mutados, puede usar la opción de vigilancia o el método $watch para monitorear manualmente los cambios de matriz.

12. ¿Cómo define vue-router el enrutamiento dinámico y cómo obtener los parámetros dinámicos pasados?

Definición: en el archivo index.js del directorio del enrutador, agregue /:id al atributo de ruta. 

Utilice el params.id del objeto enrutador. Por ejemplo: this.$route.params.id

Obtener parámetros: $route  es un "objeto de información de enrutamiento", que incluye ruta, parámetros, hash, consulta, ruta completa, coincidencia, nombre y otros parámetros de información de enrutamiento.

13. Describe qué hace NextTick en Vue.

Definición oficial: ejecutar una devolución de llamada retrasada después del siguiente ciclo de actualización de DOM. Utilice este método inmediatamente después de modificar los datos para obtener el DOM actualizado.

Las operaciones DOM realizadas en la función de enlace creada () del ciclo de vida de Vue deben colocarse en la función de devolución de llamada de Vue.nextTick ()

Se utiliza Vue.nextTick()para obtener el DOM actualizado.
Tiempo de activación: después de que los datos cambian en el mismo bucle de eventos, el DOM completa la actualización y Vue.nextTick()la devolución de llamada se ejecuta inmediatamente.