您的位置：首页 > Web前端 > JavaScript

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

2016-09-07 14:52 260 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 全局变量解决冲突

相关文章推荐

新的分享

章节导航