Javascript 通过data（）将DOM元素传递给jQuery对象的优点

除了个人偏好和假设这两种工作（在我下面的示例中是这样做的）之外，还有什么理由希望通过jQuery对象上的

data（）

传递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');
  }
});

---

从技术上讲，存储jQuery对象将使其处于无法进行垃圾收集的状态，但这表示的开销非常小。我将更加关注确保代码是可维护的

从可维护性的角度来看，我认为这里最大的问题是有两段代码需要保持同步。如果更改其中一个密钥（“elem”）的名称，则需要更改另一个密钥的名称。如果你改变了其中一个的传递，你也需要改变另一个的期望。尽你所能保持这些期望同步。为了减少这些期望不同步的可能性，有更多的代码（稍微多一些开销）可能是值得的

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

$(".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

及其与附近元素的关系，则更有可能保持代码的正确性。（事实上，您可以考虑将<代码> .PARTENTROR）/代码>改为<代码> .'父（“.'”）/<代码>，这样您就不必改变任何东西，只要HTML结构稍微改变。）这也有方便的副作用，只存储在该对话框存在时您实际需要的“素材”。存储jQuery对象将使其处于无法进行垃圾收集的状态，但这表示的开销非常小。我将更加关注确保代码是可维护的

从可维护性的角度来看，我认为这里最大的问题是有两段代码需要保持同步。如果更改其中一个密钥（“elem”）的名称，则需要更改另一个密钥的名称。如果你改变了其中一个的传递，你也需要改变另一个的期望。尽你所能保持这些期望同步。为了减少这些期望不同步的可能性，有更多的代码（稍微多一些开销）可能是值得的

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

$(".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

及其与附近元素的关系，则更有可能保持代码的正确性。（事实上，您可能会考虑将<代码> .PARTENTROR（）/代码>改为<代码> .'父（“.'”）/<代码>，这样您就不必改变任何东西，只要HTML结构稍微改变。）这也有方便的副作用，只存储“素材”。当此对话框存在时，您实际上需要内存。

data

仅将每个元素的条目存储在命名条目查找表中，因此您可以在其中存储任何内容。需要记住的一件事是引用被留下了，所以也许更简单的原始DOM元素会更好？@TrueBlueAussie我知道这没什么大不了的，但在所有条件相同的情况下，我想知道一个对象是否比另一个使用了更多的内存/etc。jQuery对象是DOM元素之上的一个额外对象，但是如果该对象在任何时候都存在，开销只是数据中保留的jQuery对象。小但额外。

数据

只在每个元素的命名条目查找表中存储条目，所以您可以在其中存储任何内容。需要记住的一件事是引用被留下了，所以也许更简单的原始DOM元素会更好？@TrueBlueAussie我知道这没什么大不了的，但在所有条件相同的情况下，我想知道一个对象是否比另一个使用了更多的内存/etc。jQuery对象是DOM元素之上的一个额外对象，但是如果该对象在任何时候都存在，开销只是数据中保留的jQuery对象。小但额外。一个版本比另一个更容易维护吗？看起来他们有相同的要求。或者，脱离主题，是否有更好的方式将信息传递给对话框？在发布这个问题之前，我搜索了这个问题，我所看到的只是使用了与我所做的类似的

data（）

。@user1032531:请参阅我的更新答案以获得一条建议。“最好”的方法是开放的意见和具体的使用方法。谢谢。顺便说一句，我在一个列表中使用它，每个项目都有一个数据属性，指示项目主键，当对话框打开时，使用ajax使用该主键获取记录。一个版本比另一个版本更容易维护吗？看起来他们有相同的要求。或者，脱离主题，是否有更好的方式将信息传递给对话框？在发布这个问题之前，我搜索了这个问题，我所看到的只是使用了与我所做的类似的

data（）

。@user1032531:请参阅我的更新答案以获得一条建议。“最好”的方法是开放的意见和具体的使用方法。谢谢。顺便说一句，我在一个列表中使用它，每个项目都有一个数据属性，指示项目主键，当对话框打开时，使用ajax获取