转动使用$的对象实例.扩展到适当的jquery插件

Question

我做了一些jquery插件，但它们本身不是插件，因为它们不像常规的jquery插件那样被调用，而是你必须创建一个对象的新实例，添加主div作为第一个参数，并将配置对象文字作为第二个参数。

这对我来说都很好，但我想把它变成一个真正的jquery插件。

看看下面的代码:

CSS:

p {
    color: red;
}

HTML:

<div class="p1"><p>text 1</p></div>
<div class="p2"><p>text 2</p></div>
<div class="p3"><p>text 3</p></div>

JS/jQuery:

function changeColor() {
    var self = this;
    this.config = {
        color: 'green'
    };
};
changeColor.prototype.init = function(elem, config) {
    var self = this;
    this.elem = elem;
    $.extend(this.config, config);
    self.blueColor();
};
changeColor.prototype.blueColor = function() {
    var self = this;
    $(self.elem + ' p').css('color', self.config.color);
};

(function() {
// create new instances 
    var c1 = new changeColor();
    c1.init('.p1', {
        color: 'blue'
    });

    var c2 = new changeColor();
    c2.init('.p3', {
        color: 'yellow'
    });
})();

我想要的是能够调用我的插件任何次数在同一页面(针对不同的div)，但使用正常的jquery插件方式。

所以，我不需要像下面这样启动"插件":

var c1 = new changeColor();
    c1.init('.p1', {
        color: 'blue'
    });

我想使用:

$('.p1').init({color:'blue'});

Answer 1

解决方案1: jQuery Widget Factory

见http://jqueryui.com/widget/

方案二:

(function($) {
    $.fn.testFunction = function() {
        console.log('test');        
    };
})(jQuery);
$(document).ready(function() {
    $('#test').testFunction(); 
});

http://jsfiddle.net/jSwhN/

我个人使用Widget Factory，但解决方案2很方便。