jquery easyloader

目的：为了解决页面引入大量的js和css等。

不足：初次往easyloader里加入相关js和css比较麻烦，相关依赖。。

优点：页面只需要引入jquery和easyloader这两个js就足够了，，页面比较干净；

第二个图片就是调用jqgrid相关的js.

这个是easyloader中的代码。

(function() {
	var modules = {
		//所有插件集合
		/*******************公共js部分**************************/
		//1.commons
		commons : {
			js : "js/commons.js"
		},
		parser:{js:"jquery.parser.js"},
		//2.ztree
		//3.map
		//4.json
		//5.calendar
		calendar : {
			js : "jquery.calendar.js",
			css : "calendar.css",
			dependencies : ["parser"]
		},
		jqGrid :{
			js : "jquery.jqGrid.min-3.8.js",
			css : "ui.jqgrid.css",
			dependencies : ["custom","locale"]
		},
		custom :{
			js : "jquery-ui-1.8.12.custom.min.js",
			css :"ui-lightness/jquery-ui-1.8.12.custom.css"
		},
		locale :{
			js : "i18n/grid.locale-cn.js"
		}
	};
	$.extend(modules, {
		/*******************自定义s部分**************************/
		index : {
			js : "js/index.js",
			dependencies : ["commons"]
		}
	});
	
	// 支持多语言功能
	//国际化支持组件
	var locales = {
		// 'zh_CN':'easyui-lang-zh_CN.js'
	};

	 // 加载队列  
	var queues = {};
    
	// 动态加载一个js文件
	 /** 
     * 加载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后，执行callback事件
	/** 
     * 执行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文件
	 /** 
     * 加载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);
		}
	}

	//加载单个js文件，根据自己修改url（js和css的）
	function loadSingle(name, callback) {
		queues[name] = 'loading';

		var module = modules[name];
		var jsStatus = 'loading';
		var cssStatus = (easyloader.css && module['css']) ? 'loading'
				: 'loaded';

		var url = "";
		if (easyloader.css && module['css']) {
			if (/^http/i.test(module['css'])) {
				url = module['css'];
			} else {
				url = easyloader.base + 'css/' + module['css'];
			}
			loadCss(url, function() {
				cssStatus = 'loaded';
				if (jsStatus == 'loaded' && cssStatus == 'loaded') {
					finish();
				}
			});
		}

		if (/^http/i.test(module['js'])) {
			url = module['js'];
		} else {
			url = easyloader.base + 'js/' + module['js'];
		}
		loadJs(url, function() {
			jsStatus = 'loaded';
			if (jsStatus == 'loaded' && cssStatus == 'loaded') {
				finish();
			}
		});

		function finish() {
			queues[name] = 'loaded';
			easyloader.onProgress(name);
			if (callback) {
				callback();
			}
		}
	}

	//根据name, 加载modules变量中的相应对象
	function loadModule(name, callback) {
		var mm = [];
		var doLoad = false;

		if (typeof name == 'string') {
			add(name);
		} else {
			for (var i = 0; i < name.length; i++) {
				add(name[i]);
			}
		}

		function add(name) {
			if (!modules[name])
				return;
			//是否有依赖的js项
			var d = modules[name]['dependencies'];
			if (d) {
				for (var i = 0; i < d.length; i++) {
					add(d[i]);
				}
			}
			mm.push(name);
		}

		function finish() {
			if (callback) {
				callback();
			}
			easyloader.onLoad(name);
		}

		var time = 0;

		function loadMm() {
			if (mm.length) {
				var m = mm[0]; // the first module
				if (!queues[m]) {
					doLoad = true;
					loadSingle(m, function() {
						mm.shift();
						loadMm();
					});
				} else if (queues[m] == 'loaded') {
					mm.shift();
					loadMm();
				} else {
					if (time < easyloader.timeout) {
						time += 10;
						setTimeout(arguments.callee, 10);
					}
				}
			} else {
				if (easyloader.locale && doLoad == true && locales[easyloader.locale]) {
					var url = easyloader.base + 'js/locale/' + locales[easyloader.locale];
					runJs(url, function() {
						finish();
					});
				} else {
					finish();
				}
			}
		}

		loadMm();
	}

	//定义对象
	easyloader = {
		modules : modules,
		locales : locales,
		base : '.',
		theme : 'default',
		css : true,
		locale : null,
		timeout : 2000,

		load : function(name, callback) {
			if (/\.css$/i.test(name)) {
				if (/^http/i.test(name)) {
					loadCss(name, callback);
				} else {
					loadCss(easyloader.base + name, callback);
				}
			} else if (/\.js$/i.test(name)) {
				if (/^http/i.test(name)) {
					loadJs(name, callback);
				} else {
					loadJs(easyloader.base + name, callback);
				}
			} else {
				loadModule(name, callback);
			}
		},

		onProgress : function(name) {
		},
		onLoad : function(name) {
		}
	};

	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);
		}
	}
	//别名而已， 其实就是调用load方法 
	window.using = easyloader.load;
	easyloader.base = "";
})();