在同一个页面中导入多个外部JavaScript脚本文件时,由于这些外部文件由不同人员编写,可能会存在重名的对象、函数、方法或变量等。当它们在一起执行时就会出现冲突,并且会产生重名覆盖现象,最终影响JavaScript脚本的顺利执行。例如,新建两个JavaScript文件,在average_floor.js文件中定义一个average函数,该函数计算两个参数的平均值。
function average(a,b){
return Math.floor((a+b)/2);
}
在average_round.js文件中也定义了一个同名函数average,该函数计算两个参数的平均值。
function average(a,b){
return Math.round((a+b)/2);
}
如果在一个页面中同时导入这两个文件,那么就会出现重名函数冲突问题。解决JavaScript文件冲突的最好方法就是利用接口。所谓接口技术就是对函数进行封装,然后定义一个对外接口,其他文件只能通过这个接口来访问被封装的函数。JavaScript代码封装的方法是,把函数放在如下的结构体内:
(function{
//接口对象;
//被封装的函数
})
这种结构体实际上就是一个闭包,创建一个封闭的结构可以有效地避免外部引入冲突。下面对上面两个文件中的函数进行封装。
封装average_floor.js文件中的average函数的代码如下:
//求两个数字的平均值——向下取整计算
//封装average函数,接口为average_floor.average
(function{
average_floor={
average:average
};
function average(a,b){
return Math.floor((a+b)/2);
}
})
在上面这个封闭结构中,average_floor表示接口对象,该对象拥有一个私有属性average,并指向结构内部的average函数。
封装average_round.js文件中的average函数的代码如下:
//求两个数字的平均值——四舍五入法
//封装average函数,接口为average_round.average
(function{
average_round={
average:average
};
function average(a,b){
return Math.round((a+b)/2);
}
})
注意,定义的接口对象名不能相同,否则也会出现冲突。
完成JavaScript文件的封装工作后就可以放心地在同一个页面中引用这些文件了。例如,在下面示例中同时导入这两个外部JavaScript脚本文件,重名函数average并没有发生冲突。
<html>
<head>
<script type="text/javascript"src="average_floor.js"></script>
<script type="text/javascript"src="average_round.js"></script>
<title></title></head>
<body>
<script type="text/javascript"language="javascript">
alert(average_floor.average(7.3,8.6));//为7
alert(average_round.average(7.3,8.6));//为8
</script>
</body>
</html>