随着项目规模的增大,协作开发也越来越常见,协作开发时间久了就会遇到一个恶心的文件冲突问题。
假设一个HTML文件引用了两个外部JS文件,而这两个外部JS文件你没有修改的权限,你只有HTML文件的修改权限,
两个外部JS文件都定义了window.onload事件。代码假设如下:
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
a.js的文件内容:
b.js的文件内容:
window.onload=function(){
alert("这是a.js的");
}
b.js的文件内容:
window.onload=function(){
alert("这是b.js的");
}
这样的话,在a.js定义的window.onload事件会被b.js定义的window.onload事件覆盖掉。
如果我们想a.js和b.js中的window.onload都能正常执行,该怎么办呢???
我们知道JS有这样的特性:后面定义的同名变量会覆盖掉前面定义的同名变量的值而不报错,还有可以自定义变量 其值为系统函数的引用。
得到的变量跟系统函数的功能一样。
好了,我们就利用JS的这个特性,有的人认为这是JS设计的Bug,至少在这个时候这个特性还是有点用处的。
我们新改的代码如下:
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" >
var aa=window.onload;//得到已经定义的window.onload事件处理程序的句柄或者说引用 这里面保存了a.js定义的window.onload事件的逻辑操作。
window.onload=null;//把window.onload的事件处理程序注销,这样系统就不会再执行window.onload函数了。
</script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" >
var bb=window.onload;//得到已经定义的window.onload事件处理程序的句柄或者说引用 这里面保存了b.js定义的window.onload事件的逻辑操作。
window.onload=null;//把window.onload的事件处理程序注销,这样系统就不会再执行window.onload函数了。
</script>
window.onload=function(){
aa();bb();//重新注册window.onload事件,执行的代码逻辑为a.js和b.js中定义的代码操作。
}