使用配置设置创建jQuery插件

Question

我一直在使用以下设计模式来创建jQuery插件。我很确定我从jQuery主页获得了这个概念，但是，它似乎不再在那里发布了。

我最近尝试访问该settings方法someOtherMethod ()以外的init()方法（即）中的变量，并遇到settings未定义的错误。我认为原因settings与init()方法无关。

如果我移出settings此方法，则可以从不同的方法访问它，但是，应用该插件的每个实例都不会具有其唯一的设置变量，这是不可接受的。例如，$('#id1, #id2').myPlugin({x:111});应具有一个公共settings变量，但是$('#id1').myPlugin({x:111}); $('#id2').myPlugin({x:222});每个变量应具有其唯一的设置变量。

以下面的设计模式为起点，如何settings从与该插件关联的所有方法中访问该变量，但是settings每次应用该插件时都具有唯一的变量？

(function( $ ){

    var defaults={
        x : 123,
        y : 321
    };
    // var settings={}; //Should settings be defined here???

    var methods = {
        init : function( options ) {
            var settings = $.extend(defaults, options  || {});
            //settings = $.extend(defaults, options  || {}); //Should settings just be updated and not defined here?
            return this.each(function(){
                //whatever
            });
        },

        someOtherMethod : function() {
            return $(this).each(function(){
                //do whatever and use settings variable as applicable
            })
        },
    };

    $.fn.myPlugin = function(method) {
        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 {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' );
        }    
    };

}( jQuery ));

$('#id1, #id2').myPlugin({x:111});  //Sets x=111 in settings for both
$('#id3').myPlugin({x:333});        //Sets x=333 in settings.
$('#id3').myPlugin('someOtherMethod');  //Will have access to x=333 in settings.

Answer 1

您将要保存每个元素的设置对象，以便设置将在不同的选择器之间保留。最好的方法是使用jQuery.data将设置对象附加到元素。这样，无论元素如何选择，设置都会在每次选择元素时保持不变。

然后，在的.each调用中someOtherMethod，您可以使用jQuery.data元素访问此数据。

同样，每个元素都需要一个单独的设置对象，以避免覆盖共享设置，因此：

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

将需要替换为：

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

否则，defaults每次都会用新的设置属性覆盖对象，并在所有元素之间共享。

在此示例中，我创建了一个变量名称internalPrefix，该变量名称'_myPlugin'的key 值使用来保存数据jQuery.data。我在底部添加了一些测试，以显示如何以不同的方式对其进行初始化，但是可以将该方法称为ans，但仍要知道用于对该元素进行初始化的设置。

工作示例：

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

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