jquery - 为什么我的 JQuery 插件没有获得它自己的实例？

Question

我有一个 JQuery 1.4.2 插件，它使用一组选项。其伪代码如下:

 (function($) {
  // Shell for the plugin code
  $.fn.myPlugIn = function(options) {
    // Plugin code
    return this.each(function() {
      // for each item in selector
      options = $.extend($.fn.myPlugIn.defaults, options);
      ...do stuff
    });
    $.fn.myPlugIn.defaults = {
    header      :   null,
    position    :   'absolute',
    top         :   null,
    left        :   null,
    forinput    :   null,
    forAnchor   :   null,
    sAjaxSource :   null,
    onClick     :   null
  };
  })(jQuery);

当为单个页面上的多个元素调用插件时，选项不是唯一的 - 以前的元素选项仍然在选项中。

$(document).ready(function() {
    $("#div1").myPlugIn(
            {forinput: "input1",
             onClick: function(data){
                ... do stuff
            },
    });
    $("#div2").myPlugIn({
          forAnchor: "link1",
            onClick: function(data){
                ... do stuff
             },
        header: "Parts"
    });

});

我做错了什么？我预计每次找到该插件时，它都会使用传递给它的选项。相反，它保留第一个实例中的所有选项，并覆盖第二个实例中的任何重新初始化的属性。

如有任何回复，我们将不胜感激。预先感谢您阅读我的帖子。

Answer 1

您需要将选项合并到该实例的新对象中，如下所示:

options = $.extend({}, $.fn.myPlugIn.defaults, options);

$.extend()之后将作为参数传递的所有对象合并到第一个参数中，因此目前它们正在合并到您的 $.fn.myPlugIn.defaults 默认值中，使其受到污染以供下次使用。相反，您希望永远不要弄乱默认值(除非故意在其他地方更改它们)并将选项和默认值合并到另一个新对象中。