Question

除了个人偏好并假设两者都有效（他们在下面的例子中做了），是否有人希望通过data()通过jQuery对象传递DOM元素？

例如，使用以下两个选项之一是否有任何好处？

选项1

$(".action").click(function() {
  $("#dialog").data('elem', this).dialog("open");
});

$("#dialog").dialog({
  autoOpen: false,
  open: function() {
    var elem = $(this).data('elem');
    var stuff = $(elem).parent().data('stuff');
  }
});

选项2

$(".action").click(function() {
  $("#dialog").data('elem', $(this).parent()).dialog("open");
});

$("#dialog").dialog({
  autoOpen: false,
  open: function() {
    var elem = $(this).data('elem');
    var stuff = elem.data('stuff');
  }
});

Answer 1

从技术上讲，存储jQuery对象会将更多的内存放入一个无法进行垃圾回收的状态，但这代表的开销实际上是最小的。我更专注于确保代码可维护。

从可维护性的角度来看，我认为这里最大的问题是你有两段需要彼此保持同步的代码。如果您将密钥的名称（＆＃34; elem＆＃34;）改为一个，则需要在另一个中进行更改。如果你改变你从中传递的内容，你也需要改变另一方的期望。尽一切可能保持这些期望的同步。为了减少这些期望失去同步的可能性，可能有必要拥有更多的代码（以及更多的开销）。

我认识到这是一个简单的例子，但是看看你发布的代码，在我看来，实现这两个目标（性能和可维护性）的最佳方法可能是减少信息的范围你进一步传递：

$(".action").click(function() {
  $("#dialog").data('stuff', $(this).parent().data('stuff')).dialog("open");
});

$("#dialog").dialog({
  autoOpen: false,
  open: function() {
    var stuff = $(this).data('stuff');
  }
});

通过将.action的DOM结构知识从#dialog相关代码转移到.action相关代码中，您更有可能成为如果您最终更改.action及其与附近元素的关系，则能够保持代码正确无误。（事实上，您可以考虑将.parent()更改为.parents('.whatever')，以便在HTML结构略有变化时不必更改任何内容。）这也具有仅存储的便捷副作用＆＃34;东西＆＃34;当这个对话存在时，你实际上需要在内存中。

通过data（）

1 个答案: