easyloader源码解析

来源：互联网发布：免费ppt模板下载知乎编辑：程序博客网时间：2024/05/21 03:18
/** * easyloader - jQuery EasyUI *  * Licensed under the GPL terms * To use it on other terms please contact us * * Copyright(c) 2009-2012 stworthy [ stworthy@gmail.com ]  *  *//** * 首先要知道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();            });        });    }})();
阅读全文
0 0