1. Preguntas de la entrevista de CSS

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

¿Por qué limpiar el flotador? Debido a que el cuadro flotante está fuera del flujo estándar, si no se establece la altura del cuadro principal, el cuadro de abajo se apuntalará.

Método de etiqueta adicional (después de la última etiqueta flotante, agregue una nueva etiqueta y borre: ambos;) (no recomendado)
Agregue el atributo de desbordamiento al elemento principal (agregue overflow:hidden al elemento principal) (no recomendado)
Use el pseudo-elemento after para borrar los flotantes (recomendado)

.clear:after{
    
     
	content:''; display:block; 
	overflow:hidden; 
	visibility:hidden; 
	clear:both;
}

Borrar flotadores usando pseudo-elementos antes y después


```javascript
.clearfix:after,.clearfix:before{
    
    
	content: "";
	display: table;
}
.clearfix:after{
    
    
	clear: both;
}
.clearfix{
    
    
	*zoom: 1;
}

2. ¿Cuáles son las funciones de varios atributos de posición?

Cuatro valores de atributo comunes de posición: relativo, absoluto, fijo, estático. Generalmente se usa junto con los atributos "izquierda", "arriba", "derecha" y "abajo".
(1) estático: la posición predeterminada (los elementos estáticos ignoran cualquier declaración superior, inferior, izquierda o derecha). Generalmente no se usa comúnmente.
(2) Relativo: para los elementos cuyas posiciones se configuran como relativas, los valores de compensación superior, derecha, inferior e izquierda se compensan con respecto a sus posiciones originales. Tenga en cuenta que los elementos movidos relativos siguen ocupando espacio en sus posiciones originales.
(3) absoluto: el elemento cuya posición se establece en absoluto se puede colocar en las coordenadas especificadas en relación con el elemento que lo contiene. Significa que si su contenedor principal establece el atributo de posición y el valor del atributo de posición es absoluto o relativo, se compensará de acuerdo con el contenedor principal. Si el contenedor principal no establece la propiedad de posición, el desplazamiento se basa en el cuerpo. Tenga en cuenta que los elementos con el conjunto de atributos absolutos no tienen lugar en el flujo estándar.
(4) fijo: el elemento cuya posición se establece en fijo se puede colocar en las coordenadas especificadas en relación con la ventana del navegador. Ya sea que la ventana se desplace o no, el elemento permanecerá en esa posición. Siempre se basa en el cuerpo. Tenga en cuenta que los elementos con el conjunto de atributos fijos no tienen lugar en el flujo estándar.

3. Establecer la misma identificación para múltiples elementos en una página, ¿qué problemas causará?

Provocará que al obtener elementos dom a través de js, solo se pueda obtener el primer elemento, y los siguientes elementos no se puedan obtener normalmente.

4. ¿Qué es Menos?

Less es un lenguaje de preprocesamiento css. En less, puede definir algunas variables y expresiones y usar sintaxis anidada; en less, use @ para definir variables (@baseColor:pink); luego, puede usar algunas herramientas de compilación (less) para compilar less en estilos css que los navegadores pueden reconocer directamente. Por lo tanto, less es solo un lenguaje intermedio utilizado en la fase de desarrollo. El propósito de usar less es mejorar la eficiencia del desarrollo y la capacidad de mantenimiento del código.

5. ¿Qué es Scss?

scss es un lenguaje de preprocesamiento css, en less puede definir algunas variables y expresiones y usar sintaxis anidada; en scss use $Defina la variable ($ baseColor:pink); luego, puede usar algunas herramientas de compilación (node-sass) para compilar menos en estilos css que los navegadores puedan reconocer directamente. Entonces, scss es solo un lenguaje intermedio que se usa en la etapa de desarrollo. El propósito de usar scss es mejorar la eficiencia del desarrollo y la capacidad de mantenimiento del código.

6. ¿Qué es Stylus? (.styl)

Stylus es un lenguaje de preprocesamiento css. En stylus, se pueden definir algunas variables y expresiones y se puede usar sintaxis anidada (en stylus, la sintaxis con sangría se usa para indicar las relaciones de anidamiento); luego, stylus se puede convertir para compilarlo en un estilo css que el navegador puede reconocer directamente. Por lo tanto, stylus es solo un lenguaje intermedio utilizado en la etapa de desarrollo. El propósito de usar stylus es mejorar la eficiencia del desarrollo y la capacidad de mantenimiento del código.

7. Escriba un diseño izquierdo-medio-derecho que llene la pantalla. Los bloques izquierdo y derecho tienen un ancho fijo de 200, y el medio es autoadaptativo. Se requiere cargar el bloque central primero. Escriba la estructura y estilo?

*{
    
    
padding: 0;
margin: 0;
}
html,body{
    
     heig
ht: 100%;
}
.center{
    
     heigh
t: 100%;
background: #1FA363; 
margin:0 200px;
}
.left{
    
    
position: absolute; 
width: 200px; 
height: 100%;
left: 0;
top: 0;
background: #DC4C3F;
}
.right{
    
    
position: absolute; 
width: 200px; 
height: 100%;
right: 0;
top: 0;
background: #FFCE44;
}

<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>

8. ¿Qué hacer si el código de la página no coincide con el código del recurso solicitado?

La codificación de html es gbk o gb2312. Si el js importado está codificado como utf-8, debe importarse. De manera similar, si su página es utf-8 y el js importado es gbk, entonces debe agregar charset="gbk".

<script src="http://www.xxx.com/test.js" charset="utf-8"></script>

9. ¿Qué problemas de compatibilidad móvil has encontrado?

Los diferentes navegadores tienen diferentes fuentes mínimas, algunas son de 10 px, otras de 12 px.

Solución: Al configurar la fuente, no debe ser menor de 12 px. Si debe ser menor de 12 px, use transform:sacle() para hacer zoom.

El texto en el terminal móvil está alineado en ambos extremos, y usar text-align-last causará problemas de compatibilidad en ios.

Usando text-align-last: justificar; No hay problema con Android, pero no se alineará en iOS.
Solución: agregue una pseudoclase after después del elemento actual y establezca el alto de fila en 0 para el elemento actual, de la siguiente manera:

span {
    
    
	text-align: justify;
	text-align-last: justify;
	line-height: 0px;
	&::after {
    
    
		content: "";
		width: 100%;
		display: inline-block;
	}
}

scrollTo(0,0)和scrollTop=0

Dom.scrollTo(0,0) no es compatible con teléfonos móviles Apple de versión baja y se informará un error al utilizar este método. En otras palabras, use dom.scrollTop=0, se puede usar normalmente.

Utilice position:absolute/fixed; para fijar un botón en la parte inferior de la página. En el sistema Android, cuando se llama al método de entrada, el botón se empuja hacia arriba.

Solución: use la consulta de medios @media screen y (max-width:400px){} Cuando la altura de la página sea inferior a un determinado valor, asigne al elemento un valor máximo. El margen y el relleno predeterminados de los diferentes navegadores son diferentes. Solución: *{margen:0;relleno:0;}

Haga clic en el problema de retraso del evento.

El evento de clic en el terminal móvil tendrá un retraso de 300 ms, porque el navegador está esperando que hagas un doble clic, pero este retraso genera una mala experiencia de usuario. Solución: use la etiqueta de secuencia de comandos para introducir la biblioteca fastclick para eliminar el retraso y desactive el zoom user-scable="no".

Dos, js preguntas de la entrevista.

1. ¿Qué es un objeto prototipo?

Cada constructor tiene un atributo de prototipo, y el valor de este atributo es un objeto, que se denomina objeto prototipo del constructor; por lo general, se recomienda vincular las propiedades de los miembros del constructor al objeto prototipo prototipo, porque el objeto prototipo prototipo Las propiedades de son accesibles a través del objeto de instancia de manera predeterminada; esto puede garantizar que estos métodos no se creen repetidamente en la memoria cada vez que se crea el objeto de instancia a través de la palabra clave new.

2. ¿Qué es la cadena prototipo?

Cada constructor tiene un atributo prototipo, es decir, el objeto prototipo, y también se puede acceder al objeto prototipo a través del atributo proto del objeto de instancia; el objeto prototipo también es un objeto en esencia, y el objeto tiene su propio objeto prototipo, y finalmente forma una estructura de cadena llamada cadena prototipo.

3. ¿Qué es un constructor?

La esencia de un constructor también es una función, pero la primera letra de esta función generalmente debe estar en mayúscula cuando se define; cuando se llama al constructor, debe llamarse a través de una nueva palabra clave; generalmente no usamos el constructor directamente , pero use el constructor para crear el objeto de instancia que sale, el constructor es una parte importante de js orientado a objetos.

3. ¿Qué son las herencias comunes?

Herencia de cadena de prototipos
tomar prestada la herencia del constructor
herencia de composición
herencia prototípica
la clase implementa la herencia

Herencia a través de extensiones y super

herencia parasitaria

4. ¿Cuáles son los indicadores de esto?

Esto en funciones ordinarias apunta a la ventana.
Esto en el temporizador apunta a la ventana.
No hay esto en la función de flecha, este punto depende del entorno externo.
Esto en el evento apunta a la persona que llama del evento.
El punto this en el constructor y this en el objeto prototipo apuntan al objeto de instancia del nuevo constructor.
esto en la función autoejecutable apunta a la ventana

5. ¿Qué es la recursividad?

La función se llama a sí misma internamente, y esta función es recursiva.
Ventajas: estructura clara y fuerte legibilidad.
Desventajas: baja eficiencia, la pila de llamadas puede desbordarse, cada llamada de función asignará espacio en la pila de memoria y la capacidad de pila de cada proceso es limitada, cuando hay demasiados niveles de llamadas, la capacidad de la pila se excederá, lo que provocará un desbordamiento de pila.

6. ¿Qué métodos suele utilizar para la optimización del rendimiento?

En términos de carga de recursos:

Soluciones específicas para reducir la cantidad de solicitudes http, combinación de código (combinación de css, js), uso de sprites, reducción de la cantidad de datos de solicitud http, compresión de código (css, js, html) y configuración razonable de caché.
Código en línea empaquetado y comprimido
usar carga diferida
Usa sprites
Componentes de representación dinámica
Aceleración CDN

Nivel de código:

Evite abusar de las variables globales, reduzca la búsqueda de alcance (no declare variables globales si puede usar variables locales) y no abuse de los cierres;
Reduzca las operaciones DOM, almacene en caché los objetos DOM encontrados cuando opere DOM y evite búsquedas repetidas;
Use la carga diferida de imágenes para evitar que la página se congele causada por demasiadas imágenes cargadas a la vez; escriba etiquetas de script en la parte inferior de la página, porque la carga de js bloqueará la representación de la página;
No escriba muchas cookies localmente, porque las cookies acompañarán cada solicitud http;

7. ¿Cuál es el mecanismo de ejecución de js?

js es un mecanismo de ejecución de bucle de eventos sin bloqueo, asincrónico y de subproceso único.
Todas las tareas se pueden dividir en dos tipos, una es tarea sincrónica (sincrónica) y la otra es tarea asincrónica (asincrónica).

Una tarea síncrona se refiere a una tarea que está en cola para su ejecución en el subproceso principal. Solo cuando se completa la tarea anterior se puede ejecutar la siguiente tarea.
Las tareas asincrónicas se refieren a tareas que no ingresan al subproceso principal pero ingresan a la "cola de tareas". Solo cuando la "cola de tareas" notifica al subproceso principal que se puede ejecutar una tarea asíncrona, la tarea ingresará al subproceso principal para su ejecución.

8. ¿Conoces lodash?, ¿qué APIs comunes tiene?

Lodash es una biblioteca de utilidades JavaScript consistente, modular y de alto rendimiento.

copia profunda .cloneDeep
.reject elimina un elemento basado en condiciones
.drop(array,[n=1]) Función: elimina los primeros n elementos de la matriz y luego devuelve el resto

9. ¿Qué son set y mapa?

set es una nueva estructura de datos proporcionada por es6, que es similar a una matriz, pero los valores de sus miembros son únicos.
Map es una nueva estructura de datos proporcionada por es6. Es similar a un objeto y también es una colección de pares clave-valor, pero el rango de claves no se limita a cadenas, y se pueden usar varios tipos de valores como claves. . En otras palabras, la estructura Object proporciona una correspondencia "cadena-valor", y la estructura Map proporciona una correspondencia "valor-valor", que es una implementación más completa de la estructura Hash. Si necesita una estructura de datos de "par clave-valor", Map es más adecuado que object.

10. Describa brevemente las siguientes clases en es6.

La clase en es6 se puede considerar como el azúcar sintáctico del constructor en es5, lo que simplifica la escritura del constructor, y los atributos comunes de la clase se colocan en el constructor.

Cree una clase a través de la palabra clave de clase, y todavía definimos habitualmente la primera letra del nombre de la clase en mayúscula.
Hay una función constructora en la clase, que puede aceptar los parámetros pasados y devolver el objeto de instancia al mismo tiempo.
La función constructora llamará automáticamente a esta función siempre que new genere una instancia. Si no escribimos esta clase de función, esta función también se generará automáticamente.
Los métodos de funciones múltiples no necesitan estar separados por comas.
No se puede omitir Generar instancia nueva.
Especificación gramatical, no agregue paréntesis después del nombre de clase de la clase creada, agregue paréntesis después del nombre de clase de la instancia generada y no necesita agregar función al constructor.
(1) En la herencia, si instanciar una subclase genera un método, primero verifique si la subclase tiene este método y, de ser así, ejecute primero la subclase.
(2) En la herencia, si no existe tal método en la subclase, verifique si la clase principal tiene este método y, de ser así, ejecute este método de la clase principal (principio de proximidad
).
(3) Si la subclase quiere heredar el método de la clase principal y, al mismo tiempo, expandir su propio método dentro de sí misma, use super para llamar al constructor de la clase principal, se debe llamar a super antes que a la clase this.
Siempre preste atención a la señalización de this.Las propiedades y métodos compartidos en la clase deben usarse con this.
(1) El this en el constructor apunta al nuevo objeto de instancia.
(2) El método personalizado generalmente también apunta al nuevo objeto de instancia.
(3) Después de vincular el evento, esto apunta a la fuente del evento que activó el evento.
(4) No hay promoción variable para las clases en ES6, por lo que la clase debe definirse antes de que se pueda crear una instancia del objeto a través de la clase.

11. ¿Cuáles son las similitudes y diferencias entre call, apply y bind?

Punto común: todos pueden cambiar la dirección de esto;
La diferencia: call and apply llamará a la función una vez y cambiará el puntero this dentro de la función; mientras que bind no llamará a la función y puede cambiar el puntero this dentro de la función. Los parámetros pasados por call y apply son diferentes. Call necesita una lista de parámetros a partir del segundo parámetro, y el segundo parámetro de apply debe ser una matriz.
Escenario de aplicación

La llamada a menudo hace herencia.

function fn(a,b,c){
    
    
        console.log(this,a+b+c); // this指向window
    }
    fn();
    fn.call(document,1,2,3);//call改变之后this指向document  
    //输出 #document 6   1,2,3是实参 结果相加为6

apply a menudo está relacionado con matrices, por ejemplo, el uso de objetos matemáticos para obtener los valores máximos y mínimos de una matriz.

function fn(a,b,c){
    
    
        console.log(this,a+b+c); 
    }
    fn();
    fn.apply(document,[1,2,3]);

bind no llama a la función, pero todavía quiere cambiar este punto. Por ejemplo, cambie este punto dentro del temporizador.

function fn(a,b,c){
    
    
    console.log(this,a+b+c); //window
}
let ff = fn.bind('小明',1,2,3); //手动调用一下

12. Listar métodos relacionados con operaciones de matriz

push: agregue elementos al final de la matriz, el valor devuelto es la longitud de la matriz
pop: extrae el último elemento de la matriz y el valor de retorno es el elemento emergente
unshift: inserte un elemento al comienzo de la matriz, y el valor de retorno es la longitud de la matriz
shift: saca el primer elemento de la matriz, y el valor de retorno es el elemento sacado
empalme (índice, largo): elimina el elemento especificado en la matriz
concat: concatenar matrices
inversa: voltear la matriz

13. Lista de métodos relacionados con la manipulación de cadenas

substr(inicio,largo)/subcadena(inicio,fin): cadena de intercepción
rebanada: intercepta una sección de una matriz o una cadena
indexOf/lastIndexOf: busca si existe un carácter en otra cadena, devuelve el índice si existe y devuelve -1 si no existe; indexOf busca de adelante hacia atrás;
lastIndexOf: es buscar de atrás hacia adelante
replace: reemplaza los caracteres específicos de la cadena
toUpperCase: convierte la cadena a mayúsculas
toLowerCase: convierte la cadena a minúsculas
charAt: obtiene el carácter en el índice especificado en la cadena

14. Dé ejemplos de 3 conversiones de tipo obligatorias y 2 conversiones de tipo implícitas.

Conversión obligatoria: convertida en una cadena toString(), String(), convertida en un número Number(), parseInt(), parseFloat().
Conversión implícita: convertir a tipo booleano Boolean() cadena empalmada implícitamente, ejemplo var str = "" + - / % ===

15. ¿Explicar split(), slice(), splice(), join() respectivamente?

split puede usar una cadena para cortar otra cadena, y el valor de retorno es una matriz
slice puede interceptar una parte de la matriz (el objeto de cadena también tiene un método de división)
splice(index,len) puede eliminar el elemento de matriz especificado;
join puede empalmar elementos de matriz en cadenas usando conectores específicos

15. ¿Qué es el análisis previo?

Antes de que se ejecute el código JS, el motor de análisis realizará una verificación previa del código, principalmente para mejorar la declaración de variables y funciones, y traerá la declaración de variables y funciones al frente del código. se promueve y la asignación no se promueve.

16. ¿Usar js para encapsular una ordenación de burbuja?

function sortBubble(arr){
    
     
for(var i=0;i<arr.length;i++){
    
    
	for(var j=0;j<arr.lengthi;j++){
    
     if(arr[j]>arr[j+1]){
    
    
		var temp=arr[j]; 
		arr[j]=arr[j+1]; 
		arr[j+1]=temp;
		}
	}
}
return arr;

17. ¿Usar js para encontrar la suma de todos los números primos dentro de 10000?

function getZs(num) {
    
    
	 var sum=0;
	for (var i = 2; i <= num; i++) {
    
    //4
		//假设所有的数都是质数
		var flag = true;
		//通过嵌套循环找到 i 除了 1 和本身以外所有可能出现的因子
		for (var j = 2; j < i; j++) {
    
    
			//判断 i 是否为质数
			if (i % j == 0) {
    
    //能进到当前的分支 说明不是质数
			flag = false;
		}
	}
		if (flag == true) {
    
     
			console.log(i); 
			sum+=i;
		}
	}
	return sum;
}

18. ¿Está ordenada la matriz bidimensional en orden ascendente según el valor de num?

var list = [
{
    
    
id: 32, num: 5
},
{
    
    
id: 28, num: 12
},
{
    
    
id: 23, num: 9
}]

// 实现过程
list.sort(function(a,b){
    
     r
	eturn a.num-b.num;
})

19. ¿Cuál es la función de eval en Js?¿Cuáles son las desventajas?

El papel de la función eval: una cadena se puede ejecutar como código js. Desventajas: La eficiencia de ejecución es relativamente baja y no es segura.

20. Enumere la API para agregar, eliminar, modificar y consultar elementos DOM

Crear DOM: document.createElement();
查找 DOM: document.getElementById(); documento.getElementsByClassName(); documento.getElementsByName(); documento.querySelectorAll(); documento.querySelector();
Agregar DOM: parentDom.appendChild();
Eliminar DOM: parentDom.removeChild().

21. ¿Cuáles son los objetos de uso común en BOM?

location:
	location.href; 页面 url 地址
	location.hash; url 中#后的部分
	location.search; url 中?后的部分(查询字符串)
	location.reload(); 刷新页面; 
navigator:
	navigator.userAgent: 浏览器的 userAgent 信息
history:
	history.go(1);前进 1 步
	history.go(-1);后退 1 步;
	history.forward();前进
	history.back(); 后退
screen:
	screen.availWidth: 屏幕有效宽度
	screen.availHeight: 屏幕有效高度

22. ¿Enumere algunos problemas comunes de compatibilidad del navegador?

主流浏览器发送 ajax 使用 XMLHttpRequest 创建异步对象,
IE 浏览器时候用 XActive 创建异步对象;

主流浏览器注册事件
	addEventListener("eventType","handler","true|false"); 
	removeEventListner("eventType","handler","true|false");
IE 浏览器:
	注册事件:attachEvent( "eventType"，"handler") 
	移除事件:detachEvent("eventType"，"handler" ) 
	阻止事件冒泡:
	主流浏览器:event.stopPropagation()
	IE 浏览器:event.cancleBubble=true; 
获取事件源:
	主流浏览器: event.target
	IE 浏览器:event.srcElement

23. Explique cómo funciona ajax con el mayor detalle posible.

Paso 1: Crear un objeto var xhr=new XMLHttpRequest()
El segundo paso: configurar la línea de solicitud xhr.open('método de solicitud', dirección de solicitud);
Paso 3: envíe la solicitud Obtenga el método xhr.send (null), si es una solicitud posterior, configure el encabezado de la solicitud.
Paso 4: Escuche la respuesta del servidor.

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded ');
xhr.send("name=zs&age=18");
//第四步:监听服务端的响应
xhr.onreadystatechange=function(){
    
    
	if(xhr.status==200&&xhr.readyState==4){
    
    
		// 获取 json
		var json=xhr.responseText&&JSON.parse(xhr.responseText)
		// 获取 xml
		var xml=xhr.responseXML; 
		console.log(json,xml)
	}
}

24. ¿Qué es síncrono y asíncrono y qué método de ejecución es mejor?

La sincronización significa que se ejecuta un programa y luego se ejecuta otro programa. Asíncrono significa que se ejecutan múltiples programas al mismo tiempo. Por lo tanto, la eficiencia asíncrona es mayor, porque asíncrono no causará un fenómeno de bloqueo, y la ejecución del programa anterior no afectar la ejecución de este último programa.

25. ¿Qué es una API RESTful?

La idea central de RESTful es utilizar el método de solicitud HTTP para cooperar con el objeto de recurso para completar la operación en un determinado recurso en el lado del servidor (verbo HTTP + objeto de recurso). Por ejemplo, para el comando GET /articles, GET es el verbo HTTP y /articles es el objeto de recurso.

补充说明:
动词通常就是五种 HTTP 方法，对应 CRUD 操作:
GET：读取（Read）
POST：新建（Create）
PUT：更新（Update）
PATCH：更新（Update），通常是部分更新
DELETE：删除（Delete）

26. Hable sobre el uso y los escenarios de async/await

async se usa para modificar la declaración de una función. La función modificada con async se convertirá en una función asíncrona. await se usa para modificar la llamada de la función. La función modificada por await debe devolver un objeto asíncrono prometido. Después de usar await para modificar , la promesa será Un objeto asíncrono se convierte en una operación síncrona.

27. ¿Cuáles son las funciones y escenarios de aplicación práctica de las funciones de flecha?

La función flecha puede mantener este puntero dentro de la función consistente con el exterior de la función, la razón por la cual la función flecha puede mantener este puntero dentro de la función consistente con el exterior es porque no hay este puntero dentro de la función flecha. puede usar la función de flecha en la función de devolución de llamada ajax para dejar que This en la función de devolución de llamada apunte al origen del evento; puede usar una función de flecha en el segundo parámetro del temporizador para evitar esto dentro de la función que apunta a la ventana global.

28. Hable sobre la comprensión de Promise

Promise en sí no proporciona ninguna lógica de código, puede ayudarnos a transformar u optimizar las operaciones asíncronas tradicionales implementadas mediante funciones de devolución de llamada, permitiéndonos implementar operaciones asíncronas de una manera más elegante. Una de las características más notables es que Promise puede resolver el infierno de devolución de llamada tradicional. A nivel de código, Promise proporciona un constructor. Al usarlo, se debe crear un objeto de instancia a través de new. Al crear un objeto real, se debe pasar una función anónima. Esta función anónima necesita dos parámetros (resolver, rechazar) y resolve tiene éxito en el manejo de la función, rechaza el controlador de fallas. La lógica empresarial específica determina cuándo activar el controlador de éxito y el controlador de error. La resolución y el rechazo deben pasarse a través del método entonces proporcionado por el objeto de instancia de Promise. Promise proporciona dos métodos estáticos al y carrera, todos pueden ejecutar varias instancias de Promise a la vez, y el valor de retorno es una matriz; la carrera también puede ejecutar múltiples Promete instancias a la vez, se devolverá el resultado de ejecución de la instancia que se ejecuta primero.

29. ¿Cuál es la diferencia entre romper, continuar y regresar?

break
(1) break se usa para saltar fuera del cuerpo de un bucle o terminar completamente un bucle. No solo puede terminar el bucle en el que se encuentra, sino también finalizar su bucle exterior.
(2) break solo se puede usar en el cuerpo del ciclo y en la instrucción switch.
(3) No importa qué tipo de ciclo sea, una vez que se encuentra una ruptura eak en el cuerpo del ciclo, el sistema finalizará completamente el ciclo y comenzará a ejecutar el código después del ciclo.
(4) En la declaración de cambio, si se cumple una determinada condición, saltará del cuerpo del bucle de esta capa.
continuar
(1) continuar: simplemente cancelar este ciclo y luego comenzar el siguiente ciclo.
(2) continuar no termina todo el bucle.
(3) continuar solo se puede usar en sentencias de bucle. Se utiliza en bucle for, bucle while, bucle do...while.
return
(1) return es finalizar un método. Si se ejecuta una instrucción de retorno dentro del cuerpo del ciclo, la instrucción de retorno finalizará el método y el ciclo finalizará.

30. ¿Cómo entiendes que la variable declarada por const no se puede modificar?

Las restricciones de una declaración const se aplican solo a las referencias a la variable a la que apunta. En otras palabras, si la variable const hace referencia a un objeto, la modificación de las propiedades dentro del objeto no viola la restricción const.
El "Tutorial ES6" escribe así: lo que const realmente garantiza no es que el valor de la variable no se pueda cambiar, sino que los datos almacenados en la dirección de memoria a la que apunta la variable no se pueden cambiar. Para tipos simples de datos (números, cadenas, valores booleanos), el valor se almacena en la dirección de memoria a la que apunta la variable, por lo que es equivalente a una constante. Pero para los tipos de datos compuestos (principalmente objetos y matrices), la dirección de memoria a la que apunta la variable es solo un puntero a los datos reales, y const solo puede garantizar que el puntero sea fijo (es decir, siempre apunta a otro fijo). dirección), en cuanto a si la estructura de datos a la que apunta es mutable, está completamente fuera de control. Por lo tanto, se debe tener mucho cuidado al declarar un objeto como una constante.

3. Red

1. ¿Qué significan los códigos de estado HTTP?

1xx indica que la solicitud HTTP ha sido aceptada, continúe procesando la solicitud 2xx indica que la solicitud HTTP ha sido procesada (200) 3xx indica que la URL
solicitada redirige a otro directorio (los recursos 304 no han cambiado y se redireccionarán a recursos locales) 4xx indica el cliente Se produjo un error en el lado del servidor
(403 Prohibido, 404 Recurso no existe) 5xx significa que se produjo un error en el lado del servidor.

2. ¿Qué es SEO?

La optimización de motores de búsqueda SEO (Search Engine Optimizing) consiste en permitir que el motor de búsqueda rastree nuestra página web. palabras clave (keywords), descripción (descripción); porque el motor de búsqueda primero vuelve a analizar esta información clave después de rastrear la página web.

3. ¿Qué es la mejora progresiva y la degradación elegante?

Mejora progresiva: cree páginas para navegadores de versiones bajas para garantizar las funciones más básicas y luego mejore y agregue funciones como efectos e interacciones para navegadores avanzados para lograr una mejor experiencia de usuario. (Comience con las funciones básicas compatibles con todos los navegadores y agregue gradualmente funciones que solo son compatibles con los navegadores modernos, agregando estilos y funciones adicionales a la página que no son perjudiciales para el navegador base. Cuando los navegadores las admitan, se presentarán y funcionarán automáticamente. .)
Degradación elegante (graceful degradation): cree una funcionalidad completa desde el principio y luego hágala compatible con navegadores de versiones inferiores. (El sitio web funciona bien en todos los navegadores modernos, si el usuario está usando un navegador más antiguo, el código verifica para asegurarse de que funcionen correctamente. Debido a los problemas de diseño del modelo de caja único de IE, diferentes versiones de IE Hack han practicado una degradación elegante, agregando candidatos para navegadores que no pueden admitir funciones, por lo que puede degradar la experiencia de alguna forma en navegadores antiguos sin fallar por completo).

La diferencia: la degradación elegante comienza con el statu quo complejo e intenta reducir la oferta de la experiencia del usuario, mientras que la mejora progresiva comienza con una versión funcional muy básica y se expande para satisfacer las necesidades de los entornos futuros.

4. ¿Qué es la aceleración de CDN?

El nombre completo de CDN (Content Delivery Network) es Content Delivery Network, que es un servicio de valor agregado que brindan los operadores, puedes tener este servicio de aceleración con dinero. CDN es principalmente para acelerar los recursos estáticos del sitio web. CDN tendrá muchos servidores de nodo en todo el país (todas las ciudades los tienen). Cuando compra un servicio CDN, el servidor CDN almacenará en caché los archivos de recursos estáticos de su sitio web, cuando alguien visitas por segunda vez, el servidor obtendrá los recursos estáticos requeridos por el sitio web del servidor de nodo CDN más cercano.Dado que el rendimiento del servidor CDN es relativamente alto y la distancia física del cliente es relativamente cercana, se puede realizar Aceleración Para habilitar el servicio CDN, solo necesita configurarlo en segundo plano proporcionado por el proveedor del operador (configure para habilitar el servicio CDN para ese nombre de dominio), sin ninguna modificación en el código.

5. ¿Por qué es más eficaz utilizar varios nombres de dominio para almacenar recursos estáticos del sitio web?

Debido a que el navegador tiene un límite en la cantidad de solicitudes simultáneas de archivos de recursos estáticos, solo puede solicitar varios archivos de recursos con el mismo nombre de dominio cada vez (habrá diferencias según el navegador), si los archivos de recursos se almacenan en varios diferentes nombres de dominio Lo siguiente romperá las restricciones del navegador; en segundo lugar, habilitar múltiples servidores de recursos estáticos puede reducir la presión sobre el servidor principal.

4. Preguntas de la entrevista Vue

1. ¿Cuáles son los problemas comunes en el terminal móvil? ¿Cómo lo resolviste?

La ventana de la página H5 se ajusta automáticamente al ancho del dispositivo y los usuarios tienen prohibido hacer zoom en la página.

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimumscale=1.0,maximum-scale=1.0,user-scalable=no">

2. Cuéntame sobre el principio de la carga diferida de imágenes ¿Qué complementos para la carga diferida de imágenes se han utilizado en el desarrollo real?

Cuando la etiqueta img carga la imagen, carga la imagen solicitando el archivo al que apunta el atributo src.Si la etiqueta img en sí no tiene el atributo src, entonces la etiqueta img no cargará la imagen cuando se represente. la imagen se carga de forma diferida El principio es cambiar temporalmente el atributo src de la etiqueta img a un atributo personalizado primero, de modo que la imagen no se cargue después de cargar la página. Cuando el área donde se encuentra la etiqueta img entra en el visible área de la pantalla, el atributo personalizado, y establecerlo dinámicamente en el atributo src de la etiqueta img correspondiente, de modo que el navegador nos ayude automáticamente a solicitar el recurso de imagen correspondiente y realizar la llamada carga diferida de imágenes. Hay muchos complementos para la carga diferida de imágenes, la mayoría de ellos están basados en jquery, como jquery.lazyload. Por supuesto, también hay complementos en vue que implementan la carga diferida de imágenes, como vue-lazyload, y también hay componentes para la carga diferida de imágenes en la biblioteca de componentes de vue.

3. ¿Cuántos segundos habrá de retraso en el evento clic en el terminal móvil?, ¿A qué se debe?, ¿Cómo solucionarlo?

El evento de clic en el terminal móvil tendrá un retraso de 300 ms; es causado por el navegador para retener la función de zoom de doble clic. Los primeros navegadores tienen
una espere el segundo clic. , si el usuario hace clic por segunda vez dentro de los 300 ms, el navegador ejecutará la función de zoom, si no vuelve a hacer clic dentro de los 300 ms, se tratará como un evento de clic; solución: use el evento táctil para simular el evento de clic
; use el complemento fastclick para resolver; función de zoom de página estática.

4. ¿Cómo implementa Js las operaciones asincrónicas?

Aunque Js es de subproceso único, los navegadores son de subprocesos múltiples y las operaciones asincrónicas en js se completan básicamente con subprocesos proporcionados por el navegador.

5. ¿Presenta los tres patrones de diseño de MVC, MVVM y MVP respectivamente?

MVC es un patrón de diseño del lenguaje de back-end, principalmente para realizar las capas del código, la capa de modelo de datos M (modelo) es principalmente responsable de operar la base de datos; la capa de vista V (vista) es principalmente responsable de la interfaz display, que se puede considerar como el front-end html, css y js actúan como la capa de vista; la capa de control comercial C (controlador) es principalmente responsable de controlar la lógica comercial específica y es responsable de entregar los datos del modelo capa de datos a la capa de vista para su visualización.
MVVM es un patrón de diseño front-end. Vue está diseñado en base a este patrón y evolucionó de MVC. La capa de datos M (modelo) es principalmente responsable de la inicialización de datos y métodos; la capa de vista V (vista) puede considerarse como HTML y CSS desempeñan el papel de la capa de vista; la capa de modelo de vista de VM (modelo de vista) es responsable de conectar la capa de datos y la capa de vista, pasar los datos de la capa de datos a la capa de vista para su visualización y pasar el comportamiento del ver capa a la capa de datos.
MVP también se desarrolló a partir del patrón de configuración de MVC de back-end y se usa principalmente en el desarrollo de Android. capa de datos M (modelo), lógica de interfaz de usuario V (vista); lógica de negocios P (presentador).

6. ¿Cómo encapsular un componente en vue?

Primero defina un archivo con el sufijo .vue. El archivo todavía se compone de tres partes, la parte de plantilla de plantilla, la parte de lógica de secuencia de comandos y la parte de estilo de estilo. Estas tres partes son la parte central del componente. ¿Qué estructura tiene ¿Qué tipo de estilo de apariencia se escribe en la parte de estilo y qué comportamientos se escriben en la parte de secuencia de comandos? Asegúrese de usar la sintaxis de exportación modular es6 (exportación predeterminada{}) en la sección de script para exportar. Luego,
use la sintaxis de importación modular es6 para importar dónde se debe llamar al componente. Los parámetros requeridos por el componente se pueden pasar directamente en la parte de la llamada. La lógica principal todavía se realiza en el componente.

7. Cuénteme sobre los pasos para usar el enrutamiento Vue.

Paso 1: Descargue el módulo de enrutamiento vue-router.
Paso 2: Cree un objeto de enrutamiento.
Paso 3: Configure las reglas de enrutamiento.
Paso 4: Registre el objeto de enrutamiento como una propiedad miembro del objeto de instancia de vue.

8. Hable sobre su comprensión de MVVM.

MVVM consta de tres partes M (capa de datos del modelo), V (capa de vista de vista), capa de modelo de vista VM (modelo de vista) Es una idea de diseño de marco, y vue está diseñado en base a mvvm. Entre ellos, la capa M (modelo) es responsable de inicializar los datos, V (vista) solo es responsable de la visualización de la página, VM (modelo de vista) se usa para conectar la capa de vista y la capa de modelo, y transferir los datos de los datos capa a una capa de vista para la visualización, y la capa de vista La operación se pasa a la capa de datos para la persistencia.

9. ¿Cuál es el ciclo de vida de Vue?

Fase de creación: Se ejecuta una sola vez. beforeCreate (comienza algunas operaciones de inicialización de datos y métodos, los datos en datos y los métodos en métodos aún no están disponibles),
creado (la inicialización de datos y métodos se ha completado, se pueden usar los datos en datos y los métodos en métodos) .
Etapa colgante: beforeMount (comenzar a renderizar el DOM virtual), montado (se ha completado el renderizado del DOM virtual, el DOM se puede manipular, solo una vez).
Fase de ejecución: se ejecuta varias veces. beforeUpdate (los datos en datos están a punto de actualizarse, se ejecutarán varias veces), actualizado (los datos en datos se han actualizado, se ejecutarán varias veces).
Fase de destrucción: Se ejecuta una sola vez, antes de Destruir (la instancia de vue está a punto de ser destruida, en este momento los datos en datos y los métodos en métodos aún están disponibles). destruido (la instancia de vue ha sido destruida, los datos en datos y los métodos en métodos ya no están disponibles).

10. ¿Cuántos modos de enrutamiento hay en Vue?

Hay dos modos de enrutamiento en Vue: hash, historial; el valor predeterminado es el modo hash; puede usar el atributo mode para cambiar el modo de enrutamiento al crear el objeto de enrutamiento, const router=new Router({mode:'history'}).

11. ¿Qué es el protector de navegación de ruta Vue y sus escenarios de aplicación?

Los protectores de enrutamiento realizan algún procesamiento cuando la página realiza saltos de enrutamiento, como la intercepción. Los siguientes protectores de navegación de enrutamiento se proporcionan en vue-router:

Guardia frontal global

const router = new VueRouter({
    
     ... }) 
router.beforeEach((to, from, next) => {
    
    
// from 从里来
// to 到哪里去
// next 是否要放行
})

gancho de publicación global

router.afterEach((to, from) => {
    
    
// ...
})

Route Exclusive Guard: al declarar una ruta, una función de gancho para una ruta específica.

const router = new 
VueRouter({
    
     routes: [
	{
    
    
		path: '/foo', 
		component: Foo,
		beforeEnter: (to, from, next) => {
    
    
			// ...
		 }
	  }
	]
})

`$route` 12. ¿Cuál es la diferencia entre y en el módulo de enrutamiento de Vue `$router`?

1. $routealmacena propiedades relacionadas con el enrutamiento (p. ej., $route.params,$route.query);
2. $routeralmacena métodos relacionados con el enrutamiento (p. ej. $router.push(),$router.go()), .

13. ¿Cuál es el papel del atributo clave en el recorrido del bucle de la instrucción v-for en vue?

La función del atributo clave es establecer una correspondencia uno a uno entre la capa de datos y la capa de vista, para facilitar la actualización parcial de la página más adelante.Si un dato cambia, solo el elemento DOM correspondiente a la se actualizarán los datos actuales.

14. ¿Cuáles son las diferencias entre Vue y react?

Vue implementa el enlace de datos bidireccional (interfaz de datos <=>).
React solo implementa un único flujo de datos (capa de datos => capa de interfaz).
Las directivas se proporcionan en Vue, pero no hay un concepto de directivas en React.
Vue usa expresiones de interpolación para representar datos y react usa jsx para representar datos.

15. Enumere los comandos de uso común en Vue

v-model: realiza el enlace de datos bidireccional;
v- bind: propiedad de enlace;
v-on: evento de registro;
v-html: establece el contenido de la etiqueta (permitir contenido html).
v-text: establece el contenido de la etiqueta (no se permite html).
v-clack: resuelve el problema del parpadeo de las expresiones de interpolación.
v-for: recorrer una matriz u objeto.

16. ¿Cómo resolver el problema de parpadeo de las expresiones de interpolación en Vue?

Use v-html o v-text en lugar de expresiones de interpolación;
Use v-clack para resolver el parpadeo de la expresión de interpolación, el primer paso: declare el selector de atributos [v-clack]{display:none}; el segundo paso: agregue el atributo v-clack a la etiqueta donde está la expresión de interpolación situado.

17. ¿Cómo cambiar componentes cambiando el valor del punto de anclaje en el enrutamiento de Vue?

Al escuchar el evento hashchange, los detalles son los siguientes:

window.addEventListener('hashchange',function(){
    
    
   console.log('hash change');
});

18. ¿Cómo agregar dinámicamente una regla de enrutamiento en Vue?

Utilice router.addRoutes([{ruta:'',componente:''}])

¿Qué es la carga diferida de ruta?, ¿Cuáles son los beneficios de la carga diferida de ruta?, ¿Cómo implementar la carga diferida de ruta?

La carga diferida de enrutamiento se refiere a cargar los componentes de enrutamiento correspondientes de forma asíncrona (de forma predeterminada, todos los componentes se cargan y empaquetan).
La ventaja de la carga diferida de rutas: puede mejorar la velocidad de carga de la página, especialmente la velocidad de carga de la página de inicio (porque después de usar la carga diferida, al cargar la página de inicio, no es necesario cargar los componentes correspondientes de otras páginas, y luego cargarlos cuando sea necesario).

import Vue from 'vue';
import Router from 'vue-router';
// 异步导入组件
// 异步加载方式一
const List = resolve => require(['@/components/list'], resolve);
// 异步加载方式二
const Detail = () => import(/* webpackChunkName: "group-master" */ 
'@/components/detail')

Vue.use(Router);
export default new Router({
    
    
// 路由规则
routes:[
	{
    
    path:'/list',component:List},
	{
    
    path:'/detail',component:Detail}
],
// 路由模式: 默认 hash, 可选值 hash(如#/index)|history(/index)
mode:'history'
});

19. ¿Cuáles son los componentes integrados en Vue?

componente, ranura, transición, grupo de transición, keep-alive

 <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

<!--tansition 动画组件的使用-->
<transition>
	<div v-if="ok">toggled content</div>
</transition>

20. ¿Qué propiedades hay en la instancia de vue?

vm.$data puede obtener los datos en los datos del objeto de instancia de vm;
vm.$props puede obtener los datos del objeto props recibidos por el componente vm;
vm.$el puede obtener el elemento raíz dom del objeto de instancia de vm;
vm.$refs puede obtener todos los elementos dom y las instancias de componentes registradas con el atributo ref en la instancia de vm.

21. ¿Cuál es la función de Vue.use (complemento) y a qué problemas se debe prestar atención al usarlo?

La función de Vue.use es instalar un complemento de Vue, este método debe llamarse antes de llamar a new Vue().

22. ¿Cuál es la función de vm.$nextTick(fn)?

Retrasar la ejecución de una operación hasta que se actualice el dom.

<body>
<div id="app"><h1 ref="h1">{
    
    {
    
    title}}</h1></div>
</body>
<script>
	var vm = new 
	Vue({
    
     el: '#app', 
		data: {
    
    
			title: '这是一个标题'
		}
	created: function () {
    
    
		 this.$nextTick(() => {
    
    
			// 在 created 里直接操作 ref 会报错
			this.$refs.h1.innerHTML = '这是更新以后的标题';
		});
	}
})

23. ¿Cuál es el papel de mixin en vue?

Los mixins proporcionan una forma muy flexible de distribuir la funcionalidad reutilizable en los componentes de Vue. Un objeto mixin puede contener opciones de componentes arbitrarias. Cuando un componente usa un mixin, todas las opciones del mixin se "mezclarán" en las propias opciones del componente. Cuando los componentes y los mixins contienen opciones con el mismo nombre, esas opciones se "fusionarán" de manera adecuada. Por ejemplo, los objetos de datos se fusionan recursivamente internamente y los datos de los componentes tienen prioridad cuando se producen conflictos. Las funciones de enlace con el mismo nombre se combinarán en una matriz, por lo que se llamará a todas. Además, los ganchos del objeto mixin se llamarán antes que los ganchos propios del componente.

24. ¿Cómo desarrollar un complemento vue?

Los complementos de Vue.js deben exponer un método de instalación. El primer parámetro de este método es el constructor de Vue y el segundo parámetro es un objeto de opciones opcional.

// 定义插件
const myPlugin={
    
     install:(Vue,options)=>{
    
    
	// 1. 添加全局方法或属性
	Vue.myGlobalMethod = function () {
    
    
	// 逻辑...
}
// 2. 添加全局指令
Vue.directive('my-directive', {
    
    
	bind (el, binding, vnode, oldVnode) {
    
    
	// 逻辑...
	}
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
    
    
	// 逻辑...
}
// 4. 注入组件选项(混入) 
Vue.mixin({
    
    
	created: function () {
    
    
	}
})
// 5. 注册全局组件
Vue.component('myCompent',{
    
     
	template:'<h1>loading...</h1>'
	});
}
}
export default myPlugin;
// 调用插件
Vue.use(myPlugin,{
    
    })

25. ¿Qué es ssr?, ¿cómo implementar ssr?

ssr es Quanpin (representación del lado del servidor), significado chino, representación del lado del servidor, por lo que la representación de la página se completa en el lado del servidor, el entorno de producción debe implementar el entorno nodeJS, porque la representación del lado del servidor debe realizarse con nodeJS. Se puede usar el marco Nuxt en vue Implementar renderizado del lado del servidor.

26. ¿Qué es el DOM virtual y cuáles son las ventajas de usar el DOM virtual?

Virtual dom es equivalente a agregar un caché entre js y real dom, utilizando el algoritmo dom diff para evitar operaciones innecesarias de dom, mejorando así el rendimiento. Use la estructura de objetos de JavaScript para representar la estructura del árbol DOM; luego use este árbol para construir un árbol DOM real, insértelo en el documento y reconstruya un nuevo árbol de objetos cuando cambie el estado. A continuación, compare el nuevo árbol con el antiguo, registre la diferencia entre los dos árboles, aplique la diferencia registrada al árbol DOM real creado en el paso 1 y la vista se actualizará.

27. ¿Cómo se realiza el carrito de compras en el centro comercial?

Los carritos de compras de los centros comerciales generalmente se escriben en el almacenamiento local, como cookies o localStorage, y se almacenarán en cadenas de formato de matriz, almacenando principalmente la identificación del producto, el nombre del producto, el precio del producto, la cantidad del producto y otra información (por supuesto, información confidencial como el producto). el precio se almacenará más tarde El backend aún prevalece, el almacenamiento aquí es solo para la conveniencia de mostrar en la página), si desea considerar el problema de compatibilidad, se recomienda almacenarlo en la cookie (porque localStorage no es compatible con navegadores con versiones inferiores). Si no considera los problemas de compatibilidad, use el rendimiento localStorage Será mejor. El carrito de compras se puede agregar cuando el usuario no ha iniciado sesión, o se puede agregar después de que el usuario inicie sesión. Esto depende completamente en el escenario empresarial específico.

28. ¿Cómo mantener el estado de inicio de sesión para los proyectos front-end y back-end?

Los proyectos que separan los extremos delantero y trasero generalmente usan tokens para mantener el estado de inicio de sesión. El token es en realidad una cadena aleatoria. Cuando el usuario ingresa el número de cuenta y la contraseña en la página de inicio de sesión, el front-end envía la contraseña de la cuenta al back-end. token) y responde al front-end, después del front-end obtiene el token, debe persistir en el lado del cliente (generalmente escrito en localStorage o sessionStorage, si es SPA, se almacenará en sessionStorage, si es MPA, se almacenará en el medio localStorage), luego el siguiente vez que envía una solicitud a la interfaz de datos de back-end, generalmente necesita enviar el token a la interfaz de datos de back-end, y la interfaz de datos de back-end verificará el token, y si es legal, responderá a la solicitud normalmente, si no Si es legal, le indicará que el usuario no ha iniciado sesión. El front-end juzga si el usuario ha iniciado sesión según si hay un token en el almacenamiento local.

29. ¿Cómo implementa generalmente la gestión de autoridad el sistema de gestión de fondo desarrollado por separado del front-end y el back-end?

En primer lugar, qué permisos tiene un determinado rol deben configurarse de antemano y almacenarse en la base de datos. Cuando se inicia sesión en una cuenta, la interfaz de datos de back-end debe devolver la lista de permisos del rol correspondiente a la cuenta, y el front-end debe representar dinámicamente la navegación del sistema de gestión de acuerdo con la lista de permisos. , la interfaz de datos de back-end también realizará una verificación de permiso secundaria (cuando un rol solicita una interfaz de datos o una página que no tiene autorización, la interfaz de datos de back-end no responderá normalmente).

30. En el desarrollo de Vue, si la capa de la página no se actualiza sincrónicamente después de actualizar los datos por algún motivo especial, ¿cómo solucionarlo?

Llame al método vm.$forceUpdate() para forzar la actualización de la página, lo que puede obligar a la instancia de Vue
a volver a renderizarse

Cinco preguntas de la entrevista React

1. Introduce brevemente el algoritmo diff en react?

Descomponga la estructura de árbol según el nivel y solo compare elementos en el mismo nivel. Agregue un atributo clave único a cada unidad de la estructura de la lista para facilitar la comparación. React solo emparejará componentes de la misma clase (la clase aquí se refiere al nombre del componente) para la operación de combinación.Cuando se llama al método setState del componente, React lo marcará como sucio. Al final de cada ciclo de eventos, React verifica todos los componentes marcados como sucios para volver a pintar. Representación selectiva de subárboles. Los desarrolladores pueden anular shouldComponentUpdate para mejorar el rendimiento de diff.

// 创建对比函数
function updateChildren(vnode, newVnode) {
    
     
	var children = vnode.children || []
	var newChildren = newVnode.children || []
	children.forEach(function (childrenVnode, index) {
    
    
	// 首先拿到对应新的节点
	var newChildVnode = newChildren[index]
	// 判断节点是否相同
	if (childrenVnode.tag === newChildVnode.tag) {
    
    
		// 如果相同执行递归，深度对比节点
		updateChilren(childrenVnode, newChildVnode)
	} else {
    
    
		// 如果不同则将旧的节点替换成新的节点
		repleaseNode(childrenVnode, newChildVnode)
	}
})
}
// 节点替换函数
function repleaseNode(vnode, newVnode) 
{
    
     var elem = vnode.elem
var newEle = createElement(newVnode)
}

2. ¿Qué es Redux?

Redux es una herramienta de administración de estado que se puede usar no solo en reaccionar, sino también en otros marcos, e incluso se puede usar sin el marco en sí. Hay varios componentes centrales en redux:

store El objeto que almacena datos debe crearse a través del método createStore;
Las reglas de acción para actualizar datos deben tener un estado de atributo y el valor debe ser una cadena;
La función de reducer para actualizar los datos debe pasar las reglas de actualización de datos y acciones de estado. Cuando se usa redux en react, react-redux generalmente se usa para simplificar los pasos de uso.

3. ¿Qué bibliotecas de componentes comunes tiene React?

Biblioteca de componentes del lado de la PC: element-ui (la biblioteca de componentes del lado de la computadora lanzada por Ele.me), ant-design (biblioteca de componentes del lado de la computadora de Alibaba, que cubre casi tres marcos principales); zent (la biblioteca de componentes del lado de la PC lanzada por Youzan)

4. ¿Cómo manipular DOM en React?

Establezca un atributo ref en la etiqueta que debe ser operado por dom y asegúrese de que el valor no se repita. Más tarde, en la parte js, puede this.refs.属性名obtener el objeto dom virtual de la etiqueta.

5. ¿Qué es un componente de orden superior (HOC)?

El valor de retorno de una función es una función, a la que llamamos función de orden superior. De manera similar, si el valor de retorno de un componente sigue siendo un componente, se denomina componente de orden superior. La conexión proporcionada en redux es una función de orden superior. -componente de orden.

6. ¿Qué sucede después de llamar a setState en React?

Después de llamar a la función setState en el código, React fusionará el objeto de parámetro entrante con el estado actual del componente y luego activará el llamado proceso de reconciliación (Reconciliación). Después del proceso de reconciliación, React construirá el árbol de elementos de React de acuerdo con el nuevo estado de una manera relativamente eficiente y comenzará a volver a renderizar toda la interfaz de usuario. Después de que React obtenga el árbol de elementos, React calculará automáticamente la diferencia de nodos entre el nuevo árbol y el antiguo, y luego minimizará la representación de la interfaz de acuerdo con la diferencia. En el algoritmo de cálculo de diferencia, React puede saber con relativa precisión qué posiciones han cambiado y cómo deben cambiarse, lo que garantiza actualizaciones a pedido en lugar de una nueva representación completa.

7. ¿Cuál es la diferencia entre estado y props en React?

state son los datos privados del componente, que se pueden leer y escribir, y props es una propiedad de solo lectura, generalmente desde el exterior (como el componente principal).

8. ¿Cuántas formas de crear componentes en React?

Crear componentes por medio de funciones, que son componentes sin estado (no de uso común);
React.createClass();Crea componentes por clase (debe heredar React.Component), este método se usa en el desarrollo real.

9. De acuerdo con las diferentes responsabilidades, los componentes en React se pueden dividir en varios tipos.

De acuerdo con las responsabilidades de los componentes, los componentes generalmente se dividen en componentes de interfaz de usuario y componentes de contenedor; los componentes de interfaz de usuario son responsables de la representación de la interfaz de usuario y los componentes de contenedor son responsables de administrar los datos y la lógica; los dos están conectados a través del método de conexión proporcionado por React-Redux .

10. ¿Cuál es la diferencia entre un componente de clase y un componente funcional?

Los componentes de clase no solo le permiten usar más funciones adicionales, como el propio estado del componente y los ganchos del ciclo de vida, sino que también permiten que el componente acceda directamente al estado de almacenamiento y mantenimiento; cuando el componente solo recibe accesorios y representa el componente mismo en el página, el componente A es un 'componente sin estado', que se puede crear utilizando una función pura. Dichos componentes también se conocen como componentes tontos o componentes de presentación.

11. Cuéntame sobre la función del ciclo de vida de react.

Fase de inicialización: getDefaultProps: obtiene las propiedades predeterminadas de la instancia getInitialState: obtiene el estado de inicialización de cada instancia componentWillMount: el componente está a punto de cargarse y renderizarse en la página renderizar: el componente genera un nodo DOM virtual aquí componentDidMount: el componente está realmente cargado.
Estado de ejecución: componenteWillReceiveProps: llamar cuando el componente está a punto de recibir propiedades shouldComponentUpdate: cuando el componente recibe nuevas propiedades o nuevos estados (puede devolver falso, no actualizar después de recibir datos, evitar llamadas de procesamiento, las funciones posteriores no continuarán ejecutándose) componentWillUpdate: el componente está a punto de actualizarse y no puede modificar las propiedades ni el estado. render: el componente se repintó. componentDidUpdate: el componente se ha actualizado.
Fase de destrucción: componentWillUnmount: El componente está a punto de ser destruido.

12. ¿Qué función de ciclo de vida se puede usar para optimizar el rendimiento de reacción?

shouldComponentUpdate Este método se utiliza para determinar si es necesario llamar al método render para volver a dibujar el dom. Debido a que la representación de dom consume mucho rendimiento, si podemos escribir un algoritmo dom diff más optimizado en el método shouldComponentUpdate, el rendimiento se puede mejorar considerablemente.

13. ¿Dónde se deben realizar las solicitudes de Ajax en los componentes de React?

En los componentes de React, las solicitudes de red deben realizarse en componentDidMount. Este método se ejecutará cuando el componente sea "montado" (agregado al DOM) por primera vez, y solo se ejecutará una vez en el ciclo de vida del componente. Más importante aún, no puede garantizar que la solicitud de Ajax se haya completado antes de que se monte el componente; si es así, significa que intentará llamar a setState en un componente que no está montado, lo que no funcionará. Hacer una solicitud de red en componentDidMount asegurará que haya un componente listo para actualizar.

14. ¿Por qué la primera letra del componente de reacción personalizado debe estar en mayúscula?

Cuando Babel compila el código jsx, si la primera letra está en mayúscula, se compilará como un componente de reacción y se compilará en un objeto js; si la primera letra está en minúscula, se considerará como una etiqueta html ordinaria y se analizará en una cadena ordinaria.

15. ¿Cuándo es setState síncrono y cuándo es asíncrono?

El "asincrónico" aquí no significa una implementación de código asíncrono, sino que reaccionar recopilará los cambios primero y luego realizará actualizaciones unificadas. setState es síncrono tanto en eventos nativos como en setTimeout. Asíncrono en eventos sintéticos y funciones gancho. En setState, juzgará si actualizar directamente o más tarde de acuerdo con isBatchingUpdates, y su valor predeterminado es falso. Pero React llamará a batchedUpdates antes de llamar a la función de procesamiento de eventos. Esta función establecerá isBatchingUpdates en verdadero. Por lo tanto, el proceso de procesamiento de eventos controlado por react se vuelve asíncrono (actualización por lotes).

6. ¿Desarrollo del miniprograma WeChat?

1. ¿Cuántos modelos de desarrollo convencionales existen para los miniprogramas de WeChat?

WeChat oficial: modo nativo;
Empresa de terceros: uni-app.

2. ¿Presenta brevemente el proceso de desarrollo de WeChat Mini Programs?

En primer lugar, debe registrarse como subprograma de WeChat, ya que se requiere un ID de aplicación durante el desarrollo del subprograma; en segundo lugar, descargue la herramienta de desarrollo oficial de Tencent (la herramienta de desarrollo debe iniciar sesión con su WeChat personal), y el subprograma solo puede ejecutarse dentro de la herramienta de desarrollo o la aplicación WeChat; Cree una aplicación, complete el ID de aplicación de la aplicación y la estructura del proyecto del subprograma se puede generar rápidamente.

3. Describa brevemente el ciclo de vida de los miniprogramas de WeChat.

El ciclo de vida del applet se divide en el ciclo de vida de la aplicación y el ciclo de vida de la página.
Ciclo de vida de la aplicación:
onLaunch: la aplicación se inicia, solo se ejecuta una vez;
onShow: la aplicación cambia al primer plano;
onHide: la aplicación cambia al modo de fondo;
noError: se produjo un error durante la fase de ejecución;
onPageNotFound: la página no pudo ser encontrado
Ciclo de vida de la página:
onLoad: la página comienza a cargarse;
onReady: la página se carga;
onShow: la página ingresa al estado de enfoque;
onHide: la página ingresa al estado de fondo

7. ¿Cuál es la diferencia entre Typescript y javascript?

1. ¿Qué tipos de datos hay en Typescript?

número (valor numérico), cadena (tipo de carácter), booleano (booleano), objeto (objeto), indefinido (indefinido), nulo (vacío), cualquiera (cualquier tipo), nunca, tupla, enumeración, matriz.

2. ¿Cuál es la diferencia entre Typescript y javascript?

Typescript es un superconjunto de javascript. Es una implementación de es6 y es compatible con todas las gramáticas es6. Typescript es solo un lenguaje intermedio escrito durante el proceso de desarrollo. Los navegadores no pueden analizar directamente Typescript. Typescript debe convertirse a javascript una vez que esté en línea.

Ocho, herramientas de control de versión de código

1. ¿Cuáles son los comandos más utilizados en git?

Inicializar almacén: git init
Agregar área de preparación: git agregar nombre de archivo
Enviar a almacén local: git commit -m 'comentario'
Empujar a almacén remoto: git push dirección de almacén nombre de sucursal
Extraer código de almacén remoto: git pull
Clonar almacén: git clone Dirección de almacén crear
rama: git rama nombre de rama cambiar
rama: git checkout nombre de rama ver
rama: git rama
fusionar rama: git fusionar nombre de rama ver registro
: git log (git log --oneline)
ver todos los registros: git reflog
Version rollback: git reset - -número de versión duro (commit-id se puede
obtener a través de git log --oneline)

2. ¿Cuál es la diferencia entre git y svn?

Git es un sistema de gestión de almacenes distribuido. Todo el mundo tiene un almacén local. SVN es un sistema de gestión de almacenes centralizado. Solo hay un almacén. Svn generalmente requiere que el servidor asigne cuentas y contraseñas a cada persona, mientras que git usa pares de clave pública/clave secreta ssh para distinguir a los diferentes programadores.

3. ¿Cuáles son las plataformas de alojamiento de código Git en línea?

github (https://www.github.com),
gitlab (https://www.gitlab.com),
gitee (https://www.gitee.com),
codificación (https://codificación.net),
Plataforma para desarrolladores de Tencent Cloud (https://dev.tencent.com),
bitbucket (https://bitbucket.org/product/)

Resumen de las preguntas de la entrevista de 2023 II