easyloader.js源碼閱讀

想找一份好的jsui 來做軟件的外殼，最好是原創的，看了不少jquery代碼，發現了不少的jqueryplugins.但是都比較零散，唯獨jquery easyui ,比較系統。
功能和元素都比較全，自己想寫一套類似的，可惜現在功力還不行。所以先學習easy-ui的源碼吧。今天看了裏面的第一個類。eayload。當然看這個源碼之前，最好將jquery源碼先讀一遍。因爲easyui是基於jquery寫的。如果想對jquery 深入瞭解，最好下一番功夫在ec-262-3上，詳讀後會對scope ,excute-context ,this等有更深入瞭解。

好了 言歸正傳，easyloader.js可以說是easyui的最基礎的一個類，它負責加載js,css,以及locale文件，裏面的結構比較簡單，

/**
 * easyloader - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ [email protected] ] 
 * 
 */
(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 dom
		script.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的狀態設置爲loading
		queues[name] = 'loading';

		var module = modules[name];
		//把js狀態設置爲loading
		var 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;
			//如果有，查看它是否依賴其他plugin
			var 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 module
				if (!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,然後加載js
		load: 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.js
		if (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();//渲染方法
			});
		});
	}

})();