Escribir al frente
Se puede decir que el conocimiento que la interfaz de usuario necesita comprender lo abarca todo. Y es un gran esfuerzo profundizar en un cierto punto de conocimiento. He estado ocupado con las entrevistas recientemente y he leído muchas guías de entrevistas para registrar el conocimiento inicial que creo que vale la pena ver.
Parte HTML y CSS
Kernel del navegador: El núcleo del navegador es el núcleo del navegador, también conocido como el "motor de renderizado", que se utiliza para interpretar la sintaxis de la página web y representarla en la página web. El kernel del navegador determina cómo el navegador debe mostrar el contenido web y la información del formato de la página. El kernel del navegador se puede dividir en dos partes: el motor de renderizado (ingeniero de diseño o motor de renderizado) y el motor JS.
1. Kernel del navegador IE: Kernel Trident, también conocido como kernel IE;
2. Kernel del navegador Chrome: llamado colectivamente kernel Chromium o kernel Chrome, solía ser kernel Webkit, ahora kernel Blink;
3. Kernel del navegador Firefox: kernel Gecko , Comúnmente conocido como kernel de Firefox;
4. kernel del navegador Safari: kernel de Webkit;
5. kernel del navegador Opera: originalmente su propio kernel de Presto, luego Webkit y ahora kernel de Blink;
6. Navegador 360, kernel del navegador Cheetah: IE + Chrome dual-core;
7. Sogou, Aoyou, kernel del navegador QQ: Trident (modo compatible) + Webkit (modo de alta velocidad);
8. Navegador Baidu, kernel Window of the World: kernel IE;
9, kernel del navegador 2345: antes Es el núcleo de IE, y ahora también es el núcleo dual de IE + Chrome;
Modelo de caja: La diferencia entre el modelo de caja estándar y el modelo de caja IE, utilice tamaño límite para la conversión.
diseño flexibleDibuja una cuadrícula de nueve cuadrados
.wrap{
display:flex;
flex-direction:column;
height:300px
}
.flex-box{
display:flex;
flex-direction:row;
flex:1
}
.flex-item{
flex:1;
}
Hablar de limpiar flotadores:
1. Agregue al elemento flotante que se va a borrar overflow:auto;zoom:1;
2. Agregue un <div class="clear"></div>.clear {clear: both; overflow: hidden}
Esta parte es relativamente básica y no hay problema, la siguiente es la parte JS
JavaScript
¿Cuál es la diferencia entre indefinido y no declarado?
Las variables que se han declarado en el alcance pero que aún no se han asignado no están definidas. Por el contrario, las variables que no se han declarado en el alcance no se declaran.
Para referencias a variables no declaradas, el navegador informará un error de referencia, como ReferenceError: b no está definido. Pero podemos usar el mecanismo de protección de seguridad typeof para evitar errores, porque para las variables no declaradas (o no definidas), typeof devolverá "undefined".
¿Cuál es el resultado de valueOf y toString de {} y []?
El resultado de valueOf de {} es {}, el resultado de toString es "[object Object]"
El resultado de [] valueOf es [], y el resultado de toString es ""
Hablando de esto, debería extender la cadena de prototipos:
Cuando accedemos a un objeto y propiedad, si la propiedad no existe en el objeto, entonces irá a su objeto prototipo para encontrar la propiedad, y este objeto prototipo también tendrá su propio prototipo, así que seguimos buscándolo. La fuente es : Object.prototype.
js para obtener el prototipo: p.proto, Object.getPrototypeOf§
Hablar sobre la comprensión de esto, llamar, aplicar y vincular
En el navegador, esto apunta al objeto de ventana en el ámbito global;
En la función, esto siempre apunta al último objeto que lo llamó;
En el constructor, esto apunta al nuevo objeto de nuevo;
Esto en call, apply y bind está fuertemente ligado al objeto especificado;
La función this in the arrow es especial. La función arrow this es la this del ámbito principal, no la this al llamar. Debe saber que los primeros cuatro métodos se determinan al llamar, que es dinámico, y la función this point of the arrow es estática , Se confirma cuando se hace la declaración;
Aplicar, llamar y vincular son algunas de las API integradas en la función por js, llamarlas puede especificar la ejecución de esto para la función y también puede pasar parámetros.
Todos saben cómo usarlo, pero debes prestar atención a cómo entenderlo.
Sobre cierres
Los cierres también son comunes. Se introducen en "JS que no sabes": == Cuando una función puede recordar y acceder al ámbito léxico en el que se encuentra, se produce un cierre, incluso si la función está dentro del ámbito actual. Ejecución exterior. == Creo que un pequeño compañero con un poco de conocimiento se dio cuenta de repente.
En términos sencillos: un cierre se refiere a una función que tiene acceso a variables en el alcance de otra función. La forma más común de crear un cierre es crear otra función dentro de una función. La función creada puede acceder a las variables locales de la función actual. .
function a(){
var n = 0;
function add(){
n++;
console.log(n);
}
return add;
}
var a1 = a(); //注意，函数名只是一个标识（指向函数的指针），而（）才是执行函数；
a1(); //1
a1(); //2 第二次调用n变量还在内存中
Acerca de los eventos (tres modelos de eventos)
eventoSon las acciones interactivas que ocurren cuando el usuario opera la página web o algunas operaciones de la página web en sí. Hay tres modelos de eventos en los navegadores modernos.
1. Modelo de nivel DOM0: este modelo no se propagará, por lo que no existe un concepto de flujo de eventos, pero algunos navegadores ahora admitenForma burbujeantePara lograrlo, puede definir directamente la función de monitoreo en la página web, o especificar la función de monitoreo a través del atributo js. Este método es compatible con todos los navegadores.
2. Modelo de evento de IE: en este modelo de evento, un evento tiene dos procesos,Etapa de procesamiento de eventos,conFase de burbujeo del evento. La etapa de procesamiento de eventos primero ejecutará el evento de escucha vinculado al elemento de destino. Luego está la fase de propagación de eventos, que se refiere a la propagación del evento desde el elemento de destino al documento y luego verificar si el nodo de paso está vinculado a una función de escucha de eventos y ejecutarla si la hay. Este modelo agrega funciones de monitoreo a través de attachEvent. Se pueden agregar múltiples funciones de monitoreo, que se ejecutarán en secuencia.
3. Modelo de evento DOM2: en este modelo de evento, un evento tiene tres procesos, el primer proceso esFase de captura de eventos. La captura se refiere al evento que se propaga desde el documento hasta el elemento de destino, verificando a su vez si el nodo de paso está vinculado a una función de escucha de eventos y ejecutándolo si hay uno. Las dos últimas etapas son las mismas que las dos etapas del modelo de eventos de IE. En este modelo de eventos, la función vinculada al evento es addEventListener y el tercer parámetro puede especificar si el evento se ejecuta en la fase de captura.
Manipulación DOM: ¿cómo agregar, eliminar, mover, copiar, crear y encontrar nodos?
(1) Cree un nuevo nodo
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点`
(2) Agregar, quitar, reemplazar, insertar
appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)
(3) Encontrar
getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();
(4) Operación de atributos
getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);
¿Cuáles son los métodos nativos de las matrices y objetos js?
Escribiendo un ajax
Primitivo:
//1：创建XMLHttpRequest对象
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send(null); // 严谨写法
//4:监听请求，接受响应
xhr.onreadysatechange=function(){
if(xhr.readySates==4&&xhr.status==200 || xhr.status==304 )
console.log(xhr.responsetXML)
}
jquery:
$.ajax({
type:'post',
url:'',
async:ture,//async 异步 sync 同步
data:data,//针对post请求
dataType:'jsonp',
success:function (msg) {
},
error:function (error) {
}
})
Su comprensión del desarrollo modular
Combinando con su propio proyecto, lleve una presentación de un senior:
Mi comprensión de los módulos es que un módulo es un conjunto de métodos para lograr una función específica. Al principio, js solo realizaba algunas funciones simples, por lo que no existía el concepto de módulos, pero a medida que el programa se volvía cada vez más complejo, el desarrollo modular del código se hacía cada vez más importante.
Dado que las funciones tienen las características de alcance independiente, la forma más primitiva de escribir es usar funciones como módulos y varias funciones como un solo módulo, pero este método es fácil de causar contaminación de variables globales
y no hay conexión entre módulos.
Detrás de la redacción propuesta del objeto, se logra mediante el método en función de un objeto, como por ejemplo una función para solucionar el uso directo de algunas de las deficiencias del módulo, pero que serían expuestas por
algunos miembros de todos los módulos, el código externo puede modificar las propiedades internas valor.
En la actualidad, el método más utilizado es ejecutar la función de forma inmediata, mediante el uso de cierres se puede establecer el ámbito privado del módulo sin contaminar el ámbito global.
especificación del módulo js
CommonJS: Modlue.exports.x lanza (define la interfaz de salida del módulo), requiere referencia. Esta solución de carga de módulos es una solución del lado del servidor ( nodejs ). Introduce módulos de manera síncrona. Debido a que los archivos del lado del servidor se almacenan en el disco local, la lectura es muy rápida, por lo que no hay carga síncrona. problema. Pero si está en el lado del navegador, debido a que el módulo se carga mediante solicitudes de red, es más apropiado utilizar la carga asincrónica.
AMD: Esta solución utiliza carga asincrónica para cargar el módulo. La carga del módulo no afecta la ejecución de las declaraciones posteriores. Todas las declaraciones que dependen de este módulo se definen en una función de devolución de llamada, y la función de devolución de llamada se ejecuta después de que se completa la carga. ** require.js ** implementa la especificación AMD.
CMD: Esta solución y la solución de AMD son ambas para resolver el problema de la carga asíncrona del módulo sea.js implementa la especificación CMD. La diferencia entre esto y require.js radica en el procesamiento de las dependencias y el tiempo de ejecución de los módulos dependientes cuando se define el módulo.
ES6 propuesto: Consulte el blog anterior
(Importante) mecanismo operativo js
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(resolve, reject) {
console.log(2);
resolve()
}).then(function() {
console.log(3)
});
process.nextTick(function () {
console.log(4)
})
console.log(5)
Piense primero en el resultado. Primero introduzca el mecanismo operativo
js hilo único:
Una característica importante del lenguaje JavaScript es un solo hilo, es decir, solo se puede hacer una cosa al mismo tiempo.
El hilo único de JavaScript está relacionado con su propósito. Como lenguaje de programación del navegador, el objetivo principal de JavaScript es interactuar con los usuarios y manipular el DOM. Esto determina que solo puede ser de un solo subproceso, de lo contrario traerá problemas de sincronización muy complicados. Por ejemplo, suponga que JavaScript tiene dos subprocesos al mismo tiempo. Un subproceso agrega contenido a un determinado nodo DOM y el otro subproceso elimina el nodo. En este momento, ¿qué subproceso debe utilizar el navegador?
Por lo tanto, para evitar la complejidad, JavaScript ha sido de un solo subproceso desde su nacimiento, lo que se ha convertido en una característica central del lenguaje y no cambiará en el futuro.
bucle de eventos js
Habrá muchas tareas durante la ejecución del código js. Estas tareas generalmente se dividen en dos categorías: 1. Tareas sincrónicas 2. Tareas asincrónicas
Cuando abrimos el sitio web, el proceso de representación de la página web es una gran cantidad de tareas sincrónicas, como el esqueleto de la página y el elemento de la página. Representación. Las tareas asincrónicas son tareas que consumen recursos y llevan mucho tiempo, como cargar imágenes y música.
Las tareas sincrónicas ingresan al hilo principal, las tareas asincrónicas ingresanTabla de eventosRegístrese para informar.
Cuando se completa lo especificado, la tabla de eventos moverá esta función aCola de eventos.
La tarea en el hilo principal está vacía después de la ejecución, irá a la cola de eventos para leer la función correspondiente e ingresará al hilo principal para su ejecución.
El proceso anterior se repetirá continuamente, lo que a menudo se diceBucle de eventos(Bucle de eventos).
Las tareas asincrónicas se pueden dividir en:
microtask (microtask):
cuando se ejecuta el código en la pila de ejecución, primero verificará si hay alguna tarea en la cola de micro tareas antes de ejecutar la cola de macros. La cola de macro de tareas se ejecutará cuando se
borre la tarea, incluyendo: Promise, nextTick, callback, Object.observe, MutationObserver
macrotask (tarea macro):
espere a que se ejecuten la pila de ejecución y la cola de micro tareas antes de la ejecución, y después de que se ejecute cada tarea macro, irá a ver si hay tareas recién agregadas en la cola de micro tareas, si es así, primero Solo cuando las tareas en la cola de micro tareas se borren, la siguiente macro tarea continuará ejecutándose,
incluyendo: bloque de código de script, setTimeout, setInterval, I / O
Respuesta de entrevista recomendada:
En primer lugar, js se ejecuta en un solo hilo.Cuando se ejecuta el código, el contexto de ejecución de las diferentes funciones se inserta en la pila de ejecución para garantizar la ejecución ordenada del código.
Al ejecutar código síncrono, si se encuentra un evento asíncrono, el motor js no esperará su resultado devuelto, sino que suspenderá el evento y continuará ejecutando otras tareas en la pila de ejecución.
Cuando se ejecuta el evento de sincronización, la devolución de llamada correspondiente al evento asincrónico se agrega a otra cola de tareas diferente de la pila de ejecución actual para esperar la ejecución.
La cola de tareas se puede dividir en una columna de par de tareas macro y una columna de par de micro tareas. Cuando se ejecuta el evento en la pila de ejecución actual, el motor js primero determinará si hay una tarea en la columna de par de micro tareas que se puede ejecutar, y si hay una, la cola de micro tareas será la primera El evento se coloca en la pila para su ejecución.
Cuando se ejecutan todas las tareas del par de micro-tareas, se determinan las tareas del par de macro-tareas.
Entonces el primer tema debería quedar claro de un vistazo: 25431
¿Cuál es la diferencia entre var, let y const?
La declaración var tiene promoción variable, let, const no
console.log(a); // undefined ===> a已声明还没赋值，默认得到undefined值
var a = 100;
console.log(b); // 报错：b is not defined ===> 找不到b这个变量
let b = 10;
console.log(c); // 报错：c is not defined ===> 找不到c这个变量
const c = 10;
Las declaraciones let y const forman el alcance del bloque
if(1){
var a = 100;
let b = 10;
}
console.log(a); // 100
console.log(b) // 报错：b is not defined ===> 找不到b这个变量
-------------------------------------------------------------
if(1){
var a = 100;
const c = 1;
}
console.log(a); // 100
console.log(c) // 报错：c is not defined ===> 找不到c这个变量
En el mismo ámbito, let y const no pueden declarar variables con el mismo nombre, y var puede
declarar variables con var se montará en la ventana, mientras que las variables declaradas let y const no lo harán
var a ="lly" console.log(window.a)//lly
Que hace el nuevo operador
Cree un objeto JavaScript simple vacío (es decir, {});
vincule el objeto (es decir, establezca el constructor del objeto) a otro objeto;
use el objeto recién creado en el paso 1 como contexto de esto;
si la función no devuelve un objeto, entonces Devuelva esto.
Si está familiarizado con la cadena de prototipos:
Manejar con elegancia las devoluciones de llamada de Promise (async, await)
async / await es un nuevo método para escribir código asincrónico o sin bloqueo basado en Promise, y generalmente se considera la solución definitiva y más elegante para operaciones asincrónicas JS. Comparado con Promesas y devoluciones de llamada, es más legible y conciso. Después de todo, entonces () también es muy molesto.
Async significa asincrónico y await es la abreviatura de espera asincrónica, es decir, espera asincrónica.
Entonces, semánticamente, se entiende bien que async se usa para declarar que una función es asincrónica, y await se usa para esperar a que se complete un método asincrónico.
Si se agrega una función con async, la función devolverá una promesa
async function test() {
return "lly"
}
console.log(test()) // -> Promise {<resolved>: "lly"}
Puede ver que la salida es un objeto Promise. Por lo tanto, la función async devuelve un objeto Promise.Si devuelve una cantidad directa directamente en la función async, async encapsulará la cantidad directa en un objeto Promise y la devolverá a través de PromIse.resolve ().
Hacer una comparación
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${
n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${
n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${
n}`);
return takeLongTime(n);
}
Procesamiento de proime:
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${
result}`);
});
}
doIt();
procesamiento asincrónico / en espera
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${
result}`);
}
doIt();
La ventaja de async / await es que maneja la cadena de llamadas, puede escribir código de manera más clara y precisa, y también puede resolver elegantemente el problema del infierno de devolución de llamada.
Lectura avanzada: comprensión profunda de "Hardcore JS" de las soluciones asincrónicas
https://juejin.im/post/6844904064614924302#heading-69
Herencia JS
Cadena de prototipos, aplicar o llamar
Ver
Marco MVVM
Es mejor combinar la introducción del proyecto, por ejemplo. En mi proyecto, solicité la información personal del usuario desde la interfaz back-end (Modelo) a través del código vue.js (comunicación axios o ajax), y luego de la solicitud obtuve con éxito los datos de respuesta. La VM envía los datos a la Vista (página) y la página cambia en consecuencia.
Debido a que VUE se basa en datos, Vue enlaza el DOM y los datos. Una vez que se crea el enlace, los datos cambian y el DOM también cambia, entonces el núcleo esVM (ViewModel)
Lectura recomendada: https://www.jianshu.com/p/e4e3519a58a6
vuex
Las mutaciones son las únicas que pueden cambiar el estado. Las
acciones se inician mediante dispath en el componente Vue. Las acciones luego llaman a Commit para redistribuir mutaciones y enviar mutaciones para cambiar datos y cambiar vistas.
Combinar su propio proyecto es simple.
Ciclo vital
Principio calculado de Vue, la diferencia entre calculado y reloj;
Comunicación de componentes Vue
vue-enrutador
Cuando se empaquetan los componentes dinámicos (rutas), las instancias de componentes inactivos se almacenarán en caché, lo que se usa principalmente para preservar el estado del componente y evitar volver a renderizar
Termina aquí primero