快捷導(dǎo)航

理解Javascript文件動(dòng)態(tài)加載

更新時(shí)間：2016年01月29日 14:45:09 作者：吳統(tǒng)威

這篇文章主要幫助大家理解Javascript文件動(dòng)態(tài)加載，解決了Javascript文件動(dòng)態(tài)加載時(shí)出現(xiàn)的錯(cuò)誤，感興趣的小伙伴們可以參考一下

Javascript文件動(dòng)態(tài)加載一直是比較困擾的一件事情,像網(wǎng)絡(luò)上傳的比較常見的做法:

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

然后我們來測(cè)試一下結(jié)果:

<html>
  <head>
   <link rel="stylesheet" type="text/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>

代碼加載完后,會(huì)出現(xiàn)下圖的錯(cuò)誤：

jquery明明是加載在第一個(gè)處理,為什么還是報(bào)jQuery不存在的對(duì)象呢?

因?yàn)檫@樣加載，相當(dāng)于開啟了三個(gè)線程,只是jquery這個(gè)文件先啟動(dòng)線程,而jquery執(zhí)行完這個(gè)線程的時(shí)間,超過了后面兩個(gè)時(shí)間. 因此后面執(zhí)行完的,可能沒能找到j(luò)query這個(gè)對(duì)象。

然這種方式怎么處理呢?

其實(shí)文件的加載是有個(gè)狀態(tài)處理的.文件的加載有個(gè)onload事件,就是可以監(jiān)聽文件是否加載完成的事件.

因此我們可以考慮這個(gè)方法來處理我們想要的結(jié)果.我們用直觀的方式來處理.改進(jìn)后的代碼如下：

 <html>
  <head>
   <link rel="stylesheet" type="text/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>

OK,執(zhí)行完這個(gè)代碼之后,加載文件都是在前一個(gè)加載完成后,才會(huì)加載另外一個(gè),這樣就不會(huì)造成找不到用到的對(duì)象了.

然后我們來執(zhí)行一個(gè)彈出框的效果,代碼里面使用了 Bootbox.js 插件. 加載代碼如下:

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

刷新頁面,就會(huì)直接顯示彈出框：