SPORE，一个很好的实现JS命名空间的管理，模块的定义，与自动加载依赖模块的脚本文件

 

/**
 * SPORE core v1.1
 * @fileoverview 实现JS命名空间的管理，模块的定义，与自动加载依赖模块的脚本文件。
 * @author Esoul | [email protected]
 */
(function(){

    var undefined,          //防止全局污染
        that = {},          //当前命名空间
        jsParent = null,    //用于插入script节点的父节点。
        doc = document,     //变量引用速度更快
        JSManager = {},     //要暴露出的JS管理器
        RequireCache = [],  //模块需求列表缓存
        ExecuteQueue = [],  //模块执行队列
        RequireList = [],   //总模块需求列表
        ModuleCache = {},   //模块缓存
        JSRequested = {},   //已请求过的JS模块
        RequireTree = {},   //模块需求多叉树
        Traversed = {},     //遍历缓存
        ModuleLoaded = [],  //已经加载的模块的名字列表（用于调试）
        RequireHash = {};   //模块需求列表的位置索引

    /**
     * @method each 遍历一个对象
     * @param {Object} obj 可遍历的对象
     * @param {Function} fn 要操作的函数
     * @param {Object} bind 遍历函数要绑定的对象
     */
    function $each(obj, fn, bind){
        for(var key in obj){
            if(obj.hasOwnProperty(key)){
                fn.call(bind, obj[key], key, obj);
            }
        }
    }

    /**
     * @method loadjs 加载一个JS文件
     * @param {String} strsrc JS文件的地址
     */
    function loadjs(strsrc){
        var js = doc.createElement('script');
        js.type = 'text/javascript';
        js.charset = JSManager.$charset;
        js.src = strsrc;
        if(!jsParent){ jsParent = doc.getElementsByTagName('head')[0]; }
        jsParent.appendChild(js);
    }

    /**
     * @method loadModule 加载一个模块
     * @param {String} mName 模块的名称
     */
    function loadModule(mName){
        loadjs( (JSManager.$basepath || '') + mName.split('.').join('/') + '.js?version=' + JSManager.$version );
    }

    /**
     * @method setModuleCache 设置模块加载成功
     * @param {String} mName 模块的名称
     */
    function setModuleReady(mName){
        if(ModuleCache[mName] === 'ready'){return;}
        var nsParent, ns = that,
            arrName = (mName || '').split('.');
        $each(arrName, function(name){
            nsParent = ns;
            ns = ns[name] = ns[name] || {};
        });
        nsParent[arrName.pop()] = ModuleCache[mName].call(null,that) || {};
        ModuleCache[mName] = 'ready';
        ModuleLoaded.push(mName);
    }

    /**
     * @method traverse 深度遍历模块引用多叉树，设置模块加载成功
     * @param {String} name 节点名称
     */
    function traverse(name){
        if(!name || Traversed[name]){return;}   //确保每个节点只能访问一次（避免循环引用造成的死锁）
        Traversed[name] = true;                 //事实上一个初始化模块，必定只允许运行一次
        $each(RequireTree[name],traverse);
        setModuleReady(name);
    }

    /**
     * @method checkReady 检查依赖列表中的模块文件是否都已就绪。
     * @desc 如果都就绪了，就开始进行遍历（假定队列中的每个模块都是顶节点，进行多叉树深度遍历）。
     */
    function checkReady(){
        if(!RequireList.join('')){
            $each(ExecuteQueue.reverse(),traverse);
            ExecuteQueue.length = 0;
            RequireList.length = 0;
            RequireHash = {};
        }
    }

    /**
     * @method checkDepend 检查模块依赖文件是否已请求
     * @param {String} mName 模块名称
     */
    function checkDepend(mName){
        var requires = [].concat(RequireCache);
        RequireCache.length = 0;
        RequireTree[mName] = requires;
        $each(requires,function(name){
            if(!JSRequested[name]){
                ExecuteQueue.unshift(name);
                RequireHash[name] = RequireList.length;
                RequireList.push(name);
                loadModule( name );
                JSRequested[name] = true;
            }
        });
        checkReady();
    }

    /**
     * @method register 注册一个模块
     * @param {String} mName 模块的名称
     * @param {Function} maker 模块构造函数
     */
    function register(mName, maker){
        if(ModuleCache[mName]){
            throw('The "' + mName + '" has been registered!!!');
        }
        ModuleCache[mName] = maker;
        if(!JSRequested[mName]){
            ExecuteQueue.push(mName);
            JSRequested[mName] = true;
        }
        if(RequireHash[mName] !== undefined){
            RequireList[ RequireHash[mName] ] = '';
        }
        checkDepend(mName);
    }

    /**
     * @method $Import 加载（引入）一个模块
     * @param {String} name 模块的名称
     */
    function $Import(name){
        RequireCache.push(name);
    }

//---------------------------
    //参数配置区：
    var spaceName = 'SPORE';                //定义顶层命名空间的名称
    var managerName = '$JSManager';         //要暴露出去的JS管理器的名称
    var regName = 'register';               //要暴露出去的注册组件函数的名称
    var impName = '$Import';                //要暴露出去的引用组件函数的名称
    JSManager.$basepath = 'js/';            //JS库所在的线上路径
    JSManager.$charset = 'utf-8';           //JS文件的编码
    JSManager.$version = new Date() - 0;    //JS版本号
//---------------------------

    //适配器：
    that[impName] = $Import;
    that[regName] = register;
    that[managerName] = JSManager;
    ModuleCache[impName] = ModuleCache[regName] = ModuleCache[managerName] = 'ready';
    JSManager.$ModuleCache = ModuleCache;
    JSManager.$RequireList = RequireList;
    JSManager.$ModuleLoaded = ModuleLoaded;
    if(!this[spaceName]){
        this[spaceName] = that;
    }else{
        $each(that, function(prop, name){
            if(!this[spaceName][name]){
                this[spaceName][name] = prop;
            }else{
                throw('Lib "' + spaceName + '" exists the same prop: ' + name);
            }
        });
        that = this[spaceName];
    }

})();

/*
上面的代码实现了命名空间管理和文件自动依赖。
使用方法：
1，修改代码配置信息，确认
    - JS库的命名，或者为哪个JS库扩展此功能（比如为jQuery扩展该功能）。
    - JS文件的编码（charset）
    - JS库所在的服务端路径
    - JS库的版本号（默认为当前客户端时间转为的数字，避免加载的JS被缓存）。
2，在页面上引用这个JS。
3，在JS库所在的文件夹添加扩展JS文件，文件结构类似这样：
//库的顶层位置spore.js
    - arr
        each.js
        erase.js
        ...
    - obj
        merge.js
        append.js
        ...
    - conf
        index.js
    - jobs
        loadpage.js
    -arr为一个文件夹，以''arr''命名，其他类似
4，JS文件代码格式如下
*/

//---------------------------------------------------------
//obj/merge.js:
//命名空间构造函数
SPORE.register('obj.merge',function($){
    return function(obj1,obj2){ //返回的函数将被创建到SPORE.obj.merge这个DOM位置。
    //功能代码
    }
});
//---------------------------------------------------------
//jobs/loadpage.js:
//引用列表
SPORE.$Import('obj.merge'); //参数为命名空间的名称
SPORE.$Import('arr.each');

//命名空间构造函数
SPORE.register('jobs.loadpage',function($){ //美元符号为对SPORE的引用
    var that = {};
    var obj = $.obj.merge({a:1},{b:2}); //要使用这个函数，必须确保引用列表中存在引用代码（SPORE.$Import('obj.merge');）
    //... 业务逻辑
    return that;    //这个函数将在依赖的文件就绪后执行，返回值将被创建到SPORE.jobs.loadpage这个DOM位置。
});
//---------------------------------------------------------

解决了模块循环引用造成的问题。

禁忌：不要让模块与文件夹同名。如：和arr文件夹平级的目录，不要出现arr.js。

通过服务端脚本解析里面的$Import函数可以实现文件服务端合并打包部署。

这个模块取自开源项目mootools-lib-cn，构思巧妙，实现JS命名空间的管理，模块的定义，与自动加载依赖模块的脚本文件，可以与Mootools、jQuery等框架搭配，扩展自己的JS库，很棒！！！

至于原作者说的不要让模块与文件夹同名这个禁忌，我试了一下，也没什么不妥。