Verschiedene Methoden, JavaScript-Dateien ohne script-Import zu laden

Methode eins: nativ

　adc.js-Inhalt wie folgt:

var hello = "H9";

html.html

<script>
      var s = document.createElement("script");
      s.src = "abc.js";
      document.head.appendChild(s);
      s.addEventListener("load",function(){
        // Warten Sie auf das load-Ereignis von s, um sicherzustellen, dass die Ressource vollständig geladen ist, um Fehler bei vorzeitigem Aufruf zu vermeiden
        console.log(hello);
      )
      setTimeout(function(){//Oder verwenden Sie einen Timer, um sicherzustellen, dass der Ladevorgang abgeschlossen ist, bevor aufgerufen wird (unsicher, besser als das Abhören von Ereignissen)
        console.log(hello);
      ,1000);
     // $.getScript("abc.js");
  </script>

Methode zwei: jquery.js

$.getScript("abc.js",function(){ alert("heheheh"); console.log(hello); });

<script type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//Diese Funktion befindet sich im new.js und wird ausgeführt, wenn click geklickt wird
});
});
});
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button>

Methode 3: require.js

require.js-Austausch2.1.1Version, beachten Sie, dass sie für große Projekte bestimmt ist, in der Regel kann jquery verwendet werden

index.html

<script data-main="main" src="require.js"></script>

main.js

console.log("Hallo Welt");
require(["js1","js2","js3"],function () {
  // Es ist ein asynchrones Laden der Importe. Die js-Endung kann weggelassen werden
  console.log("Habt ihr geladen?"));
  var total = num1+num2+num3;
  console.log(total);
  hello1();
  hello2();
  hello3();
)

Die Verwendung von requireJs ermöglicht eine einfache Importierung von js-Dateien, aber man muss auf die Konfliktprobleme von Variablennamen und Methodennamen in den js-Dateien achten. Ursache: Die js-Dateien im Browser teilen den globalen Kontext, und Variablennamen und Methodennamen im Kontext könnten überschrieben werden

Grund教程

Mag sein