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）的范围内。

编辑： 在做一些研究时，我发现您可以使用 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。

Answer 2

我遇到了同样的问题，但只有传递的函数被覆盖了。直接属性持续存在。

无论如何，为了进一步解释 ~reinierpost 的含义，将您的代码更改为此应该可以。您必须在任何地方传递“选择”，但我认为有必要将选项从插件范围的命名空间中取出。

$.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

您的选项是插件范围的。将它们移动到 each() 中。 （你为什么要问这个问题？你几乎自己拼出了解决方案。）