ایجاد یک سیستم اعلان جاوا اسکریپت سفارشی برای Web Apps

در برنامه های بزرگتر، شما ممکن است با یک الگوی مدیریت یک یا یک کتابخانه مدیریت دولتی ادغام کنید، اما برای اکثر برنامه های وب یک رویکرد تابع ساده همراه با دستکاری DOM به طور کامل کار می کند. جاوا اسکریپت (FLT:0) API و روش مدیریت (FLT:1) برای ایجاد صف کافی است.

راهنمای گام به گام برای ساخت سیستم شما

۱- آماده سازی Container اعلان

این ظرف یک عنصر ثابت است که در آن تمام اعلان ها زنده می مانند، باید خارج از جریان اصلی محتوا قرار داده شود تا از تداخل در طرح جلوگیری شود. اضافه کردن آن به صورت پویا از طریق جاوا اسکریپت HTML شما را تمیز نگه می دارد.

از این اسکریپت برای ایجاد ظرف و اتصال آن به بدن استفاده کنید:

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);

توجه کنید - اجازه می دهد کلیک ها از طریق ظرف عبور کنند. عناصر اطلاع رسانی فردی این ملک را زمانی که نیاز به تعاملی دارند، باطل می کنند (به عنوان مثال، برای دکمه های نزدیک).

۲- نوشتن تابع اعلان نسل

تابع اصلی یک ایجاد می کند، کلاس ها و محتوا را اعمال می کند، آن را به ظرف می دهد و پس از مدت مشخص، آن را به صورت اختیاری حرکت می دهد.

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'));
}

این نسخه یک شیء گزینه را می پذیرد و آن را غیر قابل استفاده می کند. و ویژگی های اطمینان از پشتیبانی صفحه نمایش - یک جزء دسترسی حیاتی.

ویژگی های پیشرفته: Queuing و Grouping

هنگامی که بسیاری از اعلان ها در موفقیت سریع آتش می زنند، ممکن است بخواهید آنها را صف کنید یا گروه کنید تا از یک صف ساده جلوگیری کنید:

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();
}

برای گروه بندی، به روز رسانی اعلان های تکراری به جای ایجاد پیام های جدید، اگر دو پیام "موفقیت" در 500m ظاهر شوند، محتوای موجود را به روز کرده و تایمر آن را تنظیم کنید.

۴- روشنگری و اطلاع رسانی

CSS سیستم را به صورت بصری جذاب می کند.استفاده از برای اثرات اسلاید و محو شدن انواع مختلف (info، موفقیت، خطا، هشدار) باید رنگ ها و آیکون های پس زمینه ای متمایز داشته باشد.

.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;
}

شما می توانید یک کلاس “haging” را قبل از حذف عنصر برای ایجاد یک انیمیشن خروجی صاف اضافه کنید:

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

۵- یکپارچه سازی با برنامه وب شما

در این هنگام از هر گونه استفاده از این موارد استفاده کنید:

نتیجه گیری

یک سیستم اطلاع رسانی جاوا اسکریپت سفارشی به شما آزادی می دهد تا دقیقا بازخورد کاربر نیازهای برنامه وب شما را تجربه کند.با ساخت دستکاری DOM، انیمیشن های CSS و ملاحظات دسترسی دقیق، شما یک راه حل ایجاد می کنید که احساس یکپارچه، اجرا کننده و فراگیر می کند.با اصول شروع کنید - نگهداری، عملکرد نسل، و طراحی - لایه در صف ها، گروه بندی و تعاملات پیشرفته به عنوان یک برنامه انتقال می یابد که بدون اطلاع رسانی سیستم های سیستم های توسعه خارجی شما سازگار است.

برای مطالعه بیشتر، اسناد MDN را در AppendChild و Almanac برای راهنمایی های انیمیشن، شما آماده به پیاده سازی یک سیستم اطلاع رسانی سفارشی است که افزایش تعامل کاربر و راحتی.