【+实践】easyUi源码分析01--easyloader.js分析

原文链接: http://kalllx.iteye.com/blog/787031

 

原作者观点:

想找一份好的jsui 来做软件的外壳,最好是原创的,看了不少jquery代码,发现了不少的jqueryplugins.但是都比较零散,唯独jquery easyui ,比较系统。 功能和元素都比较全,自己想写一套类似的,可惜现在功力还不行。所以先学习easy-ui的源码吧。今天看了里面的第一个类。eayload。当 然看这个源码之前,最好将jquery源码先读一遍。因为easyui是基于jquery写的。如果想对jquery 深入了解,最好下一番功夫在ec-262-3上,详读后会对scope ,excute-context ,this等有更深入了解。 easyloader.js可以说是easyui的最基础的一个类,它负责加载js,css,以及locale文件,里面的结构比较简单。

 

本人实践后观点:这不过是一个锦上添花的功能,放弃

1. 放弃使用easyloader.js的功能。 其作用不过是根据页面上使用了哪些easyUi组件,动态装载相应的js,和css。其中js组件之间,有定义一个依赖关系。

比如,treegrid依赖于datagrid;如果页面上用到了treegrid,easyloader会将plugins下的jquery.treegrid.js和jquery.datagrid.js一起加载到页面中:

treegrid: {
            js: "jquery.treegrid.js",
            css: "tree.css",
            dependencies: ["datagrid"]
        },

2. 其原理可能是 : 拦截在页面中的easyUi特有的class; 比如class="easyui-dialog";easyloader.js可以判定它用了dialog组件。【没时间研究……有兴趣的同学告知一下】

3. 放弃原因: 意义不大,节省不了多少流量,本来easyUi的js就不大,压缩以后就更小了。相反,我在使用easyloader过程中,倒是会出现脚本错误(可能在form上面忘了加class,后面又用了其clear方法),可能是本人写法不对,但是不想浪费时间。

4. 最终引入文件截图:
【+实践】easyUi源码分析01--easyloader.js分析

 

--------------------------以下为转载内容 ------------------------------------------

/**
 * easyloader - jQuery EasyUI
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ [email protected] ]
 *
 */
(function(){
    //将所有的插件,和插件资源和依赖文件放进modules对象中。
    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'
        }
    };
    //将国际化文件放入一个locales对象中
    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方法
    function loadJs(url, callback){
        //标志变量,js是否加载并执行
        var done = false;
        var script = document.createElement('script');//创建script dom
        script.type = 'text/javascript';
        script.language = 'javascript';
        script.src = url;
        script.onload = script.onreadystatechange = function(){ //onload是firefox 浏览器事件,onreadystatechange,是ie的,为了兼容,两个都写上,这样写会导致内存泄露
            //script.readyState只是ie下有这个属性,如果这个值为undefined,说明是在firefox,就直接可以执行下面的代码了。反之为ie,需要对script.readyState
            //状态具体值进行判别,loaded和complete状态表示,脚本加载了并执行了。
            if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
                done = true;
               
                script.onload = script.onreadystatechange = null;//释放内存,还会泄露。
                if (callback){//加载后执行回调
                    callback.call(script);
                }
            }
        }
        //具体加载动作,上面的onload是注册事件,
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    //运行js ,看代码逻辑可知,运行js,只是在js执行后,将这个script删除而已,主要用来加载国际化文件
    function runJs(url, callback){
        loadJs(url, function(){
            document.getElementsByTagName("head")[0].removeChild(this);
            if (callback){
                callback();
            }
        });
    }
   
    //加载css没什么好说的
    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);
        }
    }
    //加载单一一个plugin,仔细研究module ,可以发现,pingin之间通过dependence,构造成了一颗依赖树,
    //这个方法,就是加载具体树中的一个节点
    function loadSingle(name, callback){
        //把整个plugin的状态设置为loading
        queues[name] = 'loading';
       
        var module = modules[name];
        //把js状态设置为loading
        var jsStatus = 'loading';
        //如果允许css,并且plugin有css,则加载css,否则设置加载过了,其实是不加载
        var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
        //加载css,plugin 的css,如果是全称,就用全称,否则把简写换成全称,所以简写的css文件要放入到themes/type./文件下
        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';
                //js, css加载完,才调用回调
                if (jsStatus == 'loaded' && cssStatus == 'loaded'){
                    finish();
                }
            });
        }
        //加载js,全称用全称,简写补全。
        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();
            }
        });
        //加载完调用的方法,改plugin状态
        function finish(){
            queues[name] = 'loaded';
            //调用正在加载的方法,其实已经加载完了,
            easyloader.onProgress(name);
            if (callback){
                callback();
            }
        }
    }
    //加载主模块入口,
    function loadModule(name, callback){
        //定义数组,最后是形成的是依赖插件列表,最独立的插件放在首位,name是末尾
        var mm = [];
        var doLoad = false;
        //name有两种,一种是string ,一种是string array,这样一次可以加载多个plugin,都是调用add方法进行添加
        if (typeof name == 'string'){
            add(name);
        } else {
            for(var i=0; i<name.length; i++){
                add(name[i]);
            }
        }
       
        function add(name){
            //如果modules中没有这个plugin那退出
            if (!modules[name]) return;
            //如果有,查看它是否依赖其他plugin
            var d = modules[name]['dependencies'];
            //如果依赖,就加载依赖的plugin.同时在加载依赖的plugin的依赖。注意循环中调用了add,是递归
            if (d){
                for(var i=0; i<d.length; i++){
                    add(d[i]);
                }
            }
            mm.push(name);
        }
       
        function finish(){
            if (callback){
                callback();
            }
            //调用onLoad,传递name 为参数
            easyloader.onLoad(name);
        }
        //形成依赖树,不行还没有做实质性工作呢,那就是加载。打起精神来,最核心的代码就是以下的了
        //超时用
        var time = 0;
        //定义一个加载方法,定义后直接调用
        function loadMm(){
            //如果mm有长度,长度!=0,加载plugin,为0,即加载完毕,开始加载国际化文件。
            if (mm.length){
                var m = mm[0];    // the first module
                if (!queues[m]){//状态序列中没有这个plugin的信息,说明没有加载这个plug,调用laodSingle进行加载
                    doLoad = true;
                    loadSingle(m, function(){
                        mm.shift();//加载完成后,将这个元素从数组去除,在继续加载,直到数组
                        loadMm();
                    });
                } else if (queues[m] == 'loaded'){//如果这个plugin已经加载,就不用加载,以为mm中可能有重复项
                    mm.shift();
                    loadMm();
                } else {
                    if (time < easyloader.timeout){//超时时候,10秒钟调用一次loadMn().注意arguments.callee代表函数本身
                        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();
    }
//    定义一个加载器,注意,是全局变量,没有var,
    easyloader = {
        modules:modules,
        locales:locales,
       
        base:'.',//该属性是为了加载js,记录文件夹路径的
        theme:'default', //默认主题
        css:true, 
        locale:null,
        timeout:2000,//加载超时事件
    //easyloader.load(),该模块加载的调用方法,先加载css,然后加载js
        load: function(name, callback){
            //如果加载是*.css文件,判断是不是以http开头,如果是,直接调用
            if (/\.css$/i.test(name)){
                if (/^http/i.test(name)){
                    loadCss(name, callback);
                } else {
                    //不是http的,加上base.文件夹路径
                    loadCss(easyloader.base + name, callback);
                }
            }
            //加载js文件
            else if (/\.js$/i.test(name)){
                if (/^http/i.test(name)){
                    loadJs(name, callback);
                } else {
                    loadJs(easyloader.base + name, callback);
                }
            } else {
                //如果直接传递一个插件名,就去modole数组中加载。改方法是重点,也是easyui自带的plugin加载方式
                loadModule(name, callback);
            }
        },
       
        onProgress: function(name){},
        onLoad: function(name){}
    };
//以上一直在定义函数,和变量,此处为真正执行处
//获取页面的所有的script,主要是为了获取我们现在解释的easyloader.js文件路径,来设置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);//判断文件是否含有easyloadr.js
        if (m){
            //如果有,base为easyloadr.js 的相同前缀
            easyloader.base = src.substring(0, m.index);
        }
    }
//定义一个简化调用接口
    window.using = easyloader.load;
   
    if (window.jQuery){
        jQuery(function(){
            //系统数据加载完后,加载parser.js插件,该插件是渲染界面的
            easyloader.load('parser', function(){
                jQuery.parser.parse();//渲染方法
            });
        });
    }
   
})();

你可能感兴趣的:(easyui)