jQuery插件开发

jQuery插件开发
查看jQuery源码可以发现jQuery.fn = jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象，jQuery的DOM操作方法都在jQuery.fn 对象上定义的，然后jQuery对象就可以通过原型继承这些方法

基础版jQuery插件

$.fn.changeStyle = function(colorStr){
	this.css("color",colorStr);
}
$("p").changeStyle("red");

满足链式调用的jQuery插件

$.fn.changeStyle = function(colorStr){
	this.css("color",colorStr);
	return this;
}
$("p").changeStyle("red").addClass("red-color");

实现链式调用的关键点就一行代码return this，插件中加上这行代码，那么在插件执行完之后，就会把当前的jQuery对象返回，然后就可以在插件方法后面继续调用其他jQuery方法。

防止符号污染的jQuery插件有很多js库都会使用符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用.fn对象来定义的，那么这些插件使用的时候就会受到其他使用变量的js库的影响。对于这种情况可以使用立即执行函数通过传参的方式封装插件。

(function($){
	$.fn.changeStyle = function(colorStr){
		this.css("color",colorStr);
		return this;
	}
}(jQuery));

因为使用了立即执行函数，所以此时的$只属于这个立即执行函数的函数作用域，这样的可以避免$符号的污染

可以接受参数的jQuery插件
继续上面的例子，假如我还想为这个插件添加一个设置标签元素内容文字大小的功能，那么我可以这么来实现

(function($){
	$.fn.changeStyle = function(option){
		this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");
		return this;
	}
}(jQuery))
$("p").changeStyle({colorStr:"red",fontSize:14})

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值

(function($){
	$.fn.changeStyle = function(option){
		var defaultSetting = {colorStr:"green",fontSize:12};
		var setting = $.extend(defaultSetting,opetion);
		this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
		return this;
	}
}(jQuery))
$("p").changeStyle({colorStr:"red"});

上面的代码用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，$.extend方法还有一种作用是用来扩展jQuery对象本身
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

总结：定义插件的方法除了上面说的用$.fn 来定义，还有另外一种方式来定义插件，那就是使用$.fn.extend方法。
PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。