xKanban بر پایه معماری Single-Page Application (SPA) با الگوی State-Driven Rendering پیادهسازی شده است. تمامی منطق در سمت کلاینت اجرا میشود و از معماری لایهای سهتایی Presentation / Application / Data استفاده شده است.
🎨 Presentation Layer
Toolbar Renderer
Board View
Column Renderer
Card Renderer
Modal System
Filter Panel
Toast Notifications
▼
⚙️ Application Layer
Project Manager
Board Manager
Column Manager
Card Manager
Tag Manager
Filter Engine
Webhook Service
Shortcut Handler
Export Engine
▼
💾 Data Layer
State Container
LocalStorage Adapter
AutoSave Engine
JSON Serializer
UUID Generator
الف) متدهای راهاندازی و چرخه حیات
function init() { ... }
function render() { ... }
function renderToolbar() { ... }
function renderBoard() { ... }
ب) متدهای مدیریت پروژه و پایداری
function saveProject() { ... }
function loadProject() { ... }
function scheduleAutoSave() { ... }
function recoverAutoSave() { ... }
function openProjectSettings() { ... }
function saveProjectSettings() { ... }
ج) متدهای مدیریت بردها
function createBoard() { ... }
function editBoard(boardId) { ... }
function deleteBoard(boardId) { ... }
function switchBoard(boardId) { ... }
د) متدهای مدیریت ستونها
function createColumn() { ... }
function editColumn(columnId) { ... }
function deleteColumn(columnId) { ... }
function moveColumn(fromIndex, toIndex) { ... }
هـ) متدهای مدیریت کارتها (غنیترین ماژول)
function createCard(columnId) { ... }
function editCard(cardId) { ... }
function deleteCard(cardId) { ... }
function moveCard(cardId, targetColumnId) { ... }
function addAssignee(cardId, name) { ... }
function removeAssignee(cardId, name) { ... }
function addChecklistItem(cardId, text) { ... }
function toggleChecklistItem(cardId, itemIndex) { ... }
function removeChecklistItem(cardId, itemIndex) { ... }
function addDependency(cardId, dependencyId) { ... }
function removeDependency(cardId, dependencyId) { ... }
function addHistoryEntry(cardId, fromColumn, toColumn) { ... }
و) متدهای مدیریت تگها
function openTagManager() { ... }
function addTag(name, color) { ... }
function removeTag(tagId) { ... }
function assignTagToCard(cardId, tagId) { ... }
function removeTagFromCard(cardId, tagId) { ... }
ز) متدهای فیلتر و جستجو
function filterCards() { ... }
function searchCards(query) { ... }
function clearFilters() { ... }
ح) متدهای صادرات و واردات
function exportJSON() { ... }
function importJSON(file) { ... }
function exportMarkdown(boardFilter) { ... }
function exportCSV(boardFilter) { ... }
ط) متدهای یکپارچگی و Webhook
function sendWebhook(eventType, data) { ... }
function testWebhook() { ... }
ی) متدهای رابط کاربری و تعامل
function openModal(modalId) { ... }
function closeModal(modalId) { ... }
function showToast(message, type) { ... }
function toggleDarkMode() { ... }
function handleKeyboardShortcuts(event) { ... }
ک) متدهای کمکی
function generateUUID() { ... }
function getCardDueStatus(card) { ... }
function calculateBoardStats() { ... }
function downloadFile(content, filename, mimeType) { ... }
💡 اصل طراحی کدها: تمامی متدها بر اساس اصل Single Responsibility طراحی شدهاند. هر متد دقیقاً یک وظیفه مشخص دارد و از ترکیب آنها، رفتارهای پیچیدهتر ساخته میشود. بدنه متدها در این مستند با ... خلاصه شده تا تمرکز بر ساختار و معماری باقی بماند.
جریان داده در سیستم:
| مرحله |
عملیات |
متد درگیر |
| ۱ |
کاربر عملیاتی انجام میدهد (مثلاً ایجاد کارت) |
createCard() |
| ۲ |
وضعیت State بهروزرسانی میشود |
مستقیم روی State Container |
| ۳ |
رابط کاربری مجدداً رندر میشود |
render() |
| ۴ |
ذخیره خودکار زمانبندی میشود |
scheduleAutoSave() |
| ۵ |
در صورت فعال بودن، Webhook ارسال میشود |
sendWebhook() |
| ۶ |
اعلان تأیید به کاربر نمایش داده میشود |
showToast() |