`
hwfly
  • 浏览: 27629 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

Jquery-002 easyui 源代码分析之easyloader-- 转载

 
阅读更多
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的控件。


先看Demo1例子，再分析源代码。 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<body>
	<div class="easyui-panel" title="Demo1" fit="true" collapsible="true" minimizable="true" maximizable="true" closable="true" style="width: 100%; height: 200px;" >
    	easyloader会自动解析这个div，因为class属性中带有easyui开头的类！
    </div>
</body>
</html>


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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<body>
	<div class="easyui-panel" title="Demo1" fit="true" collapsible="true" minimizable="true" maximizable="true" closable="true" style="width: 100%; height: 200px;" >
    	easyloader会自动解析这个div，因为class属性中带有easyui开头的类！
    </div>
</body>
</html>


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

/**
 * 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();
			});
		});
	}
	
})();

到这里easyloader就分析结束了，如果你仔细看过了，相信一定会使用easyloader了。、

Jquery001 （easy-ui） API全集+ DEMO和源码
http://hwfly.iteye.com/blog/2039357
分享到：
| Flex 跨域 解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery-easyui-1.3.3未压缩混淆版(真正含jquery-easyui.js及easyloader.js源码).rar

    在这个未压缩混淆的版本“jquery-easyui-1.3.3”中，我们可以直接查看源代码，以便于理解和学习其内部机制。这个版本特别适用于研究在IE8环境下EasyUI的兼容性，因为它是最后一个支持IE8的版本。 jQuery 1.12.4 是...

    jQuery EasyUI jquery-easyui-1.5.5.6

    10. `src`目录：源代码文件，开发者可以查看和修改原始JavaScript代码，以满足特定需求或进行二次开发。 jQuery EasyUI的主要特点包括： - 基于jQuery，易于学习和使用。 - 提供了丰富的UI组件，简化前端开发工作。...

    jquery-easyui-1.2.3实例参考

    jQuery EasyUI遵循GPL协议，允许自由使用和修改源代码，但若用于商业项目，则需购买商业许可证。 5. **版本更新与变更** "changelog.txt"记录了jQuery EasyUI的版本更新历史，开发者可以通过阅读这个文件了解新...

    EasyUI 完整源代码 1.5.0

    在本压缩包中，`jquery.easyui.all.js` 包含了所有EasyUI组件的未压缩源代码，而`jquery.easyui.min.js`是这些组件的压缩版本，适用于生产环境以优化加载速度。 2. **jQuery**：`jquery.min.js` 是jQuery库的最小化...

    jquery-easyui-1.3.1

    9. **src** 文件夹：源代码目录，对于希望深入了解EasyUI内部工作原理或者想要自定义组件的开发者来说非常有价值，可以查看和修改源码。 在实际项目中，`jquery-easyui-1.3.1` 可以帮助开发者快速创建用户友好的...

    jquery-easyui-1.3.1.zip

    `src`目录则包含了EasyUI组件的源代码，对于需要深入了解或定制组件的开发者来说，这是一个宝贵的资源。通过阅读和修改源码，开发者可以实现更复杂的功能，或者优化现有组件以适应特定需求。 总的来说，jQuery ...

    jquery-easyui-1.3.6

    10. `src`：源代码目录，对于深入理解EasyUI的工作原理和进行自定义扩展非常有用。 通过jQuery EasyUI，开发者可以轻松实现诸如窗口、表格、菜单、树形结构、按钮、表单验证等常见的前端交互功能。其组件设计遵循W3...

    jquery-easyui-1.10.1.zip

    `src`目录则包含了EasyUI的源代码，对源码进行深入研究可以帮助开发者更全面地理解其工作原理，并可能进行定制化开发。 最后，`plugins`目录包含了额外的插件，这些插件是对EasyUI组件的扩展，如表单验证、日期选择...

    jquery-easyui-1.5.3

    - **src**: 源代码目录，包含未压缩的JavaScript文件，方便开发者查看和定制。 - **demo**: 示例目录，提供了丰富的示例代码，帮助开发者理解和学习如何使用各个组件。 使用jQuery EasyUI时，开发者可以借助其组件...

    jquery-easyui 1.5.2API

    ├src：easyui部分非核心组件的源代码库（核心大组件的源代码并未公布，比如datagrid、combo和tree等。） │ ├themes：easyui的皮肤库（皮肤库中会收录所有网上能找得到的皮肤，所以大家不用再去自己乱搜了。） │ ...

    jquery-easyui-1.5.4

    9. **src**：源代码目录，对于开发者来说，这是一个深入了解和定制EasyUI的好地方。 10. **demo**：示例文件夹，提供了各种组件和功能的实际应用案例，帮助开发者快速上手。 jQuery EasyUI 提供了一系列丰富的组件...

    jquery-easyui-1.10.17.zip

    3. **src**：源代码目录，包含了未压缩的JavaScript源文件。对于需要深度定制或了解内部工作原理的开发者来说，这是一个宝贵的资源。通过阅读源码，可以更好地理解和修改EasyUI的行为。 4. **jquery.easyui.mobile....

    Jquery-easyui-1.4 modeo

    - **src**: 源代码目录，对于深入理解 EasyUI 的工作原理很有帮助。 - **themes**: 主题文件夹，存放各种预设的 UI 主题，可以自定义以满足不同的设计需求。 **3. 学习与实践** 对于初学者来说，可以通过以下步骤...

    jquery-easyui-1.3.6.zip

    - `src`：EasyUI的源代码目录，对于想要深入理解和定制EasyUI的开发者来说，这是一个宝贵的资源。 6. **演示与插件**： - `demo`：提供了丰富的示例，展示如何使用EasyUI组件，便于学习和参考。 - `plugins`：...

    jquery-easyui-1.4.3

    7. `src` 文件夹：源代码目录，对于有深度定制需求的开发者，可以通过查看和修改源码来实现特定功能。 8. `plugins` 文件夹：扩展插件的集合，EasyUI允许开发者通过插件方式添加更多功能，如日期选择器、树形菜单等...

    jquery-easyui-1.8.4.zip

    - **src**：源代码目录，对于开发者来说，可以深入理解组件的实现细节。 - **demo**和**demo-mobile**：包含了一系列示例，帮助开发者了解和学习如何使用各个组件。 通过以上分析，我们可以看到jQuery EasyUI 1.8.4...

    jquery-easyui-1.8.8.zip

    `src`目录包含源代码，对于希望定制或深入理解EasyUI工作原理的开发者来说，这是个宝贵的资源。 总的来说，jQuery EasyUI 1.8.8为开发者提供了一套完整的工具集，使得创建功能丰富的Web应用变得易如反掌。通过合理...

    jquery-easyui-1.9.5.zip

    `src` 目录下则是jQuery EasyUI的源代码，对于希望深入理解EasyUI工作原理或者想要对其进行定制的开发者来说，这是一个宝贵的资源。 总结起来，jQuery EasyUI 1.9.5是一个全面且易用的前端开发框架，它通过与jQuery...

    jquery-easyui-1.3.4

    8. **src**：源代码目录，对于开发者来说，可以查看和定制组件的实现。 9. **demo**：演示示例文件夹，提供了各种组件的使用示例，有助于学习和理解 EasyUI 的功能。 **总结** jQuery EasyUI 1.3.4 为开发者提供...

Magicbox
Global site tag (gtag.js) - Google Analytics