Возвращаемые значения

В библиотеке Toastify каждый вызов метода Toastify() возвращает объект, который представляет конкретный тост. Этот объект позволяет гибко управлять его поведением и состоянием, а также взаимодействовать с ним после создания. Понимание возвращаемых значений критично для реализации динамических уведомлений и сложной логики в веб-приложениях.

Создание и хранение объекта тоста

При создании тоста:

const toast = Toastify({
    text: "Привет, мир!",
    duration: 3000,
    close: true
}).showToast();

Метод showToast() возвращает сам объект тоста. Сохранение его в переменную позволяет:

  • Закрывать тост программно.
  • Изменять стиль после отображения.
  • Отслеживать состояние видимости.
toast.hideToast();

Методы возвращаемого объекта

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

  2. hideToast() Программно скрывает тост до окончания заданного времени. Позволяет реализовать динамическое управление уведомлениями, например при изменении состояния приложения.

  3. getToastElement() Возвращает HTML-элемент тоста (<div>), что дает возможность применять дополнительные стили или слушатели событий:

const element = toast.getToastElement();
element.addEventListener("click", () => console.log("Тост кликнут"));
  1. pause() и resume() Позволяют управлять таймером скрытия. Полезно для случаев, когда необходимо задержать исчезновение тоста при наведении мыши или во время выполнения определённых операций:
toast.pause();   // Таймер приостановлен
toast.resume();  // Таймер продолжен

Объект конфигурации и его связь с возвращаемым значением

Возвращаемый объект тесно связан с конфигурацией, переданной в Toastify(). Все свойства, заданные при создании, доступны через методы объекта. Например:

const toast = Toastify({
    text: "Сохранено успешно",
    duration: 5000,
    gravity: "top",
    position: "right"
}).showToast();

После вызова showToast() можно получить доступ к элементу и изменить стили или текст динамически:

toast.getToastElement().style.background = "#4CAF50";
toast.getToastElement().textContent = "Данные обновлены";

Обработка нескольких тостов

Каждый тост, создаваемый через Toastify(), возвращает индивидуальный объект, что позволяет:

  • Одновременно управлять несколькими уведомлениями.
  • Закрывать один тост, не затрагивая остальные.
  • Реализовывать очереди уведомлений и сложные сценарии пользовательского интерфейса.
const toast1 = Toastify({ text: "Первый" }).showToast();
const toast2 = Toastify({ text: "Второй" }).showToast();

// Закрыть только первый
toast1.hideToast();

Возвращаемое значение и цепочки вызовов

Возвращаемый объект поддерживает цепочку методов, что делает код компактным и читаемым:

Toastify({
    text: "Загрузка завершена",
    duration: 4000
}).showToast()
  .getToastElement()
  .addEventListener("click", () => console.log("Тост нажат"));

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

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

Использование возвращаемого объекта помогает:

  • Реализовать условное закрытие тостов.
  • Обновлять контент без пересоздания элемента.
  • Избежать дублирования DOM-элементов при частых уведомлениях.
let toast = Toastify({ text: "Подождите..." }).showToast();

// Обновление тоста вместо создания нового
setTimeout(() => {
    toast.getToastElement().textContent = "Готово!";
    toast.resume();  // Продолжение таймера
}, 2000);

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

Оглавление