理運(yùn)用命名空間讓js不產(chǎn)生沖突避免全局變量的泛濫
更新時(shí)間：2014年06月15日 11:26:12 投稿：whsnow
為了避免變量之間的覆蓋與沖突，可以生成命名空間，命名空間是一種特殊的前綴，在不同的匿名函數(shù)中，根據(jù)功能聲明一個(gè)不同的命名空間
為了避免變量之間的覆蓋與沖突，可以生成命名空間，命名空間是一種特殊的前綴，在js中，通過(guò){ }對(duì)象實(shí)現(xiàn)。
在不同的匿名函數(shù)中，根據(jù)功能聲明一個(gè)不同的命名空間，每個(gè)匿名函數(shù)中GLOBAL對(duì)象的屬性都不直接掛在GLOBAL上，而是掛在次匿名函數(shù)的命名空間下，如：
<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>
如果同一個(gè)匿名函數(shù)中的程序非常復(fù)雜，變量名很多，命名空間可以進(jìn)一步擴(kuò)展，生成二級(jí)命名空間：
<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>
因生成命名空間是非常常用的功能，可以進(jìn)一步將生成命名空間的功能定義成一個(gè)函數(shù)，方便調(diào)用，如下：
<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>
調(diào)用命名空間具體操作：
<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;
})();
依次類(lèi)似，無(wú)論多人的直接團(tuán)隊(duì)開(kāi)發(fā)，還是個(gè)人的間接團(tuán)隊(duì)合作，都需要良好的可維護(hù)性。
1、添加必要的代碼注釋
2、讓JS不產(chǎn)生沖突，需避免全局變量的泛濫，合理使用命名空間
在不同的匿名函數(shù)中，根據(jù)功能聲明一個(gè)不同的命名空間，每個(gè)匿名函數(shù)中GLOBAL對(duì)象的屬性都不直接掛在GLOBAL上，而是掛在次匿名函數(shù)的命名空間下，如：
復(fù)制代碼 代碼如下:
<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>
如果同一個(gè)匿名函數(shù)中的程序非常復(fù)雜，變量名很多，命名空間可以進(jìn)一步擴(kuò)展，生成二級(jí)命名空間：
復(fù)制代碼 代碼如下:
<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>
因生成命名空間是非常常用的功能，可以進(jìn)一步將生成命名空間的功能定義成一個(gè)函數(shù)，方便調(diào)用，如下：
復(fù)制代碼 代碼如下:
<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>
調(diào)用命名空間具體操作：
復(fù)制代碼 代碼如下:
<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;
})();
依次類(lèi)似，無(wú)論多人的直接團(tuán)隊(duì)開(kāi)發(fā)，還是個(gè)人的間接團(tuán)隊(duì)合作，都需要良好的可維護(hù)性。
1、添加必要的代碼注釋
2、讓JS不產(chǎn)生沖突，需避免全局變量的泛濫，合理使用命名空間
相關(guān)文章
前端使用Compressor.js實(shí)現(xiàn)圖片壓縮上傳的詳細(xì)過(guò)程
Compressor.js一個(gè)JavaScript圖像壓縮器,使用瀏覽器的原生canvas.toBlob API來(lái)執(zhí)行壓縮工作,這篇文章主要給大家介紹了關(guān)于前端使用Compressor.js實(shí)現(xiàn)圖片壓縮上傳的詳細(xì)過(guò)程,需要的朋友可以參考下2024-07-07
JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
本篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格，可以實(shí)現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-03-03
微信小程序連接數(shù)據(jù)庫(kù)與WXS的使用方法詳細(xì)介紹
這篇文章主要介紹了微信小程序連接數(shù)據(jù)庫(kù)與WXS的使用方法,微信小程序是騰訊內(nèi)部的產(chǎn)品,不能直接打開(kāi)一個(gè)外部的鏈接,但是騰訊為開(kāi)發(fā)者封裝好了API用來(lái)請(qǐng)求一個(gè)網(wǎng)站的內(nèi)容或者服務(wù),感興趣的同學(xué)可以參考下2023-12-12
這篇文章主要介紹了JavaScript獲取用戶(hù)所在城市及地理位置的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
無(wú)語(yǔ)，javascript居然支持中文(unicode)編程！
無(wú)語(yǔ)，javascript居然支持中文(unicode)編程！...2007-04-04
javascript 循環(huán)語(yǔ)句 while、do-while、for-in、for用法區(qū)別
本文章介紹了在學(xué)習(xí)javascript中的循環(huán)語(yǔ)句的用法，包while、do-while、for-in、for它們之間的區(qū)別，也是常用的循環(huán)語(yǔ)句了，有需要的朋友可以了解一下2012-03-03
Javascript獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值示例
獲取HTML靜態(tài)頁(yè)面參數(shù)傳遞值可以利用split函數(shù)來(lái)按參數(shù)切成數(shù)組、利用正則表達(dá)式來(lái)獲取，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義提示窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript 嚴(yán)格模式(use strict)用法實(shí)例分析
這篇文章主要介紹了JavaScript 嚴(yán)格模式(use strict)用法,結(jié)合實(shí)例形式分析了JavaScript 嚴(yán)格模式的基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
js實(shí)現(xiàn)的xml對(duì)象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實(shí)現(xiàn)的xml對(duì)象轉(zhuǎn)json功能,結(jié)合實(shí)例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對(duì)象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下2016-12-12