0

我一直在使用小部件工厂开发一个 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/

提前致谢！

4

1 回答 1

2

小部件的属性：

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

于 2012-10-21T05:06:12.937 回答