所谓文件冲突,指在同一个页面中导入多个js外部文件有可能因为存在重名的对象、函数、变量等导致冲突。
例
average_floor.js内容如下:
function average(x, y) {
return Math.floor((x+y)/2);
}
average_round.js内容如下:
function average(a, b) {
return Math.round((a+b)/2);
}
当在同一个页面中同时导入这两个js外部文件时候会出现因为重命名函数导致的冲突问题。
<html>
<head>
<script type="text/javascript">
alert(111);
</script>
<script type="text/javascript" src="average_floor.js"></script>
<script type="text/javascript" src="average_round.js"></script>
<script type="text/javascript">
alert(222);
alert(average(7.3, 8.6));
//alert(average_floor.average(7.3, 8.6)); //测试接口时使用
//alert(average_round.average(7.3, 8.6)); //测试接口时使用
</script>
</head>
<body></body>
</html>
解决冲突的最好方法是利用接口。
average_floor.js内容如下:
(function() {
average_floor = { //定义接口对象
average: average
};
function average(x, y) {
return Math.floor((x+y)/2);
}
})()
average_round.js内容如下:
(function() {
average_round = { //定义接口对象
average: average
};
function average(a, b) {
return Math.round((a+b)/2);
}
})()
当然,接口名字不能重复,否则一样会出现冲突问题。