🎩 Автоматически отказаться от подписки в Angular

Как вы, вероятно, знаете, когда вы подписываетесь на наблюдаемый объект или событие в JavaScript, вам обычно необходимо отказаться от подписки в определенный момент, чтобы освободить память в системе. В противном случае у вас будет утечка памяти.

Утечка памяти происходит, когда часть памяти, которая больше не используется, по-прежнему занята без необходимости, а не возвращается в ОС.

В компонентах или директивах Angular вы откажетесь от подписки в ловушке жизненного цикла ngOnDestroy.

Например, если у вас есть компонент с тремя подписками:

Вам нужно создать метод ngOnDestroy и отписаться от каждого.

Хорошо, но я хочу автоматизировать процесс отказа от подписки. Что, если бы мы могли создать класс decorator, который будет делать эту работу за нас? Может быть, примерно так:

Давайте создадим декоратор класса с именем AutoUnsubscribe, чтобы очистить наш код.

В typescript или babel декоратор класса - это просто функция, которая принимает один параметр, constructor декорированного класса.

Декоратор класса применяется к constructor класса и может использоваться для наблюдения, изменения или замены определения класса.

🤓 Здесь есть три простых шага:

1. Сохраните ссылку на исходную функцию ngOnDestroy.
2. Создайте нашу версию ngOnDestroy, переберите свойства class и вызовите функцию unsubscribe(), если она существует.
3. Вызвать исходную функцию ngOnDestroy, если она существует.

Вот и все, кусок.

😁 Но…

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

В этом случае нам нужно передать аргумент нашему декоратору (массив исключенных свойств), поэтому нам нужно использовать Decorator Factory:

Фабрика декораторов - это просто функция, которая возвращает выражение, которое будет вызываться декоратором во время выполнения.

Мы просто проверяем, что имя property отсутствует в массиве blacklist перед вызовом функции unsubscribe().

Теперь мы можем использовать наш декоратор так:

😃 Готово!

Найти декоратора можно здесь. Если у вас есть дальнейшие улучшения, сделайте запрос на перенос.

Если вы хотите быть более декларативным с оператором takeUntil, вы также можете проверить мой крошечный декоратор класса, который даст вам возможность сделать это:

Не бойтесь смотреть исходный код, это всего несколько строк.

Если вам понравилась эта статья, ознакомьтесь с моей предыдущей - Сделайте свой очиститель кода с помощью декораторов.

Заключение:

Вы можете использовать декораторы в своих приложениях и создавать с их помощью мощные вещи. Декораторы предназначены не только для фреймворков или библиотек, поэтому проявите творческий подход и начните их использовать. Вы можете ознакомиться с различными декораторами здесь.

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Vue и JS!