RxJS, наблюдаемые с динамическим содержимым страницы

Question

Таким образом, вся моя страница в основном представляет собой большую форму с несколькими типами кнопок.

• Несколько кнопок ADD, которые добавляют группу элементов ввода на страницу
• Несколько кнопок REMOVEкоторые удаляют группу элементов ввода со страницы
• Кнопка SUBMIT для отправки формы
• Кнопка 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';
);

Итак, мой вопрос: -

• Что происходит с этими подписками при изменении содержимого страницы?
• Нужно ли отписываться и подписываться каждый раз, когда я переключаюсь между ЛОГИНОМ и ГЛАВНОЙ страницей?

В соответствии с моим пониманием.Так как clickEvent $ observable прослушивает события всего документа, а не определенную кнопку, мне не нужно беспокоиться о подписках, вызывающих утечку памяти, или я что-то упустил?

Answer 1

Если код, который вы вставили, запускается при каждой загрузке страницы (например, при переходе между LOGIN и HOME), то вы получите несколько экземпляров каждой подписки.Это утечка памяти.

Если код, который вы вставили, запускается один раз (например, в теге в индексе), то я полагаю, что все в порядке, при подписке браузер должен собирать мусор при переключении.domain.

Вам лучше отказаться от подписки при переходе из этого компонента, так как не имеет смысла держать бесполезными слушателей событий при просмотре какого-либо другого контента.

Насколько я понимаю.Поскольку clickEvent $ observable прослушивает события из всего документа, а не определенную кнопку, мне не нужно беспокоиться о тех подписках, которые вызывают утечку памяти, или я что-то упустил?

Ваше пониманиенеправильно.Вам не нужно заботиться о подписке, которая предназначена для того, чтобы «жить», пока ваше приложение, потому что вы можете рассчитывать на то, что браузер очистит ваши скрипты при его удалении.

Всякий раз, когда вы создаете подписку, он хранится до тех пор, пока вы не отмените подписку (или наблюдаемое не завершится).Создание прослушивателей событий каждый раз, когда вы переходите на страницу, и не удаляйте их, когда вы уходите с этой страницы, приводит к утечке памяти.Не имеет значения, прослушиваете ли вы щелчки по документу или конкретному элементу.На самом деле это было бы наоборот: при регистрации прослушивателя событий для определенного элемента, возможно, вы можете ожидать, что браузер очистит его, когда элемент будет удален из dom (что, я не думаю, приведет к удалению ваших подписок).