Verständnis des dynamischen Ladens von Javascript-Dateien_Javascript-Fähigkeiten-js-Tutorial-php.cn

Verständnis des dynamischen Ladens von Javascript-Dateien_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:17:00

Original

1102 Leute haben es durchsucht

Das dynamische Laden von Javascript-Dateien war schon immer eine problematische Sache, beispielsweise die übliche Methode zum Hochladen über das Internet:

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

Nach dem Login kopieren

Dann testen wir die Ergebnisse:

<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>

Nach dem Login kopieren

Nachdem der Code geladen wurde, erscheint die folgende Fehlermeldung:

jquery wird offensichtlich in der ersten Verarbeitung geladen, warum wird immer noch gemeldet, dass jQuery nicht existiert

Da das Laden auf diese Weise dem Öffnen von drei Threads entspricht, startet die JQuery-Datei den Thread nur zuerst und die Zeit, die JQuery benötigt, um die Ausführung dieses Threads abzuschließen, überschreitet die nächsten beiden Male nach der späteren Ausführung dieses Objekts gefunden werden.

Wie gehe ich mit dieser Methode um

Tatsächlich wird das Laden von Dateien in einem Status verarbeitet. Es gibt ein Onload-Ereignis zum Laden von Dateien, das überwachen kann, ob die Datei geladen wird

Wir können diese Methode also in Betracht ziehen, um die gewünschten Ergebnisse zu erzielen. Wir gehen damit auf intuitive Weise um. Der verbesserte Code lautet wie folgt:

 <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>

Nach dem Login kopieren

OK, nach der Ausführung dieses Codes wird die geladene Datei erst geladen, wenn die vorherige geladen wurde, sodass das verwendete Objekt nicht gefunden wird.

Dann führen wir den Effekt einer Popup-Box aus. Das Bootbox.js-Plugin wird wie folgt verwendet:

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");
          });
       })
   })
 });

Nach dem Login kopieren

Aktualisieren Sie die Seite und das Popup-Fenster wird direkt angezeigt:

Es ist oft einfach, hier viel Zeit mit dem Debuggen zu verbringen. Der beste Weg für alle ist, das einfachste Beispiel zu schreiben und den Grund zu verstehen. Der Code kann hier gekapselt werden, und es können auch CSS-Dateien zum Laden hinzugefügt werden .Verwenden Sie es als Ihr eigenes Plug-In.