避免js重复加载的问题

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