Vale la pena dominar algunos conocimientos teóricos básicos en la parte delantera.

Prefacio:

        Mirando hacia atrás cuando entré por primera vez en el campo de front-end, no podía avanzar. Encontré muchos problemas, incluidos los simples: cómo realizar la exportación de front-end, la descarga de pdf de front-end, tablas dinámicas, variables de entorno de configuración, escrito a mano. archivos de empaquetado del paquete web, falla en la depuración de la interfaz, etc. Difícil: cómo desarrollar un proyecto de cero a uno, la política del mismo origen del navegador, cómo optimizar el rendimiento general del front-end, https, la aplicación de tareas macro y micro tareas, etc., después de trabajar durante varios años para aprender nuevos conocimientos, descubrí que a veces aprender no es suficiente, descubrí que muchos conocimientos básicos se olvidaron, ¡así que saqué estos conocimientos básicos para repasarlos nuevamente!

 1. Navegador

1. Política del mismo origen

¿Qué es la política del mismo origen?

        El mismo origen significa: ¡el protocolo, el número de puerto y el nombre de dominio deben ser consistentes!

Hay tres restricciones:

1. ¡Los scripts JS bajo el dominio actual no pueden acceder a las cookies, localStorage e indexDB bajo otros dominios!

2. ¡El script js bajo el dominio actual no puede operar y acceder a DOM bajo otros dominios!

3 ¡Ajax no puede enviar solicitudes entre dominios bajo el dominio actual!

El propósito de la política del mismo origen:

       Para garantizar la seguridad de la información del usuario, una restricción en los scripts js no es una restricción en los navegadores. No hay restricciones entre dominios en las solicitudes generales de img o script script, porque estas operaciones no pasarán la respuesta. Como resultado, realice operaciones eso puede causar problemas de seguridad!

2. Cross-domain, cómo prevenir ataques xss 

La relación entre la política de dominio cruzado y del mismo origen:

        ¡El problema de dominio cruzado en realidad es causado por la política del mismo origen del navegador!

Cómo resolver el problema de dominio cruzado:

        JSONP usa la etiqueta <script> sin restricciones entre dominios. A través del atributo src de la etiqueta <script>, se envía una solicitud GET con un parámetro de devolución de llamada. El servidor ensambla los datos devueltos por la interfaz en la función de devolución de llamada, los devuelve al navegador, y el navegador lo analiza y lo ejecuta. ¡El front-end obtiene los datos devueltos por la función de devolución de llamada!

Desventajas de JSONP:

        1. Tiene limitaciones, ¡solo admite el método get!

        2. ¡No es seguro, puede estar sujeto a ataques XSS!

Cómo prevenir ataques XSS:

        1. Para evitar la ejecución del navegador, se debe utilizar un método de front-end puro, sin empalmes ni retornos del lado del servidor;

        2. Haga un buen trabajo escapando el código que debe insertarse en el HTML. Para los ataques de tipo DOM, se debe principalmente a la falta de confiabilidad del script de front-end. Para la adquisición de datos, la representación y el empalme de cadenas, es necesario para juzgar el posible código malicioso.;

        3. Cree una lista blanca con CSP para decirle al navegador qué recursos externos se pueden cargar y ejecutar, evitando así ataques de inyección de código malicioso;

        4. CSP se refiere a la política de seguridad de contenido, y su esencia es establecer una lista blanca para decirle al navegador qué recursos externos se pueden cargar y ejecutar. Solo necesitamos configurar las reglas, la forma de interceptar la implementa el propio navegador. Por lo general, hay dos formas de habilitar CSP, una es configurar Content-Security-Policy en el encabezado HTTP y la otra es configurar la metaetiqueta <meta http-equiv="Content-Security-Policy">;

2. encabezado http y código de respuesta http

1. Encabezado de solicitud HTTP y encabezado de respuesta

Encabezados de solicitud comunes:

encabezado de solicitud	significado
Aceptar	Formato de datos aceptado por el navegador
Aceptar-Codificación	El algoritmo que el navegador puede aceptar, como gzip
Aceptar-Idioma	El idioma que el navegador puede aceptar, como zh-CN
Conexión	keep-alive Se reutiliza una conexión TCP
Galleta	Información de las cookies recibida por el cliente
Anfitrión	Especifique el host y el puerto en la URL original
Agente de usuario (UA para abreviar)	información del núcleo del navegador
Tipo de contenido	El formato de envío de datos, como application/json

Encabezados de respuesta comunes:

encabezado de respuesta	significado
Tipo de contenido	El formato de los datos devueltos, como application/json
Largancia de contenido	El tamaño de los datos devueltos, cuántos bytes
Codificación de contenido	Algoritmo de compresión de datos de retorno, como gzip
Establecer-Cookie	El servidor establece la cookie para el cliente.

 2. código de respuesta http

¿Qué representan los números al principio?:

1xx: indica que el protocolo se encuentra actualmente en un estado intermedio y aún se requieren solicitudes de seguimiento.

2xx: ¡Indica que la solicitud fue exitosa!

3xx: indica el estado de redirección y se requiere una nueva solicitud.

4xx: ¡Indica que el mensaje de solicitud es incorrecto!

5xx: ¡Error del lado del servidor!

Códigos de estado comunes:

101 ¡Cambie el protocolo de solicitud, cambie de HTTP a WebSocket!

200 ¡La solicitud es exitosa, hay un cuerpo de respuesta y el servidor devuelve con éxito la página web o los datos!

Redirección permanente 301: ¡se almacenará en caché!

Redirección temporal 302: ¡Sin almacenamiento en caché!

304 ¡Golpe de caché de negociación!

¡400 Petición Incorrecta!

401 ¡Sin permiso!

¡Servidor 403 prohibido!

404 Recurso no encontrado, ¡la página solicitada no existe!

¡Error del lado del servidor 500!

¡El servidor 503 está ocupado!

3. ES5 y ES6 en js, macro y micro tareas 

1. La diferencia entre conjunto y mapa:

① Estos dos métodos tienen una velocidad de búsqueda extremadamente rápida y el tiempo de ejecución es menor, lo que mejora en gran medida el rendimiento;

②. Los valores requeridos para la inicialización son diferentes. Lo que Map necesita es una matriz bidimensional, y lo que Set necesita es una matriz Array unidimensional;

③ Tanto Map como Set no permiten claves duplicadas;

④ No se puede modificar la clave del Mapa, pero se puede modificar el valor correspondiente a la clave;

⑤.Set no puede cambiar el valor de Set a través del iterador, porque el valor de Set es la clave;

⑥.Map es la existencia de pares clave-valor, y el valor no se usa como clave;

⑦.Set no tiene valor sino solo clave, y el valor es clave;

2. La diferencia entre ES5 y ES6:

Método de herencia ES5:

        1. La herencia de la cadena de prototipos apunta el prototipo de la subclase a la instancia de la clase principal a través de la cadena de prototipos;

        Desventajas: aunque la columna real de la clase principal se convierte en el objeto prototipo de la subclase, la subclase puede compartir los métodos y las columnas de la clase principal. Pero cada vez que la subclase usa una instancia de clase principal. Cambiar el objeto prototipo cambiará los datos de la columna de la instancia de la clase principal, lo que hará que cambien los datos de los objetos prototipo en ambos lados;

        2. Realice la herencia con la ayuda del constructor, llame al constructor de la clase principal dentro del constructor de la subclase y use los métodos apply() y call() para cambiar la dirección de esto;

        Desventajas: la subclase no hereda el método en la cadena de prototipos de la clase principal, porque solo se llama al constructor de la clase principal y el atributo se asigna a la instancia de la subclase;

        3. La combinación combina los dos métodos de herencia de cadena de prototipo y herencia de constructor prestado. Use el constructor para heredar las propiedades de la clase principal y use la cadena de prototipos para heredar el método de la clase principal;

        Desventaja: el constructor de la clase principal se ejecuta dos veces al instanciar una subclase;

Método de herencia ES6:

        ¡La herencia de ES6 se realiza principalmente a través de un método como class!

        1. Una clase puede entenderse como una función. Dado que una clase es esencialmente una función, también tiene un atributo prototipo. Cuando se crea una nueva clase, el atributo porototipo de la clase se asignará al atributo __proto del nuevo objeto. .

        2. El método constructor es un método agregado por defecto. Cuando un objeto es nuevo, este método se llama automáticamente y el constructor define sus propios atributos.

        3. Heredar extensiones y super, el nombre de la subclase de clase extiende el nombre de la clase principal para lograr la herencia, por supuesto, debe escribir super (el parámetro de la clase principal) en el constructor, lo que significa obtener el puntero this de la clase principal en la subclase

Diferencias específicas entre ES5 y ES6:

        La herencia de ES5 se realiza a través del mecanismo prototipo o constructor.La herencia de ES5 consiste esencialmente en crear primero el objeto de instancia de la subclase y luego agregarle el método de la clase principal (Parent.apply(this));

        El mecanismo de herencia de ES6 consiste esencialmente en crear primero el objeto de instancia this de la clase principal (por lo que primero se debe llamar al método super() de la clase principal), y luego modificarlo con el constructor de la subclase;

        ES6 define clases a través de la palabra clave class, que contiene métodos de construcción, y la herencia entre clases se logra a través de la palabra clave extends. La subclase debe llamar al supermétodo en el método constructor; de lo contrario, la nueva instancia informará un error. Porque la subclase no tiene su propio objeto this, sino que hereda el objeto this de la clase principal y luego lo llama. Si no se llama al método super, la subclase no obtendrá este objeto Nota: La palabra clave super se refiere a la instancia de la clase principal, es decir, el objeto this de la clase principal. En el constructor de la subclase, la palabra clave this solo se puede usar después de llamar a super; de lo contrario, se informará un error;

        La clase de clase definida en la sintaxis de ES6 no es una función de función y los programas de JavaScript no la analizarán. Entonces, la clase no se puede llamar por adelantado;

        la función se puede llamar por adelantado, pero cuando se llama por adelantado, solo hay atributos y no hay métodos;

3. js síncrono y asíncrono, macro tarea y micro tarea

La diferencia y la comprensión de síncrono y asíncrono en js:

        Sincronización: Ejecutar en un orden determinado y ejecutar el siguiente después de ejecutar uno;

        Asíncrono: el orden de ejecución es incierto, determinado por las condiciones de activación, y el tiempo de ejecución también es incierto, y se pueden ejecutar múltiples procesos asíncronos al mismo tiempo;

Tareas de sincronización:

        Solo después de que se completa la ejecución de la tarea anterior, la siguiente tarea se puede ejecutar en el hilo principal;

Tarea asíncrona:

        Todas las tareas en esta cola no ingresan al subproceso principal para su ejecución, ingresan a la cola de tareas y son ejecutadas por el subproceso proporcionado por el navegador. Cuando se complete la ejecución, se generará una función de devolución de llamada y se notificará al subproceso principal a ejecutará la tarea ejecutada actualmente en el subproceso principal. Después de eso, llamará a la función de devolución de llamada que se notifica a sí mismo lo antes posible, de modo que ingresará al subproceso principal para su ejecución, como una solicitud ajax, y el resultado de la solicitud se presentará en el hilo principal;

mecanismo de ejecución js:

        1. Primero juzgue si el código js es síncrono o asíncrono. El síncrono es una tarea síncrona, que ingresa directamente al hilo principal para su procesamiento, y el asíncrono ingresa a la lista de tareas;

        2. Cuando el procesamiento asíncrono en la lista de tareas alcanza la condición de activación (cuando se hace clic en el evento de clic), ingresa a la cola de tareas;

        3. Después de ejecutar todas las tareas del subproceso principal, las tareas (funciones de devolución de llamada) en la cola de tareas se agregarán al subproceso principal;

        En resumen: el código JS se ejecuta línea por línea de arriba a abajo. Si una línea informa un error, deje de ejecutar el siguiente código. Primero ejecute el código síncrono, luego ejecute el código asíncrono;

El proceso de ejecución del bucle de eventos:

        Código síncrono: saca la pila directamente después de ejecutar la pila de llamadas;

        Código asíncrono: colóquelo en la API web, espere el momento adecuado para colocarlo en la cola de devolución de llamada, espere hasta que la pila esté vacía y el bucle de eventos (EventLoop) comience a funcionar y sondee;

        Las microtareas se ejecutan antes que las macrotareas. Las microtareas se activan antes de la representación DOM y las macrotareas se activan después de la representación DOM.

console.log(1);

setTimeout(()=>{ console.log(2); },0);

Promise.resolve().then(()=>{ console.log(3); })

console.log(4); 执行结果：//1，4，3，2 

JS es de subproceso único.Al ejecutar código JS, el navegador primero ejecuta código síncrono y luego ejecuta código asíncrono;

La diferencia fundamental entre microtareas y macrotareas:

        Tarea macro: setTimeout setInterval Ajax DOM evento especificado por el navegador;

        Microtarea: Promise async await especificado por la sintaxis de ES6;

        Resumen: el procesamiento asincrónico de js funciona con el navegador, js tiene un solo subproceso, pero el navegador tiene varios subprocesos. Los navegadores pueden manejar múltiples tareas asincrónicas al mismo tiempo. Pero las funciones de devolución de llamada en estas tareas asincrónicas aún se ejecutan una por una en el hilo principal de js;

Cuarto, la diferencia entre for...in y for...of de vue, modo de enrutamiento

1. ¿Cuál es la diferencia entre for...in y for...of

para...en travesías para sacar la llave;

para... de poligonales para obtener valor;

Ambos trabajan con diferentes tipos de datos:

Atravesar objetos: for...in is ok, for...of is not;

Conjunto de mapas poligonales: for..of está bien, for..in no lo está;

Generador de poligonales: for...of está bien, for...in no lo está;

para... en:

se puede utilizar en cadenas de matriz de objetos de datos enumerables;

para... de:

for...of se utiliza para conjuntos de mapas de cadenas de matriz de datos iterables;

2. Modo de enrutamiento Vue 

¿Qué problema resuelve el enrutamiento front-end?

        Resuelva el sitio web de una sola página cambiando la ruta URL de la dirección del navegador para que coincida con los componentes de página correspondientes. En una aplicación de una sola página, la mayor parte de la estructura de la página permanece sin cambios y solo se cambia una parte del contenido. Cuando cambia la dirección del navegador, cambie páginas y haga clic en los botones de avance y retroceso del navegador, actualice el navegador a medida que cambia el contenido de la página web, y la página web carga el contenido correspondiente a la ruta actual;

Cómo elegir la ruta en el proyecto:

        El modo de enrutamiento en Vue se divide en modo hash y modo historial.Si no se especifica ningún modo de enrutamiento en la ruta, el modo hash está habilitado de forma predeterminada;

        En el modo de historial, la ruta se enviará al servidor junto con la solicitud http. Cuando el proyecto esté empaquetado e implementado, si el backend no está configurado y la página se actualiza, la ruta del frontend se usará como un recurso para solicitar el servidor Si no se puede encontrar el recurso, se informará un error 404. En modo hash, la ruta después de # no se enviará al servidor durante las solicitudes de red;

¿Cuáles son las ventajas y desventajas del historial hash?

modo hash

        ventaja:

        Implementación simple y buena compatibilidad (compatible con ie8);

        La mayoría de los marcos front-end proporcionan implementaciones de enrutamiento para hash;

        No requiere ninguna configuración y desarrollo en el lado del servidor;

        A excepción de las solicitudes de carga de recursos y ajax, no se iniciarán otras solicitudes;

        defecto:

        Para algunas operaciones que requieren redirección, el backend no puede obtener el contenido del hash, lo que hace que el backend no pueda obtener los datos en la URL;

        El servidor no puede rastrear con precisión la información de enrutamiento del front-end;

        El requisito de la función de anclaje entrará en conflicto con el mecanismo de enrutamiento actual;

modo historia

        ventaja:

urlPara parámetros que         no se pierden durante la redirección .

        El backend puede obtener esta parte de los datos y el backend puede rastrear con precisión la información de enrutamiento.

        Puede usar history.state para obtener la información de estado correspondiente a la URL actual.

        defecto:

        La compatibilidad no es tan buena como el enrutamiento hash.

        Requiere soporte de back-end.

        Cuando la aplicación se implementa y se inicia, necesita el apoyo del personal de back-end para resolver el problema de actualizar el servidor de páginas 404.

Cinco, prestaciones TS, genéricos, tipos de declaración

1. Tipo básico

Tipo básico: objeto de matriz booleana de cadena numérica

2. ¿ Cuáles son los beneficios de ts

①.ts es una versión mejorada de js. ts agrega escritura estática opcional y programación orientada a objetos basada en clases a js, que amplía la sintaxis de JavaScript. Entonces, la función de ts es mucho más que la de js;

②.ts es un lenguaje de programación orientado a objetos, que incluye el concepto de clase e interfaz;

③.ts puede generar errores de compilación durante el desarrollo, pero los errores de js solo estarán expuestos durante el tiempo de ejecución;

3. La diferencia entre tipo e interfaz

tipo es para describir el tipo interfaz es para describir la estructura de datos

Ambos pueden describir un objeto o una función.

interface User { name: string age: number }

interface SetUser { (name: string, age: number): void; }

type User = { name: string age: number };

type SetUser = (name: string, age: number)=> void;

4. type puede declarar alias de tipo básico, tipos conjuntos, tuplas y otros tipos

// alias de tipo base

type Name = string

// tipo de unión

interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// Definir específicamente el tipo de cada posición de la matriz

type PetList = [Dog, Pet]

// Cuando quieras obtener el tipo de una variable, usa typeof

let div = document.createElement('div');
type B = typeof div

 5. ¿ Cuál es el uso específico de los genéricos?

Genérico se refiere a una característica que no especifica un tipo específico al definir una función, interfaz o clase, y luego especifica el tipo al usarlo.

Puede entenderse como un parámetro que representa un tipo:

interface Test<T = any> {
    userId: T;
}

type TestA = Test<string>;
type TestB = Test<number>;

const a: TestA = {
    userId: '111',
};

const b: TestB = {
    userId: 2222,
};

         Bueno, lo anterior es un conocimiento básico del front-end. El resumen no se trata solo del conocimiento básico que puede encontrar problemas en el desarrollo, para facilitar la comprensión de su mecanismo y principios operativos. Espero que todos puedan usarlo. en este entorno inestable. ¡También deseo que los programadores que no han encontrado trabajo encuentren un trabajo que les guste lo antes posible y lo estabilicen!