Praktisches Beispiel

Geschätzte Lektüre: 6 Minuten 374 Ansichten

Um die vorgestellten Konzepte zu demonstrieren, betrachten wir eine vollständige JavaScript-Anwendung für ein einfaches Aufgabenverwaltungssystem:

// Task Management System - Vollständiges Beispiel

class TaskManager {
    constructor() {
        this.tasks = [];
        this.idCounter = 1;
        this.observers = [];
    }
    
    // Task-Klasse als innere Klasse
    static Task = class {
        constructor(id, title, description, priority = ‚medium') {
            this.id = id;
            this.title = title;
            this.description = description;
            this.priority = priority;
            this.completed = false;
            this.createdAt = new Date();
        }
        
        complete() {
            this.completed = true;
            this.completedAt = new Date();
        }
        
        // Getter für formatierte Ausgabe
        get status() {
            return this.completed ? ‚Abgeschlossen' : ‚Offen';
        }
    };
    
    // Observer Pattern für Benachrichtigungen
    addObserver(observer) {
        this.observers.push(observer);
    }
    
    notifyObservers(event, data) {
        this.observers.forEach(observer => {
            if (typeof observer[event] === ‚function') {
                observer[event](data);
            }
        });
    }
    
    // CRUD-Operationen
    async addTask(title, description, priority) {
        try {
            if (!title || title.trim().length === 0) {
                throw new ValidationError(„Titel ist erforderlich", „title");
            }
            
            const task = new TaskManager.Task(
                this.idCounter++, 
                title.trim(), 
                description?.trim() || ", 
                priority
            );
            
            this.tasks.push(task);
            this.notifyObservers(‚taskAdded', task);
            
            return task;
        } catch (error) {
            console.error(„Fehler beim Hinzufügen der Aufgabe:", error);
            throw error;
        }
    }
    
    getTasks(filter = null) {
        let filteredTasks = [...this.tasks];
        
        if (filter) {
            switch (filter.type) {
                case 'status':
                    filteredTasks = filteredTasks.filter(task => 
                        task.completed === filter.value
                    );
                    break;
                casepriority':
                    filteredTasks = filteredTasks.filter(task => 
                        task.priority === filter.value
                    );
                    break;
            }
        }
        
        return filteredTasks.sort((a, b) => b.createdAt - a.createdAt);
    }
    
    completeTask(taskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task) {
            task.complete();
            this.notifyObservers(‚taskCompleted', task);
            return task;
        }
        throw new Error(`Aufgabe mit ID ${taskId} nicht gefunden`);
    }
    
    // Statistiken mit funktionaler Programmierung
    getStatistics() {
        const total = this.tasks.length;
        const completed = this.tasks.filter(t => t.completed).length;
        const byPriority = this.tasks.reduce((acc, task) => {
            acc[task.priority] = (acc[task.priority] || 0) + 1;
            return acc;
        }, {});
        
        return {
            total,
            completed,
            pending: total - completed,
            completionRate: total > 0 ?
            (completed / total * 100).toFixed(1) : 0,
            byPriority
        };
    }
}

// Observer für Logging
class TaskLogger {
    taskAdded(task) {
        console.log
        (`[LOG] Neue Aufgabe: ${task.title} (ID: ${task.id})`);
    }
    
    taskCompleted(task) {
        console.log
        (`[LOG] Aufgabe abgeschlossen: ${task.title}`);
    }
}

// Verwendung des Systems
async function demonstrateTaskManager() {
    const taskManager = new TaskManager();
    const logger = new TaskLogger();
    
    taskManager.addObserver(logger);
    
    try {
        // Aufgaben hinzufügen
        await taskManager.addTask
        („Code Review", „Frontend-Code überprüfen", „high");
        await taskManager.addTask
        („Dokumentation", „API-Dokumentation aktualisieren", „medium");
        await taskManager.addTask
        („Testing", „Unit-Tests schreiben", „high");
        
        // Aufgaben anzeigen
        console.log(„Alle Aufgaben:");
        taskManager.getTasks().forEach(task => {
            console.log(`- ${task.title} [${task.priority}] - ${task.status}`);
        });
        
        // Aufgabe abschließen
        taskManager.completeTask(1);
        
        // Statistiken
        const stats = taskManager.getStatistics();
        console.log(„Statistiken:", stats);
        
        // Gefilterte Aufgaben
        const highPriorityTasks = taskManager.getTasks({
            type:priority',
            value: ‚high'
        });
        console.log(„Hochprioritäre Aufgaben:", highPriorityTasks.length);
        
    } catch (error) {
        console.error(„Fehler in der Demonstration:", error);
    }
}

// System starten
demonstrateTaskManager();
Dieses Dokument teilen

Praktisches Beispiel

Oder Link kopieren

INHALT

Abonnieren

×
Cancel