RxJS，具有動態頁面內容的可觀察對象

Question

因此，我的整個頁面基本上都是具有多種按鈕類型的大型表單。

• 多個ADD按鈕，可向頁面添加一組輸入元素
• 多個REMOVE按鈕可從頁面中刪除一組輸入元素
• 提交按鈕提交表格
• 一個LOGIN按鈕，用登錄模板替換body標簽的內容

我的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';
);

所以我的問題是：

• 更改頁面內容后，這些訂閱會如何處理？
• 每次在LOGIN和HOME頁面之間切換時，我需要取消訂閱並重新訂閱嗎？

據我了解。 因為clickEvent $ observable監聽的是整個文檔中的事件，而不是特定的按鈕，所以我不必擔心那些訂閱會導致任何內存泄漏，或者我會丟失某些東西嗎？

Answer 1

如果您粘貼的代碼是在每次頁面加載時運行的（例如，在LOGIN和HOME之間導航時），那么您最終將獲得每個子腳本的多個實例。 這是內存泄漏。

如果您粘貼的代碼運行了一次（例如，在索引中的標記中），那么我認為可以，您的訂閱應該在切換域時由瀏覽器進行垃圾回收。

離開該組件時，最好取消訂閱，因為在查看其他內容時，使無用的事件偵聽器不存在是沒有意義的。

據我了解。 因為clickEvent $ observable監聽的是整個文檔中的事件，而不是特定的按鈕，所以我不必擔心那些訂閱會導致任何內存泄漏，或者我會丟失某些東西嗎？

您的理解是錯誤的。 您無需關心旨在保持應用程序壽命的訂閱，因為您可以依賴瀏覽器在清理腳本時清理腳本。

每當您創建訂閱時，它都會一直保留到您取消訂閱（或觀察到的完成）為止。 每次導航到頁面時創建事件監聽器，而離開該頁面時不刪除事件監聽器會導致內存泄漏。 偵聽文檔或特定元素上的單擊事件都沒有關系。 實際上這是相反的：在特定元素上注冊事件偵聽器時，也許您會期望瀏覽器在將元素從dom中刪除后會對其進行清理（我認為這不會處理您的訂閱）。