不在实例之间共享其配置的 jquery 插件答案

【问题标题】：jquery plugin that does not share its config between instances不在实例之间共享其配置的 jquery 插件
【发布时间】：2009-04-13 20:51:20
【问题描述】：

我正在使用一个看起来像这样的 jquery 插件：

(function($){
    var options;
    $.fn.main(opts){
        options = opts;
        //rest of code
    }
    $.fn.otherFunc(){
        //does something with options
    }
}(jQuery));

这里的问题是，如果我在页面上使用此插件 5 次，选项变量将被覆盖，因此所有 5 个实例共享这些选项。这很糟糕，我希望每个插件实例都有自己的配置。

有没有一种非骇客的 jQuery 方法来实现这一点？

编辑：

我应该补充一点，我会考虑在 $.fn.main 中为 $(this) 添加选项，作为一个有点骇人听闻的扩展，因为 $.fn.otherFunc 可能不会在主函数的 $(this) 上调用，所以我无法访问我的东西！

【问题讨论】：

标签： jquery oop jquery-plugins

【解决方案1】：

如果你将同一个插件应用到这样的几个元素上

$("#div1, #div2, #div3, #div4, #div5").main(opts);

您应该使用不同的选项将其拆分为 5 个不同的调用 - 即：

var opts1 = {...};
$("#div1").main(opts1);

var opts2 = {...};
$("#div2").main(opts2);

// etc.

另外，向$.fn.otherFunc 添加一个参数以接收它应该处理的选项对象。

编辑：如果您不是从main() 内部调用otherFunc，您应该考虑为什么要在他们之间共享选项。在这种情况下，如果您发布您的原始问题（即您尝试解决的现实问题），我们可能会提供比使用两个不同的插件共享选项而不是将它们合并为一个更好的解决方案。

【讨论】：

【解决方案2】：

您的示例中给出的代码有语法错误，我猜这会更好：

(function($){
    var options;
    $.fn.main = function(opts){
        options = opts;
        //rest of code
        alert(options.text);
    }
    $.fn.otherFunc = function(){
        //does something with options
    }
})(jQuery);

$('a:first').main({text:'txt'});
$('a:last').main({text:'some other text'});

在您的代码中，我建议将选项数据添加到 DOM 元素本身以跟踪选项，毕竟这是“行为”所针对的地方，因此将其保留在那里是很自然的，而不是在一个单独的对象。

【讨论】：