В фреймворке Marko, как и в других современных фронтенд-решениях, важным аспектом является работа с уведомлениями и системами alerting. Эти механизмы позволяют информировать пользователей о событиях на странице, таких как ошибки, успешные действия или изменения состояния. В Marko создание таких уведомлений не ограничивается простым выводом текста на экран — благодаря реактивной модели и компонентам можно построить сложные и гибкие системы alerting.
Marko — это компонентный фреймворк, который позволяет разработчикам создавать динамические интерфейсы с минимальной нагрузкой на клиентскую сторону. Уведомления или alert-системы часто требуются для вывода информации о выполненных действиях или ошибках в процессе работы с приложением.
Компоненты Marko являются основой для всех операций с уведомлениями. Каждый компонент может быть настроен для отображения информации на основе определённых условий. Работа с уведомлениями включает в себя два основных аспекта:
Уведомления могут быть разными по своему типу: информационные, предупреждения, ошибки или успешные действия. Чтобы эффективно работать с такими уведомлениями, в Marko можно создавать компоненты, которые инкапсулируют эту логику.
<template>
<div class="alert alert-{{type}}">
<span>${message}</span>
<button on-click="closeAlert">Закрыть</button>
</div>
</template>
<script>
module.exports = class {
onCreate() {
this.type = 'info'; // Тип уведомления: 'info', 'error', 'success', 'warning'
this.message = ''; // Сообщение для отображения
}
closeAlert() {
this.message = ''; // Закрытие уведомления
}
};
</script>
<style>
.alert {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.alert-info { background-color: #d9f7ff; }
.alert-warning { background-color: #fff3cd; }
.alert-success { background-color: #d4edda; }
.alert-error { background-color: #f8d7da; }
</style>В данном примере создаётся базовый компонент уведомления, который
может быть использован для отображения сообщения на экране. Важно
заметить, что тип уведомления, будь то успех или ошибка, определяется
через свойство type, а сам текст уведомления передается
через message.
Для создания более сложных и динамичных уведомлений можно использовать реактивные возможности Marko. Это позволяет компонентам автоматически обновлять отображаемую информацию при изменении состояния.
<template>
<div class="alert alert-{{type}}">
<span>${message}</span>
<button on-click="closeAlert">Закрыть</button>
</div>
</template>
<script>
module.exports = class {
onCreate(input) {
this.type = input.type || 'info';
this.message = input.message || '';
}
closeAlert() {
this.message = '';
this.emit('close'); // Событие, уведомляющее родителя об удалении уведомления
}
};
</script>
<style>
.alert {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.alert-info { background-color: #d9f7ff; }
.alert-warning { background-color: #fff3cd; }
.alert-success { background-color: #d4edda; }
.alert-error { background-color: #f8d7da; }
</style>В этом примере уведомление может быть динамически обновлено через
input, что позволяет компоненту реагировать на изменения
данных. С помощью функции emit компонент может передавать
информацию о том, что уведомление было закрыто. Это может быть полезно
для реализации глобальной системы уведомлений, которая будет отображать
сообщения в зависимости от состояния приложения.
Когда в приложении требуется глобальная система уведомлений, можно создать контейнер, который будет управлять состоянием всех уведомлений на странице. Такой подход позволяет централизованно контролировать добавление, обновление и удаление уведомлений.
Пример компонента глобальной системы уведомлений:
<template>
<div>
<for|notification of notifications>
<Alert type="info" message="${notification.message}" on-close="removeNotification(notification)" />
</for>
</div>
</template>
<script>
const Alert = require('./Alert'); // Подключение компонента уведомлений
module.exports = class {
onCreate() {
this.notifications = [];
}
addNotification(message) {
this.notifications.push({ message });
}
removeNotification(notification) {
this.notifications = this.notifications.filter(n => n !== notification);
}
};
</script>В этом примере создаётся компонент, который управляет списком уведомлений, добавляя новые и удаляя старые. Такой компонент может быть использован на уровне приложения, обеспечивая централизованный механизм для отображения всех уведомлений, независимо от их типа.
Marko поддерживает работу с глобальными событиями, что позволяет уведомлениям автоматически появляться или исчезать в ответ на действия пользователя или изменения состояния приложения.
Пример использования глобальных событий для уведомлений:
document.addEventListener('showNotification', function(event) {
const notificationSystem = document.querySelector('#notificationSystem');
notificationSystem.addNotification(event.detail.message);
});
// Отправка события для отображения уведомления
document.dispatchEvent(new CustomEvent('showNotification', { detail: { message: 'Ошибка при сохранении данных' }}));В данном примере создается событие showNotification,
которое может быть вызвано в любом месте приложения для добавления
нового уведомления в систему.
Для улучшения пользовательского опыта можно добавить анимации или задать время жизни уведомлений, после чего они будут автоматически скрываться.
Пример временного уведомления:
<template>
<div class="alert alert-{{type}}" style="animation: fadeIn 0.5s;">
<span>${message}</span>
</div>
</template>
<script>
module.exports = class {
onCreate(input) {
this.type = input.type || 'info';
this.message = input.message || '';
setTimeout(() => this.message = '', 5000); // Удаление уведомления через 5 секунд
}
};
</script>
<style>
.alert {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.alert-info { background-color: #d9f7ff; }
.alert-warning { background-color: #fff3cd; }
.alert-success { background-color: #d4edda; }
.alert-error { background-color: #f8d7da; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>В этом примере добавляется анимация для плавного появления уведомления, а также установлено время жизни для уведомлений — они исчезают через 5 секунд после отображения.
Использование системы уведомлений в Marko требует разработки гибкой и реактивной структуры компонентов. Благодаря компонентному подходу и возможностям фреймворка по обработке состояния и событий можно легко создавать эффективные и адаптивные решения для alerting. Такой подход позволяет не только информировать пользователей о событиях на странице, но и организовать централизованное управление уведомлениями в рамках всего приложения.