Блог

У меня есть плагин 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 (‘настройки’) Я все еще не могу получить доступ к $ (this).data (‘settings’) из функции ‘opt’, потому что «this» не является элементом (я считаю, что это окно DOM.)

Любая помощь приветствуется.

Вы не можете получить доступ к настройкам в compSlider функции, потому что в вашем примере они определены в init() , что делает их локальными для этой функции. Если вы переместили объявление в область действия:

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

Тогда вы сможете получить к нему доступ там. Или просто определить его ( var settings; ) в compSlider и удалить var в init() было бы достаточно.

Обновить:

В ответ на ваш комментарий, да, извините, забыл о проблеме № 2. Как бы то ни было, вы не сможете получить доступ к настройкам для каждого объекта плагина, потому что вы не можете «спуститься» в область действия. Другими словами, вы не можете получить доступ к локальной переменной функции извне этой функции. И это то, что настройки являются локальными для compSlider функции (если вы используете структуру, которую я предложил), они ниже по объему, насколько это касается вашей opt() функции.

Вы, конечно, всегда можете увеличить область действия. Для достижения этого вы могли бы настроить переменную в глобальном пространстве плагина, которая хранит ссылки на все созданные объекты.

 var compSliderObjects = [];

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

Однако это всего лишь идея, и вам все еще нужно выяснить, как вы хотите получить доступ к compSliderObjects и получить правильные настройки. Будет ли у каждого объекта уникальный идентификатор? Если да, то массив объектов ( {id: 2, settings: data} ). Если нет, вам нужно выяснить, как вы хотите их однозначно идентифицировать, и извлечь их из массива.

Кроме того, вам действительно нужен глобальный доступ к ним? Требуется меньше работы и кода, чтобы просто вызвать объект и получить настройки (как показано на скрипке).