显示 Flash 消息时添加 DOM 膨胀答案

【问题标题】：Adding DOM bloat when displaying flash message显示 Flash 消息时添加 DOM 膨胀
【发布时间】：2012-12-10 01:12:39
【问题描述】：

在我的 Rails 应用程序中，当用户保存时，它使用 Ajax 保存帖子，然后执行 update.js.erb 文件。在那个文件中，我有一些 jQuery：

$('body').append('<div class="message">Saved</div>');

因为我有这种方式，所以每次用户保存时，它都会在正文中添加更多<div class="message">Saved</div>。有什么办法可以阻止它还是没关系？

【问题讨论】：

【解决方案1】：

首先，除非保存发生数千次，否则这可能无关紧要。请记住，图片非常大，因此网页中几 kb 的额外文本与几张图片相比显得相形见绌。

其次，您有几个选项可以在 DOM 中只拥有其中一个：

例如，要查找以前的消息对象（一开始是隐藏的）并将其显示一小段时间，您可以使用以下命令：

$(".message").html("Saved").show().delay(2000).fadeOut(1000);

如果您使用它，您只需将消息对象放在您的页面中一次，无论是在原始页面 HTML 中，还是在您的页面启动代码中附加一次。然后，让 CSS 将其默认为隐藏，以便仅在您需要时显示。

或者，如果您使用基于类名的 CSS3 过渡，您可以只使用 jQuery 的 addClass() 和 removeClass()。

【讨论】：

我同意，我只是想要“干净”的代码。我使用了上面的答案，即删除它然后再次添加它，类似于您的第一个选项。谢谢！
@user1919937 - 从技术上讲，重用单个消息对象而不是每次要使用时都销毁和重新创建在技术上更好的做法（一般学习）。这就是我添加代码的目的。
唯一的事情是我使用CSS来淡入淡出它使用一个类，我不认为我可以在jQuery中重新创建它可以吗？
@user1919937 - 当然，您可以使用 jQuery 的 .addClass() 和 .removeClass() 来触发基于该类的 CSS3 过渡。
那会是$('.message').html("Saved").addClass('success').delay(2000).removeClass('success');吗？

【解决方案2】：

一种懒惰（但简单）的方法是在显示新消息之前清除其他消息：

$('.message').remove();
$('body').append('<div class="message">Saved</div>');

【讨论】：