javascript - 引导词缀插件内存泄漏

Question

引导词缀插件中的这些行似乎会导致内存泄漏，因为窗口获取对从未释放的词缀实例的引用。

作为一种解决方法，我使用此代码在从 DOM 中删除附加元素时释放引用：

$(window)
    .off('scroll.bs.affix.data-api')
    .off('click.bs.affix.data-api');

似乎有点hacky-有更好的方法吗？在词缀插件文档中没有看到任何内容。

Answer 1

默认情况下，bootstrap Affix在使用、和命名空间时监听scroll和click事件。$(window).bs.affix.data-api

$.off('.affix');将删除.affix命名空间中的所有侦听器。 将从窗口元素$(window).off('.affix');中删除命名空间中的所有侦听器。.affix如果你只有一个 Affix，并且将它贴在窗口上，它的效果与$.off('.affix');

添加其他命名空间使其更加具体，但除非您.affix在自己的代码中使用命名空间，否则添加的特殊性不会改变任何内容。.affix如果您正在使用任何其他引导程序元素，您不想独立删除其他命名空间。

$('.affix').off('.affix');将不起作用，因为侦听器不在 Affixed 元素上，而是在该元素 Affixed到的目标上，即窗口。

pstenstrm是正确的，没有办法检测到元素已从 DOM 中删除，或为此注入。因此，如果代码稍后重新注入元素，并且您想再次充当 Affix，则需要使用引导 JS api 再次调用 Affix。

Answer 2

我接受了@Carrie Kendall 的建议并打开了一个错误报告......对相关的错误报告进行了很好的评论。

https://github.com/twbs/bootstrap/issues/13655

在这种情况下，我们需要的是 affix 插件的“销毁”方法和 getbootstrap 站点上的一些文档，以便人们在单页应用程序中使用 affix 插件可以避免在删除其附加内容时出现内存泄漏陷阱。

Answer 3

无法检测元素何时从 DOM 中移除。词缀插件不能自动移除监听器。你这样做的方式就是正确的方式。

尽管通过调用$(window).off()您删除每个侦听器，即使是您可能想要保留的那些。仅调用$.off()要删除的元素会更安全。

$('.affix').off('.affix');

事件名称之后的 和 是.bs命名空间.affix。.data-api通过调用$.off('.affix')您删除该命名空间中声明的每个事件。这可能是做你正在做的事情的唯一更好的方法。