Xây dựng một hệ thống thông báo Java cho các ứng dụng Web

Trong ứng dụng lớn hơn, bạn có thể kết hợp với một kiểu dáng bàn in hoặc thư viện quản lý nhà nước, nhưng đối với phần lớn ứng dụng web một cách tiếp cận trực tiếp dựa trên chức năng hấp dẫn kết hợp hoàn hảo với thao tác của mã HTML. JavaScript [FLT: 0] và phương pháp là đủ để tạo ra nền tảng. Đối với trường hợp sử dụng cao cấp hơn, như việc thu thập nhiều thông báo trong một sự kiện bắn nhanh, bạn có thể mở rộng thiết kế với hàng đợi dựa trên dãy của bộ lọc.

Bước theo sự hướng dẫn để xây dựng hệ thống của bạn

1. chuẩn bị chứa thông báo

Hộp là một yếu tố định vị cố định nơi mọi thông báo sống. Nó nên được đặt bên ngoài dòng nội dung chính để tránh nhiễu bố trí. Thêm nó vào tính năng bằng JavaScript giữ cho HTML sạch sẽ.

Dùng văn lệnh này để tạo hộp chứa và gắn nó vào cơ thể:

const container = document.createElement('div');
container.id = 'notification-container';
Object.assign(container.style, {
 position: 'fixed',
 top: '20px',
 right: '20px',
 zIndex: '9999',
 display: 'flex',
 flexDirection: 'column',
 gap: '10px',
 pointerEvents: 'none'
});
document.body.appendChild(container);

Thông báo - nó cho phép nhắp chuột qua container. Các yếu tố thông báo cá nhân sẽ ghi đè lên tính chất này khi cần để tương tác (v. d. để bấm cái nút đóng).

Viết về chức năng thông báo thế hệ 2

Hàm chính tạo một , áp dụng các lớp và nội dung, phụ thêm vào container, và tự động bỏ nó sau một thời gian đã xác định. Tùy chọn, bạn có thể hỗ trợ một nút đóng tùy chọn.

function showNotification({
 message,
 type = 'info',
 duration = 3000,
 closable = false,
 icon = ''
} = {}) {
 const notification = document.createElement('div');
 notification.className = `notification ${type}`;
 notification.setAttribute('role', 'alert');
 notification.setAttribute('aria-live', 'assertive');

 const messageSpan = document.createElement('span');
 messageSpan.textContent = icon + ' ' + message;
 notification.appendChild(messageSpan);

 if (closable) {
 const closeBtn = document.createElement('button');
 closeBtn.textContent = '×';
 closeBtn.className = 'notification-close';
 closeBtn.addEventListener('click', () => notification.remove());
 notification.appendChild(closeBtn);
 notification.style.pointerEvents = 'auto';
 }

 container.appendChild(notification);

 // Remove after duration, unless the user already dismissed it
 const timeoutId = setTimeout(() => {
 if (notification.parentNode) notification.remove();
 }, duration);

 // Clear timeout if user closes manually
 notification.addEventListener('remove', () => clearTimeout(timeoutId));

 // Animate in
 requestAnimationFrame(() => notification.classList.add('show'));
}

Phiên bản này chấp nhận một đối tượng tùy chọn, làm cho nó mở rộng. Tính năng và bảo đảm việc đọc màn hình - một thành phần khả năng truy cập quan trọng.

3. Tính năng cấp cao: Đang xếp hàng và tập hợp

Khi nhiều thông báo phát cháy liên tục, bạn có thể xếp hàng hoặc nhóm chúng để tránh quá tải người dùng. Đang thực hiện một hàng đợi đơn giản:

const notificationQueue = [];
let isProcessing = false;

function processQueue() {
 if (isProcessing || notificationQueue.length === 0) return;
 isProcessing = true;
 const next = notificationQueue.shift();
 showNotification(next);
 // Wait for the current notification to disappear before processing next
 setTimeout(() => {
 isProcessing = false;
 processQueue();
 }, next.duration || 3000);
}

function enqueueNotification(options) {
 notificationQueue.push(options);
 processQueue();
}

Để nhóm lại, cập nhật thông báo sao chép thay vì tạo thông báo mới, chẳng hạn như nếu “các thông điệp của nhóm này xuất hiện trong vòng 500m, cập nhật nội dung của chúng ta và đặt lại thời gian đã có.

4 Những thông báo thích thú và thích nghi

CNSS làm cho hệ thống hấp dẫn bằng thị giác. Hãy dùng để làm hiệu ứng chiếu và giảm dần. Các kiểu khác nhau (thông tin, thành công, lỗi, cảnh báo) nên có màu nền và biểu tượng riêng.

.notification {
 padding: 12px 20px;
 border-radius: 6px;
 color: #fff;
 font-family: system-ui, sans-serif;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 transform: translateX(120%);
 transition: transform 0.4s ease, opacity 0.4s ease;
 min-width: 280px;
 max-width: 450px;
}

.notification.show {
 transform: translateX(0);
}

.notification.info { background: #2196F3; }
.notification.success { background: #4CAF50; }
.notification.error { background: #f44336; }
.notification.warning { background: #FF9800; }

.notification-close {
 background: none;
 border: none;
 color: inherit;
 font-size: 1.4rem;
 cursor: pointer;
 margin-left: 16px;
 line-height: 1;
}

/* Fade out before removal (triggered by class removal) */
.notification.hiding {
 transform: translateX(120%);
 opacity: 0;
}

Bạn có thể thêm một “tiểu thức bài tập về nhà trước khi bỏ phần tử để tạo ra một hình ảnh hoạt hình thoát ra êm:

// In the showNotification function, replace the direct removal:
notification.addEventListener('animationend', () => notification.remove());
notification.classList.add('hiding'); // after timeout triggers fade‑out

5. Kết hợp với các trang web của bạn

Gọi từ bất kỳ người quản lý sự kiện nào.

• Form regers ) – hiển thị thành công hoặc phản hồi lỗi.
• Gọi [FLT: 1] – hiển thị các tình trạng tải hoặc thông điệp lỗi.
• Hành động Người dùng – xác nhận một xoá hoặc một đồng bộ dữ liệu.
• Sự kiện thời gian ) – tin nhắn chat hoặc máy chủ gửi đến (via WebSockets).

// Example: Handling a fetch response
fetch('/api/save', { method: 'POST', body: formData })
 .then(response => {
 if (!response.ok) throw new Error('Save failed');
 showNotification({ message: 'Data saved!', type: 'success' });
 })
 .catch(err => {
 showNotification({ message: err.message, type: 'error', duration: 5000 });
 });

document.addEventListener('visibilitychange', () => {
 if (document.hidden) {
 // optionally store pending notifications and show them when user returns
 }
});