淺談js命名空間管理

         在C# 和 Java里面我們如果想使用哪一個功能類就要引用相應的命名空間。

         如C#里面有個System.Web.UI庫，我們就要用using   System.Web.UI;,之后我們就可以用到ScriptManager這個類了。

         js里面其實是不純在所謂的命名空間的，只是以對象字面量的方式展示出這種效果。

         js實現以上的效果通過以下代碼：

         var System={

                  Web:{

                      UI:{

                           ScriptManager:{}

                     }

                }

        };

    這種方式感覺比較麻煩，還是習慣通過System.Web.UI這種方式來注冊一個命名空間   NameSpace.Register("System.Web.UI")，我們只需要動態的創建對象就能實現。

     動態創建對象我們可以通過 兩種方法：1.window 對象實現   2.eval實現。

     下面就介紹兩種實現方式：

        1.window 對象實現 ：

               我們知道定義一個對象可以這樣，window['System']={};  System['Web']={}   ;System.Web['UI']={};

               其實這樣就簡單了，我們實現動態創建對象只需要拆分字符串創建對應的對象，代碼如下：

         

var NameSpace = {
    Register: function () {
        // body...
        var arg = arguments[0];
        var arr = arg.split('.');
        var context = window;
        for (var i = 0; i < arr.length; i++) {
            var str = arr[i];
            if (!context[str]) {
                context[str] = {};
            }
            context = context[str];
        };
    }
}

     2.eval實現：

     

 var NameSpace = {
            Register: function () {
                // body...
                var arg = arguments[0];
                var arr = arg.split('.');
                var str = '';
                for (var i = 0; i < arr.length; i++) {
                    str = i == 0 ? arr[i] : (str + '.' + arr[i]);
                    var sval = "   if(typeof " + str + "=='undefined' ) { " + str + "= new Object(); } ";
                    eval(sval) ;
                };
            }
        }

   這種是通過動態執行js字符串的方式，其實是將字符轉換成代后執行而已，代碼就沒啥難度了。

   我們就可以直接通過 NameSpace.Register("System.Web.UI")注冊對象，然后  System.Web.UI.dom={   method:function(){}}這樣擴展一些方法。

   擴展想法：既然對象已經創建出來了，我又有了個想法。我覺得可以模仿模塊化編程，進行進一步改造。可以擴展類似於以下的函數：

        define("dom.utility",  function(){   

         return {

               test ：function(){    

               }

               }

        })

        或者  

        define("dom.utility",{  test ：function(){ 

          })

     調用的時候我們就直接用dom.utility.test()這種方式;

      實現這個define函數的思路：對象的屬性拷貝，例如：將test屬性加到dom.utility對象下面。

      大家可以自己先寫一個試試看，可以把代碼貼到評論里面方便大家交流學習，下一篇我會貼出源碼。