【读书笔记】JavaScript解决全局变量冲突

最新推荐文章于 2022-01-11 10:39:51 发布

panda409

最新推荐文章于 2022-01-11 10:39:51 发布

阅读量308

点赞数

分类专栏： JavaScript 文章标签： javascript 全局变量解决冲突

本文链接：https://blog.csdn.net/panda409/article/details/52459598

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

《编写高质量代码——Web前端开发修炼之道》

1、思路：使用匿名函数，设置全局对象GLOBAL，在每个匿名函数里面声明一个不同的命名空间，把属性挂在命名空间下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用命名空间</title>
</head>
<body>
    <div>XXXXXXXXXXX</div>

    <script type="text/javascript">
        var GLOBAL = {};
        (function(){
           var a = 123,b = "hello world";
           GLOBAL.A = {};
           GLOBAL.A.str2 = a;
           GLOBAL.A.str = b;
        })();

        (function(){
           var a,c="abc";
           GLOBAL.B={};
           GLOBAL.B.str=c;
        })();

        (function(){
            var a=GLOBAL.A.str2,b=GLOBAL.A.str;
            var d="aaaaa";
            d=b+", "+d+a;
            GLOBAL.C={};
            GLOBAL.C.str=d;
        })();

        (function(){
            var test=GLOBAL.B.str;
            alert(test);
            var test2=GLOBAL.C.str;
            alert(test2);
        })();
        </script>
</body>
</html>

2、当然也要避免命名空间的冲突，那么就用函数来生成这些命名空间：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用命名空间</title>
</head>
<body>
    <div>XXXXXXXXXXX</div>

    <script type="text/javascript">
        var GLOBAL = {};
        GLOBAL.namespace = function(str){

            var arr=str.split("."),
            o=GLOBAL;
            //原书中有错误，应该是三等号。
            for(i=(arr[0]==="GLOBAL")?1:0;i<arr.length;i++){      
                    //这么写的(重要)：如果CAT已经存在，不会覆盖这个CAT，而是在前一个CAT的基础上添加。如果直接用o[arr[i]]={};GLOBAL.namespace("A.CAT.CAT1");GLOBAL.namespace("A.CAT.DOG3"); 前面的CAT会被后面的CAT覆盖 

                o[arr[i]]=o[arr[i]]||{};
                o=o[arr[i]];

            }
        };

        (function(){
           var a = 123,b = "hello world";
           GLOBAL.namespace("A.CAT");//感觉这样生成命名空间就比较方便。不用再定义命名空间A了。否则应该这样写GLOBAL.A = {};GLOBAL.A.CAT = {};
           GLOBAL.A.CAT.name="panda";
           GLOBAL.A.CAT.age=a;
           GLOBAL.A.str2 =a;
           GLOBAL.A.str=b;
        })();

        (function(){
            var test3 =GLOBAL.A.CAT.age;
            console.log(test3);//123
            var test3 =GLOBAL.A.CAT.name;
            console.log(test3);//panda
        })();
    </script>
</body>
</html>

panda409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【读书笔记】JavaScript解决全局变量冲突

《编写高质量代码——Web前端开发修炼之道》1、思路：使用匿名函数，设置全局对象GLOBAL，在每个匿名函数里面声明一个不同的命名空间，把属性挂在命名空间下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用命名空间</title></head><body> <div>XXXXX
复制链接

扫一扫