浅谈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对象下面。

      大家可以自己先写一个试试看，可以把代码贴到评论里面方便大家交流学习，下一篇我会贴出源码。