Vue d'ensemble de la nomenclature et des propriétés et méthodes de sa fenêtre d'objets de niveau supérieur

1. Présentation de la nomenclature

1.1 Qu'est-ce que BOM

BOM (Browser Object Model) est le modèle d'objet du navigateur, qui fournit un objet indépendant du contenu et interagit avec la fenêtre du navigateur. L'objet principal est window.

La nomenclature se compose d'une série d'objets associés, et chaque objet fournit de nombreux attributs et méthodes

La nomenclature manque de normes. L'organisation de normalisation pour la syntaxe JavaScript est ECMA et l'organisation de normalisation pour DOM est le W3C. La nomenclature faisait à l'origine partie du standard de navigateur Netscape.

JUGEMENT
- Modèle d'objet de document
- DOM consiste à traiter le document comme un objet
- L'objet de niveau supérieur de DOM est document
- DOM apprend principalement à manipuler des éléments de page
- DOM est la spécification standard du W3C
BIEN
- Modèle d'objet du navigateur
- Traitez le navigateur comme un objet
- L'objet de niveau supérieur de la nomenclature est window
- BOM apprend certains objets de l'interaction de la fenêtre du navigateur
- La nomenclature est définie par les fabricants de navigateurs sur leurs navigateurs respectifs et la compatibilité est médiocre.

1.2 La composition de BOM

L'objet window est l'objet de niveau supérieur du navigateur et a un double rôle.

Il s'agit d'une interface permettant à JS d'accéder à la fenêtre du navigateur.
C'est un objet global. Les variables et fonctions définies dans la portée globale deviendront des propriétés et des méthodes de l'objet window.

2. Événements courants des objets de fenêtre

2.1 Événement de chargement de fenêtre

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

Remarque:

Avec window.onload, vous pouvez écrire le code JS au-dessus des éléments de la page, car onload attend que le contenu de la page soit chargé avant d'exécuter la fonction de traitement
La méthode d'enregistrement traditionnelle de window.onload ne peut être écrite qu'une seule fois, s'il y en a plusieurs, le dernier window.onload prévaudra.
Si vous utilisez addEventListener, il n'y a pas de limite
load: Cet événement sera déclenché lorsque le contenu du document est complètement chargé (y compris les images, les fichiers de script, les fichiers CSS, etc.)
DOMContentLoaded signifie que le DOM a été chargé, à l'exclusion des images, du flash css, etc. (la vitesse de chargement est plus rapide que le chargement)

2.2 Événement de redimensionnement de la fenêtre

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

Cet événement sera déclenché tant que la taille de la fenêtre change en pixels.
Utilisez souvent cet événement pour terminer la mise en page réactive. window.innerWidth La largeur de l'écran actuel

3. Minuterie

3.1 Deux minuteries

setTimeout ()

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

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

La différence entre les deux : setTimeout: appeler lorsque le délai est écoulé et se terminer après avoir appelé une fois; setInterval: appeler à chaque intervalle de temps, appeler plusieurs fois.

3.2 Arrêter le chronomètre

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

3.3 Cela met en évidence le problème

Dans des circonstances normales, le point final de ceci est l'objet qui l'appelle

Dans la portée globale ou la fonction ordinaire, cela pointe vers la fenêtre de l'objet global (notez que cela dans le minuteur pointe vers la fenêtre)
Qui appelle cela dans l'appel de méthode
Ceci dans le constructeur pointe vers l'instance du constructeur

<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. Mécanisme d'exécution JS

4.1 JS est mono-thread

Une caractéristique majeure du langage JavaScript est monothread, ce qui signifie qu'il ne peut faire qu'une chose à la fois. Cela signifie que toutes les tâches doivent être mises en file d'attente et que la tâche précédente est terminée avant que la tâche suivante ne soit exécutée. Le problème est que si le temps d'exécution JS est trop long, le rendu de la page sera incohérent, conduisant à l'impression de bloquer le rendu et le chargement de la page.

4.2 Synchrone et asynchrone

Afin de résoudre les problèmes ci-dessus, en utilisant la puissance de calcul des processeurs multicœurs, HTML5 propose le standard Web Worker, qui permet aux scripts JavaScript de créer plusieurs threads.

Tâche de synchronisation

Les tâches synchrones sont exécutées sur le thread principal, formant une pile d'exécution

Tâche asynchrone

L'asynchronie de JS est réalisée via la fonction de rappel.

D'une manière générale, il existe trois types de tâches asynchrones:

Événements, tels que cliquer, redimensionner, etc.
Chargement de ressources, tel que chargement, erreur, etc.
Timer, y compris setInterval, setTimeout, etc.

Les fonctions de rappel liées aux tâches asynchrones sont ajoutées à la file d'attente des tâches (la file d'attente des tâches est également appelée file d'attente de messages)

4.3 Mécanisme d'exécution JS

Exécutez d'abord les tâches de synchronisation dans la pile d'exécution.
Les tâches asynchrones (fonctions de rappel) sont placées dans la file d'attente des tâches.
Une fois que toutes les tâches synchrones de la pile d'exécution ont été exécutées, le système lit les tâches asynchrones dans la file d'attente des tâches dans l'ordre, de sorte que les tâches asynchrones qui ont été lues terminent l'état d'attente, entrent dans la pile d'exécution et démarrent l'exécution.

Cas numéro un:

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

Cas 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. objet de localisation

5.1 Qu'est-ce qu'un objet de localisation

L'objet window nous fournit une propriété d'emplacement pour obtenir ou définir l'URL de la fenêtre, et il peut être utilisé pour analyser l'URL.

5.2 Propriétés de l'objet de localisation

location.href: obtenir ou définir l'URL entière
location.host: retour de l'hôte (nom de domaine)
location.port: retourne le numéro de port
location.pathname: chemin de retour
location.search: paramètre de retour
location.hash: Retour au fragment # Le contenu suivant se trouve souvent dans les connexions d'ancrage

5.3 Méthodes de l'objet de localisation

location.assign (): Comme href, vous pouvez accéder à la page (également devenir la page de redirection), et vous pouvez revenir en arrière
location.replace (): Remplace la page actuelle, car l'historique n'est pas enregistré, la page ne peut pas être reculée
location.reload (): Recharger la page, équivalent au bouton d'actualisation ou f5, si le paramètre est vrai, actualisation forcée ctrl + f5

Objet 6.Navigator

L'objet navigateur contient des informations sur le navigateur. Il possède de nombreux attributs, le plus couramment utilisé est userAgent, qui peut renvoyer la valeur de l'en-tête user-agent envoyé par le client au serveur.

7. objet d'histoire

L'objet window nous fournit un objet historique pour interagir avec l'historique du navigateur. Cet objet contient l'URL que l'utilisateur (dans la fenêtre du navigateur) a visitée.

méthode d'objet historique

back (): fonction de retour
forward (): fonction avant
go (paramètre): Le paramètre est 1 table avant 1 page, -1 table retour 1 page.