Comment écrire du code lorsque les documents JS et jQuery sont chargés ?

HTML a un ordre d'exécution, et la valeur par défaut est une exécution descendante. Ainsi, lorsque notre code js est en dessous du code html, il peut être exécuté normalement, mais lorsque notre code js est au-dessus du code html, il ne peut pas être exécuté normalement. À ce stade, nous devons attendre que le document soit chargé. code, donc nous faisons habituellement ceci :

1. Lorsque vous n'introduisez pas le framework jQuery et écrivez uniquement du code JS natif, vous devez utiliser l'événement onload de l'objet window

window.onload = function(){
  //要执行的js代码段  
}

(Remarque : lors de son utilisation, window.onload peut être directement abrégé en onload, mais afin d'éviter toute ambiguïté et erreurs inutiles, il est préférable d'écrire window)

2. Lors de l'introduction de jQuery, combien ici ne sont que l'une des méthodes d'écriture les plus compliquées (les autres méthodes d'écriture sont essentiellement des variantes de ce type), et les deux méthodes d'écriture les plus courantes

1. La méthode d'écriture la plus complexe :

(function($,window,document,undefined){
    //要执行的js代码段
})(jQuery,window,document);

(1). Le but de l'utilisation de points-virgules au début est d'éviter les erreurs grammaticales après la fusion, car la dernière ligne d'instructions dans d'autres fichiers n'inclut pas de point-virgule lors de la compression et de la fusion de plusieurs fichiers (si l'on peut garantir qu'aucun point-virgule n'est présent). ajouté) Il y aura des situations où plusieurs fichiers seront compressés et fusionnés, vous n'aurez donc pas besoin d'écrire ce point-virgule)

(2) Il s'agit de l'auto-exécution d'une fonction anonyme. utilisez cette fonction anonyme auto-exécutable pour la protection. Le $ dans les variables internes

(3) et les paramètres formels est l'abréviation de jQuery De nombreuses méthodes et bibliothèques de classes utilisent également $ ici, qui reçoit l'objet jQuery. est également d'éviter les conflits de variables $ et de garantir que plusieurs plug-ins peuvent fonctionner normalement (si seul le plug-in jQuery est introduit, vous n'avez pas besoin d'écrire ceci)

(4), le réel Les paramètres reçoivent respectivement les deux objets window et document, et les deux objets window et document sont globaux. Dans l'environnement, la fenêtre et le document dans le corps de la fonction sont en fait des variables locales, pas la fenêtre globale ou l'objet document. L'avantage de procéder ainsi est que cela peut améliorer les performances et réduire le temps de requête de portée (si vous devez appeler l'objet fenêtre ou document plusieurs fois dans le corps de la fonction, il est très nécessaire de passer l'objet fenêtre ou document en tant que paramètre. Si ces deux objets ne sont pas utilisés dans le code, alors il n'est pas nécessaire de passer ces deux paramètres)

(5) La raison de l'utilisation d'undefined :

① Parce qu'undefined est une propriété de window , après l'avoir déclaré comme variable locale, s'il y a une autre variable dans la fonction qui est comparée à undéfini, le programme n'a pas besoin de rechercher undéfini dans la fenêtre, ce qui peut améliorer les performances du programme
②undéfini n'est pas utilisé dans certains navigateurs plus anciens Il est pris en charge. Si vous l'utilisez directement, une erreur sera signalée. Le framework js doit prendre en compte les problèmes de compatibilité, ajoutez donc un paramètre formel non défini

2.

$(document).ready(function(){
    //要执行的js代码段
});

(Remarque : ① Lorsque vous n'êtes pas sûr d'introduire uniquement jQuery comme framework js, le $ dans le code peut être passé sous forme de paramètres comme l'écriture complexe. ② Le document dans le le code peut être omis)

3. La méthode d'écriture la plus simple :

$(function(){
    //要执行的js代码段
});

(Remarque : les détails sont les mêmes que la méthode ci-dessus)

3. Résumé : Il existe de nombreuses façons de rédiger le document chargé, qui doivent être utilisées en fonction de la situation réelle et des habitudes personnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!