基于插件/创作文章的插件的 jQuery 范围设置

Question

我有一个 jQuery 插件，它遵循 docs.jQuery.com 的插件/创作示例，但我无法弄清楚如何为应用插件的每个元素保留唯一设置。页面上有两个元素，每个元素都分别应用了插件。

到目前为止，这是我的代码：

(function( $ ) {

/* Default settings */
var defaults = {
    id: null,
    properties: null,
    container: '.comp-settings', /* override for .retail or .distressed */
    priceLabel: '.comp-section-header span',
    slide: slideCallback,
    minRange: 100000
};

/* Some public here: $.compSlider('method', options) */
var methods = {
    init: function( options ) {

        var settings = $.extend( {}, defaults, options );

        return this.each(function() {
            $(this).slider( settings );
        });

    }
}

/* Some methods here */
function opt( name ) {
    return settings[ name ];
}

/* Plugin namespace */
$.fn.compSlider = function( method ) {
    // Method calling logic
    if ( methods[method] ) {
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
    } else if ( typeof method === 'string' ) {
        return this.slider( method, Array.prototype.slice.call( arguments, 1 ) );
    }
};

})( jQuery )

问题：

1. 无法在插件函数中访问设置变量
2. 如果我将设置变量存储在 $(this).data('settings') 中，我仍然无法从 'opt' 函数访问 $(this).data('settings')，因为“this”不是t 元素（我相信它是 DOM 窗口。）

感谢任何帮助。

Answer 1

您无法访问compSlider 函数中的设置，因为在您的示例中它们是在init() 中定义的，因此它们是该函数的本地设置。如果您在范围内上移了声明：

$.fn.compSlider = function( method, options ) {
    var settings = $.extend( {}, defaults, options );
};

然后你就可以在那里访问它了。或者只是在 compSlider 中定义它 (var settings;) 并在 init() 中删除 var 就足够了。

更新：

在回复您的评论时，是的，抱歉，忘记了问题 #2。实际上，您将无法访问每个插件对象的设置，因为您无法在范围内“下降”。换句话说，您不能从该函数外部访问该函数的局部变量。这就是 compSlider 函数的本地设置（如果您使用我建议的结构），就您的 opt() 函数而言，它们的范围较小。

当然，您总是可以扩大范围。为此，您可以在插件的全局空间中设置一个变量，该变量存储对创建的所有对象的引用。

var compSliderObjects = [];

$.fn.compSlider = function( method, options ) {
    //store objects in compSliderObjects
};

但是，这只是一个想法，您仍然需要弄清楚您希望如何访问 compSliderObjects 并获取正确的设置。每个对象都会有一个唯一的 id 吗？如果是这样，一个对象数组 ({id: 2, settings: data})。如果没有，您需要弄清楚如何唯一标识它们并将它们从数组中提取出来。

另外，您真的需要全局访问它们吗？只需调用对象并获取设置（如小提琴所示），工作量和代码都更少。