【原创】easyUi源码分析04--parser.js源码分析及改造

parser模块是easyloader第一个加载的模块，它的主要作用，就是扫描页面上easyui开头的class标签，然后初始化成easyui控件。

/**
 * parser.js,此模块主要是解析页面中easyui的控件 
 */
(function($) {
	$.parser = {
		// 是否自动解析
		auto : true,
		
		onComplete : function(_154) {
			alert("haha2");
		},
		
		// 可以被解析的控件 
		plugins : [ "linkbutton", "menu", "menubutton", "splitbutton", "progressbar", "tree", "combobox", "combotree", "numberbox", "validatebox", "searchbox", "numberspinner", "timespinner", "calendar", "datebox", "datetimebox", "layout", "panel",
				"datagrid", "propertygrid", "treegrid", "tabs", "accordion", "window", "dialog" ],
		
		// 解析函数  
		parse : function(context) {
			var easyLoaderPlugins = [];//需要easyLoader解析的组件数组
			for ( var i = 0; i < $.parser.plugins.length; i++) {
				var name = $.parser.plugins[i];// 控件名
				
				// 查找class为easyui-控件名的jq对象，例如，easyui-layout  
				var rrrr = $(".easyui-" + name, context);
				
				if (rrrr.length) {
					// 如果有这个对象，那么判断它有没有初始化函数 
					if (rrrr[name]) {
						// 如果有直接调用 
						rrrr[name]();
					} else {
						easyLoaderPlugins.push({
							name : name,
							jq : rrrr
						});
					}
				}
			}
			
			//用easyLoader自动加载并解析要用
			if (easyLoaderPlugins.length && window.easyloader) {
				var _156 = [];
				for ( var i = 0; i < easyLoaderPlugins.length; i++) {
					_156.push(easyLoaderPlugins[i].name);
				}
				
				easyloader.load(_156, function() {
					for ( var i = 0; i < easyLoaderPlugins.length; i++) {
						var name = easyLoaderPlugins[i].name;
						var jq = easyLoaderPlugins[i].jq;
						jq[name]();
					}
					$.parser.onComplete.call($.parser, context);
				});
			} else {
				alert("haha1");
				$.parser.onComplete.call($.parser, context);
			}
		}
	};
	
	//如果没用easyLoader且自动解析；每个页面都会执行此方法。是$(document).ready(function(){   })的简写方式
	$(function() {
		//alert("【每次页面加载完，我都会执行哦！】");
		if (!window.easyloader && $.parser.auto) {
			$.parser.parse();
		}
	});
})(jQuery);

 

因为本人反对使用easyloader.js， 所以想把这块代码改造一下，删除一些无用的代码，使代码更简洁，更直观。修改后代码如下：

/**
 * parser.js,此模块主要是解析页面中easyui的控件 
 */
(function($) {
	//定义一个类，
	$.parser = {
		//这个方法还没看懂。。晕。
		onComplete : function(_154) {
		},
		
		// 可以被解析的控件 
		plugins : [ "linkbutton", "menu", "menubutton", "splitbutton", "progressbar", "tree", "combobox", "combotree", "numberbox", "validatebox", "searchbox", "numberspinner", "timespinner", "calendar", "datebox", "datetimebox", "layout", "panel",
				"datagrid", "propertygrid", "treegrid", "tabs", "accordion", "window", "dialog" ],
		
		// 解析函数  
		parse : function(context) {
			for ( var i = 0; i < $.parser.plugins.length; i++) {
				var name = $.parser.plugins[i];// 控件名
				
				// 查找class为easyui-控件名的jq对象，例如，easyui-layout  
				var rrrr = $(".easyui-" + name, context);	//selector:用来查找的字符串,context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
				alert(rrrr);
				if (rrrr.length) {
					// 如果有这个对象，那么判断它有没有初始化函数 
					if (rrrr[name]) {
						// 如果有直接调用 
						rrrr[name]();
					} 
				}
			}
			
			//要去查一下call方法的作用，call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,
			//因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.
			$.parser.onComplete.call($.parser, context);
		}
	};
	
	//每个页面加载完都会执行此方法。是$(document).ready(function(){   })的简写方式
	$(function() {
		//alert("【每次页面加载完，我都会执行哦！】");
		$.parser.parse();	//参数为空，表示
	});
})(jQuery);

 

评论

2 楼 hdfyq 2012-05-23  

herton7362 写道

，兄弟，你这个代码是简洁了，但是出错的话所有标签都不加载， 我这里只能加载第一个，可能是easyloader还没有加载完就调用它的构造方法了，人家那么写还是有他的道理的。

我是不用easyloader.js 的， 所以删了，没事的。

1 楼 herton7362 2012-03-14  

，兄弟，你这个代码是简洁了，但是出错的话所有标签都不加载， 我这里只能加载第一个，可能是easyloader还没有加载完就调用它的构造方法了，人家那么写还是有他的道理的。