[英]RxJS, observables with dynamic page content
So my entire page is basically a large form which has multiple type of buttons. 因此,我的整个页面基本上都是具有多种按钮类型的大型表单。
I have following script included in my head tag. 我的head标签中包含以下脚本。
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';
);
So my question is :- 所以我的问题是:
According to my understanding. 据我了解。 Because clickEvent$ observable is listening to events from the entire document and not a particular button, I don't need to worry about those subscriptions causing any memory leak, or am i missing something? 因为clickEvent $ observable监听的是整个文档中的事件,而不是特定的按钮,所以我不必担心那些订阅会导致任何内存泄漏,或者我会丢失某些东西吗?
If the code you pasted is run on each page load (for instance, when navigating between LOGIN and HOME), then you will end up with multiple instances of each subcription. 如果您粘贴的代码是在每次页面加载时运行的(例如,在LOGIN和HOME之间导航时),那么您最终将获得每个子脚本的多个实例。 This is a memory leak. 这是内存泄漏。
If the code you pasted is run once (for instance, in a tag in the index), then I suppose it is ok, you subscriptions should be garbage collected by the browser when switching domain. 如果您粘贴的代码运行了一次(例如,在索引中的标记中),那么我认为可以,您的订阅应该在切换域时由浏览器进行垃圾回收。
You better unsubscribe when navigating out of that component as it does not make sense to keep the useless event listeners around when viewing some other content. 离开该组件时,最好取消订阅,因为在查看其他内容时,使无用的事件侦听器不存在是没有意义的。
According to my understanding. 据我了解。 Because clickEvent$ observable is listening to events from the entire document and not a particular button, I don't need to worry about those subscriptions causing any memory leak, or am i missing something? 因为clickEvent $ observable监听的是整个文档中的事件,而不是特定的按钮,所以我不必担心那些订阅会导致任何内存泄漏,或者我会丢失某些东西吗?
Your understanding is wrong. 您的理解是错误的。 You don't need to care about a subscription that is intended to 'live' as long as your app, because you can rely on the browser cleaning your scripts when navigating away of it. 您无需关心旨在保持应用程序寿命的订阅,因为您可以依赖浏览器在清理脚本时清理脚本。
Whenever you create a subscription, it is kept around until you unsubscribe (or the observable completes). 每当您创建订阅时,它都会一直保留到您取消订阅(或观察到的完成)为止。 Creating event listeners every time you navigate to a page and not removing them when you navigate away from this page creates a memory leak. 每次导航到页面时创建事件监听器,而离开该页面时不删除事件监听器会导致内存泄漏。 It does not matter if you listen for click events on the document or a specific element. 侦听文档或特定元素上的单击事件都没有关系。 In fact that would be the inverse: when registering an event listener on a particular element, maybe you can expect the browser to clean it up when the element is removed from the dom (which I don't think will dispose your subscriptions). 实际上这是相反的:在特定元素上注册事件侦听器时,也许您会期望浏览器在将元素从dom中删除后会对其进行清理(我认为这不会处理您的订阅)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.