在显示flash消息时增加DOM膨胀

Adding DOM bloat when displaying flash message

本文关键字：增加 DOM 膨胀 消息 显示 flash      更新时间：2023-09-26

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

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

因为我这样做，每次用户保存时，它都会在主体中添加更多的<div class="message">Saved</div>。有什么办法能让我停止，还是无所谓?

在显示新消息之前清除其他消息是一种懒惰(但简单)的方法:

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

首先，除非保存发生了数千次，否则这可能无关紧要。请记住，图片是非常大的，所以在一个网页中，几kb的额外文本与一些图片相比显得苍白。

第二，您有几个选项，只能在DOM中使用其中一个:

  1. 显示给用户后，然后从DOM中删除它(也许是定时器)。
  2. 有一个且只有一个消息，并在需要时显示/隐藏它(这可能是最简单的)。
  3. 查看是否已经在页面中并重用它。
例如，要查找以前的消息对象(开始时是隐藏的)并在短时间内显示它，您可以使用: 
$(".message").html("Saved").show().delay(2000).fadeOut(1000);

如果你使用这个，你只需要把消息对象放在你的页面中一次开始，要么在原始页面HTML中，要么在页面启动代码中追加一次。然后，让CSS默认为隐藏，这样它只在你想要的时候显示。

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

相关文章：