js使用心得——避免全局变量冲突的小技巧

        在写js代码的时候，经常会因为这样或者那样的原因用到全局变量，如果全局变量只在一个js里使用，那就没问题，但如果变量在不同的js文件里出现，这时隐藏的问题就会开始暴露，也许你能很快修复出现的BUG，又或许全无头绪。

         先看下边的js文件test1.js

var a = 1,
    b = 2,
    c = a + b;//此时c的值为3
html代码如下：

<html>
<head>
</head>
<body>
<script src="test1.js"></script>
<script>
alert(c);//对话框显示3
</script>
</body>
</html>
        上边的test1.js文件在单独使用的时候，毫无疑问，是正确的，c的值就是我们期望的3。但是经常会遇到一个项目由多个人来合作开发，然后另一个同事给网页加载另一个test2.js，代码如下：
var a = 3,
    b = 4,
    c = a + b;
修改后的html代码如下：

<html>
<head>
</head>
<body>
<script src="test1.js"></script>
<script src="test2.js"></script>
<script>
alert(c);//对话框显示7
</script>
</body>
</html>
       也就是说，test1.js中的变量被test2.js中同名变量给覆盖了！如果声明的变量越多，那么变量冲突就越频繁，这会让我们在新增变量的时候都提心吊胆。那么，有什么解决方案吗？答案是肯定的，下边磨途歌将给大家介绍“变量命名空间”简单的使用方法。
更改后的test1.js代码：
var _test1 = {
    a : 1,
    b : 2,
    c : 0
};
_test1.c = _test1.a + _test1.b;//此时c的值为3
更改后的test2.js代码：

var _test2 = {
    a : 3,
    b : 4,
    c : 0
};
_test2.c = _test2.a + _test2.b;//此时c的值为7
修改后的html代码如下：

<html>
<head>
</head>
<body>
<script src="test1.js"></script>
<script src="test2.js"></script>
<script>
alert(_test1.c);//对话框显示3
alert(_test2.c);//对话框显示7
</script>
</body>
</html>
        跟磨途歌一起分析上边的代码，不难发现，test1.js与test2.js代码中声明的变量分别使用当前的文件名加一个下划线来组成，例如编写test1.js文件，那么就在文件的开头声明一个全局变量。

var _test1 = {};
//然后在需要的时候往变量里添加需要的变量
//例如下边的使用方式
_test1.x = 1;
_test1.y = 2;
_test1.z = test1.x + test1.y;
因为磨途歌不可能在同一个目录创建两个test1.js文件，这样就很巧妙的避免了同名变量的出现。还要注意一点，就是ie跟火狐或谷歌是有差异的，比如下边的代码：
var _test1 = {
    a : 1,
    b : 2,
    c : 0,
};
最后一个“c : 0,”声明后边加不加逗号，火狐浏览器跟谷歌浏览器都能解析，但是IE浏览器就不行,IE浏览器要求最后一个变量不能有逗号的出现，所以大家以后写代码，还是得照顾一下IE浏览器的固执，改成下边这么写：

var _test1 = {
    a : 1,
    b : 2,
    c : 0
};
如果你正好遇上在火狐浏览器跟谷歌浏览器都能正常运行的js代码，但到了IE浏览器下就不工作了的情况，可以现在就检查一下，会不会就是这个逗号让IE浏览器不高兴了？







posted on 2016-11-23 21:11  菜鸟Z  阅读(575)  评论(0)  编辑  收藏  举报

导航