Comprendre le chargement dynamique des fichiers Javascript_compétences Javascript-js tutoriel-php.cn

Comprendre le chargement dynamique des fichiers Javascript_compétences Javascript

WBOY

Libérer： 2016-05-16 15:17:00

original

1109 Les gens l'ont consulté

Le chargement dynamique de fichiers Javascript a toujours été une chose gênante, comme la méthode courante de téléchargement sur Internet :

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

Copier après la connexion

Alors testons les résultats :

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    
    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

Copier après la connexion

Une fois le code chargé, l'erreur suivante apparaîtra :

jquery est évidemment chargé lors du premier traitement, pourquoi est-il toujours signalé que jQuery n'existe pas

Parce que charger de cette manière équivaut à ouvrir trois threads, c'est simplement que le fichier jquery démarre le thread en premier, et le temps qu'il faut à jquery pour terminer l'exécution de ce thread dépasse les deux fois suivantes. être trouvé après l'exécution ultérieure de cet objet.

Comment gérer cette méthode

En fait, le chargement des fichiers est traité dans un état. Il existe un événement onload pour le chargement du fichier, qui est un événement qui peut surveiller si le fichier est chargé

Nous pouvons donc envisager cette méthode pour gérer les résultats que nous souhaitons. Nous la gérons de manière intuitive. Le code amélioré est le suivant :

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    
    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });
      
    
    </script>
  </body>
</html>

Copier après la connexion

OK, après avoir exécuté ce code, le fichier chargé ne sera chargé qu'une fois le précédent chargé, afin que l'objet utilisé ne soit pas trouvé.

Ensuite, nous réaliserons l'effet d'une boîte pop-up. Le plug-in Bootbox.js est utilisé dans le code. Le code de chargement est le suivant :

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

Copier après la connexion

Actualisez la page et la boîte pop-up s'affichera directement :

Il est souvent facile de passer beaucoup de temps à déboguer le code chargé dynamiquement. La meilleure façon pour tout le monde est d'écrire l'exemple le plus simple et de comprendre la raison. Le code ici peut être encapsulé et des fichiers CSS peuvent également être ajoutés pour être chargés. .Utilisez-le comme votre propre plug-in.