Question

我一直在使用小工具工厂开发一个jQuery小部件。

一切都很好，除了我注意到如果我在同一页面上的多个DOM元素上实例化窗口小部件，窗口小部件中的任何对象都在DOM元素之间共享，除了选项对象。

我认为所有对象和函数在窗口小部件中都有自己的实例。我显然缺少一些东西，并希望得到一些指导。

例如：

(function($) {
  $.widget("a07.BearCal", {
    options: { className : "test" },
    _glbl: { something: "" },
    _create: function() {
      this._glbl.something = this.element.attr('class');
      this.options.className = this.element.attr('class');
    },
  });
})(jQuery);

// Instantiate widget on .full
$('.full').BearCal();

//Should output full
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);

// Instantiate widget on .mini
$('.mini').BearCal();

//Should output mini
console.log($('.mini').data('BearCal')._glbl.something);

//Should output mini
console.log($('.mini').data('BearCal').options.className);

//Should output full but outputs mini
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);

这方面的工作示例：http://jsfiddle.net/NrKVP/4/

提前致谢！

Answer 1

小部件的属性：

$.widget("a07.BearCal", {
  // The stuff in here...
});

附加到您的小部件原型。窗口小部件工厂知道options并且知道它需要按窗口小部件复制它们：您的options的行为正如您所期望的那样，因为窗口小部件工厂会安排此行为。窗口小部件工厂对_glbl一无所知，因此它会保留在原型上，因此会被窗口小部件的所有实例共享。

如果您想要每个小部件副本，您可以自己复制_glbl：

  this._glbl = { something: this.element.attr('class') };

这会在每个小部件上为您提供不同的_glbl对象。

演示：http://jsfiddle.net/ambiguous/UX5Zg/

如果您的_glbl更复杂，那么您可以使用$.extend复制它并合并something：

this._glbl = $.extend(
  { },
  this._glbl,
  { something: this.element.attr('class') }
);

如果您需要深层副本，则需要使用true作为$.extend的第一个参数。需要空对象{ }，因为$.extend会将所有内容合并到其第一个对象参数中，并且您需要一个新副本。

演示：http://jsfiddle.net/ambiguous/pyUmz/1/

jquery小部件中的对象仅表现为一个实例

1 个答案: