引导词缀插件内存泄漏答案

【问题标题】：bootstrap affix plugin memory leak引导词缀插件内存泄漏
【发布时间】：2014-03-09 22:11:35
【问题描述】：

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

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

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

看起来有点老套——有没有更好的方法呢？在affix plugin docs 中没有看到任何内容。

【问题讨论】：

另外我能问一下你为什么要删除默认包含在 BS3 中的内置引用吗？
我不完全明白为什么会有泄漏。如果可能的话，你能详细说明一下吗？一个例子会很好。谢谢！

标签： javascript twitter-bootstrap memory-leaks bootstrap-affix

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

尽管调用$(window).off() 会删除所有监听器，即使是那些你可能想要保留的监听器。只在要删除的元素上调用 $.off() 会更安全。

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

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

【讨论】：

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