这里总结一下jquery插件的两种形式，一种是通过字面量的形式组织代码，另一种是通过构造函数的方式。下面就两种形式来分析俩个例子。
例子1：
;(function ($,window,document,undefined) {
$.fn.changeColor= function (option) {
var defined={
width:"400",
height:"500",
color:"red",
module:"animate"
};
var setting= $.extend({},defined,option);
var func={
changeColor: function (obj,setting) {
obj.css({
width:setting.width,
height:setting.height,
backgroundColor:setting.color
})
},
animateColor: function (obj, setting) {
obj.animate({
width:setting.width,
height:setting.height,
},3000)
}
};
return this.each(function () {
if(setting.module==="animate"){
func.animateColor($(this),setting);
}else if(setting.module==="css"){
func.changeColor($(this),setting);
}
})
}
})(jQuery,window,document);
通过代码可以看到，所有的局部函数都放在了$.fn.changeColor中，在里面通过func这个对象来组织函数，最后通过return 把jquery对象返回出去实现链式调用。
例子2：
;(function ($,window,document,undefined) {
var changeStyle= function (option) {
var defined={
width:"500",
height:"300",
color:"red"
};
this.setting= $.extend({},defined,option);
console.log(this.setting)
};
changeStyle.prototype={
styleColor: function (ele) {
return ele.css({
backgroundColor:this.setting.color
})
},
styleWidth: function (ele) {
return ele.css({
width:this.setting.width
});
},
styleHeight: function (ele) {
return ele.css({
////这里的return为的是在返回change.styleWidth()这个函数的基础上，把ele暴露出去。
height:this.setting.height
})
}
};
$.fn.changeStyle= function (option) {
var change=new changeStyle(option);
if(option.style==="width"){
return change.styleWidth($(this));
//这里的return为的是返回change.styleWidth()这个函数，暴露出去。
}else if(option.style==="height"){
return change.styleHeight($(this));
}else if(option.style==="color"){
return change.styleColor($(this))
}
}
})(jQuery,window,document);
上面的例子中采用的是构造函数的方式，先在changeStyle函数中传入参数并挂接到原型上，等待后续调用。然后把具体的函数，挂接到原型对象上,changeStyle.prototype。这里需要注意的两点是这里用到了两次return，为的是能把jqery对象暴露到外层，供调用。