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

来源：互联网发布：c 多文件编程问题编辑：程序博客网时间：2024/06/05 10:39

《编写高质量代码——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>

0 0