前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧！！！！！！2016-09-29    17:16:39

 

 

#####背景：

　　

前端开发过程中，创建js对象非常容易，但是要把代码变得更容易维护，那么就需要一些方法来实现约束和规范。

使用命名空间可以减少全局变量的使用，同时避免命名冲突和额外前缀，在命名空间下定义属性方法，更加面向对象有木有！！

 

 

## 实践如图：

 

####Debugger调试【结合debugger来解释 这个namespace方法的实现】 

Step1  :   当执行完第一个紫色框的时候  我控制台输出myApp ,如图：

　　

　　

 

这就相当于在  全局定义了myApp 的子属性 

 

Step2  :  当执行完第二个紫色框的时候   我控制台输出myApp , 如图：

　　

执行完第二部分代码的时候  就相当于  给myApp对象子属性添加  子方法 ；----》 这样就简单了实现了 我需要的效果。。。。。

 

 

 

 

####代码

 

            var  myApp  =myApp||{};
            myApp.namespace = function(ns_string){
                debugger;
                var parts =ns_string.split('.'),  //[myApp,module1,module2,module3]
                     parent =myApp;
                     if(parts[0]==="myApp"){
                        parts =parts.slice(1);    //[module1,module2,module3]
                     }
                     for (var i = 0; i < parts.length; i++) {
                            if(typeof parent[parts[i]]==="undefined"){
                                parent[parts[i]] = {};
                            }
                            parent  =parent[parts[i]];
                            console.log(parent);
                     }
                     return  parent;
            }
                 debugger;
          myApp.namespace("myApp.module1.module2.module3");

          myApp.module1.del  = function(x,y){
                return  x-y;
          }
           myApp.module1.module2.add =function(x,y){
                return  x+y;
          }
          myApp.module1.module2.module3.add1= function(x,y){
                return x+y;
          }
          var val1 = myApp.module1.del(4,2);
          var val2 = myApp.module1.module2.add(1,2);
          var  val3  = myApp.module1.module2.module3.add1(22,33);
          console.log(val1);
          console.log(val2);
          console.log(val3);