動態加載 js 文件以及判斷 js 加載完成

常用的動態加載js文件有以下幾種方式：

1.直接document.write

document.write("<script src='test.js'><\/script>");

2.動態創建script元素

var loadJS = function(jsUrl){
    var _doc = document.getElementsByTagName('head').item(0),
        script  = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',jsUrl);
    _doc.appendChild(script);
};
loadJS("https://cdn.bootcss.com/angular.js/1.6.6/angular.js");

3.預留一個script標簽，然後動態改變src

這幾種方法都是異步執行的，也就是說，在加載這些腳本的同時，主頁麵的腳本繼續運行，如果用以上的方法，那下麵的代碼將得不到預期的效果。

比如現在需要動態加載a.js，並拿到其中的str的值，a.js如下：

var str = "我是str的值";
console.log("我是a.js中的："+str)

主頁麵js:

//loadJS()略
loadJS("a.js");
console.log( "主頁麵動態加載a.js並取其中的變量：" + str );

上述代碼執行後a.js中的console執行並輸出正確內容，但是主頁麵的console產生了錯誤，原因是str is not defined，為什麽呢？因為主頁麵在取str的時候a.js並沒有完全加載成功。在有些情況下就需要等待a.js加載完成後才能進一步的操作，所以可以使用下麵的方法來解決：

var dynamicLoad = function(jsUrl,fn){
    var _doc = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',jsUrl);
    _doc.appendChild(script);
    script.onload = script.onreadystatechange = function(){
        if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
            fn();
        }
        script.onload = script.onreadystatechange = null;
    }  
};
dynamicLoad('a.js',function(){
    console.log("加載完成啦！！！"+str);
});