Breve reseña (vue + js)

1. La diferencia entre forEach y for loop

forEach no tiene valor de retorno, no se puede interrumpir, no admite operaciones de adición y eliminación en el bucle, solo es adecuado para recopilación o recorrido de matriz

2. Flexibilidad y diseño

1. Realización: El elemento principal es una caja flexible con tres elementos secundarios en el interior. Establezca la alineación horizontal de los elementos secundarios, y el primer elemento ocupa el 20%, el segundo elemento ocupa el 30% y el tercer elemento ocupa el espacio restante

Alineación horizontal: dirección de flexión:
proporción de ajuste de fila : el primer elemento flex: 2; el segundo elemento flex: 3; el tercer elemento flex: 5

2, habla sobre la colección de tres atributos de flex

flex-grow: establece o recupera la relación de expansión de la caja flexible

让第二个元素的宽度为其他元素的三倍：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

base flexible: establecer o recuperar el valor de referencia de escala de caja elástica

设置第二个弹性盒元素的初始长度为 80 像素：
div:nth-of-type(2) {flex-basis: 80px;}

base flexible: Establezca la relación de contracción de la caja elástica.
Cálculo: valor de desbordamiento de ancho propio valor de contracción flexible valor de ancho propio / peso
total peso total = subelemento valor de contracción flexible * suma de ancho propio

3. Tipo de datos y copia en profundidad

1. ¿Cómo juzgar si se trata de una copia profunda o superficial?
2. ¿Cómo hacer una copia profunda?
3. ¿Cuáles son los dos tipos de datos? ¿Qué incluye?
4. ¿Cómo se almacenan estos dos tipos de datos en la pila?
Enlace de referencia: https://www.cnblogs.com/echolun/p/7889848.html

4. Mapa y ambientación en es6

1. conjunto: Desduplicación de matriz, es un conjunto de claves, pero no almacena valor. Dado que la clave no se puede repetir, no hay una clave repetida en el Conjunto.
2. Mapa: La estructura de un conjunto de pares clave-valor tiene una velocidad de búsqueda extremadamente rápida. Resolvió el problema de que JavaScript solo puede usar cadenas como claves

5. La diferencia entre la importación y exportación de módulos en es6 y el nodo

• es6
  import: importar el nombre del módulo de ""
  Exportar: usar exportar por defecto y exportar para exponer miembros al exterior
  [Nota 1] : Los miembros expuestos por exportación solo pueden ser recibidos por {}. Este formulario se llama exportación
  simultánea bajo demanda Si algunos miembros no son necesarios al importar, no se pueden definir en {}
  [Nota 2] : Los miembros exportados por exportación deben ser recibidos por {} estrictamente de acuerdo con el nombre de exportación.
  Si tiene que asignar un alias al módulo no predeterminado exportado, utilice as a alias
• 
  importación de nodo : use var name = require ('identificador de módulo') para importar
  Exportar: use module.export y export para exponer miembros

6. Vaya a enrutamiento en vue y pase parámetros y consultas

• <router-link to = "路径">
• this. $ router.push (): comúnmente utilizado para pasar parámetros

1. Método de importación de consultas: los parámetros solo pueden usar el nombre para importar rutas, y la consulta debe usar la ruta para importar

       created(){  //生命周期里接收参数
            this.id = this.$route.query.id,  //接受参数关键代码 【注意！！！】接受的时候是 **route**！！！
            console.log(this.id)  
      }

2. Método de transmisión de consultas: similar al parámetro get en nuestro ajax, los parámetros se muestran en la barra de direcciones del navegador y los parámetros son similares a los de publicación, y los parámetros no se muestran en la barra de direcciones del navegador.

       this.$router.push({  //核心语句    
           path:'/select',   //跳转的路径
           query:{           //路由传参时push和query搭配使用 ，作用时传递参数
           id:this.id , 
           }
        })

• this. $ router.replace {path: '/'} [similar al segundo]
• Los parámetros son parte del enrutamiento y deben estar presentes. La consulta es un parámetro empalmado después de la URL, no importa si no es así.
  Una vez que params está configurado en la ruta, params es parte de la ruta, si la ruta tiene params para pasar parámetros, pero este parámetro no se pasa durante el salto, el salto fallará o la página no tendrá contenido.

7. ¿Cuál es la diferencia entre vuex, localstorage y sessiontorage? Tamaño y características de la cookie

• la diferencia:

1. Vuex se almacena en la memoria, el almacenamiento local (almacenamiento local) se almacena localmente como un archivo para almacenamiento permanente, el almacenamiento de sesiones (almacenamiento de sesiones) se almacena temporalmente.
2. LocalStorage y sessionStorage solo pueden almacenar tipos de cadena. Para objetos complejos, puede usar stringify y parse del objeto JSON proporcionado por ECMAScript para procesar

• Escenario de aplicación: vuex se usa para transferir valores entre componentes, el almacenamiento local y el almacenamiento de sesiones se usan principalmente para transferir valores entre diferentes páginas.

• Permanencia: cuando se actualiza la página (la página de actualización aquí se refiere a -> Actualizar F5, que pertenece a borrar la memoria), el valor almacenado por vuex se perderá y la página de almacenamiento de sesiones se borrará después de que se cierre, pero el almacenamiento local no.
  [Nota]: Para los datos sin cambios, se puede usar localstorage en lugar de vuex, pero cuando dos componentes comparten una fuente de datos (objeto o matriz), si uno de los componentes cambia la fuente de datos y se espera que el otro componente responda al cambio. , Localstorage, el almacenamiento de sesiones no se puede realizar, la razón es la diferencia 1.

• cookie: se enviará al servidor junto con http

1. Hay un límite de tamaño, 4kb
2. Límite de cantidad: 50
3. Almacenamiento a nivel de sesión, borrado cuando se cierra la página
4. La cookie puede abarcar varias páginas web bajo el mismo nombre de dominio, ¡pero no puede abarcar varios nombres de dominio!
5. Escenarios de uso: (1) guardar el estado de inicio de sesión del usuario; (2) rastrear el comportamiento del usuario; (3) personalizar la página; (4) crear un carrito de compras ... etc.

8. Cinco atributos básicos de vuex

https://www.cnblogs.com/y896926473/p/6709733.html

• ¿Qué es vuex?
  Vuex es un modo de gestión de estado desarrollado específicamente para aplicaciones Vue.js. Utiliza almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación y utiliza las reglas correspondientes para garantizar que el estado cambie de forma predecible.
  El núcleo de cada aplicación de Vuex es la tienda. "Tienda" es básicamente un contenedor, que contiene la mayor parte del estado de su aplicación.
• Atributos centrales

1. estado => datos básicos
2. getters => datos derivados de datos básicos, los getters reciben el estado como su primer parámetro y otros getters como el segundo parámetro. Si no es necesario, el segundo parámetro se puede omitir como se muestra en el siguiente ejemplo:
3. mutaciones => El método de envío de los datos modificados, ¡sincronización! Asincrónico requiere el uso de acción;
   cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador). Esta función de devolución de llamada es donde realmente hacemos cambios de estado, y aceptará el estado como el primer parámetro y enviará la carga útil como el segundo parámetro. (La carga enviada debe ser un objeto en la mayoría de los casos) y la carga enviada también se puede omitir.
4. actions => como un decorador, envolviendo mutaciones para que puedan ser asincrónicas. La acción es similar a la mutación, pero la diferencia es:
   actioan presenta la mutación en lugar de cambiar directamente el estado.
   la acción puede contener cualquier operación asincrónica
5. módulos => Modular Vuex

9. Pase el valor de los componentes padre e hijo vue

• De padre a hijo

1. El componente principal pasa el valor al componente secundario 1 El
   componente principal agrega un atributo personalizado donde se llama al componente secundario. El valor del atributo es el valor que debe pasarse al componente secundario. Si el valor que se va a pasar es una variable, un booleano o Es un tipo de número y necesita usar propiedades de enlace.
   En el lugar donde se define el subcomponente, agregue una opción props. El valor de mode one props es una matriz y el elemento es un nombre de propiedad personalizado.
   Puede obtenerlo en el subcomponente a través de un nombre de propiedad personalizado Datos pasados ​​al componente principal
2. El componente principal pasa el valor al componente secundario. 2
   En el lugar donde se define el componente secundario, agregue una opción props. En el segundo método, el valor de props es un objeto. La clave es un nombre de propiedad personalizado y el valor es un tipo de datos. El
   trabajo en equipo mejora el rigor del código. Si el tipo es incorrecto , Habrá un mensaje de advertencia, pero no impedirá la representación de su código
3. El componente principal pasa el valor al componente secundario. 3
   En el lugar donde se define el componente secundario, agregue una opción props. Método 3 El valor de props es un objeto, la clave es un nombre de propiedad personalizado y el valor es un objeto. Las claves de este objeto son tipo y respectivamente predeterminado, indica el tipo de datos y el valor predeterminado. Si el tipo de datos es un objeto o una matriz, el valor predeterminado debe ser una función y el resto se asignan directamente

• Los subconjuntos de componentes principales para pasar el valor del
  componente principal local llama a los subcomponentes, que está vinculado a un evento personalizado, el evento lo realiza el componente principal, recuerde no agregar ()
  lugares en los subcomponentes definidos en necesidad Dentro de la función de paso, ejecute this. $ Emit ('nombre de evento personalizado', 'valor pasado')
  para pasar el valor del componente, y debe ajustarse a un flujo de datos unidireccional, de padre a hijo, si el componente necesita hijo a padre Pase, debe considerarlo cuidadosamente
• El método del componente secundario que llama al componente principal: this. $ Parent.event

10. Jitter y estrangulamiento

• Escenario: cambio de tamaño / desplazamiento activa eventos estadísticos, eventos de movimiento del mouse al arrastrar, etc.
• Función anti-vibración: Una vez que se ha ejecutado una función una vez, no se puede volver a ejecutar dentro de un cierto período de tiempo; si esta función se activa dentro del tiempo de espera, se recalculará el tiempo de espera.
  Al llamar a debounce ([dɪ'baʊns] el enemigo está muerto), se devuelve una función de cierre.
  Paquete:

<script>
    var n = 0;
    function debounce (method, wait, flag) {
        var timer = null;
        var context, args, result, timestamp;
        var later = function () {
            var oDate = new Date();
            var last = oDate.getTime() - timestamp; // 计算第一次时间戳与当前时间戳的差值。
            if (last < wait && last >= 0 ) { // 在等待时间内触发此函数，重新计时。
                timer = setTimeout(later, wait - last);
            } else {
                timer = null;
                if (!flag) { // 限制flag 为true时，执行回调函数。
                    result = method.apply(context, args);
                    if (!timer) {
                        context = args = null
                    }
                }
            }
        }

        return function () {
            var oDate = new Date();
            var callNow = flag && !timer; // 代表第一次调用立即执行。

            timestamp = oDate.getTime(); // 记录下当前时间戳
            context = this;
            args = arguments;
            if (!timer) { // 第一次触发时，timer为空，进入此分支
                timer = setTimeout(later, wait);
            }
            if (callNow) { // 第一次触发且flag为true，进入此分支
                result = method.apply(context, args);
                context = args = null
            }
            return result;
        }
    }
    window.onscroll = debounce (function () {
        console.log(1)
    }, 500, false)
</script>
 flag为true时，连续事件触发时，只会在第一次触发的时候执行回调。
 flag为false时，连续事件触发时，只会在最后一次触发的时候执行回调。

• Throttling: cuando el evento se activa continuamente, se garantiza que se llamará a la función de procesamiento de eventos solo una vez dentro de un período de tiempo determinado. La interpretación de las costumbres económicas es como si nuestro grifo suelta agua. Tan pronto como se abre la válvula, el agua se derrama. Manteniendo las finas virtudes tradicionales de la diligencia y el ahorro, debemos cerrar el grifo. Gota a gota en el intervalo de tiempo.
  Método de implementación : marca de tiempo y temporizador

<script>
    var n = 0;
    function resizeHandler () {
        console.log(n++)
    }
    function throttle (method, context) {
        clearTimeout(method.timer)
        method.timer= setTimeout(function () {
            method.call(context)
        }, 500)
    }
    window.onresize = function () {
        throttle(resizeHandler, window)
    }
</script>

11. Al utilizar el diseño flexible en proyectos móviles, ¿qué problemas de compatibilidad ha encontrado durante las pruebas? ¿Cómo resolverlo? (Durante la prueba, debido a diferentes modelos de teléfonos móviles y diferentes adaptaciones, se producirán algunos problemas de compatibilidad y soluciones)

https://blog.csdn.net/hzxOnlineOk/article/details/87858281

12. Problemas entre dominios

Solución para dominios cruzados: jsonp entre dominios, uso compartido de recursos entre dominios (cors), proxy de middleware de nodejs entre dominios, proxy inverso nginx
Vue: use node + webpack + webpack-dev-server, en el entorno de desarrollo, debido a la representación vue El servicio y el servicio de proxy de la interfaz son el mismo servidor webpack-dev, por lo que la página y la interfaz del proxy no son de dominio cruzado.
Principio jsonp: cree etiquetas de script de forma dinámica y luego solicite una URL con parámetros para lograr el intercambio de tráfico entre dominios

1. Implementación nativa:

 <script>
  var script = document.createElement('script');
  script.type = 'text/javascript';

  // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
  script.src = 'http://www.daxihong.com:8080/login?user=admin&callback=jsonCallback';
  document.head.appendChild(script);

  // 回调执行函数
  function jsonCallback(res) {
      alert(JSON.stringify(res));
  }
 </script>
 服务器端返回如下(返回即执行全局函数)
 jsonCallback({"status": 0, "user": "admin"})

2. implementación de jquery

$.ajax({
  url: 'http://www.domain2.com:8080/login',
  type: 'get',
  dataType: 'jsonp',  // 请求方式为jsonp
  jsonpCallback: "handleCallback",    // 自定义回调函数名
  data: {}
})

13. Principio de vinculación bidireccional de Vue

Vue.js utiliza el secuestro de datos combinado con el modelo de publicador-suscriptor para secuestrar el establecedor y el captador de cada propiedad a través de Object.defineProperty (), publicar mensajes a los suscriptores cuando los datos cambian y activar las devoluciones de llamada correspondientes del oyente.

14. Función de devolución de llamada

Puede ser utilizado como parámetro y llamado por otras funciones.

• Devolución de llamada asincrónica: especifique una función cuando se inicie una tarea asincrónica, y esta función se llamará automáticamente cuando se complete la tarea asincrónica.
• ¿Por qué devoluciones de llamada asincrónicas?
  Necesita obtener resultados de ejecución de tareas asíncronas, pero no se debe permitir que se obstruya (menor eficiencia), que desean obtener resultados de ejecución eficientes de la tarea. Anteriormente, al usar el grupo de subprocesos o el grupo de procesos para enviar una tarea, si desea procesar el resultado de ejecución de la tarea, debe llamar a la función de resultado o la función de apagado, y todas están bloqueando, y esperarán hasta que se ejecute la tarea antes de que pueda continuar. En este proceso de espera, no se pueden ejecutar otras tareas, lo que reduce la eficiencia. Por lo tanto, se necesita una solución para garantizar que el hilo que analiza el resultado no tenga que esperar y para garantizar que los datos se puedan analizar a tiempo. Esta solución es una devolución de llamada asincrónica.
• De uso común: ajax, axios request asynchronous callback

15. Cierre

• Concepto: Un cierre es una función que puede leer las variables internas de otras funciones . Dado que las subfunciones dentro de la función pueden leer variables locales, el cierre puede entenderse simplemente como "una función definida en una función" (luego devolver esta función interna).
  Entonces, en esencia, un cierre es un puente que conecta el interior de la función y el exterior de la función.
• caracteristicas:

1. El cierre lee las variables internas de la función
2. Mantenga los valores de estas variables en la memoria en todo momento. No se borrará después de la llamada a la función

• Desventaja

1. Debido a que las variables de escritura siempre existen en la memoria, causará un consumo excesivo de memoria y afectará el rendimiento.
2. Provocar una pérdida de memoria.

• [Nota] El cierre puede hacer que el valor dentro de la función se pueda modificar fuera de la función. Entonces, si usa la función principal como un objeto, el cierre como su método público y la variable interna como su valor privado, debe tener cuidado en este momento. Cambie el valor de la variable interna de la función padre a voluntad.

16, los dos núcleos de vue.js

Sistema de componentes y basado en datos

17. Optimización del rendimiento de la página de inicio

• El CSS se coloca en la parte superior de la página (en la etiqueta de cabecera) y el archivo JS se coloca en la parte inferior de la página. El
  navegador representará la página completa después de descargar todo el CSS. Por lo tanto, la mejor práctica es colocar el CSS en la parte superior de la página (sí Pon CSS en la cabeza), deja que el navegador descargue CSS lo antes posible.
  El archivo js es lo opuesto: el navegador se ejecuta inmediatamente después de cargar js, lo que puede bloquear toda la página y hacer que la página se muestre lentamente, por lo que es mejor colocar js en la parte inferior de la página. Sin embargo, si el archivo js es necesario para analizar la página, no es apropiado ponerlo al final.
• Establezca la menor cantidad posible de variables globales.
• Minimizar la manipulación del DOM
• No establezca estilos en las etiquetas, es mejor citar externamente los archivos CSS.
• Reduzca las solicitudes http y configure el almacenamiento en caché HTTP de manera razonable; (la forma más efectiva)
  [Razón] El protocolo http es un protocolo de capa de aplicación sin estado, lo que significa que cada solicitud http debe establecer un enlace de comunicación y realizar una transmisión de datos. En el lado del servidor, Cada http necesita iniciar un hilo independiente para procesar. Estas comunicaciones y servicios son costosos. Reducir el número de solicitudes http puede mejorar eficazmente el rendimiento del acceso.

1. El medio principal para reducir http es fusionar CSS, fusionar js, fusionar imágenes (varias imágenes se fusionan en una).
2. Configure el almacenamiento en caché HTTP: el poder del almacenamiento en caché es poderoso y la configuración adecuada del almacenamiento en caché puede reducir en gran medida las solicitudes HTTP.
3. Si es posible, combine scripts y estilos externos tanto como sea posible, y combine varios en uno. Además, CSS, Javascript e Imagen se pueden comprimir con las herramientas correspondientes, que a menudo pueden ahorrar mucho espacio después de la compresión.

• Uso del almacenamiento en caché del navegador
  Para un sitio web, la frecuencia de actualización de archivos de recursos estáticos como CSS, js, logotipo e íconos es relativamente baja, y estos archivos son casi necesarios para cada solicitud http. Si estos archivos se almacenan en caché en el navegador , Puede mejorar el rendimiento extremadamente. Al establecer los atributos de control de caché y caduca en el encabezado http, se puede configurar la caché del navegador. El tiempo de caché puede ser de varios días o incluso meses.
• Si encuentra un archivo grande, puede colocar el archivo en un temporizador y usar operaciones asincrónicas para esperar a que se carguen otros archivos antes de cargar el archivo en el temporizador.
• Sprites CSS: fusionar imágenes CSS
• Carga diferida de imágenes
  Es posible que esta estrategia no reduzca realmente la cantidad de solicitudes HTTP, pero puede reducir la cantidad de solicitudes HTTP en determinadas condiciones o cuando la página se acaba de cargar. Para las imágenes, cuando la página se carga por primera vez, solo se puede cargar la primera pantalla y las imágenes posteriores se cargan cuando el usuario continúa desplazándose hacia atrás.
• Reduzca la transmisión de cookies e intente usar localStorage para almacenar datos locales.
  Por un lado, las cookies se incluyen en cada solicitud y respuesta. Una cookie que sea demasiado grande afectará seriamente la transmisión de datos. Por lo tanto, los datos que deben escribirse en la cookie deben considerarse cuidadosamente y minimizar la cantidad de transmisión en la cookie. La cantidad de datos.
• Comprimir imagen.

• 18. Cómo interrumpir el bucle forEach

Use try ... catch para terminar el ciclo

let arr = [1, 2, 3]
try {
	arr.forEach(item => {
		if (item === 2) {
			throw('循环终止')
		}
		console.log(item)
	})
} catch(e) {
	console.log('e: ', e)
}

19. ¿Determinar si existe un dato en la matriz?

• javascript的indexOf()método
  var arr_data = [1,2,3];
arr_data.indexOf(1); //如果存在返回值的下标，不存在返回-1

• jquery的$.inArray()método
  $.inArray(1, arr_data); //如果存在返回值的下标，不存在返回-1

• arr.find()
  El find () de una instancia de matriz se usa para encontrar el primer elemento de matriz que cumple las condiciones. Su parámetro es una función de devolución de llamada. Todos los elementos de la matriz atraviesan la función de devolución de llamada a su vez hasta que se encuentra el primer elemento con un valor de retorno verdadero, y luego se devuelve el elemento, de lo contrario, devuelve indefinido.
  Nota: La función find () no se ejecutará para matrices vacías. find () no cambió el valor original de la matriz

   arr.find(function(value) { 
      if(value === 要查找的值) { 
          //则包含该元素    
   }})

• arr.findIndex()Devuelve la posición del primer elemento de la matriz que cumple la condición, si todos los elementos no cumplen la condición, devuelve -1.

Nota: find (), findIndex () compensan la falta de index: (es decir, juzgar NAN)

    [NaN].indexOf(NaN) // -1
    [NaN].findIndex(y => Object.is(NaN, y))// 0

• para bucle y si juicio

20. Array late plano

Ejemplo:var arr = [1,2,[3,4,5,[6,7,8],9],10,[11,12]]

1. Implementación recursiva:

function fn(arr){
　　　　let arr1 = []
     arr.forEach((val)=>{
         if(val instanceof Array){
             arr1 = arr1.concat(fn(val))
         }else{
             arr1.push(val)
         }
      })
      return arr1
 }

2. reducir la implementación

function fn(arr){
    return arr.reduce((prev,cur)=>{
        return prev.concat(Array.isArray(cur)?fn(cur):cur)
    },[])
}

3. plano

arr.flat(Infinity)

4. Operador de propagación

function fn(arr){
    let arr1 = [];
    let bStop = true;
    arr.forEach((val)=>{
        if(Array.isArray(val)){
            arr1.push(...val);
            bStop = false
        }else{
            arr1.push(val)
        }
    })
    if(bStop){
        return arr1;
    }
    return fn(arr1)
}

let arr1 = arr.toString().split(',').map((val)=>{
           return parseInt(val)
       })
       console.log(arr1)

6. aplicar

function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
          arr =  [].concat.apply([],arr);
    }
     return arr;
}