1 easyloader.js

var modules = {
      progressbar:{
           js:'jquery.progressbar.js',
          css:'progressbar.css'
      },
      numberbox:{
           js:'jquery.numberbox.js',
           dependencies:['textbox']
      },
      parser:{
           js:'jquery.parser.js'
      }
 };
 var locales = {
  'zh_CN':'easyui-lang-zh_CN.js'
 };

if (window.jQuery){
      jQuery(function(){
           easyloader.load('parser', function(){ // 即using
                jQuery.parser.parse(); // 忽然意识到，easyloader本身是不以来jQuery的。
           });
      });
 }

2 绕开easyloader

<script type="text/javascript" src="jquery.parser.js"></script>

3 组件定义

(function($){
	// 定义属性和事件的默认值
	$.fn.progressbar.defaults = {
		width: 'auto',
		height: 22,
		value: 0,	// percentage value
		text: '{value}%',
		onChange:function(newValue,oldValue){}
	};
	// 初始化方法，在入口函数中调用
	// 这是很典型的一个页面组件，在初始化的时候增加样式，增加页面元素，绑定事件
	function init(target){
	  // 增加样式
		$(target).addClass('progressbar');
		// 增加页面元素以实现功能
		$(target).html('<div class="progressbar-text"></div><div class="progressbar-value"><div class="progressbar-text"></div></div>');		
		// 页面大小调整时触发？force传true可强制改变大小
		$(target).bind('_resize', function(e,force){
				if ($(this).hasClass('easyui-fluid') || force){
						setSize(target);
				}
				// 阻止事件冒泡？
				return false;
		});
		return $(target);
	}
	
	/* 入口函数 */
	$.fn.progressbar = function(options, param){
		  // 如果第一个参数是 string 类型，那就是在调用方法
		  // 形如： $('#x').progressbar('getValue');
			if (typeof options == 'string'){
					var method = $.fn.progressbar.methods[options];
					if (method){
							return method(this, param);
					}
			}
			// 配置项默认为空对象
			options = options || {};
			// 插件扩展的基本写法
			return this.each(function(){
								// 从缓存中取状态数据
								var state = $.data(this, 'progressbar');
								if (state){
									// 如果找到，把新传入的options合并
									$.extend(state.options, options);
								} else {
									// 新创建一个，并加入缓存
									state = $.data(this, 'progressbar', {
											//$.fn.progressbar.parseOptions(this)是自定义的，稍后看代码
											// 这里可以看到配置信息的优先级
											options: $.extend({}, $.fn.progressbar.defaults, $.fn.progressbar.parseOptions(this), options),
											bar: init(this) // init()返回的是 $(target)
									});
								}
								$(this).progressbar('setValue', state.options.value);
								setSize(this);
			});
	};
	
	// 闭包之内，对$.fn.progressbar函数内可见，对外不可见
	function setSize(target,width){
		// 从缓存中取得配置信息
		var opts = $.data(target, 'progressbar').options;
		// 获得bar对象，即 init()返回的 $(target)
		var bar = $.data(target, 'progressbar').bar;
		if (width) opts.width = width;
		// parser中定义的
		bar._size(opts);
		// 更改进度条显示
		bar.find('div.progressbar-text').css('width', bar.width());
		bar.find('div.progressbar-text,div.progressbar-value').css({
			height: bar.height()+'px',
			lineHeight: bar.height()+'px'
		});
	}
	
	// 提供给用户调用的方法
	$.fn.progressbar.methods = {
	
		// 调用方式： $('p').progressbar('options').value;
		// 第一个参数jq已经被progressbar传了this
		options: function(jq){
					return $.data(jq[0], 'progressbar').options;
		},
		
		
		// 调用方式： $('p').progressbar('resize',width);
		resize: function(jq, width){
				return jq.each(function(){
					setSize(this, width);
				});
		},
		
		// 调用方式： $('p').progressbar('getValue');
		getValue: function(jq){
			return $.data(jq[0], 'progressbar').options.value;
		},
		
		// 调用方式： $('p').progressbar('setValue',90);
		setValue: function(jq, value){
			if (value < 0) value = 0;
			if (value > 100) value = 100;
			return jq.each(function(){
						var opts = $.data(this, 'progressbar').options;
						var text = opts.text.replace(/{value}/, value);
						var oldValue = opts.value;
						opts.value = value;
						$(this).find('div.progressbar-value').width(value+'%');
						$(this).find('div.progressbar-text').html(text);
						if (oldValue != value){
								opts.onChange.call(this, value, oldValue);
						}
			});
		}
	};
	
	// 调用了 $.parser.parseOptions
	// 有两处依赖  parser
	$.fn.progressbar.parseOptions = function(target){
		return $.extend({}, $.parser.parseOptions(target, ['width','height','text',{value:'number'}]));
	};
	
})(jQuery);

4、小结

easyloader是个优秀的资源加载框架。

parser是easyui的核心，实现了自动加载解析（虽然约定过于死板，不是我喜欢的风格）页面控件，同时提供优秀的页面操作基础函数（这个价值很大）。

progressbar代码清晰，结构合理，可以作为自己开发页面组件的模版。