Memahami pemuatan dinamik fail Javascript_kemahiran javascript-tutorial js-php.cn

Memahami pemuatan dinamik fail Javascript_kemahiran javascript

WBOY

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

asal

1083 orang telah melayarinya

Pemuatan dinamik fail Javascript sentiasa menjadi perkara yang menyusahkan, seperti kaedah biasa memuat naik melalui Internet:

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

Salin selepas log masuk

Kemudian mari kita uji keputusan:

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

Salin selepas log masuk

Selepas kod dimuatkan, ralat berikut akan muncul:

jquery jelas dimuatkan dalam pemprosesan pertama, mengapa masih dilaporkan bahawa jQuery tidak wujud

Oleh kerana memuatkan dengan cara ini bersamaan dengan membuka tiga utas, cuma fail jquery memulakan utas dahulu, dan masa yang diperlukan untuk jquery selesai melaksanakan utas ini melebihi dua kali seterusnya, jquery mungkin tidak ditemui selepas ia dilaksanakan kemudian.

Bagaimana untuk menangani kaedah ini

Malah, pemuatan fail diproses dalam keadaan Terdapat acara onload untuk pemuatan fail, iaitu peristiwa yang boleh memantau sama ada fail dimuatkan

Jadi, kami boleh mempertimbangkan kaedah ini untuk mengendalikan hasil yang kami inginkan. Kami mengendalikannya dengan cara yang intuitif

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

Salin selepas log masuk

OK, selepas melaksanakan kod ini, fail yang dimuatkan tidak akan dimuatkan sehingga yang sebelumnya dimuatkan, supaya objek yang digunakan tidak akan ditemui.

Kemudian kami akan melakukan kesan kotak pop timbul Pemalam Bootbox.js digunakan dalam kod pemuatan adalah seperti berikut:

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

Salin selepas log masuk

Muat semula halaman dan kotak pop timbul akan dipaparkan terus:

Kod yang dimuatkan secara dinamik selalunya mudah untuk menghabiskan banyak masa menyahpepijat di sini Cara terbaik untuk semua orang ialah menulis contoh paling mudah dan memahami sebabnya Kod di sini boleh dirangkumkan dan fail CSS juga boleh ditambahkan untuk dimuatkan .Gunakan sebagai pemalam anda sendiri.