50 preguntas de la entrevista web front-end

(1) Reducir el tiempo de red

① Utilice la tecnología de almacenamiento en caché DNS ② Reduzca el tamaño de los archivos que deben transferirse ③ Acelere la transferencia de archivos

(2) Reducir el número de solicitudes enviadas

①Usar caché del navegador ②Usar archivos de imágenes fusionados

(3) Mejorar la simultaneidad de las descargas del navegador.

①Coloque el archivo JS al final del documento HTML ②Utilice varios nombres de dominio

(4) Deje que la página comience a mostrarse lo antes posible

① Coloque la referencia a la hoja de estilo al principio del documento HTML y coloque la referencia a JS al final del documento HTML, de modo que la descarga y ejecución del archivo JS no impida la visualización de otros elementos de la página después todas las páginas están descargadas. Desde la perspectiva del usuario, el usuario no sentirá en absoluto el tiempo de descarga y ejecución del archivo JS.

2. La diferencia entre cookie sessionStorage y localStorage

la diferencia:

Los datos de las cookies siempre se transportan en la solicitud http del mismo origen (incluso si no son necesarias), es decir, la cookie se transmite de un lado a otro entre el navegador y el servidor, mientras que sessionStorage y localStorage no envían automáticamente los datos al servidor y sólo se guardan localmente. Los datos de las cookies también tienen el concepto de ruta, que puede limitar las cookies para que solo pertenezcan a una ruta determinada.

El límite de tamaño de almacenamiento también es diferente. Los datos de las cookies no pueden exceder los 4K. Al mismo tiempo, debido a que cada solicitud http lleva una cookie, las cookies solo son adecuadas para guardar datos muy pequeños, como identificadores de sesión. Aunque sessionStorage y localStorage también tienen límites de tamaño de almacenamiento, son mucho más grandes que las cookies y pueden alcanzar 5 millones o más.

El período de validez de los datos es diferente. sessionStorage: solo es válido hasta que se cierra la ventana actual del navegador; localStorage: siempre es válido y se guarda incluso cuando se cierra la ventana o el navegador, por lo que se utiliza como datos persistentes; cookie: solo es válido antes del tiempo de vencimiento de cookies establecido, incluso si la ventana se cierra o el navegador se cierra

En diferentes ámbitos, el almacenamiento de sesión no se comparte en diferentes ventanas del navegador, ni siquiera en la misma página; el almacenamiento local se comparte en todas las ventanas del mismo origen; las cookies también se comparten en todas las ventanas del mismo origen.

3. ¿Cuál es la diferencia entre Canvas y SVG?

La diferencia entre los dos es la siguiente:

Una vez dibujado el lienzo, no puede acceder a los píxeles ni manipularlo; cualquier forma dibujada con SVG se puede recordar y manipular, y el navegador puede mostrarla nuevamente.

Canvas es muy beneficioso para dibujar animaciones y juegos; SVG es muy beneficioso para crear gráficos (como CAD).

Canvas se ejecuta más rápido porque no hay necesidad de recordar cosas en el futuro; debido a que SVG necesita registrar coordenadas para operaciones posteriores, se ejecuta más lento.

En Canvas, los eventos relacionados no se pueden vincular a objetos de dibujo; en SVG, los eventos relacionados se pueden vincular a objetos de dibujo.

Canvas dibuja un mapa de bits, por lo que está relacionado con la resolución; SvG dibuja una imagen vectorial, por lo que no tiene nada que ver con la resolución.

4. Cómo limpiar flotadores

La primera forma de borrar elementos flotantes es agregar un div vacío al final del mismo nivel del elemento flotante y agregar el atributo de borrado de estilo.

El segundo método es utilizar el atributo de desbordamiento cuando un elemento secundario flota, lo que envolverá con fuerza el contenido flotante para lograr el efecto de borrar el contenido flotante.

El tercer método: utilizar pseudoclases para borrar los flotantes: la pseudoclase posterior puede utilizar el segundo método para borrar los flotantes.

5. ¿Hable sobre su comprensión del diseño estático, el diseño adaptativo, el diseño receptivo y el diseño flexible?

diseño estático

Descripción: Simplemente configure el largo y el ancho. El tamaño no cambiará. No importa qué tan grande sea su pantalla, tendrá el mismo tamaño. La resolución no cambiará.

Diseño adaptativo

Descripción: mantiene el método de visualización original en diferentes resoluciones de pantalla. El tamaño del elemento se puede cambiar, pero la presentación no.

Disposición Responsive

Descripción: Los métodos de visualización son diferentes según las diferentes resoluciones de pantalla.

Diseño flexible (diseño flexible)

Descripción: Un diseño popular actualmente. Es difícil implementar algunos diseños complejos usando diseños tradicionales. Se vuelve muy fácil implementarlos usando un diseño flexible.

6. Método JS para determinar el tipo de datos.

1、tipo de

2 、 instancia de

3 、 constructor

4 、 a cadena

5. is Array determina si es una matriz

7. Métodos de matriz

push() agrega al final, join() convierte la matriz en cadena, pop() elimina al final, unshift() agrega primero, shift() elimina primero, sort() ordena, concat() fusiona matrices, slice() intercepta, actualiza la matriz splice(), consulta indexOf() desde el principio hasta el final, consulta lastIndexOf() desde el final hasta el final, orden inverso de la matriz inversa()

El método map() realiza un procesamiento especial en cada elemento de la matriz y devuelve una nueva matriz.

El método filter() filtra los elementos que cumplen con los requisitos en una matriz y devuelve una nueva matriz.

El método some () se utiliza para juzgar la matriz. Cuando una de las matrices cumple las condiciones, devuelve verdadero.

forEach Este método se utiliza en lugar del bucle for para recorrer la matriz.

El valor de retorno de cada es un valor booleano, que determina si todos los valores de la matriz cumplen las condiciones. Si es así, devuelve verdadero. Si uno no cumple las condiciones, devuelve falso.

El valor de retorno de find y findLast es el valor correspondiente que cumple las condiciones, este último atraviesa de atrás hacia adelante.

El método incluye se utiliza para determinar si una matriz contiene un valor específico. Si es así, devuelve verdadero; de lo contrario, devuelve falso.

8. método de cadena

charAt() Devuelve el carácter en la posición especificada concat() Conecta la cadena replace() Reemplaza split() Divide indexOf() La primera aparición de adelante hacia atrás lastindexOf() La primera aparición de atrás hacia adelante toLowerCase() Convertir a minúsculas toUpperCase( ) Convertir a mayúsculas clice() Intercepción de cadenas subString() Intercepción de cadenas

incluye(): Devuelve un valor booleano que indica si se encuentra la cadena del parámetro. comienza con (): devuelve un valor booleano que indica si la cadena del parámetro está al principio de la cadena original. terminaCon(): Devuelve un valor booleano que indica si la cadena del parámetro está al final de la cadena original. El método repetir() devuelve una nueva cadena, lo que significa repetir la cadena original n veces

padStart() y padEnd() aceptan dos parámetros: el primer parámetro es la longitud máxima para que la finalización de la cadena surta efecto y el segundo parámetro es la cadena utilizada para la finalización. Agrega menos y elimina más

9. Deduplicación de matrices

Utilice ES6 Set para eliminar duplicados (más comúnmente utilizado en ES6)

 function unique (arr) {
   return Array.from(new Set(arr))
 }

Usar filtros

 function unique(arr) {
   return arr.filter(function(item, index, arr) {
     //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
     return arr.indexOf(item, 0) === index;
   });
 }

Utilice for para anidar y luego empalme para eliminar duplicados (se utiliza más comúnmente en ES5)

 function unique(arr){            
         for(var i=0; i<arr.length; i++){
             for(var j=i+1; j<arr.length; j++){
                 if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                     arr.splice(j,1);
                     j--;
                 }
             }
         }
 return arr;
 }

10. La diferencia entre var let const

 ① var tiene promoción de variable, let y const no tienen promoción de variable 
 ② var es una variable global excepto funciones internas. Let y const pertenecen todos al alcance a nivel de bloque 
 ③ var se puede definir repetidamente, lo que sobrescribirá las variables anteriores. Let y const no se puede definir repetidamente y se informará un error. 
 4. var no está temporalmente muerto. Let y const tienen zonas muertas temporales. 
 ⑤ Cuando var se declara como una variable global, se montará en la ventana. Let y const sí no se puede montar en la ventana. 
 ⑥var y let son variables. const es una constante.

11. ¿Qué hace exactamente el nuevo operador?

 ①new creará un nuevo objeto vacío en la memoria 
 ②new señalará este objeto 
 ③Ejecutará el código en el constructor y agregará propiedades y métodos a este nuevo objeto 
 ④new devolverá este nuevo objeto (por lo que el constructor no necesita regresar)

12. Hablemos de este puntero en JavaScript.

1. Llamada de función ordinaria, en este momento esto apunta a la ventana

2. Llamada al constructor, en este momento esto apunta al objeto de instancia.

3. Llamada al método de objeto, en este momento esto apunta al objeto al que pertenece el método.

4. A través del método de vinculación de eventos, esto apunta al objeto del evento vinculado.

5. Función de temporizador, en este momento apunta a la ventana.

13. Aplanamiento de matrices

 [1, [2, [3]]].plano(2) // [1, 2, 3]

Implementación de ES6:

 función aplanar (arr) { 
     while (arr. some (item => Array. isArray (item))) { 
         arr = [].concat (... arr); 
     } 
     devolver llegada; 
 } }

14. ¿Qué es el bucle de eventos?

 ① Las tareas sincrónicas y asincrónicas ingresan a diferentes lugares, ingresan sincrónicamente al hilo principal, ingresan asincrónicamente a la lista de eventos y registran la función 
 ② Cuando se completa lo especificado, la lista de eventos moverá esta función a la cola de eventos 
 ③ La tarea en el hilo principal está vacío después de la ejecución. Irá a la cola de eventos para leer la función correspondiente y colocarla en el hilo principal para su ejecución. 
 ④ El proceso anterior se repetirá continuamente, que es lo que llamamos bucle de eventos.

15.La diferencia entre promesa.all y promesa.race

 ①Solo cuando se cumplen todos los estados, se cumple el estado de p. En este momento, sus valores de retorno forman una matriz y se pasan a la función de devolución de llamada de p. ②Siempre que se rechace uno de p1, p2 y p3 
 , p's El estado cambiará a rechazado. En este momento, el valor de retorno de la primera instancia rechazada se pasará a la función de devolución de llamada de la página 
 ③ Siempre que cambie el estado de una promesa, el estado de la promesa externa cambiará y el valor de retorno de la primera promesa modificada ser pasado a la promesa externa valor de retorno de la capa

16. Ventajas y desventajas de la promesa

 ① Las operaciones asincrónicas se pueden expresar como un proceso de operación sincrónica, evitando funciones de devolución de llamada anidadas. Además, el objeto de promesa proporciona una interfaz unificada, lo que facilita el control de las operaciones asincrónicas. ② La promesa no se puede cancelar. Una vez establecida, se ejecuta inmediatamente y no 
 se puede cancelar a mitad de camino 
 ③ Si la función de devolución de llamada no está configurada, se generará un error internamente y no se reflejará externamente 
 ③ Cuando está en el estado pendiente, es imposible saber en qué etapa se encuentra el progreso actual (recién iniciado o sobre a completar)

17. La diferencia entre funciones de flecha y funciones ordinarias.

 ①El objeto this en el cuerpo de la función de flecha es el objeto donde está definido, no el objeto utilizado. 
 ②La función de flecha no tiene argumentos. Si desea usarla, puede usar rest en su lugar. 
 ③La función de flecha no se puede usar como constructor y no se puede usar nuevo 
 ④La función de flecha no tiene prototipo, no se puede heredar 
 ⑤ La función de flecha no se puede usar como función generadora y la palabra clave rendimiento no se puede usar

18.La diferencia entre window.onload y $(document).ready()

 ①window.onload debe esperar hasta que se cargue todo el contenido de la página web antes de ejecutar 
  $(document).ready() y esperar hasta que se cargue el DOM. 
 ②window.onload no puede escribir múltiples 
  $(document).ready() en el mismo página. Múltiples 
 ③ abreviatura window.onload Ninguna 
  $(document).ready()==>(function(){}) 
  <br/>

19. ¿Cuántos métodos de solicitud de página existen?

get: solicita información de la página especificada y devuelve el cuerpo de la entidad. encabezado: similar a una solicitud de obtención, excepto que no hay contenido específico en la respuesta devuelta, que se utiliza para obtener el encabezado. post: envíe datos al recurso especificado para procesar la solicitud (como enviar un formulario o cargar un archivo). Los datos se incluyen en el cuerpo de la solicitud. Las solicitudes de publicación pueden resultar en la creación de nuevos recursos o la modificación de recursos existentes. put: Los datos transferidos del cliente al servidor reemplazan el contenido del documento especificado. eliminar: solicita al servidor que elimine la página especificada. conectar: el protocolo HTTP/1.1 está reservado para servidores proxy que pueden cambiar la conexión a una canalización. opciones: permite a los clientes ver el rendimiento del servidor. trace: hace eco de las solicitudes recibidas por el servidor, se utiliza principalmente para pruebas o diagnóstico.

20. ¿Qué es el dominio cruzado? ¿Cómo resolver?

Esto significa que el navegador no puede ejecutar scripts de otros sitios web. Es causado por la política del mismo origen del navegador , que es una restricción de seguridad impuesta por el navegador en JavaScript.

Soluciones entre dominios 1. Entre dominios a través de jsonp 2. Documento.dominio entre dominios + iframe 3. Ubicación.hash + iframe 4. Ventana entre dominios.nombre + iframe 5. PostMessage entre dominios 6. Recurso entre dominios compartir (CORS) 7. dominio cruzado proxy nginx

21. Todo el proceso desde la URL hasta la finalización de la carga de toda la página y su visualización en la pantalla.

 ① Ingrese la dirección 
 ② El navegador busca la dirección IP del nombre de dominio 
 ③ El navegador envía una solicitud http al servidor web 
 ④ La respuesta de redireccionamiento permanente del servidor 
 ⑤ El navegador rastrea la dirección de redireccionamiento 
 ⑥ El servidor procesa la solicitud 
 ⑦ El servidor regresa una solicitud http 
 ⑧ El navegador muestra HTML 
 ⑨El navegador envía una solicitud para obtener recursos (videos, imágenes, etc.) incrustados en HTML

22. Enumere más de 4 métodos de optimización del rendimiento de un sitio web.

 ① Minimizar la cantidad de solicitudes HTTP ② Precarga ③ Reducir la cantidad de elementos DOM ④ Reducir el acceso DOM ⑤ AJAX almacenable en caché ⑥ Reducir la cantidad de búsquedas de DNS ⑦ 
 Usar JavaScript y CSS externos ⑧ Cortar JavaScript y CSS ⑨ Evitar saltos ⑩ Retrasar la carga de contenido      
 ① Usar Minimizar el número de iframes ② Colocar la hoja de estilo en la parte superior ③ Usar <link> en lugar de @import ④ Eliminar scripts duplicados ⑤ Reducir el tamaño de las cookies, es mejor usar localStorage ⑥ Optimizar CSS Spirite

23.La diferencia entre setTimeout, Promise, Async/Await

 Esta pregunta examina principalmente las diferencias entre los tres en el bucle de eventos: el bucle de eventos se divide en cola de macrotareas y cola de microtareas. 
 (1) La función de devolución de llamada de settimeout se coloca en la cola de macrotarea y se ejecutará después de que se borre la pila de ejecución; (2) 
 La función de devolución de llamada en promesa, luego se colocará en la cola de microtarea de la macrotarea correspondiente y esperará la sincronización en la macrotarea. Ejecutar después de ejecutar el código; 
 (3) La función asíncrona indica que puede haber un método asincrónico en la función, y await va seguido de una expresión. Cuando se ejecuta el método asíncrono, la expresión se ejecutará inmediatamente cuando encuentre espera, y luego el código que sigue a la expresión se colocará en En la cola de microtask, abandone la pila de ejecución y deje que el código de sincronización se ejecute primero. 
 <br/>

24.La diferencia entre set y mapa

 ① Los principales escenarios de aplicación de Set y map son la reorganización y el almacenamiento de datos. 
 ② Set es una estructura de datos llamada conjunto, y map es una estructura de datos llamada diccionario. 
 ③ Set en sí es un constructor que se utiliza para generar la estructura de datos del conjunto. El objeto establecido le permite almacenar cualquier tipo de valor único, ya sea un valor primitivo o una referencia de objeto. 
 ④ El mapa es esencialmente una colección de pares clave-valor. Es similar a una colección y se puede atravesar (forEach). Existen muchos métodos que se pueden convertir a varios formatos de datos.

25. Anota todos los cargadores que conoces y sus funciones

 ①babel-loader: procesa archivos js y escapará de la sintaxis de es5 o superior 
 ②css-loader: ayuda a empaquetar y procesar archivos CSS en el paquete web 
 ③style-loader: utiliza el código CSS empaquetado por css-loader con la etiqueta <style></style> El formulario se inserta en el archivo HTML 
 ④less-loader: se usa para procesar el archivo .less compilado y convertirlo en código de archivo CSS 
 ⑤sass-loader: carga sass/scss y compila sass/scss en css 
 ⑥url-loader: se usa para procesar imágenes

26. Estructura del proyecto del mini programa.

 ①-project.config.json: archivo de configuración del proyecto. Por ejemplo, configure el nombre del proyecto, configure el appid, etc. 
 ②-app.js: Procesamiento lógico de mini programa (js global). Por ejemplo, el código después de cargar y ejecutar el subprograma 
 ③-app.json: la configuración pública del subprograma. Por ejemplo, la página del miniprograma, si hay una barra de pestañas, etc. 
 ④-app.wxss: estilo público del miniprograma (css global). Los estilos escritos aquí pueden ser utilizados por todas las páginas 
 ⑤-pages: página del subprograma de almacenamiento 
     -index: el nombre de la página 
         -index.js: el archivo de procesamiento lógico de la página de índice (js parcial) 
         -index.json: el archivo de configuración de la página de índice 
         -index.wxml: la estructura de la página de índice (equivalente a HTML) 
         -index.wxss: el estilo de la página de índice (css local) 
     -Otras páginas

27.Cómo el paquete web optimiza el rendimiento

①Rendimiento de compilación : cuanto mayor sea el rendimiento de compilación, mayor será la eficiencia del desarrollo. Reduzca el análisis de módulos, optimice el rendimiento del cargador, limite las aplicaciones del cargador, los resultados del cargador de caché, el empaquetado multiproceso y habilite el reemplazo en caliente. ②Rendimiento de transmisión: enfóquese en la red en este Respecto al volumen total de transferencia, así como la cantidad de archivos, subcontratación, subcontratación manual, subcontratación personalizada, optimización del tamaño del módulo, compresión de código, carga diferida, gzip, herramientas auxiliares ③ Rendimiento de ejecución: se refiere principalmente a la eficiencia de ejecución de js en el cliente Rendimiento de ejecución

28.La diferencia entre cargador y complemento

LoaderLa esencia es una función en la que el contenido recibido se convierte y se devuelve el resultado convertido. Debido a que Webpack solo conoce JavaScript, Loader se convierte en un traductor y realiza trabajos de preprocesamiento para traducir otros tipos de recursos.

PluginEs un complemento. Basado en el marco de flujo de eventos Tapable, los complementos pueden ampliar las funciones de Webpack. Muchos eventos se transmitirán durante el ciclo de vida de ejecución de Webpack. El complemento puede escuchar estos eventos y cambiar los resultados de salida en el en el momento adecuado a través de la API proporcionada por Webpack.

LoaderConfigurado en module.rules como las reglas de análisis del módulo, el tipo es una matriz. Cada elemento es un Objeto, que contiene atributos como prueba (tipo de archivo), cargador, opciones (parámetros), etc.

PluginConfigurado por separado en complementos, el tipo es una matriz, cada elemento es una instancia de complemento y los parámetros se pasan a través del constructor.

29. ¿Qué es la actualización en caliente?

La página puede actualizar nuestro contenido guardado en tiempo real en lugar de tener que actualizarse manualmente.

El principio de la actualización en caliente: después de guardar, compárelo con el contenido anterior. Si la comparación encuentra que hay modificaciones, el contenido modificado se actualizará. Si no hay contenido actualizado, mantendremos el contenido anterior sin cambios.

30. Anota todos los cargadores y funciones que conoces

babel-loader: procesa archivos js y escapará de la sintaxis de es5 o superior css-loader: ayuda a empaquetar y procesar archivos CSS style-loader: envuelve el código CSS empaquetado por css-loader con la etiqueta <style></style> El formulario se inserta en el archivo HTML less-loader: se usa para procesar el archivo .less compilado y convertirlo en código de archivo CSS sass-loader: carga sass/scss y compila sass/scss en css url-loader: se usa para procesar imágenes

31.Cómo el paquete web implementa la precarga

Al declarar la importación, utilice la instrucción integrada de webpackPrefetch: true para precargar el recurso especificado.

Precarga: espere hasta que se carguen otros recursos y el navegador esté inactivo, luego cargue en secreto los recursos configurados para precargar.

 import(webpackChunkName:'test' ,webpackPrefetch:true"./test").then(({test}) => {
             console.log('test加载成功')
             test()
 })

32. Los usos y diferencias de cinco rutas (wx.switchTab, wx.reLaunch, wx.redirectTo, wx.navigateTo, wx.navigateBack)

1. wx.switchTab (saltar a la página de inicio): salte a la página de la barra de pestañas y cierre todas las demás páginas que no sean de la barra de pestañas para ir a la página de inicio.

2. wx.reLaunch (cerrar todos los saltos de página): cierra todas las páginas y abre una página dentro de la aplicación.

3. wx.redirectTo (Cerrar salto de página actual): cierra la página actual y salta a una página en la aplicación, pero no está permitido saltar a la página de la barra de pestañas.

4. wx.navigateTo (retener salto de página): conserva la página actual y salta a una página en la aplicación, pero no puede saltar a la página de la barra de pestañas.

5. wx.navigateBack (retorno de página): cierra la página actual y regresa a la página anterior o a la página de varios niveles. Puede obtener la pila de páginas actual a través de getCurrentPages y decidir cuántos niveles se deben devolver.

33.El papel de setData

La función setData se utiliza para enviar datos desde la capa lógica a la capa de vista (asíncrono) y al mismo tiempo cambiar el valor correspondiente de this.data (síncrono)

34.wx: El papel de la clave

Si la posición de los elementos en la lista cambia dinámicamente o se agregan nuevos elementos a la lista y desea que los elementos en la lista mantengan sus propias características y estado, debe usar wx:key para especificar el identificador único del elementos de la lista.

35. Ciclo de vida del mini programa.

En primer lugar, se llama internamente a la función de ciclo de vida del subprograma app.jsy App(Object)la función se utiliza para registrar un subprograma. Acepta un Objectparámetro para especificar la devolución de llamada del ciclo de vida de su subprograma; generalmente hay funciones de devolución de llamada del ciclo de vida onLaunchcomo monitorear la inicialización del subprograma, onShowmonitorear la visualización del subprograma, onHidemonitorear la ocultación del subprograma, etc.

1. Cuando el usuario abre el miniprograma por primera vez, se activa onLaunch (solo se activa una vez) y el miniprograma comienza a inicializarse.

2. Después de inicializar el código del mini programa, active el método onShow y monitoree la pantalla del mini programa. En este momento, podemos ver la página.

3. Cuando el mini programa ingresa al fondo desde el primer plano, se activa el método onHide. Cuando cambiamos a otros programas móviles (de la aplicación Baidu al programa móvil QQAPP), el cambio de aplicación se coloca en segundo plano y se ejecuta.

4. Cuando el mini programa ingresa a la pantalla de primer plano desde el fondo, se activa el método onShow. Cuando volvemos al programa móvil, la aplicación cambia al primer plano (de QQAPP al programa móvil de la aplicación Baidu) y se ejecuta.

5. Cuando se produce un error de secuencia de comandos en el subprograma o falla la llamada a la API, se activará el método onError con información de error.

36. Ciclo de vida de la página.

datos	Datos iniciales de la página.
en carga	Una vez completada la inicialización del programa, la carga se activa cuando la página se carga por primera vez y solo se activará una vez.
en el programa	Función de ciclo de vida: visualización de la página de monitor
listo	Función de ciclo de vida: escuche la finalización de la representación inicial de la página
enOcultar	Función de ciclo de vida: escuche la ocultación de páginas
enDescargar	Función de ciclo de vida: escucha la descarga de la página
enPullDownRefresh	Función de procesamiento de eventos relacionados con la página: monitoreo de acciones desplegables del usuario
enReachBottom	Función de manejo para evento desplegable de página

37. ¿Cómo logra el subprograma WeChat compartir datos entre páginas?

① Utilice una plantilla de componente para pasar parámetros ② Utilice variables globales para implementar la transferencia de datos let App = getApp() ③ Transferencia entre componentes, enlace de atributos ④ Caché local (almacenamiento) ⑤ Cinco tipos de transmisión de ruta

38.La diferencia entre bindtap y catchtap

El enlace de eventos bindtap no previene los eventos burbujeantes. El enlace de eventos catchtap puede prevenir los eventos burbujeantes.

39. La diferencia entre subcontratación independiente y subcontratación ordinaria de pequeños programas

Subcontratación ordinaria: debe depender del paquete principal a ejecutar y puede hacer referencia a recursos públicos en el paquete principal.

Subcontratación independiente: puede ejecutarse de forma independiente sin descargar el paquete principal y no puede hacer referencia a recursos públicos en el paquete principal.

40. ¿Cuáles son los atributos de tipo abierto del botón?

contacto: abrir sesión de servicio al cliente bindcontact: devolución de llamada

compartir: activar el reenvío de usuarios

getPhoneNumber: obtiene el número de teléfono móvil del usuario. bindgetphonenumber: devolución de llamada

getUserInfo: obtener información del usuario bindgetuserinfo: devolución de llamada

openSetting: abre la página de configuración de autorización. La diferencia entre subcontratación independiente y subcontratación ordinaria del subprograma

41.La diferencia entre los módulos commonjs y ES6

1. La sintaxis de importación y exportación del módulo de los dos es diferente: Commonjs usa module.exports, exporta exportaciones y requiere importaciones, ES6 usa export e import.

2. Commonjs carga módulos en tiempo de ejecución, mientras que ES6 determina las dependencias de los módulos durante la compilación estática.

3. ES6 elevará todas las importaciones a la cima durante la compilación y commonjs no generará require.

4. Lo que commonjs exporta es una copia del valor, y el resultado de la carga se almacenará en caché. Una vez que el valor se modifica internamente, no se sincronizará con el exterior. ES6 es una referencia exportada y las modificaciones internas se pueden sincronizar con el exterior.

5. El nivel superior this en commonjs apunta al módulo en sí, mientras que el nivel superior this en ES6 no está definido.

42. La diferencia entre el subprograma wx.setStorageSync y wx.setStorage

 (1) Función: almacenar datos en la clave especificada en el caché local. Sobrescribirá el contenido original correspondiente a la clave. A menos que el usuario los elimine activamente o el sistema los borre por motivos de espacio de almacenamiento, los datos siempre estarán disponibles. La longitud máxima de datos que se permite almacenar en una sola clave es 1 MB y el límite superior de todo el almacenamiento de datos es 10 MB 
 (2) Diferencia: wx.setStorageSync es un caché sincrónico wx.setStorage es un caché asincrónico 
     ① Se usa caché asincrónico, independientemente de éxito o fracaso, el programa se ejecutará hacia abajo 
     ② Usando caché sincrónico, solo si el caché tiene éxito, el programa se ejecutará hacia abajo 
     ③ El caché asíncrono tiene mejor rendimiento y mejor experiencia de usuario 
     ④ Los datos almacenados en caché sincrónicamente son más seguros

43.¿Cuáles son las diferencias entre el envío de formulario y la solicitud ajax?¿Cómo enviar datos de formulario usando ajax?

 ①El envío de Ajax se realiza de forma asincrónica y no es necesario actualizar la página web, mientras que el envío del formulario requiere actualización. 
 ②Ajax debe implementarse con JS, pero no se requiere el formulario. 
 ③Ajax requiere un programa de utilidad para procesar datos y el formulario el envío es automático según la estructura del formulario. Completado, no se requiere intervención de código 
 ①
 Serializar los datos del formulario 
 ② Encuentre el envío del formulario a través de la ventana

44. La diferencia entre el mini programa WeChat y H5

 ① Diferentes entornos operativos (los mini programas se ejecutan en WeChat, H5 se ejecuta en los navegadores) 
 ② Los costos de desarrollo son diferentes (H5 debe ser compatible con diferentes navegadores) 
 ③ La obtención de permisos del sistema es diferente (los permisos a nivel del sistema se pueden conectar sin problemas con los mini programas) 
 ④ Aplicación en el proceso de velocidad invisible del entorno de generación (H5 necesita optimizar continuamente el proyecto para mejorar la experiencia del usuario)

45. Nombra los componentes de la interfaz de usuario comúnmente utilizados en mini programas.

 Componentes del contenedor de visualización: vista, deslizador, elemento de deslizador 
 Componentes de contenido básico: texto, icono, texto enriquecido 
 Componentes del formulario: botón, desde, casilla de verificación, entrada 
 Componentes de navegación: navegador 
 Componentes de medios: imagen

46. ¿Cuáles son las formas de cargar JS de forma diferida?

1. La carga diferida de JS ayuda a mejorar la velocidad de carga de la página. 2. aplazar y asíncrono, creación dinámica de DOM (el más utilizado), carga asíncrona bajo demanda 3. JSdefer: script de retraso. Descargue inmediatamente, pero retrase la ejecución (retrase hasta que se analice toda la página antes de ejecutarla) y ejecute los scripts en el orden en que aparecen. 4. asíncrono: script asincrónico. Se ejecutará inmediatamente después de la descarga, pero no se garantiza que se ejecute en el orden en que aparecen los scripts.

47. Introducción al enrutamiento`history`

El objeto de historial guarda el historial en línea del usuario, a partir del momento en que se abre la ventana del navegador. Por razones de seguridad, los desarrolladores no pueden conocer las URL por las que han navegado los usuarios. Sin embargo, a través de la lista de páginas visitadas por el usuario, también es posible retroceder y avanzar sin conocer la URL real.

48. ¿Hablar sobre la implementación de la programación asincrónica ?

Llamar de vuelta

Ventajas: simple y fácil de entender Desventajas: no propicio para el mantenimiento, alto acoplamiento de código

escucha de eventos

Ventajas: fácil de entender, se pueden vincular múltiples eventos y se pueden especificar múltiples funciones de devolución de llamada para cada evento. Desventajas: impulsado por eventos, el proceso no es lo suficientemente claro. Publicar/suscribir (modo observador) es similar a escuchar eventos, pero Se puede hacer a través del 'Centro de mensajes', para saber cuántos editores y suscriptores hay ahora.

Objeto de promesa

Ventajas: puede utilizar el método then para escribir en cadena; puede escribir funciones de devolución de llamada cuando se producen errores Desventajas: es relativamente difícil de escribir y comprender

Función de generador

Ventajas: mecanismo de intercambio de datos y manejo de errores dentro y fuera del cuerpo de la función Desventajas: gestión de procesos inconveniente

función asíncrona

Ventajas: ejecutor incorporado, mejor semántica, aplicabilidad más amplia, devoluciones Promesa, estructura clara Desventajas: mecanismo de manejo de errores

49. La diferencia entre Jsonp y Ajax

Ajax pertenece a la misma política de origen, mientras que Jsonp pertenece a la política de origen no original. Los principios son diferentes: 1.Ajax: nuevo XMLHttpRequest 2.jsonp: cree dinámicamente etiquetas de script, agregue atributos src, el front-end pasa una devolución de llamada a el fondo, y el fondo devuelve llamadas a funciones, y el front-end Cuando se llama a la función devuelta y luego se analiza, los valores de retorno son diferentes: 1. Ajax devuelve un objeto 2. jsonp devuelve una cadena Los métodos de solicitud son diferentes : Ajax tiene múltiples métodos de solicitud - (obtener, publicar, eliminar, colocar, parchear) jsonp: solo obtener

50. Cuénteme sobre su comprensión del alcance de Javascript.

El alcance se refiere al área del programa donde se definen las variables. Esta ubicación determina el ciclo de vida de la variable. Popularmente entendido, el alcance es el rango accesible de variables y funciones, es decir, el alcance controla la visibilidad y el ciclo de vida de variables y funciones.

Antes de ES6, solo había dos tipos de alcance en ES: alcance global y alcance de función.

Se puede acceder a los objetos en el ámbito global en cualquier parte del código y su ciclo de vida sigue el ciclo de vida de la página. El alcance de la función son las variables o funciones definidas dentro de la función, y solo se puede acceder a las variables o funciones definidas dentro de la función. Una vez finalizada la ejecución de la función, las variables definidas dentro de la función serán destruidas. El alcance a nivel de bloque aparece en ES6. El alcance a nivel de bloque es un fragmento de código entre llaves, como funciones, declaraciones de juicio, declaraciones de bucle e incluso un solo {} puede considerarse como un alcance a nivel de bloque. .