Управление памятью

Для работы с Noty необходимо подключить библиотеку через пакетный менеджер или напрямую через CDN. Наиболее распространённый способ — установка через npm:

npm install noty

После установки подключение в проекте выглядит следующим образом:

import Noty from 'noty';
import 'noty/lib/noty.css';
import 'noty/lib/themes/mint.css';

CDN-подключение позволяет использовать библиотеку без установки:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css" />
<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>

Создание уведомлений

Создание уведомления выполняется через конструктор Noty, которому передаются объект с параметрами:

new Noty({
    text: 'Сообщение успешно отправлено',
    type: 'success',
    timeout: 3000,
    layout: 'topRight',
    theme: 'mint',
}).show();

Ключевые параметры:

  • text — текст уведомления.
  • type — тип уведомления: alert, success, warning, error, info.
  • timeout — время жизни уведомления в миллисекундах. Если false, уведомление останется до закрытия вручную.
  • layout — позиция на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center).
  • theme — визуальная тема.

Управление жизненным циклом уведомлений

Noty предоставляет методы управления уведомлениями после их создания:

  • show() — отображает уведомление на экране.
  • close() — закрывает уведомление и очищает связанные ресурсы.
  • setText(newText) — изменяет текст уведомления динамически.
  • setType(newType) — изменяет тип уведомления на лету.

Пример динамического управления:

const notification = new Noty({
    text: 'Загрузка данных...',
    type: 'info',
    timeout: false,
}).show();

setTimeout(() => {
    notification.setText('Данные успешно загружены');
    notification.setType('success');
    notification.close();
}, 3000);

Управление памятью и предотвращение утечек

При создании множества уведомлений важно контролировать их удаление. Noty автоматически удаляет DOM-элементы после закрытия уведомления, если использовать метод close().

Основные правила:

  1. Использовать close() для динамически создаваемых уведомлений Уведомления, оставленные без закрытия, сохраняются в DOM, что приводит к росту памяти при активной работе приложения.

  2. Отслеживать глобальные события Noty позволяет подписываться на события жизненного цикла: onShow, onClose, onDestroy. Это удобно для очистки связанных данных:

    const notification = new Noty({
    text: 'Процесс завершён',
    timeout: 5000,
    callbacks: {
        onClose: function() {
            console.log('Уведомление закрыто');
        },
        onDestroy: function() {
            console.log('Ресурсы уведомления освобождены');
        }
    }
}).show();

  3. Использовать фабрики уведомлений с повторным использованием В проектах с частым показом одинаковых сообщений лучше создавать шаблон уведомления один раз и переиспользовать его, изменяя только текст и тип. Это снижает нагрузку на память и ускоряет рендеринг.

  4. Ограничение количества одновременно отображаемых уведомлений Для предотвращения переполнения экрана и DOM лучше хранить массив активных уведомлений и автоматически закрывать самые старые при достижении лимита:

    const activeNoties = [];
const MAX_ACTIVE = 5;

function showNotification(message) {
    if (activeNoties.length >= MAX_ACTIVE) {
        const oldest = activeNoties.shift();
        oldest.close();
    }
    const n = new Noty({ text: message, timeout: 4000 }).show();
    activeNoties.push(n);
}

  5. Очистка слушателей и сторонних ресурсов Если уведомление использует обработчики событий или асинхронные процессы, важно отписываться от них при закрытии. onClose и onDestroy идеально подходят для таких задач.

Практические советы по оптимизации

  • Использовать timeout для коротких уведомлений и close() для длительных.
  • Минимизировать количество кастомных обработчиков на одно уведомление.
  • Переиспользовать DOM-элементы и шаблоны, особенно в SPA с частыми обновлениями интерфейса.
  • Для проектов с высокой интенсивностью уведомлений применить пул уведомлений — объект, который хранит готовые экземпляры Noty и переиспользует их.

Интеграция с SPA и фреймворками

В современных приложениях на React, Vue или Angular важно контролировать создание уведомлений через компоненты жизненного цикла:

  • В React — уничтожать уведомления в useEffect с очисткой:

    useEffect(() => {
    const n = new Noty({ text: 'Привет', timeout: 3000 }).show();
    return () => n.close();
}, []);

  • В Vue — закрывать уведомления в beforeDestroy или onUnmounted.

  • В Angular — использовать сервис, который хранит активные уведомления и закрывает их при уничтожении компонента.

Эти подходы позволяют избежать накопления неиспользуемых объектов и гарантируют эффективное управление памятью.

Оглавление