前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!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);