Шаблон шины событий с хранилищами
Реализуйте глобальную шину событий с помощью доступного для записи хранилища для слабосвязанного обмена данными.
«Шаблон шины событий с хранилищами» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Шина событий
Шина событий — это глобальный канал публикации и подписки для взаимодействия без связанности.
Реализация с записываемым хранилищем
Записываемое хранилище, содержащее последнее событие, может выступать в роли простой шины.
const bus = writable(null);
export function emit(event) { bus.set(event); }
export function on(fn) { return bus.subscribe(e => { if (e) fn(e); }); }Вариант использования
Один компонент отправляет событие всплывающего уведомления, а другой подписывается на него и показывает уведомления глобально.
Разделение связности
Отправитель и получатель не импортируют друг друга; оба зависят от шины.
Безопасность типов
Задавайте типы событий как размеченное объединение, чтобы подписчики работали безопасно.
type Event = { type: "toast"; text: string } | { type: "logout" };Однократная подписка
Оберните подписку автоматической отменой через сокращенный синтаксис `$` внутри компонентов.
Несколько шин
Разделяйте по domain: appBus, modalBus и audioBus, чтобы не создавать один огромный канал.
Антипаттерн
Чрезмерное использование шин событий приводит к неявному потоку данных. Предпочитайте прямые свойства и хранилища, когда владение очевидно.
Семантика воспроизведения
Записываемые хранилища содержат только последнее значение. Для полной истории событий используйте хранилище-массив.
Внешние события
Шина событий также может оборачивать события браузера, например изменение размера окна или сочетания клавиш.
Тестирование
Тесты могут отправлять события и проверять, что подписчики реагируют надлежащим образом.
Быстрая проверка
Каково преимущество шины событий?
Итоги
Создайте простую шину событий с помощью записываемого хранилища. Отправляйте события и подписывайтесь на них для взаимодействия между независимыми частями приложения.
Часто задаваемые вопросы
Урок «Шаблон шины событий с хранилищами» бесплатный?
Да — полный текст урока «Шаблон шины событий с хранилищами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Шаблон шины событий с хранилищами»?
Реализуйте глобальную шину событий с помощью доступного для записи хранилища для слабосвязанного обмена данными. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Шаблон шины событий с хранилищами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Архитектура хранилищ: модули функций
- Шаблон шины событий с хранилищами
- Оптимистичные обновления интерфейса
- Отмена и повтор действий с историей хранилища