Изменения между версиями

Библиотека Noty, используемая для создания уведомлений в JavaScript, развивается достаточно динамично. Каждая новая версия приносит улучшения в функционале, API и производительности. Понимание изменений между версиями критично для корректного обновления проектов и использования последних возможностей библиотеки.

Изменения в API и способах инициализации

Ранние версии (до 3.x) использовали классическую инициализацию уведомлений через конструктор new Noty({...}) с минимальным количеством настроек. В версии 3.x и выше появился более гибкий подход к конфигурации:

  • Метод Noty.overrideDefaults(options) позволяет глобально изменять стандартные параметры уведомлений. Ранее приходилось модифицировать каждый экземпляр вручную.
  • Поддержка цепочек методов (.show(), .close(), .on() и т.д.) стала более надежной и предсказуемой. Ранние версии иногда некорректно отрабатывали события на быстро закрывающихся уведомлениях.
  • Асинхронная загрузка шаблонов и контента появилась в последних версиях, что позволяет интегрировать динамический HTML без ручного рендеринга.

Обновления шаблонов уведомлений

Шаблоны уведомлений и их разметка претерпели существенные изменения:

  • Добавлены встроенные темы (mint, sunset, relax и др.), которые можно подключать через CSS без необходимости кастомизации каждого уведомления.
  • Структура DOM элементов была переработана для лучшей совместимости с современными фреймворками. Это позволяет безопасно использовать Noty с React, Vue или Angular, минимизируя конфликты стилей.
  • Новый механизм layout-ов позволяет задавать позиции уведомлений через layout с более тонкой настройкой (topRight, bottomLeft, center). В старых версиях поддержка была ограничена, и приходилось писать кастомные CSS-классы.

Управление событиями и колбэками

Событийная система также претерпела изменения:

  • Методы .on(event, callback) и .off(event) заменили старые устаревшие подходы с callback в опциях. Это улучшает читаемость кода и позволяет более гибко управлять жизненным циклом уведомлений.

  • Новые события:

    • onShow — уведомление начинает отображаться.
    • onShown — уведомление полностью отобразилось.
    • onClose — уведомление начинает закрываться.
    • onClosed — уведомление полностью скрыто.

  • Устаревшие события, такие как afterShow и afterClose, были заменены на более унифицированные методы, что упрощает миграцию кода с предыдущих версий.

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

В Noty версии 3.x и выше появились новые возможности для управления временем:

  • Опция timeout поддерживает не только числовые значения, но и функцию, возвращающую время показа уведомления динамически.
  • Метод .stop() и .resume() позволяет приостанавливать таймер уведомления, что особенно полезно при взаимодействии пользователя с уведомлением (например, при наведении мыши).
  • Полная поддержка бесконечных уведомлений (timeout: false) с последующим программным закрытием через .close().

Улучшения производительности и совместимости

Новые версии Noty оптимизированы для работы с современными браузерами и снижают нагрузку на DOM:

  • Делегирование событий вместо прямого назначения событий каждому уведомлению.
  • Минимизация операций с DOM за счет использования виртуальных контейнеров уведомлений.
  • Совместимость с модульными сборщиками (Webpack, Vite) и современными стандартами ES6+.
  • Поддержка серверного рендеринга (SSR) в минимальном объеме для уведомлений, создаваемых на стороне клиента после загрузки страницы.

Изменения в кастомизации

Настройка внешнего вида уведомлений стала более гибкой:

  • Опции theme и type позволяют комбинировать стили иконок и цветовые схемы без необходимости писать собственный CSS.
  • Поддержка кастомных шаблонов через функцию template дает полный контроль над HTML уведомления.
  • Расширенные CSS-переменные для настройки цветов, отступов, анимаций и теней, что упрощает адаптацию к дизайну проекта.

Миграция между версиями

При обновлении с версии 2.x на 3.x необходимо учитывать:

  • События и колбэки нужно переписать на .on() и .off().
  • Опции animation и layout теперь поддерживают новые синтаксисы и форматы.
  • Старые глобальные настройки через Noty.defaults лучше заменять на Noty.overrideDefaults().
  • Проверить совместимость кастомных шаблонов с новым DOM-деревом уведомлений, чтобы избежать конфликтов CSS.

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

Оглавление