【转载】easyUi源码分析03--easyloader源码详细注释

原帖地址： http://blog.csdn.net/baozhifei/article/details/6430586

 

本人观点：这个作者的注释更详细，所以转载记录之。【本人还是不建议使用easyloader.js】

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

 

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的控件。

 < title > Demo1  title >
 < script   type = "text/javascript"   src = "jquery-easyui-1.2.3/jquery-1.4.4.min.js" >  script >
 < script   type = "text/javascript"   src = "jquery-easyui-1.2.3/easyloader.js" >  script >
  head >

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

 < title > Demo2  title >
 < link   rel = "stylesheet"   type = "text/css"   href = "jquery-easyui-1.2.3/themes/default/easyui.css" >
 < link   rel = "stylesheet"   type = "text/css"   href = "jquery-easyui-1.2.3/themes/icon.css" >
 < script   type = "text/javascript"   src = "jquery-easyui-1.2.3/jquery-1.4.4.min.js" >  script >
 < script   type = "text/javascript"   src = "jquery-easyui-1.2.3/jquery.easyui.min.js" >  script >
  head >

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

 

 

/**
 * easyloader - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ [email protected] ] 
 * 
 */
(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