Структура классов Noty

Библиотека Noty в JavaScript предоставляет удобный интерфейс для создания уведомлений на веб-странице. Основной строительный блок — это класс Noty, который инкапсулирует всю логику уведомлений, включая их конфигурацию, отображение, анимацию и жизненный цикл.

Конструктор и параметры

Экземпляр класса создается через конструктор:

new Noty(options)

options — объект с ключевыми настройками уведомления:

  • type — тип уведомления: 'alert', 'success', 'error', 'warning', 'info'.
  • text — текст сообщения.
  • timeout — время в миллисекундах, через которое уведомление автоматически закроется.
  • layout — позиция на экране: 'top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight', 'center'.
  • theme — визуальная тема: 'mint', 'sunset', 'relax' и другие.
  • animation — объект с параметрами анимации, содержащий свойства open и close, указывающие функции анимации.
  • progressBar — логическое значение для отображения индикатора прогресса.

Пример создания базового уведомления:

let notification = new Noty({
    type: 'success',
    text: 'Данные успешно сохранены!',
    layout: 'topRight',
    timeout: 3000
});

Методы класса Noty

Экземпляр класса предоставляет ряд методов для управления уведомлением:

  • show() — отображение уведомления на странице.
  • close() — немедленное закрытие уведомления.
  • setText(newText) — изменение текста уведомления после его создания.
  • setType(newType) — динамическая смена типа уведомления.
  • on(event, callback) — регистрация обработчиков событий ('onShow', 'onClose', 'onClick' и другие).

Пример использования методов:

notification.show();
notification.on('onClose', function() {
    console.log('Уведомление закрыто');
});
notification.setText('Обновленный текст уведомления');

События и жизненный цикл уведомления

Noty реализует жизненный цикл уведомления через события:

  • onShow — срабатывает при отображении уведомления.
  • onClose — вызывается при закрытии.
  • onClick — срабатывает при клике на уведомление.
  • afterShow — срабатывает после завершения анимации появления.
  • afterClose — срабатывает после завершения анимации скрытия.

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

Классы и внутренние компоненты

Noty строится вокруг нескольких внутренних классов и компонентов:

  • NotyQueue — очередь уведомлений, обеспечивает правильное управление множественными уведомлениями.
  • NotyDom — отвечает за создание DOM-элементов уведомления, вставку их в контейнер, привязку событий.
  • NotyTimer — управляет таймером автоматического закрытия уведомления.
  • NotyAnimate — реализует открытие и закрытие уведомлений с использованием CSS-анимаций или кастомных функций.

Каждый из этих компонентов инкапсулирован и не требует прямого обращения. Основной интерфейс взаимодействия — через экземпляр Noty.

Настройка анимаций

Анимации задаются через объект animation в конфигурации:

animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutRight',
    easing: 'swing',
    speed: 500
}
  • open и close — названия классов CSS или функции обратного вызова.
  • easing — функция сглаживания.
  • speed — длительность анимации в миллисекундах.

Работа с очередью уведомлений

Noty автоматически управляет очередью через внутренний механизм NotyQueue. Если несколько уведомлений создаются одновременно, они располагаются в контейнерах в порядке добавления. Очередь учитывает позиции и количество уведомлений, чтобы новые элементы не перекрывали существующие.

Кастомизация через наследование

Хотя основной функционал предоставляется через экземпляры Noty, можно создавать собственные классы, наследуя Noty, чтобы расширять функциональность:

class CustomNoty extends Noty {
    constructor(options) {
        super(options);
    }

    highlight() {
        this.setType('warning');
        this.show();
    }
}

let custom = new CustomNoty({ text: 'Внимание!' });
custom.highlight();

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

Интеграция с CSS и темами

Библиотека поддерживает подключение нескольких готовых тем, каждая из которых содержит стили для разных типов уведомлений. Тема задается через параметр theme. Также можно создавать собственные стили, модифицируя классы .noty_type_*, .noty_bar, .noty_layout_*.

Резюме структуры

Класс Noty является ядром системы уведомлений, обеспечивая:

  • конфигурацию уведомления;
  • управление жизненным циклом и событиями;
  • динамическую настройку текста и типа;
  • интеграцию с анимациями и таймерами;
  • взаимодействие с внутренней очередью уведомлений.

Внутренние компоненты, такие как NotyDom, NotyTimer, NotyAnimate и NotyQueue, поддерживают эту функциональность, скрывая детали реализации от конечного пользователя и предоставляя простой и гибкий API.

Оглавление