我的模块加载系统 v5

本版本更换更好的状态查询机制与列队机制，去除定时器检测，性能更优，体积更小，功能更强。下面是广告时间：

无阻塞加载，使用的是script标签注入方式（还有HTML5的async属性，虽然不知其到底发挥多少威力），并在脚本加载成功后自动移除这些临时生成的标签。
按需加载，每一个模块都放进一个与它同名的JS文件中，没有必要为使用某个API而载入整个框架。
每个模块自行处理依赖关系，用户不用操心调用了这个模块还要调用哪几个相关模块，核心模块也不用为这些配置而膨胀（如YUI2，dojo）。

并行加载，简单解释为加载是无序的，解释执行时（模块本身是个curry函数）由依赖关系强制排队。效果图：

//http://www.cnblogs.com/rubylouvre/archive/2011/04/10/2011175.html by 司徒正美
      dom.require("ecma,lang,support,deferred,oop,brower",function(){
        dom.log("执行回调函数")
      });

负向回调，dom.require拥有三个参数，模块列表，正向回调，负向回调。正向回调在所有指定的模块都加载成功后执行，负向回调用于万一有某个加载失败时调用。IE6-8通过一个映射查询解决script.onerror问题，opera则利用iframe与两个script成功模拟script.onerror，其他浏览器则直接用script.onerror。
错误堆栈机制，有时我们不但要看负向回调有没有执行，还要查一下因为那个模块没有成功加载而导致失败，这时它就大派用场了。

连domReady的联袂使用。我们先看一下YUI丑鄙的使用方式吧：

YUI().use("module1",function(){  
  //action 1  
})  ;
YUI().use("module2",function(){  
  //action 2  
})  ;
YUI().use("module3,module4",function(){  
  //action 3  
})  

它让我们的业务代码布满了这种结构，通常我们更希望像jQuery那样一个函数体写完$(function(){})，看dom Framework是怎么解决的！

//在加载所有模块后并待到domReady才执行回调函数
dom.ready(function(){
  //.........
},true);
//这种方式必须加模node模块才行
dom(function(){
 
},true);
//我们还可以指定要加载的模块
dom.$$modules = ["ecma","lang","support","deferred","oop","brower"]
dom.ready(function(){},true);

由于比较懒，直接把我的核心模块放出来吧,包含了别名机制,错误堆栈,并行加载器,domReady与一些常用函数!

//http://www.cnblogs.com/rubylouvre/archive/2011/04/10/2011175.html by 司徒正美
(function(global,DOC){
    var _dom = global.dom;
    var namespace = escape(DOC.URL.split("#")[0]);
    var HEAD = DOC.head || DOC.getElementsByTagName("head")[0];
    var to_s = {}.toString;
    /**
     * 糅杂，为一个对象添加更多成员
     * @param {Object} target 目标对象
     * @param {Object} source 属性包
     * @param {Boolean|undefined} override
     * @return  {Object} 目标对象
     */
    function mix(target, source, override) {
        var key,  ride = (override === void 0) || override;
        for (key in source) {
            if (ride || !(key in target)) {
                target[key] = source[key];
            }
        }
        return target;
    }
    /**
     * @class dom
     * dom Framework拥有两个命名空间,
     * 第一个是escape(DOC.URL.split("#")[0])，根据页面的地址动态生成
     * 第二个是dom，我们可以使用别名机制重写它
     * @namespace dom
     */
    global.dom = global[namespace] = function(fn){
        //  dom.log("使用简化形式的domReady");
        dom.ready(fn, true);
    }
    mix(dom,{
        /**
         * 系统变量，默认的命名空间
         * @property
         * @type string
         */
        namespace:"dom",
        /**
         * @property
         * @type Element
         */
        HTML:DOC.documentElement,
        /**
         * @property
         * @type Element
         */
        HEAD:HEAD,
        /**
         * 别名机制
         * @param {String} name 新的命名空间
         */
        exports: function(name) {
            _dom && (global.dom = _dom);
            dom.namespace = name || dom.namespace;
            global[dom.namespace] = global[namespace]= this;
        },
        /**
         * 数组化
         * @param {ArrayLike} nodes 要处理的类数组对象
         * @param {Number} start 可选。要抽取的片断的起始下标。如果是负数，从后面取起
         * @param {Number} end  可选。规定从何处结束选取
         * @return {Array}
         */
        slice: function (nodes, start, end) {
            for(var i = 0,n = nodes.length, result = []; i < n; i++){
                result[i] = nodes[i];
            }
            if (arguments.length > 1) {
                return result.slice(start , (end || result.length));
            } else {
                return result;
            }
        },
        DEBUG:false,
        check: DOC.addEventListener ? "addEventListener" : "attachEvent",
        /**
         * curry化
         * @param {Any} a
         * @return {Function} 新函数
         */
        K:function (a) {
            return function() {
                return a;
            };
        },
        /**
         * 用于取得数据的类型或判定数据的类型
         * @param {Any} obj 要检测的东西
         * @param {String} str 要比较的类型
         * @return {String|Boolean}
         */
        type : function(obj, str){
            var result = typeof obj;
            result = result.charAt(0).toUpperCase() + result.slice(1);
            if(result === 'Object' || (result === 'Function' && obj.exec) ){//safari chrome中 type /i/ 为function
                if(obj===null) result = 'Null';
                else if(obj.window==obj) result = 'Window'; //返回globaldow的构造器名字
                else if(obj.callee) result = 'Arguments';
                else if(obj.nodeType === 9) result = 'Document';
                else if(obj.nodeName) result = (obj.nodeName+'').replace('#',''); //处理元素节点
                else if("length" in obj && "item" in obj){
                    result = 'NodeList';
                }else if("send" in obj && "setRequestHeader" in obj){//处理IE5-8的宿主对象与节点集合
                    result = "XMLHttpRequest"
                }else if(!obj.constructor){
                    result = 'Unknown';
                }else result = to_s.call(obj).slice(8,-1);
            }
            if(result === "Number" && isNaN(obj))  result = "NaN";
            if(str){
                return str === result;
            }
            return result;
        },
        /**
         * 用于调试
         * @param {String} s
         */
        log:function(s){
            global.console && global.console.log(s);
        },
        /**
         * 生成键值统一的对象，用于高速化判定
         * @param {Array} array
         * @param {Number} val 可选，默认为1
         * @return {Object}
         */
        oneObject : function(array, val){
            var result = {},value = val !== void 0 ? val :1;
            for(var i=0,n=array.length;i < n;i++){
                result[array[i]] = value;
            }
            return result;
        }
    });
    // http://wp.moooori.com/archives/1911
    var rmodule =  /([^(\s]+)\(?([^)]*)\)?/;
    var rreadystate = /loaded|complete|undefined/i;
    var method = DOC.dispatchEvent ? "onload" : "onreadystatechange";
    var stack = [];//用于放置负回调
    var callbacks = [];//用于放置正向回调或模块本身的wrapper函数
    var modules = {};//用于记录每个模块加载状态0 未注册 1 已注册 2 已加载 3已执行
    /**
     * 用于模拟opera的script onerror
     * http://d.hatena.ne.jp/NeoCat/20110206/1296934235
     * @param {String} name 模块名
     * @param {String} url  模块的路径
     * @param {Element} node 为加载这个模块临时生成的script节点
     */
    function fixOperaError(name, url, node){
        var iframe = DOC.createElement("iframe");
        var code = '<script src="'+dom.baseURL+'"><\/script>'+
        '<script src="'+url+'" onload="this.ownerDocument.x = 1"><\/script>';
        iframe.style.display = "none";
        HEAD.appendChild(iframe);
        var d = iframe.contentDocument;
        iframe.onload = function(){
            if(d.x == void 0){
                removeScript(name, node, true);
            }
            iframe.onload = null;//opera无法在iframe被事件绑定时被移除
            HEAD.removeChild(this);
        };
        try{
            d.write(code);
            d.close();
        }catch(e){};
    }
    //执行并移除所有依赖都具备的模块或回调
    function resolveCallbacks(){
        for(var i = 0, callback; i < callbacks.length; i++){
            callback = callbacks[i];
            if(callback() == true){
                callbacks.splice(i--,1);
            }
        }
    }
    /**
     * 为加载模块而临时生成一个script节点
     * @param {String} name 模块名
     * @param {String} url  模块的路径
     */
    function appendScript(name, url){
        var node = DOC.createElement("script");
        url = url  || dom.basePath +"/"+ name + ".js" + (dom.DEBUG ? "?t="+new Date : "");
        node.charset = "utf-8";
        node.async = true;
        node.onerror = function(){
            removeScript(name, this, true);
        }
        node[method] = function(){
            if (rreadystate.test(this.readyState) ){
                resolveCallbacks();
                removeScript(name, this );
            }
        }
        node.src =  url+"?timestamp="+(+new Date);
        //   global.opera && fixOperaError(name, url, node);
        HEAD.insertBefore(node,HEAD.firstChild);
    }
    /**
     * 移除临时生成的script节点
     * @param {String} name 模块名
     * @param {Element} node 为加载这个模块临时生成的script节点
     * @param {Boolean} error 是否加载失败
     */
    function removeScript(name, node, error){
        var parent = node.parentNode
        if(parent && parent.nodeType === 1){
            if(error || modules[name] === 1){
                dom.stack('dom.log("fail to load module [ '+name+' ]")');
                dom.stack(true);//打印错误堆栈
            }
            if (node.clearAttributes) {
                node.clearAttributes();
            } else {
                node[method] = node.onerror = null;
            }
            parent.removeChild(node);
        }
    }
 
    mix(dom, {
        mix:mix,
        //绑定事件(简化版)
        bind : DOC.dispatchEvent ? function(el, type, fn, phase){
            el[dom.check](type,fn, phase);
        } : function(el, type, fn){
            dom.log("------------------------------");
            el[dom.check]("on"+type,function(){
                dom.log(dom.check)
                fn.call(el,event)
            });
        },
        /**
         * 需要加载的模块
         * @property
         * @type Array
         */
        modules: ["ecma","lang","oop","support","query","node","event"],
        /**
         * 用于打印与存放错误消息
         * @param {Boolean|String|Function} fn
         */
        stack:function(fn){
            if(fn === true){
                while(fn = stack.pop()){
                    fn();
                }
            }else if(typeof fn === "string"){
                stack.push(new Function(fn));
            }else if(typeof fn === "function"){
                stack.push(fn);
            }
        },
        /**
         * <a href="http://www.cnblogs.com/rubylouvre/archive/2011/02/10/1950940.html">核心模块所在路径</a>
         * @property
         * @type String
         */
        basePath:(function(url, scripts, node){
            //            try{
            //                a.b.c();
            //            }catch(e){
            //                url = e.fileName || e.sourceURL;//针对firefox与safari
            //            }
            if(!url){
                scripts = DOC.getElementsByTagName("script");
                node = scripts[scripts.length - 1]
                url = node.hasAttribute ?  node.src : node.getAttribute('src', 4);
            }
            dom.baseURL = url;
            return url.substr( 0, url.lastIndexOf('/'));
        })(),
        /**
         * 请求模块
         * @param {String|Array} dependList 依赖列表，如果是字符串请用逗号隔开，如果要指定具体路径请写到小括号中
         * @param {Function} module 正向回调
         * @param {Function} errback 负向回调
         * @param {Boolean} ready 是否延迟到DOM树建完才执行回调函数
         */
        require:function(dependList,callback,errback, ready){
            var names = [], i = 0, match, name, url;
            if(typeof dependList === "string"){
                dependList = dependList.split(",");
            }
            while((url = dependList[i++])){
                match = url.match(rmodule);
                name  = match[1];
                if(!modules[name]){ //防止重复生成节点与请求
                    modules[name] = 1;
                    appendScript(name,match[2]);//加载JS文件
                    this.stack(errback);//压入错误堆栈
                }
                names.push(name);
            }
            ready && names.push("ready");
            this.provide(names,callback);
        },
        /**
         * 定义模块
         * @param {String} name 模块名
         * @param {Array} dependList 依赖列表
         * @param {Function} module 模块本身
         */
        define:function(name,dependList,callback){
            if(typeof dependList == "function"){//处理只有两个参数的情况
                callback = dependList;
                dependList = [];
            }
            modules[name] = 2;
            dom.modules[name] = callback;
            dom.log("加载"+name+"模块成功");
            //   dom.modules[callback]
            this.require(dependList,function(){
                //这里必须把已添加了新能力的dom命名空间对象传入去,放便其他模块第一时间能使用这些新能力
                callback(dom);
                dom.log("执行"+name+"模块成功");
                modules[name] = 3;
            });
        },
        /**
         * 装配模块
         * @param {Array} array 模块列表
         * @param {Function} callback 回调函数
         */
        provide:function(names,callback){
            var fn = function(){
                var i = 0, name, status = 0,state;
                while((name = names[i++])){
                    state = modules[name]
                    status += state;
                    if(status === 5){
                        dom.modules[name](dom);
                    }else if(state !== 3){
                        return false;
                    }
                }
                callback();
                return true;
            }
            fn.toString = dom.K(callback+"");//用于调试
            callbacks.unshift(fn);
        }
    });
    /**
     * domReady机制
     * @param {Function} fn 回调函数
     * @param {Boolean} more 是否加载指定的模块
     */
    var Ready = dom.ready = function(fn, more){
        if(more === true){
            //  dom.log("使用正常形式的domReady");
            dom.require(dom.modules, fn, 0, true);
            fn = function(){
                dom.log("======dom.ready============")
                modules.ready = 3;
                resolveCallbacks();
            }
        }
        if ( Ready.list) {
            Ready.list.push( fn );
        }else{
            fn();
        }
    };
    Ready.list = [];
    function fireReady(){
        if(!dom.isReady){
            dom.isReady = 1;
            for(var i=0, fn;fn = Ready.list[i++];)
                fn();
            delete Ready.list;
        }
    };
    function doScrollCheck() {
        try {
            dom.HTML.doScroll("left");
            fireReady();
        } catch(e) {
            setTimeout( doScrollCheck, 0);
        }
    };
 
    //开始判定页面的加载情况
    if ( DOC.readyState === "complete" ) {
        fireReady();
    }else {
 
        dom.bind(DOC, (DOC.dispatchEvent ? "DOMContentLoaded" : "readystatechange"), function(){
            if (DOC.dispatchEvent || DOC.readyState === "complete") {
                fireReady();
            }
        });
        try {
            //http://cmc3.cn/n/2010/10/26/224.html
            var toplevel = global.frameElement == null;
        } catch(e) {};
        if ( dom.HTML.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
})(this,this.document);

我们可以以下面的格式定义其他模块:

//test.js
(function(global,DOC){
    var dom = global[escape(DOC.URL.split("#")[0])];
    dom.define("test", ["string"],function(dom){
        dom.log("test_module");
    });
})(this,this.document);
 
//string.js
;
(function(global,DOC){
    var dom = global[escape(DOC.URL.split("#")[0])];
    dom.define("string", [],function(dom){
        dom.log("string_module");
    });
})(this,this.document);