淺談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對象下面。

      你們能夠本身先寫一個試試看，能夠把代碼貼到評論裏面方便你們交流學習，下一篇我會貼出源碼。