理運用命名空間讓js不產生沖突避免全局變量的泛濫

2019-11-20 14:29:06

字體：大中小

來源：轉載

供稿：網友

為了避免變量之間的覆蓋與沖突，可以生成命名空間，命名空間是一種特殊的前綴，在js中，通過{ }對象實現。

在不同的匿名函數中，根據功能聲明一個不同的命名空間，每個匿名函數中GLOBAL對象的屬性都不直接掛在GLOBAL上，而是掛在次匿名函數的命名空間下，如：

復制代碼代碼如下:

 
<script type="text/javascript"> 
var GLOBAL={} 
</script> 
<script type="text/javascript"> 
(function(){ 
var a=123, a1=256; 
GLOBAL.A={} 
GLOBAL.A.str=a; 
})(); 
</script> 

<script type="text/javascript"> 
(function(){ 
var b1=123, b2=256; 
GLOBAL.B={} 
GLOBAL.B.str=a; 
})(); 
</script> 

如果同一個匿名函數中的程序非常復雜，變量名很多，命名空間可以進一步擴展，生成二級命名空間：

復制代碼代碼如下:

 
<script type="text/javascript"> 
var GLOBAL={} 
</script> 
<script type="text/javascript"> 
(function(){ 
var a=123, a1=256; 
GLOBAL.A={}; 
GLOBAL.A.CAT={}; 
GLOBAL.A.DOG={}; 
GLOBAL.A.CAT.name="mini"; 
GLOBAL.A.CAT.move=function(){ 
} 
GLOBAL.A.DOG.name="mini"; 
GLOBAL.A.DOG.move=function(){ 
} 
})(); 
</script> 

因生成命名空間是非常常用的功能，可以進一步將生成命名空間的功能定義成一個函數，方便調用，如下：

復制代碼代碼如下:

 
<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++){ 
o[arr[i]]=o[arr[i]] || {}; 
o=o[arr[i]]; 
} 
} 
</script> 

調用命名空間具體操作：

復制代碼代碼如下:

 
<script type="text/javascript"> 
//============================================================= 
// 功能A 
// 工程師甲 
// email:ctkl68945@gmail.com msn:ctkl68945@hotmail.com" 
// 2012-11-06 
//============================================================= 

(function(){ 
var a=123, a1="hello world"; 
GLOBAL.namespace("A.CAT"); 
GLOBAL.namespace("A.DOG"); 
GLOBAL.A.CAT.name="mini"; 
GLOBAL.A.CAT.move=function(){ 
} 
GLOBAL.A.DOG.name="mini"; 
GLOBAL.A.DOG.move=function(){ 
} 
GLOBAL.A.str=a; 
GLOBAL.A.str1=a1; 
})(); 