找回密码
当前位置：Mikel > 开发笔记 > 正文

[转载]jQuery EasyUI 源代码分析之easyloader

2012-02-14 分类：开发笔记 / JavaScript 阅读(982) 评论(0)

JQuery easyui是一个JavaScript UI 组件库，使用它可以快速开发企业级的业务系统。如果你正准备开发系统后台，可以选择JQuery easyui，也可以选择Ext JS。我个人的看法是，如果开发团队就两三个人，开发工期很短，就一两个月。那么选择jQuery easyui就对了，jQuery easyui源代码量不多，便于阅读和自行修改。而Ext JSy源代码太多，短时间很难看完，学习曲线也比较陡峭。如果人手充足，时间也富裕，可以考虑使用Ext JS来开发，毕竟Ext JS更强大，控件更多。
Jquery easyui是基于Jquery插件机制扩展的，所以如果你很熟悉Jquery，那么使用它开发会很简单。

Jquery easyui的源代码svn地址：http://jquery-easyui.googlecode.com/svn
easyloader模块是用来加载jquery easyui的js和css文件的，而且它可以分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。

 

先看Demo1例子，再分析源代码。

view plaincopy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>  
  5. <title>Demo1</title>  
  6. <script type=“text/JavaScript” src=“jquery-easyui-1.2.3/jquery-1.4.4.min.js”></script>  
  7. <script type=“text/JavaScript” src=“jquery-easyui-1.2.3/easyloader.js”></script>  
  8. </head>  
  9. <body>  
  10.     <div class=“easyui-panel” title=“Demo1” fit=“true” collapsible=“true” minimizable=“true” maximizable=“true” closable=“true” style=“width: 100%; height: 200px;” >  
  11.         easyloader会自动解析这个div，因为class属性中带有easyui开头的类！  
  12.     </div>  
  13. </body>  
  14. </html>  

 

还有一种正常加载方法，不使用easyuiloader来加载。

view plaincopy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>  
  5. <title>Demo2</title>  
  6. <link rel=“stylesheet” type=“text/css” href=“jquery-easyui-1.2.3/themes/default/easyui.css”>  
  7. <link rel=“stylesheet” type=“text/css” href=“jquery-easyui-1.2.3/themes/icon.css”>  
  8. <script type=“text/javascript” src=“jquery-easyui-1.2.3/jquery-1.4.4.min.js”></script>  
  9. <script type=“text/javascript” src=“jquery-easyui-1.2.3/jquery.easyui.min.js”></script>  
  10. </head>  
  11. <body>  
  12.     <div class=“easyui-panel” title=“Demo1” fit=“true” collapsible=“true” minimizable=“true” maximizable=“true” closable=“true” style=“width: 100%; height: 200px;” >  
  13.         easyloader会自动解析这个div，因为class属性中带有easyui开头的类！  
  14.     </div>  
  15. </body>  
  16. </html>  

 

这两种方法都行，作者开发此模块，说明应该尽量使用easyuiloader来加载。因为他定制性更强，可以自定义主题和国际化等。而压缩过的文件的优势在于一次性把所有模块都加载进来，速度上更快。

view plaincopy
  1. /** 
  2.  * easyloader – jQuery EasyUI 
  3.  *  
  4.  * Licensed under the GPL: 
  5.  *   http://www.gnu.org/licenses/gpl.txt 
  6.  * 
  7.  * Copyright 2010 stworthy [ stworthy@gmail.com ]  
  8.  *  
  9.  */  
  10. (function(){  
  11.     // 模块文件定义  
  12.     var modules = {  
  13.         draggable:{  
  14.             js:‘jquery.draggable.js’  
  15.         },  
  16.         droppable:{  
  17.             js:‘jquery.droppable.js’  
  18.         },  
  19.         resizable:{  
  20.             js:‘jquery.resizable.js’  
  21.         },  
  22.         linkbutton:{  
  23.             js:‘jquery.linkbutton.js’,  
  24.             css:‘linkbutton.css’  
  25.         },  
  26.         pagination:{  
  27.             js:‘jquery.pagination.js’,  
  28.             css:‘pagination.css’,  
  29.             dependencies:[‘linkbutton’]  
  30.         },  
  31.         datagrid:{  
  32.             js:‘jquery.datagrid.js’,  
  33.             css:‘datagrid.css’,  
  34.             dependencies:[‘panel’,‘resizable’,‘linkbutton’,‘pagination’]  
  35.         },  
  36.         treegrid:{  
  37.             js:‘jquery.treegrid.js’,  
  38.             css:‘tree.css’,  
  39.             dependencies:[‘datagrid’]  
  40.         },  
  41.         panel: {  
  42.             js:‘jquery.panel.js’,  
  43.             css:‘panel.css’  
  44.         },  
  45.         window:{  
  46.             js:‘jquery.window.js’,  
  47.             css:‘window.css’,  
  48.             dependencies:[‘resizable’,‘draggable’,‘panel’]  
  49.         },  
  50.         dialog:{  
  51.             js:‘jquery.dialog.js’,  
  52.             css:‘dialog.css’,  
  53.             dependencies:[‘linkbutton’,‘window’]  
  54.         },  
  55.         messager:{  
  56.             js:‘jquery.messager.js’,  
  57.             css:‘messager.css’,  
  58.             dependencies:[‘linkbutton’,‘window’]  
  59.         },  
  60.         layout:{  
  61.             js:‘jquery.layout.js’,  
  62.             css:‘layout.css’,  
  63.             dependencies:[‘resizable’,‘panel’]  
  64.         },  
  65.         form:{  
  66.             js:‘jquery.form.js’  
  67.         },  
  68.         menu:{  
  69.             js:‘jquery.menu.js’,  
  70.             css:‘menu.css’  
  71.         },  
  72.         tabs:{  
  73.             js:‘jquery.tabs.js’,  
  74.             css:‘tabs.css’,  
  75.             dependencies:[‘panel’,‘linkbutton’]  
  76.         },  
  77.         splitbutton:{  
  78.             js:‘jquery.splitbutton.js’,  
  79.             css:‘splitbutton.css’,  
  80.             dependencies:[‘linkbutton’,‘menu’]  
  81.         },  
  82.         menubutton:{  
  83.             js:‘jquery.menubutton.js’,  
  84.             css:‘menubutton.css’,  
  85.             dependencies:[‘linkbutton’,‘menu’]  
  86.         },  
  87.         accordion:{  
  88.             js:‘jquery.accordion.js’,  
  89.             css:‘accordion.css’,  
  90.             dependencies:[‘panel’]  
  91.         },  
  92.         calendar:{  
  93.             js:‘jquery.calendar.js’,  
  94.             css:‘calendar.css’  
  95.         },  
  96.         combo:{  
  97.             js:‘jquery.combo.js’,  
  98.             css:‘combo.css’,  
  99.             dependencies:[‘panel’,‘validatebox’]  
  100.         },  
  101.         combobox:{  
  102.             js:‘jquery.combobox.js’,  
  103.             css:‘combobox.css’,  
  104.             dependencies:[‘combo’]  
  105.         },  
  106.         combotree:{  
  107.             js:‘jquery.combotree.js’,  
  108.             dependencies:[‘combo’,‘tree’]  
  109.         },  
  110.         combogrid:{  
  111.             js:‘jquery.combogrid.js’,  
  112.             dependencies:[‘combo’,‘datagrid’]  
  113.         },  
  114.         validatebox:{  
  115.             js:‘jquery.validatebox.js’,  
  116.             css:‘validatebox.css’  
  117.         },  
  118.         numberbox:{  
  119.             js:‘jquery.numberbox.js’,  
  120.             dependencies:[‘validatebox’]  
  121.         },  
  122.         spinner:{  
  123.             js:‘jquery.spinner.js’,  
  124.             css:‘spinner.css’,  
  125.             dependencies:[‘validatebox’]  
  126.         },  
  127.         numberspinner:{  
  128.             js:‘jquery.numberspinner.js’,  
  129.             dependencies:[‘spinner’,‘numberbox’]  
  130.         },  
  131.         timespinner:{  
  132.             js:‘jquery.timespinner.js’,  
  133.             dependencies:[‘spinner’]  
  134.         },  
  135.         tree:{  
  136.             js:‘jquery.tree.js’,  
  137.             css:‘tree.css’,  
  138.             dependencies:[‘draggable’,‘droppable’]  
  139.         },  
  140.         datebox:{  
  141.             js:‘jquery.datebox.js’,  
  142.             css:‘datebox.css’,  
  143.             dependencies:[‘calendar’,‘validatebox’]  
  144.         },  
  145.         parser:{  
  146.             js:‘jquery.parser.js’  
  147.         }  
  148.     };  
  149.       
  150.     // 国际化资源文件  
  151.     var locales = {  
  152.         ‘af’:‘easyui-lang-af.js’,  
  153.         ‘bg’:‘easyui-lang-bg.js’,  
  154.         ‘ca’:‘easyui-lang-ca.js’,  
  155.         ‘cs’:‘easyui-lang-cs.js’,  
  156.         ‘da’:‘easyui-lang-da.js’,  
  157.         ‘de’:‘easyui-lang-de.js’,  
  158.         ‘en’:‘easyui-lang-en.js’,  
  159.         ‘fr’:‘easyui-lang-fr.js’,  
  160.         ‘nl’:‘easyui-lang-nl.js’,  
  161.         ‘zh_CN’:‘easyui-lang-zh_CN.js’,  
  162.         ‘zh_TW’:‘easyui-lang-zh_TW.js’  
  163.     };  
  164.       
  165.     // 加载队列  
  166.     var queues = {};  
  167.       
  168.     /** 
  169.      * 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去。 
  170.      * 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对IE和非IE浏览器准备的 
  171.      * 万恶的IE浏览器！！！ 
  172.      */  
  173.     function loadJs(url, callback){  
  174.         var done = false;  
  175.         var script = document.createElement(‘script’);  
  176.         script.type = ‘text/javascript’;  
  177.         script.language = ‘javascript’;  
  178.         script.src = url;  
  179.         script.onload = script.onreadystatechange = function(){  
  180.             if (!done && (!script.readyState || script.readyState == ‘loaded’ || script.readyState == ‘complete’)){  
  181.                 done = true;  
  182.                 script.onload = script.onreadystatechange = null;  
  183.                 if (callback){  
  184.                     callback.call(script);  
  185.                 }  
  186.             }  
  187.         }  
  188.         document.getElementsByTagName(“head”)[0].appendChild(script);  
  189.     }  
  190.       
  191.     /** 
  192.      * 执行js文件。就是把js文件加载进来，再remove掉 
  193.      * @param url js的url 
  194.      * @callback 回调函数，执行完js时会调用这个函数 
  195.      */  
  196.     function runJs(url, callback){  
  197.         loadJs(url, function(){  
  198.             document.getElementsByTagName(“head”)[0].removeChild(this);  
  199.             if (callback){  
  200.                 callback();  
  201.             }  
  202.         });  
  203.     }  
  204.       
  205.     /** 
  206.      * 加载css文件。和加载js文件一样，动态创建一个link标签，然后追加到head标签中去 
  207.      * @param url css的url 
  208.      * @param callback 回调函数，加载完成后调用此函数 
  209.      */  
  210.     function loadCss(url, callback){  
  211.         var link = document.createElement(‘link’);  
  212.         link.rel = ‘stylesheet’;  
  213.         link.type = ‘text/css’;  
  214.         link.media = ‘screen’;  
  215.         link.href = url;  
  216.         document.getElementsByTagName(‘head’)[0].appendChild(link);  
  217.         if (callback){  
  218.             callback.call(link);  
  219.         }  
  220.     }  
  221.       
  222.     /** 
  223.      * 加载单独的一个模块 
  224.      */  
  225.     function loadSingle(name, callback){  
  226.           
  227.         // 加载队列存入该模块名，并表示状态为loading。  
  228.         queues[name] = ‘loading’;  
  229.           
  230.         // 根据模块名，取出该模块定义  
  231.         var module = modules[name];  
  232.           
  233.         // js加载状态  
  234.         var jsStatus = ‘loading’;  
  235.           
  236.         // css加载状态，从这里你就可以看出easyloader.css就是一个开关变量，控制是否加载模块相应的css文件  
  237.         var cssStatus = (easyloader.css && module[‘css’]) ? ‘loading’ : ‘loaded’;  
  238.           
  239.         // 是css文件，就使用loadCss来加载之  
  240.         if (easyloader.css && module[‘css’]){  
  241.             if (/^http/i.test(module[‘css’])){  
  242.                 var url = module[‘css’];  
  243.             } else {  
  244.                 var url = easyloader.base + ‘themes/’ + easyloader.theme + ‘/’ + module[‘css’];  
  245.             }  
  246.             loadCss(url, function(){  
  247.                 cssStatus = ‘loaded’;  
  248.                 if (jsStatus == ‘loaded’ && cssStatus == ‘loaded’){  
  249.                     finish();  
  250.                 }  
  251.             });  
  252.         }  
  253.           
  254.         // 是js文件，就是用LoadJs来加载之  
  255.         if (/^http/i.test(module[‘js’])){  
  256.             var url = module[‘js’];  
  257.         } else {  
  258.             var url = easyloader.base + ‘plugins/’ + module[‘js’];  
  259.         }  
  260.         loadJs(url, function(){  
  261.             jsStatus = ‘loaded’;  
  262.             if (jsStatus == ‘loaded’ && cssStatus == ‘loaded’){  
  263.                 finish();  
  264.             }  
  265.         });  
  266.           
  267.         // 最终调用finish函数，来结束加载。并触发onProgress函数，每加载成功一个模块，就调用一次onProgress  
  268.         function finish(){  
  269.             queues[name] = ‘loaded’;  
  270.             easyloader.onProgress(name);  
  271.             if (callback){  
  272.                 callback();  
  273.             }  
  274.         }  
  275.     }  
  276.       
  277.     /** 
  278.      * easyui模块加载函数 
  279.      * @param name 模块名，可以是string，也可以是数组 
  280.      * @param callback 回调函数，当加载结束后会调用此函数 
  281.      */  
  282.     function loadModule(name, callback){  
  283.           
  284.         // 模块名，根据依赖关系，从前到后，依次排开  
  285.         var mm = [];  
  286.           
  287.         // 加载标识，当其值为true时，表示需要加载的模块已经加载好了  
  288.         var doLoad = false;  
  289.           
  290.         // 模块名支持两中，一种是string，一种是数组。这样就可以一次加载多个模块了  
  291.         if (typeof name == ‘string’){  
  292.             // 是string的时候，调用add方法把模块名push到mm数组中去  
  293.             add(name);  
  294.         } else {  
  295.             for(var i=0; i<name.length; i++){  
  296.                 // 是数组的时候，循环调用add方法把模块名统统push到mm数组中去  
  297.                 add(name[i]);  
  298.             }  
  299.         }  
  300.           
  301.         /** 
  302.          * loadModule函数中内嵌的一个函数，用来加载模块名到变量mm数组中去 
  303.          * @param name 模块名，只能是string 
  304.          */  
  305.         function add(name){  
  306.             // 保护措施，如果该模块名不存在，我们就不要加载了  
  307.             if (!modules[name]) return;  
  308.               
  309.             // 否则，就是该模块存在。然后，我们在看看其有没有依赖模块  
  310.             var d = modules[name][‘dependencies’];  
  311.             if (d){  
  312.                 // 如果有依赖模块，我们要先把依赖模块的名字push到mm中去  
  313.                 // 这里用了递归调用  
  314.                 for(var i=0; i<d.length; i++){  
  315.                     add(d[i]);  
  316.                 }  
  317.             }  
  318.               
  319.             // 把模块名放到mm中  
  320.             mm.push(name);  
  321.         }  
  322.           
  323.         /** 
  324.          * 当一个模块及其依赖模块加载完成时，执行回调函数，并且触发onLoad函数 
  325.          */  
  326.         function finish(){  
  327.             if (callback){  
  328.                 callback();  
  329.             }  
  330.             easyloader.onLoad(name);  
  331.         }  
  332.           
  333.         // 加载用时  
  334.         var time = 0;  
  335.           
  336.         /** 
  337.          * 加载所需要的模块，需要的模块，我们已经统计好了，并按依赖关系，先后push到mm中去了 
  338.          */  
  339.         function loadMm(){  
  340.             // 判断mm是不是空的  
  341.             if (mm.length){  
  342.                   
  343.                 // 第一个模块  
  344.                 var m = mm[0];  
  345.                   
  346.                 // 判断加载队列是否包含此模块  
  347.                 if (!queues[m]){  
  348.                       
  349.                     // 加载队列不包含此模块，开始加载该模块  
  350.                     // 把doLoad置成true，表示开始加载  
  351.                     doLoad = true;  
  352.                       
  353.                     // 调用loadSingle方法来加载模块，加载成功后会把此模块从mm中shift掉，然后继续调用loadMM方法，就形成了递归调用  
  354.                     loadSingle(m, function(){  
  355.                         mm.shift();  
  356.                         loadMm();  
  357.                     });  
  358.                 } else if (queues[m] == ‘loaded’){  
  359.                     // 加载队列已经加载过此模块了，不需要在加载了，直接从mm中shift掉即可  
  360.                     mm.shift();  
  361.                     loadMm();  
  362.                 } else {  
  363.                     // 表示正在加载该模块，累计所用时间如果没有超过timeout  
  364.                     // 则过10毫秒再调用一次loadMm函数  
  365.                     if (time < easyloader.timeout){  
  366.                         time += 10;  
  367.                         setTimeout(arguments.callee, 10);  
  368.                     }  
  369.                 }  
  370.             } else {  
  371.                 // 走到这里，表示该加载的模块都已经加载好了  
  372.                 if (easyloader.locale && doLoad == true && locales[easyloader.locale]){  
  373.                     // 如果设置了国际化，并且已经加载好了，而且该国际化资源还存在，那么加载该资源js  
  374.                     var url = easyloader.base + ‘locale/’ + locales[easyloader.locale];  
  375.                       
  376.                     // 执行js完事后，调用finish方法  
  377.                     runJs(url, function(){  
  378.                         finish();  
  379.                     });  
  380.                 } else {  
  381.                     // 没定义国际化文件，那么直接调用finish方法吧  
  382.                     finish();  
  383.                 }  
  384.             }  
  385.         }  
  386.           
  387.         loadMm();  
  388.     }  
  389.       
  390.     /** 
  391.      * easyloader定义为全局变量 
  392.      */  
  393.     easyloader = {  
  394.           
  395.         // 各个模块文件的定义，包括js、css和依赖模块  
  396.         modules:modules,  
  397.           
  398.         // 国际化资源文件  
  399.         locales:locales,  
  400.           
  401.         // jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变  
  402.         base:‘.’,  
  403.           
  404.         // 控件的主题，一共就有两个，在theme目录中。还有一个gray主题，浅灰色的，很难看。  
  405.         theme:‘default’,  
  406.           
  407.         // 这是一个开关变量，控制easyloader加载模块时，要不要加载相应的css文件，默认是需要加载的  
  408.         css:true,  
  409.           
  410.         // 国际化语言，可以根据window.navigator.language或者window.navigator.userLanguage来获取当前浏览器的语言。  
  411.         // 有两个属性，主要因为IE浏览器只认识userLanguage和sysLanguage，万恶的IE浏览器啊！  
  412.         locale:null,  
  413.           
  414.         // 加载一个模块的最长时间，超过这个时间，就开始加载下一个模块了。  
  415.         timeout:2000,  
  416.       
  417.         // easyloader就公开了这么一个方法，用来加载模块。  
  418.         // name是模块名，callback是加载成功后执行的函数  
  419.         load: function(name, callback){  
  420.             if (//.css$/i.test(name)){  
  421.                 // 如果模块名是以.css结尾  
  422.                   
  423.                 if (/^http/i.test(name)){  
  424.                     // 如果模块名是以http开头，那么css是一个文件的url  
  425.                     loadCss(name, callback);  
  426.                 } else {  
  427.                     // 否则，说明模块名相对于jquery easyui根目录来说的  
  428.                     loadCss(easyloader.base + name, callback);  
  429.                 }  
  430.             } else if (//.js$/i.test(name)){  
  431.                 // 如果模块名是以.js结尾  
  432.                   
  433.                 if (/^http/i.test(name)){  
  434.                     // 如果模块名是以http开头，那么js是一个文件的url  
  435.                     loadJs(name, callback);  
  436.                 } else {  
  437.                     // 否则，说明模块名相对于jquery easyui根目录来说的  
  438.                     loadJs(easyloader.base + name, callback);  
  439.                 }  
  440.             } else {  
  441.                 // 以上两种都不是，说明是easyui自己的模块，直接使用loadModule来加载，就可以了  
  442.                 loadModule(name, callback);  
  443.             }  
  444.         },  
  445.           
  446.         // 当一个模块加载完会触发此函数  
  447.         onProgress: function(name){},  
  448.           
  449.         // 当一个模块和其依赖都加载完会触发此函数  
  450.         onLoad: function(name){}  
  451.     };  
  452.     /** 
  453.      * 这一小段代码就是查找jquery-easyui的根目录，并赋值给easyloader的base属性上。这样easyloader再加载css文件和js文件就很方便定位了。 
  454.      */  
  455.     var scripts = document.getElementsByTagName(‘script’);  
  456.     for(var i=0; i<scripts.length; i++){  
  457.         var src = scripts[i].src;  
  458.         if (!src) continue;  
  459.         var m = src.match(/easyloader/.js(/W|$)/i);  
  460.         if (m){  
  461.             easyloader.base = src.substring(0, m.index);  
  462.         }  
  463.     }  
  464.     /** 
  465.      * 这个就起一个别名的作用，比如页面中可以想如下这么下： 
  466.      * using(‘window’); 
  467.      * 这样window模块就加载进来了！ 
  468.      */  
  469.     window.using = easyloader.load;  
  470.     /** 
  471.      * easyloader.js加载的第一模块是parse模块，parser模块调用parse方法，可以解析页面上的easyui控件 
  472.      */  
  473.     if (window.jQuery){  
  474.         jQuery(function(){  
  475.             easyloader.load(‘parser’, function(){  
  476.                 jQuery.parser.parse();  
  477.             });  
  478.         });  
  479.     }  
  480.       
  481. })();  

到这里easyloader就分析结束了，如果你仔细看过了，相信一定会使用easyloader了。有问题可以给我留言。

赞(0) 打赏
分享到： 更多 (0)
标签：

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏