Передача параметров в колбэки

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

Основы колбэков в Noty

Каждое уведомление Noty поддерживает следующие события:

  • onShow – вызывается при отображении уведомления
  • onClose – вызывается при закрытии уведомления
  • onClick – срабатывает при клике на уведомление
  • onHover / onMouseLeave – реагируют на наведение и уход курсора

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

new Noty({
    text: 'Пример уведомления',
    type: 'alert',
    timeout: 3000,
    callbacks: {
        onShow: function() {
            console.log('Уведомление отображено');
        }
    }
}).show();

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

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

Замыкание позволяет “захватить” внешние переменные и использовать их внутри колбэка.

const userId = 42;
const message = 'Привет, пользователь!';

new Noty({
    text: 'Уведомление с параметрами',
    type: 'success',
    callbacks: {
        onShow: function() {
            console.log(`Пользователь: ${userId}, сообщение: ${message}`);
        }
    }
}).show();

В этом примере переменные userId и message доступны внутри функции onShow благодаря замыканию. Этот подход особенно полезен, когда необходимо динамически создавать уведомления с разными контекстными данными.

Использование стрелочных функций для передачи параметров

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

const notificationText = 'Новая задача добавлена';
const taskId = 101;

new Noty({
    text: notificationText,
    type: 'information',
    callbacks: {
        onClick: () => {
            console.log(`Клик по уведомлению для задачи №${taskId}`);
        }
    }
}).show();

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

Динамическая передача параметров через фабрику уведомлений

При создании нескольких уведомлений с уникальными параметрами удобно использовать функцию-генератор:

function createTaskNotification(task) {
    return new Noty({
        text: `Задача: ${task.name}`,
        type: 'alert',
        callbacks: {
            onClick: () => {
                console.log(`Открыть задачу ID: ${task.id}`);
            }
        }
    }).show();
}

const tasks = [
    { id: 1, name: 'Сделать отчет' },
    { id: 2, name: 'Подготовить презентацию' }
];

tasks.forEach(task => createTaskNotification(task));

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

Передача параметров через bind

Метод bind позволяет жестко привязать контекст и параметры к функции.

function handleClick(taskId) {
    console.log(`Задача с ID ${taskId} выбрана`);
}

const task = { id: 55 };

new Noty({
    text: 'Кликни для просмотра задачи',
    type: 'info',
    callbacks: {
        onClick: handleClick.bind(null, task.id)
    }
}).show();

Здесь handleClick.bind(null, task.id) создает новую функцию, в которой task.id будет передан как первый аргумент при срабатывании события.

Передача параметров в кнопки уведомлений

Noty позволяет добавлять кастомные кнопки с собственными колбэками. Параметры передаются аналогично: через замыкания, стрелочные функции или bind.

const task = { id: 10, name: 'Проверить почту' };

new Noty({
    text: 'Действия с задачей',
    type: 'alert',
    buttons: [
        Noty.button('Открыть', 'btn btn-success', () => {
            console.log(`Открываем задачу ${task.name}`);
        }),
        Noty.button('Закрыть', 'btn btn-error', () => {
            console.log('Закрытие уведомления');
        })
    ]
}).show();

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

Резюме по передаче параметров

  • Замыкания – самый простой способ использовать внешние переменные внутри колбэков.
  • Стрелочные функции сохраняют контекст и удобны для лаконичного кода.
  • bind позволяет жестко задать параметры и контекст для функции.
  • Для кнопок и динамических уведомлений фабричные функции обеспечивают безопасную передачу уникальных значений.

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

Оглавление