如何讓js不產生衝突，避免全局變量的泛濫，合理運用命名空間

 

爲了不變量之間的覆蓋與衝突，能夠生成命名空間，命名空間是一種特殊的前綴，在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;
})();

 

依次相似，不管多人的直接團隊開發，仍是我的的間接團隊合做，都須要良好的可維護性。

一、添加必要的代碼註釋

二、讓JS不產生衝突，需避免全局變量的泛濫，合理使用命名空間