这里总结一下jquery插件的两种形式，一种是通过字面量的形式组织代码，另一种是通过构造函数的方式。下面就两种形式来分析俩个例子。<p>
例子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);
通过代码可以看到，所有的局部函数都放在了<code>$.fn.changeColor</code>中，在里面通过<code>func</code>这个对象来组织函数，最后通过<code>return </code>把jquery对象返回出去实现链式调用。<p>
例子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);
上面的例子中采用的是构造函数的方式，先在<code>changeStyle</code>函数中传入参数并挂接到原型上，等待后续调用。然后把具体的函数，挂接到原型对象上,<code>changeStyle.prototype</code>。这里需要注意的两点是这里用到了两次<code>return</code>，为的是能把jqery对象暴露到外层，供调用。
