(一)jQuery EasyUI 的EasyLoader加载原理

1、第一次看了官网的demo，引用的是EasyLoader.js文件，而不是引用jquery.easyui.min.js文件，我就有疑问了，百度一下。

jQuery EasyUI是一款基于JQuery的UI快速搭建组件。EasyLoader是可以动态加载脚本和CSS文件，也可以动态加载EasyUI已有组件，需要引用EasyLoader.js文件，注意：这里就不需要引用jquery.easyui.min.js文件了。

比如需要加载linkbutton组件，则可以用下面的两种方式来加载：

第一种通过设置class来实现:

　　<a href="#" class="easyui-linkbutton" onclick="load1()">加载日历</a>

 　　只要class设置了easyui-组件名，easyloader就会自动动态加载相应的组件

第二种通过脚本来实现: 

　　using('calendar', function () { alert("加载成功！") });

 　　或者

　　easyloader.load('calendar', function () { alert("加载成功！") });

 　　这里using 等同于 easyloader.load，也就是说using是 easyloader.load方法的简写。 

常用属性：

1)         Locale： 本地化

用法：easyloader.locale = "zh_CN"; // 本地化设置

2)         Theme： 主题

用法：easyloader.theme = "gray"; // 设置主题

事件：

1)         onProgress： 每个组件加载完成后触发

2)         onLoad：在onProgress事件后触发，当组件以及关联组件全部加载完成后触发

两者的区别可以从名称中看出端倪，onProgress事件可以用来显示进度，而onLoad事件可以用于提示用户可以使用组件了。

2、怎么动态加载js、css呢？

其实可以在http://www.zi-han.net/case/easyui/base.html     demo查看源代码就知道引用那些JS和CSS，而有些JS在demo中并没有用到怎么也会加载进来呢？好，先提示一点，每个组件之间可能存在依赖。看老版本的源码就清楚 EasyLoader干了些什么

/** * easyloader - jQuery EasyUI *  * Licensed under the GPL: *   http://www.gnu.org/licenses/gpl.txt * * Copyright 2010 stworthy [ [e-mail] ]  *  */(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 domscript.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的状态设置为loadingqueues[name] = 'loading';var module = modules[name];//把js状态设置为loadingvar 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;//如果有，查看它是否依赖其他pluginvar 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 moduleif (!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,然后加载jsload: 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.jsif (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();//渲染方法});});}})();