jQuery插件创作 - 为不同的元素设置不同的选项

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)的范围.

编辑:在做一些研究时,我发现你可以使用jQuery的.data函数将数据存储到一个对象,文档说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);

更新为使用每个obj的.data.