easyloader源码解析

/**
 * easyloader - jQuery EasyUI
 * 
 * Licensed under the GPL terms
 * To use it on other terms please contact us
 *
 * Copyright(c) 2009-2012 stworthy [ [e-mail] ] 
 * 
 */

/**
 * 首先要知道eeasyui的模块化组成
 * 1.模块的属性
 *      (1).模块的名字,如:"pagination"
 *      (2).有且只有一个js文件的名字,如:"jquery.pagination.js"
 *      (3).可能存在一个css文件的名字,如:"pagination.css"
 *      (4).依赖的其他的模块的名字的数组,如:['linkbutton']
 * 2.easyload在加载其他模块的时候都会有一个基路径,这个基路径就是easyload.js所在的目录
 * 3.easyload.js加载运行注册页面初始化函数,在这个初始化函数中首先加载"parser"模块,加载完成后,再调用"parser"模块的方法:jQuery.parser.parse()
 */
(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'
        },
        progressbar: {
            js: 'jquery.progressbar.js',
            css: 'progressbar.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']
        },
        propertygrid: {
            js: 'jquery.propertygrid.js',
            css: 'propertygrid.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', 'progressbar']
        },
        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']
        },
        searchbox: {
            js: 'jquery.searchbox.js',
            css: 'searchbox.css',
            dependencies: ['menubutton']
        },
        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', 'combo']
        },
        datetimebox: {
            js: 'jquery.datetimebox.js',
            dependencies: ['datebox', 'timespinner']
        },
        slider: {
            js: 'jquery.slider.js',
            dependencies: ['draggable']
        },
        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',
        'cz': 'easyui-lang-cz.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文件。就是把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);
        }
    }

    /**
     * 只加载单个模块,不加载依赖的模块
     * 加载完成之后,queues队列里对应的该模块的属性的值为"loaded"
     * @param name
     * @param callback
     */
    function loadSingle(name, callback) {
        // 加载队列存入该模块名，并表示状态为loading。
        queues[name] = 'loading';
        // 根据模块名，取出该模块定义
        var module = modules[name];
        // js加载状态,一个模块肯定会有一个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'];
            var url = easyloader.base + '' + module['js'];
        }

        loadJs(url, function () {
            jsStatus = 'loaded';
            if (jsStatus == 'loaded' && cssStatus == 'loaded') {
                finish();
            }
        });

        function finish() {
            queues[name] = 'loaded';
            easyloader.onProgress(name);
            if (callback) {
                callback();
            }
        }
    }

    //根据名称加载模块,如:loadModule("parser")
    function loadModule(name, callback) {
        var mm = [];
        var doLoad = false;

        if (typeof name == 'string') {
            add(name);
        } else {
            for (var i = 0; i < name.length; i++) {
                add(name[i]);
            }
        }

        function add(name) {
            //如果定义的所有模块中不包含指定加载的模块的名称的话,就直接返回
            if (!modules[name]) return;
            //获取这个模块的所有依赖模块
            var d = modules[name]['dependencies'];
            if (d) {
                //如果这个莫块存在依赖模块就先加载依赖模块
                for (var i = 0; i < d.length; i++) {
                    add(d[i]);
                }
            }
            //将模块的名字添加到mm数组中
            mm.push(name);
        }

        function finish() {
            if (callback) {
                callback();
            }
            easyloader.onLoad(name);
        }

        var time = 0;
        function loadMm() {
            //加载模块的方法
            if (mm.length) {
                var m = mm[0]; // the first module
                if (!queues[m]) {
                    doLoad = true;
                    loadSingle(m, function () {
                        mm.shift();
                        loadMm();
                    });
                } else if (queues[m] == 'loaded') {
                    mm.shift();
                    loadMm();
                } else {
                    if (time < easyloader.timeout) {
                        time += 10;
                        setTimeout(arguments.callee, 10);
                    }
                }
            } else {
                if (easyloader.locale && doLoad == true && locales[easyloader.locale]) {
                    var url = easyloader.base + 'locale/' + locales[easyloader.locale];
                    runJs(url, function () {
                        finish();
                    });
                } else {
                    finish();
                }
            }
        }

        loadMm();
    }

    easyloader = {
        modules: modules,
        locales: locales,

        base: '.',
        theme: 'default',
        css: true,
        locale: null,
        timeout: 2000,

        load: function (name, callback) {
            if (/\.css$/i.test(name)) {
                //如果加载的是单个css文件
                if (/^http/i.test(name)) {
                    //如果使用的是绝对地址,直接调用loadCss方法
                    loadCss(name, callback);
                } else {
                    //如果是相对地址就使用基地址
                    loadCss(easyloader.base + name, callback);
                }
            } else if (/\.js$/i.test(name)) {
                //如果是单个js文件
                if (/^http/i.test(name)) {
                    //如果是绝对地址,直接调用加载js文件的方法
                    loadJs(name, callback);
                } else {
                    //如果是相对地址就使用基地址
                    loadJs(easyloader.base + name, callback);
                }
            } else {
                //非js和css文件,就调用加载模块的名称
                loadModule(name, callback);
            }
        },

        onProgress: function (name) { },
        onLoad: function (name) { }
    };

    /**
     * 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去* 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对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);
    }

    //找到easyloader.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);
        }
    }

    window.using = easyloader.load;

    if (window.jQuery) {
        jQuery(function () {
            easyloader.load('parser', function () {
                jQuery.parser.parse();
            });
        });
    }

})();