首頁 > web前端 > js教程 > 主體

理解Javascript檔案動態載入_javascript技巧

WBOY
發布: 2016-05-16 15:17:00
原創
1083 人瀏覽過

Javascript檔案動態載入一直是比較困擾的一件事情,像網路上傳的比較常見的做法:

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}
登入後複製

然後我們來檢驗一下結果:

<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>
登入後複製

程式碼載入完後,會出現下圖的錯誤:

jquery明明是載入在第一個處理,為什麼還是報jQuery不存在的物件呢?

因為這樣加載,相當於開啟了三個線程,只是jquery這個文件先啟動線程,而jquery執行完這個線程的時間,超過了後面兩個時間. 因此後面執行完的,可能沒能找到jquery這個對象。

然這種方式怎麼處理呢?

其實檔案的載入是有個狀態處理的.檔案的載入有個onload事件,就是可以監聽檔案是否載入完成的事件.

因此我們可以考慮這個方法來處理我們想要的結果.我們用直觀的方式來處理.改進後的程式碼如下:

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

登入後複製

OK,執行完這個程式碼之後,載入檔都是在前一個載入完成後,才會載入另外一個,這樣就不會造成找不到用到的物件了.

然後我們來執行一個彈出框的效果,程式碼裡面使用了 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");
          });
       })
   })
 });
登入後複製

刷新頁面,就會直接顯示彈出框:

動態加載的程式碼,往往容易在這裡花很多時間調試.大家最好的辦法就是寫一個最簡單的例子,理解其中的原因. 這裡的程式碼都可以進行封裝,還可以加入CSS檔案的加載.作為自己的插件使用。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板