Question

我想知道存储非活动HTML元素的推荐方法是什么。

作为HTML字符串：

var box = $('.box');
this.prev_box = box.html();
box.remove();

/* later */
$('body').append(this.prev_box);

作为对象：

this.prev_box = $('.box');
this.prev_box.detach();

/* later */
$('body').append(this.prev_box);

我知道在第一种情况下我必须再次绑定事件处理程序，但除此之外还有什么我应该知道的吗？它会比第二种方法消耗更少的内存吗？

Answer 1

在考虑哪种方案最适合您时，您需要考虑为什么关注内存。您是否已经看到内存故障？您是否跟踪了许多元素，您知道会出现内存问题吗？如果这些不适用，因为你只存储了少数几个元素，那么考虑一个保持代码简单而不是更复杂的选项。

有三种方法可以“存储”dom元素。每个人都有利弊。我将简要介绍一下：

作为元素对象

这是您在第一个示例中显示的内容。这样做的好处是它几乎保留了所有内部状态（类，样式，事件监听器等），这使得很容易重新添加到现场dom中。由于它已经是一个dom元素，因此将其添加回来也是相对有效的，因为它是浏览器的原生格式。

缺点是它可能占用大量内存（对属性和其他内部状态的引用）。

作为字符串表示

这是你的第二个例子。这还可以维护您可能动态添加的类名称和样式。

缺点是它也占用了相当多的内存，因为它包含已设置的所有属性的字符串表示形式（类，样式，ID等）。由于浏览器需要将其解析回dom元素，因此恢复效率也较低。

自定义状态表示

我建议在极端情况下选择此选项，例如存储数千个元素。

在这种情况下，您编写自定义代码以仅存储与基本元素的差异，例如已添加或删除的类或样式。换句话说，只是将元素恢复到其先前状态所需的最少量信息。好处是你可以调整它以使用最少的内存来存储和恢复元素。

缺点是它增加了很大的代码复杂性。