jquery插件的两种形式

这里总结一下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对象暴露到外层，供调用。