在日常開發(fā)中，一個頁面加載另一個頁面的時候，就會把另一個頁面的js也會加載進來，那么如何才能避免被加載頁面不再重復(fù)加載已經(jīng)加載過的js呢？

先上代碼

動態(tài)加載js

// 加載js
function loadJS(url, callback) {
    var script = document.createElement('script'),
        fn = callback || function () { };
    script.type = 'text/javascript';
    //IE
    if (script.readyState) {
        script.onreadystatechange = function () {
            if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                fn();
            }
        };

    } else {
        //其他瀏覽器
        script.onload = function () {
            fn();
        };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

去除已經(jīng)加載的js

// 去除已經(jīng)加載的js
function removeDoubleJS(path) {
    var script = $("script[src='"+path+"']");
    if(script.length > 0){
        script.remove();
    }else {
        // 加載未加載過的js
        loadJS(path);
    }
}

核心代碼如上，先判斷頁面中是否已經(jīng)加載了path路徑的js文件，若加載了不再加載此path路徑的js文件。

使用限制

1. 若是異步加載的頁面，或是每次以最新的請求加載有重復(fù)js的頁面(比如 jq的load()方法，請求時加了時間戳)，則不能單獨用script標簽去引用外部js，<script src="xxxx/xxx.js"></script>，應(yīng)該動態(tài)加載重復(fù)的js。

   例子

   <!-- 重復(fù)的js不能直接通過外部引入 -->
   <script src="js/my.js"></script>
   <!-- 正確做法：動態(tài)加載js -->
   removeDoubleJS("js/my.js");
   <!-- 若使用jq-->
   window.jQuery && $(document).delegate($(document),"hover",removeDoubleJS("js/my.js"));
   

2. 若是需要指定加載順序，則需要重寫removeDoubleJS(path)的方法，比如傳參傳多一個回調(diào)函數(shù)，并且將loadJS進行嵌套。loadJS嵌套如下:

   <script type="text/javascript">
       loadJS("js/my.js", function (){
           loadJS("js/jquery.min.js", function () {
               loadJS("js/bootstrap.min.js", alert("success"));
           });
       });
   </script>
   

   導(dǎo)入bootstrap前需要先導(dǎo)入jq，用callback回調(diào)函數(shù)解決動態(tài)加載js無法確定順序的問題，當然，如果重復(fù)加載的js順序不重要，則不需要重寫removeDoubleJS的方法，cv大法直接用（手動滑稽）。

具體實例

<script>
    // 動態(tài)加載jq
    !window.jQuery && loadJS("js/jquery.min.js");
    // 動態(tài)加載外部js
    // window,onload是為了讓重復(fù)加載的js在原頁面使用 
    window.onload = function(){
        keyDown();
        window.jQuery && $(document).delegate($(document),"hover",removeDoubleJS("js/my.js"));
    };
    // 在被加載的頁面中判斷此js是否已經(jīng)加載過了
    window.jQuery && keyDown();
    window.jQuery && $(document).delegate($(document),"hover",removeDoubleJS("js/my.js"));

    function keyDown() {
        window.jQuery && $(document).delegate($(document),"click",function(event){
            if(event.keyCode==13){
                $("#login-button").click();
            }
        });
    }
</script>

注意：window,onload是為了讓重復(fù)加載的js在原頁面中使用 ，并且需要在window,onload外面再調(diào)用一次方法。若使用jq，又要防止重復(fù)加載jq，則需要通過!window.jQuery && loadJS("js/jquery.min.js");加載jq，并且需要調(diào)用jq的delegate函數(shù)來保證在jq加載后才使用jq的方法。

delegate()方法的鏈接：https://www.w3school.com.cn/jquery/event_delegate.asp