jQuery Plugin Authoring - Установите разные параметры для разных элементов

Question

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

$('#myDiv1').myPlugin({
    option1: 'some text',
    option2: true,
    option3: 'another option value'
});

затем снова вызовите плагин для другого объекта, скажите:

$('#myDiv2').myPlugin({
    option1: 'different text',
    option2: false,
    option3: 'value for myDiv2'
});

Тогда, если я вернусь и попытаюсь что-то сделать с # myDiv1, для которого все еще нужны исходные параметры, например:

$('#myDiv1').myPlugin.update();

у него не будет своих оригинальных опций, но они будут переопределены опциями # myDiv2. Как правильно сделать это, чтобы каждый объект сохранил исходные параметры, данные ему? (И вот пример кода того, что я делаю в плагине)

(function($) {
$.fn.myPlugin = function(options) {

    // build main options before element iteration
    var opts = $.extend({}, $.fn.myPlugin.defaults, options);

    _option1 = opts.option1;
    _option2 = opts.option2;
    _option3 = opts.option3;

    // iterate all matched elements
    return this.each(function() {
        callPluginFunctions( this, opts );
    });

};

    ....code continued....

Я понимаю, что это какой-то ползучий прицел или что-то в этом роде. Итак, как мне получить параметры, чтобы оставаться подключенным и оставаться в области действия исходного объекта (то есть # myDiv1), которому они были предоставлены.

РЕДАКТИРОВАТЬ: Проводя некоторые исследования, я вижу, что вы можете сохранять данные в объект, используя функцию .data в jQuery, и в документах говорится, что jQuery UI широко ее использует. Правильно ли здесь делать то, что параметры объекта хранятся с использованием .data, а затем при последующих ссылках использовать параметры, хранящиеся в .data ???

Answer 1

Во-первых, вы обычно захотите обработать команду в вашем методе расширения. Во-вторых, вы должны прикреплять конфигурации к каждому элементу ...

(function($){
var defaultOptions = { /* default settings here */ };

//called on the native object directly, wrap with $(obj) if needed.
function initializeObject(obj, options) {
  //assign the options to the object instance.
  $(obj).data('myPlugin-options', $.extend(defaultOptions, options) );
  //do other initialization tasks on the individual item here...
}

function updateObject(obj) {
  // use $(obj).data('myPlugin-options');
}

function setOption(obj, key, value) {
  var d = $(obj).data('myPlugin-options');
  d[key] = value;
  $(obj).data('myPlugin-options', d);
}

$.fn.myPlugin = function(command, option, val) {
  if (typeof command == "object") {
    //initialization
    return this.each(function(){
      initializeObject(this, command);
    });
  }
  if (typeof command == "string") {
    // method or argument query
    switch (command.toLowerCase()) {
      case 'option':
        //get value, return the first item's value
        if (typeof val == undefined) return this.eq(0).data('myPlugin-options')[option];
        //set option value
        return this.each(function() {
          setOption(this, option, val);
        });

      case 'update':
        return this.each(function() {
          updateObject(this);
        });
      //other commands here.
    }
  }
}
})(jQuery)

В приведенном выше примере у вас есть универсальный шаблон для расширения jQuery. Обычно полезно иметь следующее соглашение для использования.

Initialization:
  $(...).myPlugin({ initialization-options-here });
Command:
   $(...).myPlugin('command-name'); //where command can be update, etc.
Get Option:
  var myValue = $(...).myPlugin('option', 'option-name');
Set Option:
  $(...).myPlugin('option', 'option-name', newValue);

Обновлено для использования .data каждого отдельного объекта.

Answer 2

У меня возникла та же проблема, но только переданные функции перезаписывались. Прямые свойства сохранялись.

В любом случае, для дальнейшего объяснения того, что имел в виду ~ reinierpost, изменение кода на это должно работать. Вам придется везде передавать 'opts', но я думаю, что необходимо убрать опции из пространства имен всего плагина.

$.fn.myPlugin = function(options) {

    // iterate all matched elements
    return this.each(function() {
        // build main options before element iteration
        var opts = $.extend({}, $.fn.myPlugin.defaults, options);
        callPluginFunctions( this, opts );
    });
};

Редактировать: вот код из моего плагина

this.each(function() {
    var thisConfig = config;
    thisConfig = $.extend(thisConfig,settings);
    $.attach($(this),thisConfig);
});

...

$.attach = function($target,config){

Так что у меня нет «конфига» для всего плагина - только внутри каждой функции.

Answer 3

Ваши варианты доступны для всех плагинов. Переместите их внутрь каждой (). (Почему вы задаете этот вопрос? Вы в значительной степени излагаете решение самостоятельно.)