easyloader模块是用来加载jquery easyui的js和css文件的，即easyloader可以在调用的时候自动加载当前页面所需的文件，不用再自己引用，
而且它可以分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui-开头的标签都转化成easyui的控件。
先看Demo1例子，再分析源代码。
有跟后台交互的属性比较多的控件，建议用js
没有跟后台交互的，建议用class
<!DOCTYPE html> <html> <head> <title>easyloader范例</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入JQuery --> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> <!-- 引入easyloader.js --> <script type="text/javascript" src="jquery-easyui-1.4.1/easyloader.js"></script> </head> <body> <div class="easyui-panel" title="Demo1" fit="false" collapsible="true" minimizable="true" maximizable="true" closable="true" style="100%; height: 200px;" > easyloader会自动解析这个div，因为class属性中带有easyui开头的类！ </div> </body> </html>
/** * easyloader - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Copyright 2010 stworthy [ stworthy@gmail.com ] * */ (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' }, 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' } }; // 国际化资源文件 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文件函数，过程就是动态创建一个script标签，然后添加到head标签中去。 * 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对IE和非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); } /** * 执行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); } } /** * 加载单独的一个模块 */ function loadSingle(name, callback){ // 加载队列存入该模块名，并表示状态为loading。 queues[name] = 'loading'; // 根据模块名，取出该模块定义 var module = modules[name]; // 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']; } loadJs(url, function(){ jsStatus = 'loaded'; if (jsStatus == 'loaded' && cssStatus == 'loaded'){ finish(); } }); // 最终调用finish函数，来结束加载。并触发onProgress函数，每加载成功一个模块，就调用一次onProgress function finish(){ queues[name] = 'loaded'; easyloader.onProgress(name); if (callback){ callback(); } } } /** * easyui模块加载函数 * @param name 模块名，可以是string，也可以是数组 * @param callback 回调函数，当加载结束后会调用此函数 */ function loadModule(name, callback){ // 模块名，根据依赖关系，从前到后，依次排开 var mm = []; // 加载标识，当其值为true时，表示需要加载的模块已经加载好了 var doLoad = false; // 模块名支持两中，一种是string，一种是数组。这样就可以一次加载多个模块了 if (typeof name == 'string'){ // 是string的时候，调用add方法把模块名push到mm数组中去 add(name); } else { for(var i=0; i<name.length; i++){ // 是数组的时候，循环调用add方法把模块名统统push到mm数组中去 add(name[i]); } } /** * loadModule函数中内嵌的一个函数，用来加载模块名到变量mm数组中去 * @param name 模块名，只能是string */ function add(name){ // 保护措施，如果该模块名不存在，我们就不要加载了 if (!modules[name]) return; // 否则，就是该模块存在。然后，我们在看看其有没有依赖模块 var d = modules[name]['dependencies']; if (d){ // 如果有依赖模块，我们要先把依赖模块的名字push到mm中去 // 这里用了递归调用 for(var i=0; i<d.length; i++){ add(d[i]); } } // 把模块名放到mm中 mm.push(name); } /** * 当一个模块及其依赖模块加载完成时，执行回调函数，并且触发onLoad函数 */ function finish(){ if (callback){ callback(); } easyloader.onLoad(name); } // 加载用时 var time = 0; /** * 加载所需要的模块，需要的模块，我们已经统计好了，并按依赖关系，先后push到mm中去了 */ function loadMm(){ // 判断mm是不是空的 if (mm.length){ // 第一个模块 var m = mm[0]; // 判断加载队列是否包含此模块 if (!queues[m]){ // 加载队列不包含此模块，开始加载该模块 // 把doLoad置成true，表示开始加载 doLoad = true; // 调用loadSingle方法来加载模块，加载成功后会把此模块从mm中shift掉，然后继续调用loadMM方法，就形成了递归调用 loadSingle(m, function(){ mm.shift(); loadMm(); }); } else if (queues[m] == 'loaded'){ // 加载队列已经加载过此模块了，不需要在加载了，直接从mm中shift掉即可 mm.shift(); loadMm(); } else { // 表示正在加载该模块，累计所用时间如果没有超过timeout // 则过10毫秒再调用一次loadMm函数 if (time < easyloader.timeout){ time += 10; setTimeout(arguments.callee, 10); } } } else { // 走到这里，表示该加载的模块都已经加载好了 if (easyloader.locale && doLoad == true && locales[easyloader.locale]){ // 如果设置了国际化，并且已经加载好了，而且该国际化资源还存在，那么加载该资源js var url = easyloader.base + 'locale/' + locales[easyloader.locale]; // 执行js完事后，调用finish方法 runJs(url, function(){ finish(); }); } else { // 没定义国际化文件，那么直接调用finish方法吧 finish(); } } } loadMm(); } /** * easyloader定义为全局变量 */ easyloader = { // 各个模块文件的定义，包括js、css和依赖模块 modules:modules, // 国际化资源文件 locales:locales, // jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变 base:'.', // 控件的主题，一共就有两个，在theme目录中。还有一个gray主题，浅灰色的，很难看。 theme:'default', // 这是一个开关变量，控制easyloader加载模块时，要不要加载相应的css文件，默认是需要加载的 css:true, // 国际化语言，可以根据window.navigator.language或者window.navigator.userLanguage来获取当前浏览器的语言。 // 有两个属性，主要因为IE浏览器只认识userLanguage和sysLanguage，万恶的IE浏览器啊！ locale:null, // 加载一个模块的最长时间，超过这个时间，就开始加载下一个模块了。 timeout:2000, // easyloader就公开了这么一个方法，用来加载模块。 // name是模块名，callback是加载成功后执行的函数 load: function(name, callback){ if (//.css$/i.test(name)){ // 如果模块名是以.css结尾 if (/^http/i.test(name)){ // 如果模块名是以http开头，那么css是一个文件的url loadCss(name, callback); } else { // 否则，说明模块名相对于jquery easyui根目录来说的 loadCss(easyloader.base + name, callback); } } else if (//.js$/i.test(name)){ // 如果模块名是以.js结尾 if (/^http/i.test(name)){ // 如果模块名是以http开头，那么js是一个文件的url loadJs(name, callback); } else { // 否则，说明模块名相对于jquery easyui根目录来说的 loadJs(easyloader.base + name, callback); } } else { // 以上两种都不是，说明是easyui自己的模块，直接使用loadModule来加载，就可以了 loadModule(name, callback); } }, // 当一个模块加载完会触发此函数 onProgress: function(name){}, // 当一个模块和其依赖都加载完会触发此函数 onLoad: function(name){} }; /** * 这一小段代码就是查找jquery-easyui的根目录，并赋值给easyloader的base属性上。这样easyloader再加载css文件和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); } } /** * 这个就起一个别名的作用，比如页面中可以想如下这么下： * using('window'); * 这样window模块就加载进来了！ */ window.using = easyloader.load; /** * easyloader.js加载的第一模块是parse模块，parser模块调用parse方法，可以解析页面上的easyui控件 */ if (window.jQuery){ jQuery(function(){ easyloader.load('parser', function(){ jQuery.parser.parse(); }); }); } })(); /** * parser模块主要是解析页面中easyui的控件 */ $.parser = { // 是否自动解析 auto: true, // 可以被解析的控件 plugins:['linkbutton','menu','menubutton','splitbutton','layout', 'tree','window','dialog','datagrid', 'combobox','combotree','numberbox','validatebox', 'calendar','datebox','panel','tabs','accordion' ], // 解析函数 parse: function(context){ if ($.parser.auto){ for(var i=0; i<$.parser.plugins.length; i++){ (function(){ // 控件名 var name = $.parser.plugins[i]; // 查找class为easyui-控件名的jq对象，例如，easyui-layout var r = $('.easyui-' + name, context); if (r.length){ // 如果有这个对象，那么判断它有没有初始化函数 if (r[name]){ // 如果有直接调用 r[name](); } else if (window.easyloader){ // 如果没有用easyloader把模块的js文件载入进来，再调用 easyloader.load(name, function(){ r[name](); }) } } })(); } } } }; // 调用parse方法，实际上easyloader中已经调用了，我估计这个是给不是easyloader加载时使用的 $(function(){ $.parser.parse(); }); })(jQuery);