jQuery 插件 - 将选项对象分开答案

【问题标题】：jQuery Plugin - Keep options object separatejQuery 插件 - 将选项对象分开
【发布时间】：2009-07-07 15:42:15
【问题描述】：

我创建了一个运行良好的 jQuery 插件，直到我开始在一个页面上使用多个对象对其进行测试。问题是，当我从插件中的函数内部访问它时，传递给每个新插件对象的选项对象并不总是与该特定对象关联的相同。我有一种感觉，我错过了一些非常简单的东西，所以代码可能会让事情更清楚。

用于创建插件的方法

$.fn.myPlugin = function(options) {
    return this.each(function() {
        var opts = $.extend({}, $.myPlugin.defaults, options);
        new $.myPlugin($(this), opts);
    });
}

访问选项对象的函数

$.myPlugin = function($textbox, options) {
    function doSomething($textbox) {
        alert(options.someProperty);
    }
}

不管我创建插件时的 options.someProperty 是什么。插件内部对 doSomething 的调用将始终返回我创建的第一个插件对象中第一个选项对象的 someProperty，例如：

$textbox.focus(function() { doSomething($textbox); } );

即使聚焦具有不同选项对象的不同对象，这也将始终返回相同的 someProperty。

我希望我已经说得够清楚了。如果您需要更多详细信息，请告诉我。

【问题讨论】：

someproperty 到底是什么？它是嵌套的（例如，options.mouseSettings.clickSpeed）吗？
不，只是一个简单的值。 var options = { someProperty : true }
你是在 myPlugin 方法之外调用 dosomething 吗？

标签： javascript jquery jquery-plugins

【解决方案1】：

您为插件提供了对所有元素的同一 options 对象的引用。

尝试以下方法：

return this.each(function() {
    new $.myPlugin($(this), $.extend({ }, options));
});

这将每次将options 对象的成员复制到一个新对象。如果您的 options 对象中嵌套了其他对象，您可能需要一个深层副本，如下所示：$.extend(true, { }, options)

编辑：您需要在each 方法中扩展options 对象。否则，对于所有元素，您仍然拥有相同的对象。

【讨论】：

我已经在扩展选项对象。抱歉，我没有将其包含在代码示例中。不过感谢您的快速回复。
我在每个循环内移动了扩展调用，但仍然没有运气。还有什么想法吗？

【解决方案2】：

尝试改变

function doSomething($textbox) {

到

var doSomething = function($textbox) {

以确保您正在创建使用单独 closures 的单独 doSomething 方法。（第一个版本将在第一次调用时创建一个函数，并重用该函数及其闭包）

【讨论】：