Für mein viertes Projekt habe ich eine Rechner-App mit Vue.js entwickelt. Es war eine wertvolle Erfahrung, um zu verstehen, wie man mit Benutzereingaben umgeht, dynamische Ergebnisse anzeigt und Berechnungen mit JavaScript durchführt. Hier ist eine Aufschlüsselung der wichtigsten Lektionen, die ich beim Erstellen dieser App gelernt habe.

1. Benutzereingaben verarbeiten und die Anzeige aktualisieren

Der Rechner muss Benutzereingaben (Zahlen und Operatoren) akzeptieren und die Anzeige dynamisch aktualisieren. Ich habe die reaktiven Eigenschaften von Vue verwendet, um den Überblick über die aktuelle Eingabe und das aktuelle Ergebnis zu behalten. Die ref-Funktion in Vue machte es einfach, diese Werte zu speichern und zu ändern:

const result = ref('');
const calculated = ref(false);

Jedes Mal, wenn ein Benutzer auf eine Zahl oder einen Operator klickt, wird die Ergebnisseigenschaft aktualisiert, um sicherzustellen, dass die Anzeige die neueste Eingabe anzeigt. Die Funktion handleClick wird verwendet, um Werte an das Ergebnis anzuhängen:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value  = value;
    }
}

Dies war eine wesentliche Lektion im Umgang mit Benutzerinteraktionen und der Aktualisierung der Benutzeroberfläche basierend auf reaktiven Eigenschaften.

2. Operatoren verwalten: Redundante Eingaben vermeiden

Eine zentrale Herausforderung beim Erstellen eines Rechners besteht darin, sicherzustellen, dass nicht mehrere Operatoren nacheinander addiert werden (z. B. die Vermeidung von Eingaben wie 3 4). Um dieses Problem zu beheben, habe ich eine Prüfung hinzugefügt, um einen Operator zu ersetzen, wenn das letzte Zeichen bereits ein Operator ist:

const handleOperatorClick = (operator) => {
    if (/[ */-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1)   operator; // Replace the last operator
    } else {
        result.value  = operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

Diese Methode stellt sicher, dass am Ende der Eingabezeichenfolge nur ein Operator vorhanden ist, wodurch die Robustheit des Rechners verbessert wird.

3. Eingabe löschen und löschen

Der Rechner muss über eine Funktion zum Löschen aller Eingaben (mit der Schaltfläche AC) oder zum Löschen des letzten eingegebenen Zeichens (mit der Schaltfläche DEL) verfügen. Ich habe diese beiden Aktionen mit den Methoden „clearAll“ und „clear“ implementiert:

• Alles löschen (AC): Setzt die gesamte Eingabe zurück.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

• Letztes Zeichen löschen (DEL): Entfernt das letzte Zeichen der Eingabezeichenfolge.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

Dies war eine nützliche Übung zum Umgang mit String-Manipulationen und zur Bereitstellung einer reibungslosen Benutzererfahrung.

4. Berechnungen durchführen

Eine der Kernfunktionen eines Taschenrechners besteht darin, vom Benutzer eingegebene Ausdrücke auszuwerten. Ich habe die in JavaScript integrierte Funktion eval() verwendet, um das Ergebnis des Eingabeausdrucks zu berechnen:

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

Während eval() für diesen Basisrechner einfach und effektiv ist, habe ich gelernt, welche potenziellen Sicherheitsrisiken es bei der Verarbeitung willkürlicher Benutzereingaben mit sich bringt. In zukünftigen Projekten werde ich möglicherweise versuchen, einen benutzerdefinierten Parser zu schreiben, um die Sicherheit und Flexibilität zu verbessern.

5. Benutzeroberfläche mit Vue und Bootstrap

Um die Rechneroberfläche zu erstellen, habe ich Bootstrap für ein schnelles und reaktionsfähiges Design verwendet. Die Schaltflächen sind in einem Raster mit entsprechender Farbcodierung für Zahlen und Operatoren angeordnet:

    
7
    
8
    
9
    
-

Ich habe gelernt, wie man Vues Ereignisbehandlung mit Bootstraps Klassen kombiniert, um eine visuell ansprechende und responsive Rechneroberfläche zu erstellen.

6. Umgang mit Randfällen und Verbesserung der UX

Ich bin beim Erstellen des Rechners auf mehrere Randfälle gestoßen. Wenn ein Benutzer beispielsweise nach einer Berechnung eine neue Zahl eingibt, muss der Rechner das vorherige Ergebnis zurücksetzen. Dies wurde durch Überprüfen des berechneten Flags behoben:

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

Eine weitere nützliche Funktion war die Formatierung der Anzeige, um sie intuitiver zu gestalten, z. B. das automatische Ersetzen des letzten Operators, wenn der Benutzer seine Meinung ändert, was die Benutzererfahrung verbessert.

Abschließende Gedanken: Was ich durch die Erstellung eines Rechners gewonnen habe

Dieses Projekt bot einen tiefen Einblick in die Handhabung dynamischer Eingaben, die Verwaltung des Status und den Aufbau einer sauberen Benutzeroberfläche mithilfe von Vue.js. Ich habe praktische Kenntnisse in folgenden Bereichen erworben:

• Statusverwaltung: So verfolgen und aktualisieren Sie die Eingaben und Ergebnisse des Benutzers dynamisch.
• Ereignisbehandlung: Reagieren auf Benutzeraktionen (Anzahlklicks, Bedienerklicks und Berechnung von Ergebnissen).
• UI/UX-Überlegungen: Sicherstellen, dass der Rechner Randfälle ordnungsgemäß verarbeitet und eine klare und intuitive Benutzeroberfläche bietet.
• String-Manipulation: Analysieren und Bearbeiten von Eingabestrings, um gültige mathematische Ausdrücke zu erstellen.

Die Erstellung dieses Rechners war eine lohnende Erfahrung, die meine Fähigkeit stärkte, Benutzereingaben zu verwalten und dynamische, interaktive Webanwendungen mit Vue.js zu erstellen. Ich freue mich darauf, diese Fähigkeiten auf komplexere Projekte anzuwenden!