避免js重復加載的問題

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

先上代碼

動態加載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);
}

去除已經加載的js

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

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

使用限制

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

   例子

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

2. 若是需要指定加載順序，則需要重寫removeDoubleJS(path)的方法，比如傳參傳多一個回調函數，並且將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>
   

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

具體實例

<script>
	// 動態加載jq
	!window.jQuery && loadJS("js/jquery.min.js");
	// 動態加載外部js
	// window,onload是為了讓重復加載的js在原頁面使用 
	window.onload = function(){
		keyDown();
		window.jQuery && $(document).delegate($(document),"hover",removeDoubleJS("js/my.js"));
	};
	// 在被加載的頁面中判斷此js是否已經加載過了
	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是為了讓重復加載的js在原頁面中使用 ，並且需要在window,onload外面再調用一次方法。若使用jq，又要防止重復加載jq，則需要通過!window.jQuery && loadJS("js/jquery.min.js");加載jq，並且需要調用jq的delegate函數來保證在jq加載后才使用jq的方法。

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