首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议187:使用接口解决JavaScript文件冲突

关灯直达底部

在同一个页面中导入多个外部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>