easyui 源码分析（easyloader.js）（2）

easyloader模块是用来加载jquery easyui的js和css文件的，而且它可以分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。

/** * easyloader - jQuery EasyUI *  * Licensed under the GPL: *   http://www.gnu.org/licenses/gpl.txt * * Copyright 2010 stworthy [ [e-mail] ]  *  */(function(){    // 模块文件定义    var modules = {        draggable:{            js:'jquery.draggable.js'        },        droppable:{            js:'jquery.droppable.js'        },        resizable:{            js:'jquery.resizable.js'        },        linkbutton:{            js:'jquery.linkbutton.js',            css:'linkbutton.css'        },        pagination:{            js:'jquery.pagination.js',            css:'pagination.css',            dependencies:['linkbutton']        },        datagrid:{            js:'jquery.datagrid.js',            css:'datagrid.css',            dependencies:['panel','resizable','linkbutton','pagination']        },        treegrid:{            js:'jquery.treegrid.js',            css:'tree.css',            dependencies:['datagrid']        },        panel: {            js:'jquery.panel.js',            css:'panel.css'        },        window:{            js:'jquery.window.js',            css:'window.css',            dependencies:['resizable','draggable','panel']        },        dialog:{            js:'jquery.dialog.js',            css:'dialog.css',            dependencies:['linkbutton','window']        },        messager:{            js:'jquery.messager.js',            css:'messager.css',            dependencies:['linkbutton','window']        },        layout:{            js:'jquery.layout.js',            css:'layout.css',            dependencies:['resizable','panel']        },        form:{            js:'jquery.form.js'        },        menu:{            js:'jquery.menu.js',            css:'menu.css'        },        tabs:{            js:'jquery.tabs.js',            css:'tabs.css',            dependencies:['panel','linkbutton']        },        splitbutton:{            js:'jquery.splitbutton.js',            css:'splitbutton.css',            dependencies:['linkbutton','menu']        },        menubutton:{            js:'jquery.menubutton.js',            css:'menubutton.css',            dependencies:['linkbutton','menu']        },        accordion:{            js:'jquery.accordion.js',            css:'accordion.css',            dependencies:['panel']        },        calendar:{            js:'jquery.calendar.js',            css:'calendar.css'        },        combo:{            js:'jquery.combo.js',            css:'combo.css',            dependencies:['panel','validatebox']        },        combobox:{            js:'jquery.combobox.js',            css:'combobox.css',            dependencies:['combo']        },        combotree:{            js:'jquery.combotree.js',            dependencies:['combo','tree']        },        combogrid:{            js:'jquery.combogrid.js',            dependencies:['combo','datagrid']        },        validatebox:{            js:'jquery.validatebox.js',            css:'validatebox.css'        },        numberbox:{            js:'jquery.numberbox.js',            dependencies:['validatebox']        },        spinner:{            js:'jquery.spinner.js',            css:'spinner.css',            dependencies:['validatebox']        },        numberspinner:{            js:'jquery.numberspinner.js',            dependencies:['spinner','numberbox']        },        timespinner:{            js:'jquery.timespinner.js',            dependencies:['spinner']        },        tree:{            js:'jquery.tree.js',            css:'tree.css',            dependencies:['draggable','droppable']        },        datebox:{            js:'jquery.datebox.js',            css:'datebox.css',            dependencies:['calendar','validatebox']        },        parser:{            js:'jquery.parser.js'        }    };    // 国际化资源文件    var locales = {        'af':'easyui-lang-af.js',        'bg':'easyui-lang-bg.js',        'ca':'easyui-lang-ca.js',        'cs':'easyui-lang-cs.js',        'da':'easyui-lang-da.js',        'de':'easyui-lang-de.js',        'en':'easyui-lang-en.js',        'fr':'easyui-lang-fr.js',        'nl':'easyui-lang-nl.js',        'zh_CN':'easyui-lang-zh_CN.js',        'zh_TW':'easyui-lang-zh_TW.js'    };    // 加载队列    var queues = {};    /**     * 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去。     * 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对IE和非IE浏览器准备的     * 万恶的IE浏览器！！！     */    function loadJs(url, callback){        var done = false;        var script = document.createElement('script');        script.type = 'text/javascript';        script.language = 'javascript';        script.src = url;        script.onload = script.onreadystatechange = function(){            if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){                done = true;                script.onload = script.onreadystatechange = null;                if (callback){                    callback.call(script);                }            }        }        document.getElementsByTagName("head")[0].appendChild(script);    }    /**     * 执行js文件。就是把js文件加载进来，再remove掉     * @param url js的url     * @callback 回调函数，执行完js时会调用这个函数     */    function runJs(url, callback){        loadJs(url, function(){            document.getElementsByTagName("head")[0].removeChild(this);            if (callback){                callback();            }        });    }    /**     * 加载css文件。和加载js文件一样，动态创建一个link标签，然后追加到head标签中去     * @param url css的url     * @param callback 回调函数，加载完成后调用此函数     */    function loadCss(url, callback){        var link = document.createElement('link');        link.rel = 'stylesheet';        link.type = 'text/css';        link.media = 'screen';        link.href = url;        document.getElementsByTagName('head')[0].appendChild(link);        if (callback){            callback.call(link);        }    }    /**     * 加载单独的一个模块     */    function loadSingle(name, callback){        // 加载队列存入该模块名，并表示状态为loading。        queues[name] = 'loading';        // 根据模块名，取出该模块定义        var module = modules[name];        // js加载状态        var jsStatus = 'loading';        // css加载状态，从这里你就可以看出easyloader.css就是一个开关变量，控制是否加载模块相应的css文件        var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';        // 是css文件，就使用loadCss来加载之        if (easyloader.css && module['css']){            if (/^http/i.test(module['css'])){                var url = module['css'];            } else {                var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];            }            loadCss(url, function(){                cssStatus = 'loaded';                if (jsStatus == 'loaded' && cssStatus == 'loaded'){                    finish();                }            });        }        // 是js文件，就是用LoadJs来加载之        if (/^http/i.test(module['js'])){            var url = module['js'];        } else {            var url = easyloader.base + 'plugins/' + module['js'];        }        loadJs(url, function(){            jsStatus = 'loaded';            if (jsStatus == 'loaded' && cssStatus == 'loaded'){                finish();            }        });        // 最终调用finish函数，来结束加载。并触发onProgress函数，每加载成功一个模块，就调用一次onProgress        function finish(){            queues[name] = 'loaded';            easyloader.onProgress(name);            if (callback){                callback();            }        }    }    /**     * easyui模块加载函数     * @param name 模块名，可以是string，也可以是数组     * @param callback 回调函数，当加载结束后会调用此函数     */    function loadModule(name, callback){        // 模块名，根据依赖关系，从前到后，依次排开        var mm = [];        // 加载标识，当其值为true时，表示需要加载的模块已经加载好了        var doLoad = false;        // 模块名支持两中，一种是string，一种是数组。这样就可以一次加载多个模块了        if (typeof name == 'string'){            // 是string的时候，调用add方法把模块名push到mm数组中去            add(name);        } else {            for(var i=0; i<name.length; i++){                // 是数组的时候，循环调用add方法把模块名统统push到mm数组中去                add(name[i]);            }        }        /**         * loadModule函数中内嵌的一个函数，用来加载模块名到变量mm数组中去         * @param name 模块名，只能是string         */        function add(name){            // 保护措施，如果该模块名不存在，我们就不要加载了            if (!modules[name]) return;            // 否则，就是该模块存在。然后，我们在看看其有没有依赖模块            var d = modules[name]['dependencies'];            if (d){                // 如果有依赖模块，我们要先把依赖模块的名字push到mm中去                // 这里用了递归调用                for(var i=0; i<d.length; i++){                    add(d[i]);                }            }            // 把模块名放到mm中            mm.push(name);        }        /**         * 当一个模块及其依赖模块加载完成时，执行回调函数，并且触发onLoad函数         */        function finish(){            if (callback){                callback();            }            easyloader.onLoad(name);        }        // 加载用时        var time = 0;        /**         * 加载所需要的模块，需要的模块，我们已经统计好了，并按依赖关系，先后push到mm中去了         */        function loadMm(){            // 判断mm是不是空的            if (mm.length){                // 第一个模块                var m = mm[0];                // 判断加载队列是否包含此模块                if (!queues[m]){                    // 加载队列不包含此模块，开始加载该模块                    // 把doLoad置成true，表示开始加载                    doLoad = true;                    // 调用loadSingle方法来加载模块，加载成功后会把此模块从mm中shift掉，然后继续调用loadMM方法，就形成了递归调用                    loadSingle(m, function(){                        mm.shift();                        loadMm();                    });                } else if (queues[m] == 'loaded'){                    // 加载队列已经加载过此模块了，不需要在加载了，直接从mm中shift掉即可                    mm.shift();                    loadMm();                } else {                    // 表示正在加载该模块，累计所用时间如果没有超过timeout                    // 则过10毫秒再调用一次loadMm函数                    if (time < easyloader.timeout){                        time += 10;                        setTimeout(arguments.callee, 10);                    }                }            } else {                // 走到这里，表示该加载的模块都已经加载好了                if (easyloader.locale && doLoad == true && locales[easyloader.locale]){                    // 如果设置了国际化，并且已经加载好了，而且该国际化资源还存在，那么加载该资源js                    var url = easyloader.base + 'locale/' + locales[easyloader.locale];                    // 执行js完事后，调用finish方法                    runJs(url, function(){                        finish();                    });                } else {                    // 没定义国际化文件，那么直接调用finish方法吧                    finish();                }            }        }        loadMm();    }    /**     * easyloader定义为全局变量     */    easyloader = {        // 各个模块文件的定义，包括js、css和依赖模块        modules:modules,        // 国际化资源文件        locales:locales,        // jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变        base:'.',        // 控件的主题，一共就有两个，在theme目录中。还有一个gray主题，浅灰色的，很难看。        theme:'default',        // 这是一个开关变量，控制easyloader加载模块时，要不要加载相应的css文件，默认是需要加载的        css:true,        // 国际化语言，可以根据window.navigator.language或者window.navigator.userLanguage来获取当前浏览器的语言。        // 有两个属性，主要因为IE浏览器只认识userLanguage和sysLanguage，万恶的IE浏览器啊！        locale:null,        // 加载一个模块的最长时间，超过这个时间，就开始加载下一个模块了。        timeout:2000,        // easyloader就公开了这么一个方法，用来加载模块。        // name是模块名，callback是加载成功后执行的函数        load: function(name, callback){            if (//.css$/i.test(name)){                // 如果模块名是以.css结尾                if (/^http/i.test(name)){                    // 如果模块名是以http开头，那么css是一个文件的url                    loadCss(name, callback);                } else {                    // 否则，说明模块名相对于jquery easyui根目录来说的                    loadCss(easyloader.base + name, callback);                }            } else if (//.js$/i.test(name)){                // 如果模块名是以.js结尾                if (/^http/i.test(name)){                    // 如果模块名是以http开头，那么js是一个文件的url                    loadJs(name, callback);                } else {                    // 否则，说明模块名相对于jquery easyui根目录来说的                    loadJs(easyloader.base + name, callback);                }            } else {                // 以上两种都不是，说明是easyui自己的模块，直接使用loadModule来加载，就可以了                loadModule(name, callback);            }        },        // 当一个模块加载完会触发此函数        onProgress: function(name){},        // 当一个模块和其依赖都加载完会触发此函数        onLoad: function(name){}    };    /**     * 这一小段代码就是查找jquery-easyui的根目录，并赋值给easyloader的base属性上。这样easyloader再加载css文件和js文件就很方便定位了。     */    var scripts = document.getElementsByTagName('script');    for(var i=0; i<scripts.length; i++){        var src = scripts[i].src;        if (!src) continue;        var m = src.match(/easyloader/.js(/W|$)/i);        if (m){            easyloader.base = src.substring(0, m.index);        }    }    /**     * 这个就起一个别名的作用，比如页面中可以想如下这么下：     * using('window');     * 这样window模块就加载进来了！     */    window.using = easyloader.load;    /**     * easyloader.js加载的第一模块是parse模块，parser模块调用parse方法，可以解析页面上的easyui控件     */    if (window.jQuery){        jQuery(function(){            easyloader.load('parser', function(){                jQuery.parser.parse();            });        });    }})();

原文点这里