Descripción general de la lista de materiales y las propiedades y métodos de su ventana de objeto de nivel superior

1. Descripción general de la lista de materiales

1.1 ¿Qué es la lista de materiales?

BOM (Browser Object Model) es el modelo de objetos del navegador, que proporciona un objeto que es independiente del contenido e interactúa con la ventana del navegador. El objeto principal es la ventana.

BOM consta de una serie de objetos relacionados y cada objeto proporciona muchos atributos y métodos.

BOM carece de estándares. La organización de estandarización para la sintaxis de JavaScript es ECMA, y la organización de estandarización para DOM es W3C. BOM fue originalmente parte del estándar del navegador Netscape.

• JUICIO

  • Modelo de objetos de documento
  • DOM es tratar el documento como un objeto
  • El objeto de nivel superior de DOM es documento
  • DOM aprende principalmente a manipular elementos de la página
  • DOM es la especificación estándar de W3C

• BUENO

  • Modelo de objetos del navegador
  • Trate el navegador como un objeto
  • El objeto de nivel superior de la lista de materiales es la ventana
  • BOM aprende algunos objetos de la interacción de la ventana del navegador
  • La lista de materiales la definen los fabricantes de navegadores en sus respectivos navegadores y la compatibilidad es deficiente.

1.2 La composición de la lista de materiales

El objeto de ventana es el objeto de nivel superior del navegador y tiene una función doble.

1. Es una interfaz para que JS acceda a la ventana del navegador.

2. Es un objeto global. Las variables y funciones definidas en el ámbito global se convertirán en propiedades y métodos del objeto ventana.

2. Eventos comunes de objetos de ventana

2.1 Evento de carga de ventana

// 传统注册方式
window.onload = function() {
    
    }
or
window.addEventListener('load/DOMContentLoaded',function(){
    
    })

Nota:

1. Con window.onload, puede escribir el código JS sobre los elementos de la página, porque onload espera a que se cargue el contenido de la página antes de ejecutar la función de procesamiento
2. El método de registro tradicional de window.onload solo se puede escribir una vez, si hay más de uno, prevalecerá la última window.onload.
3. Si usa addEventListener no hay límite
4. load: este evento se activará cuando el contenido del documento esté completamente cargado (incluidas imágenes, archivos de script, archivos CSS, etc.)
5. DOMContentLoaded significa que el DOM se ha cargado, excluyendo imágenes, flash css, etc. (la velocidad de carga es más rápida que la carga)

2.2 Cambio de tamaño de evento de ventana

window.onresize = function() {
    
    }
or
window.addEventListener('resize', function(){
    
    })

• Este evento se activa siempre que el tamaño de la ventana cambia en píxeles.
• Utilice a menudo este evento para completar un diseño receptivo. window.innerWidth El ancho de la pantalla actual

3. Temporizador

3.1 Dos temporizadores

• setTimeout ()

  setTimeout(function(){
        
        ...},延时时间)
  // 1. 延时时间单位是毫秒，可省略，默认为0
  // 2. 页面中可能有多个计时器，所以经常给计时器赋值一个标识符（变量名）。
  // 3. 这个调用函数，可以直接写函数名不加小括号，把函数内容写在外面
  

• setInterval ()

  setInterval(调用函数,间隔时间)
  

La diferencia entre los dos : setTimeout: llamar cuando se acabe el tiempo de demora y finalizar después de llamar una vez; setInterval: llamar cada intervalo de tiempo, llamar varias veces.

3.2 Detener el temporizador

clearTimeout(定时器名)
or
clearInterval(定时器名)

3.3 Esto apunta al problema

En circunstancias normales, el punto final de esto es el objeto que lo llama

1. En el alcance global o la función ordinaria, esto apunta a la ventana del objeto global (tenga en cuenta que esto en el temporizador apunta a la ventana)
2. ¿Quién llama a esto en la llamada al método?
3. Esto en el constructor apunta a la instancia del constructor

<scrip>
    // 1.全局作用域或者普通函数中 this指向全局对象window(注意定时器里面的this指向window)
	console.log(this);//window
    
    function fn() {
    	console.log(this);//window
	}
    setTimeout(function() {
    	console.log(this); //window
    }, 1000)
    
    // 2. 方法调用中谁调用this执行谁
    var o = {
    		sayHi: function() {
    			console.log(this);//o
    	}
    }
    o.sayHi();
    // 3. 构造函数中this指向构造函数的实例
    function Fun() {
    	console.log(this); //this 指向fun实例对象
    }
    var fun = new Fun();
</scrip>

4. Mecanismo de ejecución de JS

4.1 JS es de un solo subproceso

Una característica importante del lenguaje JavaScript es de un solo subproceso, lo que significa que solo puede hacer una cosa a la vez. Esto significa que todas las tareas deben ponerse en cola y la tarea anterior se termina antes de que se ejecute la siguiente. El problema es que si el tiempo de ejecución de JS es demasiado largo, hará que la presentación de la página sea inconsistente, lo que provocará la sensación de bloqueo de la presentación y carga de la página.

4.2 Sincrónico y asincrónico

Para resolver los problemas anteriores, utilizando la potencia informática de las CPU de varios núcleos, HTML5 propone el estándar Web Worker, que permite que los scripts de JavaScript creen múltiples subprocesos.

Tarea de sincronización

Las tareas sincrónicas se ejecutan en el hilo principal, formando una pila de ejecución

Tarea asincrónica

La asincronía de JS se realiza mediante la función de devolución de llamada.

En términos generales, existen tres tipos de tareas asincrónicas:

1. Eventos, como hacer clic, cambiar el tamaño, etc.

2. Carga de recursos, como carga, error, etc.

3. Temporizador, incluido setInterval, setTimeout, etc.

Las funciones de devolución de llamada relacionadas con tareas asincrónicas se agregan a la cola de tareas (la cola de tareas también se denomina cola de mensajes)

4.3 Mecanismo de ejecución de JS

1. Ejecute primero las tareas de sincronización en la pila de ejecución.
2. Las tareas asincrónicas (funciones de devolución de llamada) se colocan en la cola de tareas.
3. Una vez que se hayan ejecutado todas las tareas síncronas en la pila de ejecución, el sistema leerá las tareas asíncronas en la cola de tareas en orden, por lo que las tareas asíncronas que se han leído terminan el estado de espera, ingresan a la pila de ejecución y comienzan la ejecución.

Caso número uno:

console.log(1);
setTimeout(function() {
    
    
    console.log(2);
},0);
console.log(3);
//打印结果是 1 3 2

Caso 2:

console.log(1);
document.onclick = function() {
    
    
    console.log('click');
}
console.log(2);
setTimeout(function() {
    
    
    console.log(3);
}, 3000)
// 分析
// 1. console.log(1); 同步任务 打印1
// 2. document.onclick = fn;异步任务，提交给异步进程程序，等到发生点击事件时，再把该任务放进任务队列中
// 3. console.log(2); 同步任务 打印2
// 4. setTimeout(fn, 3000); 异步任务，三秒后放入任务队列中
// 5. 打印 1 2 后 同步任务执行完毕 会去任务队列查看有没有异步任务
//总结：三秒钟之前点击 打印 1 2 click 3
// 三秒钟之后点击 打印 1 2 3 click
//由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，这种机制被称作事件循环(event loop)

5.objeto de ubicación

5.1 ¿Qué es un objeto de ubicación?

El objeto de ventana nos proporciona una propiedad de ubicación para obtener o establecer la URL de la ventana, y se puede utilizar para analizar la URL.

5.2 Propiedades del objeto de ubicación

• location.href: obtiene o establece la URL completa
• location.host: return host (nombre de dominio)
• location.port: devolver el número de puerto
• location.pathname: ruta de retorno
• location.search: parámetro de retorno
• location.hash: Volver al fragmento # El siguiente contenido se encuentra a menudo en conexiones de anclaje

5.3 Métodos del objeto de ubicación

• location.assign (): como href, puede saltar a la página (también convertirse en la página de redireccionamiento), y puede volver
• location.replace (): Reemplaza la página actual, porque el historial no se registra, la página no se puede mover hacia atrás
• location.reload (): recarga la página, equivalente al botón de actualización o f5, si el parámetro es verdadero, actualización forzada ctrl + f5

6.Objeto navegador

El objeto del navegador contiene información sobre el navegador, tiene muchos atributos, el más utilizado es userAgent, que puede devolver el valor del encabezado de usuario-agente enviado por el cliente al servidor.

7.objeto de historia

El objeto de ventana nos proporciona un objeto de historial para interactuar con el historial del navegador. Este objeto contiene la URL que el usuario (en la ventana del navegador) ha visitado.

método de objeto histórico

• back (): función de retroceso
• forward (): función de avance
• ir (parámetro): El parámetro es 1 tabla adelante 1 página, -1 tabla retrocede 1 página.