jquery 面向对象API使用

(function($) {
	
	$.extend($.fn, {
		//=====================================================================================
		//验证码
		captcha : function(options) {
			if (!this.length) {
				options && options.debug && window.console && console.warn( "nothing selected, can't captcha, returning nothing" );
				return;
			}
			
			//判断是否注册过验证码
			var captchaObj = $.data(this[0], 'captcha');
			if ( captchaObj ) {
				$(this).attr("src", captchaObj.settings.url + "?" + Math.random());
				return captchaObj;
			}
			
			var opts = {};
			if(typeof options == "string"){
				opts = $.extend({}, $.fn.captcha.defaults, {url:options});
			}else {
				opts = $.extend({}, $.fn.captcha.defaults, options);
			}
			captchaObj = new $.captchaObj( opts, this[0] );
			$.data(this[0], 'captcha', captchaObj);
			return captchaObj;
		}
		//=====================================================================================
	});
	
	$.fn.captcha.defaults = {
		url : "",
		show: true
	};
	
	//=====================================================================================
	//验证码
	$.captchaObj = function(options, element){
		this.settings = options;
		this.currentElement = element;
		this.init();
	}
	
	$.extend($.captchaObj,{
		prototype: {
			init : function(){
				var url = this.settings.url;
				if(this.settings.show){
					$(this.currentElement).attr("src", this.settings.url + "?" + Math.random());
				}
				$(this.currentElement).bind("click", function(){
					$(this).attr("src", url + "?" + Math.random());
				}).bind("mouseover", function(){
					$(this).css("cursor", "pointer");
				});
			}
		}
	});
})(jQuery);

上面的jquery面向对象涉及到的知识点有

1.jquery.extend 函数的使用

extend($.captchaObj,  src1, src2, src3) 会将src1,src2,src3 合并到 $.captchaObj中, 这样是修改了$.capachaObj的结构的

如果想得到合并的结果，不改变$.capachaObj的结构则按下面的方式

var result = $.extend({}, {name:"Troy", age : 21}, {name:"zero", sex:"boy"})

合并后的结果是 result = {name:"zero", age : 21,  sex : "boy"} 后面的会覆盖前面的属性

上面的参数中如果省略 $.captchaObj,那么就是将src直接添加到调用$.extend的对象上去

就是将src对象添加到的jquery的全局对象中

2. jQuery.data() 的作用是为普通对象或 DOM Element 附加（及获取）数据。类似于缓存的东东

具体讲解可以参考这篇文章       http://www.cnblogs.com/ellisonDon/archive/2012/08/12/2635316.html

3. this[0] 表示调用captcha方法的对象,这里为调用captcha方法的dom对象

4. $.fn是指jquery的命名空间,加上fn的方法以及属性,会对jquery实例每一个有效

jQuery为开发插件提拱了两个方法，分别是： 
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
jQuery.fn.extend(object);给jQuery对象添加方法