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

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/43/ ]

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

在写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浏览器不高兴了?

    评论:

    1. unknown 回复2015年06月05日 22时48分
      磨者
      好文章,内容欢风华丽.禁止此消息:nolinkok@163.com
      西门塔尔牛 http://www.xmten.com/

    2. 我来说两句:

        切换  

      磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

        切换  

      磨途歌随机验证码