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。

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

您的選項是插件范圍的。 將它們移動到每個（）中。 （你為什么問這個問題？你自己就解決了這個問題。）