Vari metodi per importare file JavaScript senza script

Metodo uno: nativo

　Il contenuto di adc.js è il seguente:

var hello = "H9";

html.html

<script>
      var s = document.createElement("script");
      s.src = "abc.js";
      document.head.appendChild(s);
      s.addEventListener("load",function() {
        // Attendere che l'evento load di s sia completato per caricare la risposta, per evitare errori durante il caricamento
        console.log(hello);
      )
      setTimeout(function() { // Ogni volta che si carica un documento HTML, il codice JavaScript viene eseguito prima che la pagina venga caricata (non sicuro, meglio ascoltare gli eventi)
        console.log(hello);
      },1000);
     // $.getScript("abc.js");
  </script>

Metodo due: 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('"Controllando nuovo script"');//Questa funzione è nel file new.js, viene eseguita quando si fa clic
});
});
});
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Carica</button>

Metodo tre: require.js

require.js versione 2.1.1, nota: è destinato all'uso in progetti grandi, in molti casi è sufficiente utilizzare jQuery.

index.html

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

main.js

console.log("Ciao mondo");
require(["js1","js2","js3"],function () {
  // È il caricamento asincrono dell'importazione. Puoi saltare l'estensione .js
  console.log("Siete stati caricati? ");
  var total = num1+num2+num3;
  console.log(total);
  hello1();
  hello2();
  hello3();
)

È molto facile importare file js utilizzando requireJs, ma attenzione ai problemi di conflitto tra nomi di variabili e metodi nei file js. Causa: i file js del browser condividono l'ambito globale, e i nomi delle variabili e dei metodi nell'ambito possono essere sovrascritti

Guida di base