jquery load页面导致js重复加载

1、问题发生场景：

主页包含两个div，div1，div2，div1采用jquery load了page1，div2采用jquery load了page2，page1与page2业务类似，共用一个js，主页可能同时显示page1和page2，这时发现js重复加载了。

2、问题分析：

打开chrome，查看network，在load page1时js后面自动加上了?_1462934775039参数，数字应该是时间戳，紧接着load page2时，js又load了一次，同样带了一个时间戳，和之前时间戳不一样。

首先，js后面带了时间参数是避免使用缓存，看来jquery load方法是默认给js不缓存。其次不管js是否是缓存，加载两次，里面的内容都会执行两次，如果是同名方法定义，后面的方法会覆盖前面的方法，如果是事件监听，则会出现添加多次的情况，这样就会有问题，其实发现这个问题就是因为笔者js里面的事件监听执行了多次，导致页面表现异常。例如如下代码就会导致执行两次：

$(document).on("click.b", ".btn", function(){
    console.log("bbbbbb");
});

3、问题解决：

按照最小粒度划分，每个页面只干自己应该干的事，分别引用自己的js，或者js在一处统一引用，一般是不会出现这种问题的。但如果实现存在这种情况，可以在添加监听前，移除之前的监听：

$(document).off("click.b", ".btn");

这样可以确保只执行一次。

4、结尾：

网上有人说可以通过在load前设置jquery如下参数，避免这个问题，笔者测试并不行：

$.ajaxSetup ({
	cache: false //关闭AJAX相应的缓存
});

上面已经解释过，不管是否是缓存，只要加载多次，js里面的定义，方法都会执行多次，不过笔者进一步测试发现，默认情况下，load请求，不设置该参数，在目标页面后面没有加时间戳，在js后面加了，如果设置成false，则不使用缓存，页面和js都加时间戳，设置成true，页面和js都不加时间戳。但是不管页面是否是缓存，页面请求都可以进入笔者的后台，这点需要引起注意。