Question

所以我的整个页面基本上都是一个大表格，里面有多种类型的按钮。

多个ADD按钮，可向页面添加一组输入元素
多个REMOVE按钮可从页面中删除一组输入元素
提交按钮以提交表单
一个登录按钮，它用登录模板替换body标签的内容

我的头标记中包含以下脚本。

const clickEvent$ = rxjs.fromEvent(document, 'click');

const btnRemove = clickEvent$.pipe(
    pluck('target'),
    filter(node => node.classList.contains('btnRemove'))
).subscribe(
    // Remove a group of input elements from the page
);

const btnAdd = clickEvent$.pipe(
    pluck('target'),
    filter(node => node.classList.contains('btnAdd'))
).subscribe(
    // Add a group of input elements to page
);

const btnLogin = clickEvent$.pipe(
    pluck('target'),
    filter(node => node.id === 'btnLogin')
).subscribe(
    document.querySelector('#container').innerHTML = 'Dynamically retrieved content using an ajax call';
);

所以我的问题是：-

更改页面内容后，这些订阅会发生什么？
每次在LOGIN和HOME页面之间切换时，我需要取消订阅并重新订阅吗？

根据我的理解。因为clickEvent $ observable监听的是整个文档中的事件，而不是特定的按钮，所以我不必担心这些订阅会导致任何内存泄漏，或者我丢失了什么？

Answer 1

如果您粘贴的代码是在每次页面加载时运行的（例如，在LOGIN和HOME之间导航时），那么您最终将获得每个子脚本的多个实例。这是内存泄漏。

如果您粘贴的代码运行了一次（例如，在索引中的标记中），那么我认为可以，您的订阅应该在切换域时由浏览器进行垃圾回收。

当您退出该组件时，最好取消订阅，因为在查看其他内容时，将无用的事件侦听器保留在周围是没有意义的。

根据我的理解。因为clickEvent $ observable是监听整个文档中的事件，而不是特定事件按钮，我不必担心这些订阅会导致任何内存泄漏，还是我错过了什么？

您的理解是错误的。您无需关心旨在保持应用程序寿命的订阅，因为您可以依赖浏览器在清理脚本时清理脚本。

无论何时创建订阅，订阅都会一直保留到取消订阅（或观察到的完成）为止。每次导航到页面时创建事件监听器，而离开该页面时不删除事件监听器会导致内存泄漏。侦听文档或特定元素上的单击事件都没有关系。实际上这是相反的：在特定元素上注册事件侦听器时，也许您可以期望浏览器在从dom中删除该元素时清理它（我认为这不会处理您的订阅）。 / p>

RxJS，具有动态页面内容的可观察对象

1 个答案: