定义Javascript命名空间 进入全屏
line

良好的Javascript编码规范,应该有“命名空间”的概念,即便在Javascript中,本身不存在。

如果一个WEB应用中,绑定到window对象下的子对象太多,显然是非常不好的,简单的说,需要归类,统一管理。


尤其在基于Javascript的模块化开发中,命名空间体现的尤为重要,Extjs和YUI在这方面的规范,非常值得借鉴。


百度空间的前端项目,每个页面都是被设计为一个独立的web应用,有其独立的命名空间;

对于元素较多,结构复杂的页面或分拆为多个模块,各模块具有单独的命名空间。


这里,把用作命名空间注册的方法摘出来:

/**
 * 注册命名空间
 * @param {String} fullNS 完整的命名空间字符串,如qui.dialog
 * @param {Boolean} isIgnorSelf 是否忽略自己,默认为false,不忽略
 * @author zhaoxianlie(xianliezhao@foxmail.com)
 * @example 
 *      window.registNS("QingFeed.Text.Bold");
 */
window.registNS = function(fullNS,isIgnorSelf){
    //命名空间合法性校验依据
    var reg = /^[_$a-z]+[_$a-z0-9]*/i;
        
    // 将命名空间切成N部分, 比如baidu.libs.Firefox等
    var nsArray = fullNS.split('.');
    var sEval = "";
    var sNS = "";
    var n = isIgnorSelf ? nsArray.length - 1 : nsArray.length;
    for (var i = 0; i < n; i++){
        //命名空间合法性校验
        if(!reg.test(nsArray[i])) {
            throw new Error("Invalid namespace:" + nsArray[i] + "");
            return ;
        }
        if (i != 0) sNS += ".";
        sNS += nsArray[i];
        // 依次创建构造命名空间对象(假如不存在的话)的语句
        sEval += "if(typeof(" + sNS + ")=='undefined') " + sNS + "=new Object();else " + sNS + ";";
    }
    //生成命名空间
    if (sEval != "") {
        return eval(sEval);
    }
    return {};
};

这部分代码会在通用js文件中定义,每个页面或每个应用,只需要通过如下方式注册自己的命名空间。

比如一个“回到顶部”的模块,会被这样定义:

/**
 * 注册命名空间
 */
window.registNS('Alienfe');
       
/**
 * 回到顶部
 * @return {[type]}
 */
Alienfe.back2top = (function(){
    var init = function(){
        // 代码在这里写。。。
    };
       
    return {
        init : init
    };
})();
       
// 初始化
Alienfe.back2top.init();

命名空间,就类似java中的package,如果模块结构够复杂,命名空间可以这样注册:

/**
 * 注册命名空间
 * 这表示:Alienfe这个大应用下,有blog模块,blog模块下还有tag子模块
 */
window.registNS('Alienfe.blog.tag');

接下来就可以在这个tag子模块下进行开发了:

Alienfe.blog.tag = (function(){
    var init = function(){
        // TODO
    };
   
    var destroy = function(){
        // TODO
    };
   
    return {
        init : init,
        destroy : destroy
    };
})();

调用命名空间下的方法,也非常清晰:

// 初始化tag子模块
Alienfe.blog.tag.init();

这里就不再举例了。

阿里巴巴-钉钉-开放平台,能力开放&开发者运营岗位招聘中, 期待你的加入!
钉钉开放,让应用开发更简单
充分开放,是钉钉的重要方向!除致力于为开发者打造丰富的开放API, 更易接入的场景化能力包, 完备的应用开发工具之外, 还需要持续构建开放能力的布道、开发者生态运营体系,包括培训、沙龙、大会、社区合作等等。业务在快速发展,我们也还需要更多优秀的小伙伴加入!

评论区域

line
  • Alien 2013-08-16 16:57:40 回复
    回复 程序员之家 : 哈哈,反正瞎折腾呗
    程序员之家 said:
    还是感觉自己的思维跟不上啊 想象空间多点就。。。
  • 程序员之家 2013-08-16 16:56:52 回复
    还是感觉自己的思维跟不上啊 想象空间多点就。。。