EasyUi代码解析系列之Easyloader

本文介绍了一个用于加载jQuery EasyUI组件的模块加载器——easyloader。该加载器能够按需加载所需的EasyUI组件及其依赖项,并支持加载CSS样式文件及国际化语言包。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

esayloader模块比较简单,稍微注释了下。
执行的路线是
load->loadModule->loadSingle->loadJs
load->loadModule->loadSingle->loadCss

/**
 * jQuery EasyUI 1.4.5
 * 
 * Copyright (c) 2009-2016 www.jeasyui.com. All rights reserved.
 *
 * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
 * To use it on other terms please contact us: info@jeasyui.com
 *
 */
/**
 * easyloader - jQuery EasyUI
 * 
 */
(function(){
    var modules = {
        draggable:{
            js:'jquery.draggable.js'
        },
        droppable:{
            js:'jquery.droppable.js'
        },
        resizable:{
            js:'jquery.resizable.js'
        },
        linkbutton:{
            js:'jquery.linkbutton.js'
        },
        progressbar:{
            js:'jquery.progressbar.js'
        },
        tooltip:{
            js:'jquery.tooltip.js'
        },
        pagination:{
            js:'jquery.pagination.js',
            dependencies:['linkbutton']
        },
        datagrid:{
            js:'jquery.datagrid.js',
            dependencies:['panel','resizable','linkbutton','pagination']
        },
        treegrid:{
            js:'jquery.treegrid.js',
            dependencies:['datagrid']
        },
        propertygrid:{
            js:'jquery.propertygrid.js',
            dependencies:['datagrid']
        },
        datalist:{
            js:'jquery.datalist.js',
            dependencies:['datagrid']
        },
        panel: {
            js:'jquery.panel.js'
        },
        window:{
            js:'jquery.window.js',
            dependencies:['resizable','draggable','panel']
        },
        dialog:{
            js:'jquery.dialog.js',
            dependencies:['linkbutton','window']
        },
        messager:{
            js:'jquery.messager.js',
            dependencies:['linkbutton','dialog','progressbar']
        },
        layout:{
            js:'jquery.layout.js',
            dependencies:['resizable','panel']
        },
        form:{
            js:'jquery.form.js'
        },
        menu:{
            js:'jquery.menu.js'
        },
        tabs:{
            js:'jquery.tabs.js',
            dependencies:['panel','linkbutton']
        },
        menubutton:{
            js:'jquery.menubutton.js',
            dependencies:['linkbutton','menu']
        },
        splitbutton:{
            js:'jquery.splitbutton.js',
            dependencies:['menubutton']
        },
        switchbutton:{
            js:'jquery.switchbutton.js'
        },
        accordion:{
            js:'jquery.accordion.js',
            dependencies:['panel']
        },
        calendar:{
            js:'jquery.calendar.js'
        },
        textbox:{
            js:'jquery.textbox.js',
            dependencies:['validatebox','linkbutton']
        },
        filebox:{
            js:'jquery.filebox.js',
            dependencies:['textbox']
        },
        combo:{
            js:'jquery.combo.js',
            dependencies:['panel','textbox']
        },
        combobox:{
            js:'jquery.combobox.js',
            dependencies:['combo']
        },
        combotree:{
            js:'jquery.combotree.js',
            dependencies:['combo','tree']
        },
        combogrid:{
            js:'jquery.combogrid.js',
            dependencies:['combo','datagrid']
        },
        validatebox:{
            js:'jquery.validatebox.js',
            dependencies:['tooltip']
        },
        numberbox:{
            js:'jquery.numberbox.js',
            dependencies:['textbox']
        },
        searchbox:{
            js:'jquery.searchbox.js',
            dependencies:['menubutton','textbox']
        },
        spinner:{
            js:'jquery.spinner.js',
            dependencies:['textbox']
        },
        numberspinner:{
            js:'jquery.numberspinner.js',
            dependencies:['spinner','numberbox']
        },
        timespinner:{
            js:'jquery.timespinner.js',
            dependencies:['spinner']
        },
        tree:{
            js:'jquery.tree.js',
            dependencies:['draggable','droppable']
        },
        datebox:{
            js:'jquery.datebox.js',
            dependencies:['calendar','combo']
        },
        datetimebox:{
            js:'jquery.datetimebox.js',
            dependencies:['datebox','timespinner']
        },
        slider:{
            js:'jquery.slider.js',
            dependencies:['draggable']
        },
        parser:{
            js:'jquery.parser.js'
        },
        mobile:{
            js:'jquery.mobile.js'
        }
    };

    var locales = {
        'af':'easyui-lang-af.js',
        'ar':'easyui-lang-ar.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',
        'el':'easyui-lang-el.js',
        'en':'easyui-lang-en.js',
        'es':'easyui-lang-es.js',
        'fr':'easyui-lang-fr.js',
        'it':'easyui-lang-it.js',
        'jp':'easyui-lang-jp.js',
        'nl':'easyui-lang-nl.js',
        'pl':'easyui-lang-pl.js',
        'pt_BR':'easyui-lang-pt_BR.js',
        'ru':'easyui-lang-ru.js',
        'sv_SE':'easyui-lang-sv_SE.js',
        'tr':'easyui-lang-tr.js',
        'zh_CN':'easyui-lang-zh_CN.js',
        'zh_TW':'easyui-lang-zh_TW.js'
    };
    //状态变量,标识模块加载状态
    var queues = {};

    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);
    }

    function runJs(url, callback){
        loadJs(url, function(){
            document.getElementsByTagName("head")[0].removeChild(this);
            if (callback){
                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){
        queues[name] = 'loading';

        var module = modules[name];
        var jsStatus = 'loading';
        var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';

        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();
                }
            });
        }

        if (/^http/i.test(module['js'])){
            var url = module['js'];
        } else {
            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();
            }
        }
    }

    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.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){//等待时间小于tiemout时10ms调用一次自身
                        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(name, callback);
                } else {//相对路径
                    loadCss(easyloader.base + name, callback);
                }
            } else if (/\.js$/i.test(name)){//加载js
                if (/^http/i.test(name)){
                    loadJs(name, callback);
                } else {
                    loadJs(easyloader.base + name, callback);
                }
            } else {
                //加载模块
                loadModule(name, callback);
            }
        },

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

    //获取base路径
    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;
    //加载解析器,解析页面easyui元素
    if (window.jQuery){
        jQuery(function(){
            easyloader.load('parser', function(){
                jQuery.parser.parse();
            });
        });
    }

})();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值