zoukankan      html  css  js  c++  java
  • 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浏览器不高兴了?







  • 相关阅读:
    js入门2计算平方
    js入门1
    html入门
    表单的例
    sql概述
    关联规则
    回归分析——logic回归
    聚类分析——动态聚类(K-means)
    聚类分析——层次聚类
    创建一个用递归算法求a的b次方的函数
  • 原文地址:https://www.cnblogs.com/archermeng/p/7537153.html
Copyright © 2011-2022 走看看