JS_命名空间

 

// 配置
var config = {};
 
// 前台
config.front = {};
 
// 后台
config.admin = {};
 
// 后台数据
config.admin.data = {};
 
// 后台模块
config.admin.module = {};
 
// 后台颜色模块
config.admin.module.color = {};
 
// 后台图片模块
config.admin.module.images = {};
 
// 后台搜索模块
config.admin.module.search = {};
 
 
 
// 给后台颜色模块加背景颜色改变功能
config.admin.module.color.changeBgColor = function(color) {
    document.body.style.background = color;
};
 
// 可以这么调用 
config.admin.module.color.changeBgColor('#F30');
 我们看看这段object在内存中的结构

 

但是,以上声明命名空间的方式看起来不直观,我们来一个比较直观的结构化命名方式:

// 配置
var config = {
    // 前台
    front : {},
     
    // 后台
    admin : {
        // 数据层
        data : {},
 
        // 模块层
        module : {
            // 颜色模块
            color : {
                // 背景颜色改变功能
                changeBgColor : function(color){
                    document.body.style.background = color;
                },
                // 前景颜色改变功能
                changeFnColor : function(color){
                    document.body.style.color = color;
                }
            },
 
            // 图片模块
            images : {
             
            },
 
            // 搜索模块
            search : {
 
            }
        }
    }
 
};
 
// 可以这么调用 
config.admin.module.color.changeBgColor('#F30');

 以上的声明方式就把结构化很好的呈现出来了,利用命名空间非常方便的管理维护拓展程序,当多人开发或者JavaScript代码写的数量巨大时不用担心命名冲突的问题。我们也可以写一个命名空间的功能,省去以上复杂的声明方式。比如以上例子实际上我只是暂时用到config.admin.module.color.changeBgColor这个功能,那么我就需要先定义config,接着admin,然后module,最后是color.changeBgColor,比较繁琐,于是我们可以写一个命名空间注册的功能,直接注册就能用

// 命名空间注册函数
var namespace = {
    reg : function(s){
        var arr = s.split('.');
        var namespace = window;
 
        for(var i=0,k=arr.length;i<k;i++){
            if(typeof namespace[arr[i]] == 'undefined'){
                namespace[arr[i]] = {}; 
            }
 
            namespace = namespace[arr[i]];          
        }
    },
    del : function(s){
        var arr = s.split('.');
        var namespace = window;
 
        for(var i=0,k=arr.length;i<k;i++){
            if(typeof namespace[arr[i]] == 'undefined'){
                return;
            }else if( k == i+1 ){
                delete  namespace[arr[i]];
                return;
            }else{
                namespace = namespace[arr[i]];      
            }       
        }           
    }
};

 可以这样注册命名空间

// 先注册命名空间
namespace.reg('config.admin.module.color');
 
// 添加功能
config.admin.module.color.changeBgColor = function(color){
    document.body.style.background = color;
};
 
// 调用功能
config.admin.module.color.changeBgColor('#F30');
 
 
// 删除命名空间
namespace.del('config.admin.module.color');

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值