Ce que j'ai appris en créant une calculatrice avec Vue.js

Pour mon quatrième projet, j'ai développé une application Calculatrice en utilisant Vue.js. Ce fut une expérience précieuse pour comprendre comment gérer les entrées des utilisateurs, afficher des résultats dynamiques et effectuer des calculs avec JavaScript. Voici un aperçu des principales leçons que j'ai apprises lors de la création de cette application.

1. Gestion des entrées utilisateur et mise à jour de l'affichage

La calculatrice doit accepter les entrées de l'utilisateur (chiffres et opérateurs) et mettre à jour l'affichage de manière dynamique. J'ai utilisé les propriétés réactives de Vue pour garder une trace de l'entrée et du résultat actuels. La fonction ref dans Vue a facilité le stockage et la modification de ces valeurs :

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

Chaque fois qu'un utilisateur clique sur un numéro ou un opérateur, la propriété du résultat est mise à jour, garantissant que l'écran affiche l'entrée la plus récente. La fonction handleClick est utilisée pour ajouter des valeurs au résultat :

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

C'était une leçon essentielle sur la gestion des interactions utilisateur et la mise à jour de l'interface en fonction des propriétés réactives.

2. Gestion des opérateurs : éviter les entrées redondantes

L'un des principaux défis lors de la création d'une calculatrice est de garantir que plusieurs opérateurs ne sont pas ajoutés consécutivement (par exemple, en évitant des entrées telles que 3 4). Pour résoudre ce problème, j'ai ajouté une coche pour remplacer un opérateur si le dernier caractère est déjà un opérateur :

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

Cette méthode garantit qu'un seul opérateur est présent à la fin de la chaîne d'entrée, améliorant ainsi la robustesse de la calculatrice.

3. Effacer et supprimer une entrée

La calculatrice doit fournir une fonctionnalité permettant d'effacer toutes les entrées (à l'aide du bouton AC) ou de supprimer le dernier caractère saisi (à l'aide du bouton DEL). J'ai implémenté ces deux actions avec les méthodes clearAll et clear :

• Effacer tout (AC) : réinitialise toute l'entrée.

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

• Supprimer le dernier caractère (DEL) : supprime le dernier caractère de la chaîne d'entrée.

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

C'était un exercice utile pour gérer la manipulation des chaînes et offrir une expérience utilisateur fluide.

4. Effectuer des calculs

L'une des fonctionnalités principales d'une calculatrice est d'évaluer les expressions saisies par l'utilisateur. J'ai utilisé la fonction eval() intégrée de JavaScript pour calculer le résultat de l'expression d'entrée :

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

Bien que eval() soit simple et efficace pour cette calculatrice de base, j'ai découvert les risques de sécurité potentiels qu'elle pose lors de la gestion d'entrées utilisateur arbitraires. Dans de futurs projets, je pourrai explorer l'écriture d'un analyseur personnalisé pour améliorer la sécurité et la flexibilité.

5. Interface utilisateur avec Vue et Bootstrap

Pour créer l'interface de la calculatrice, j'ai utilisé Bootstrap pour une conception rapide et réactive. Les boutons sont disposés dans une grille avec un code couleur approprié pour les chiffres et les opérateurs :

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

J'ai appris à combiner la gestion des événements de Vue avec les classes de Bootstrap pour créer une interface de calculatrice visuellement attrayante et responsive.

6. Gestion des cas Edge et amélioration de l'UX

J'ai rencontré plusieurs cas extrêmes lors de la construction de la calculatrice. Par exemple, après avoir effectué un calcul, si un utilisateur saisit un nouveau nombre, la calculatrice doit réinitialiser le résultat précédent. Cela a été géré en vérifiant l'indicateur calculé :

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

Une autre fonctionnalité utile consistait à formater l'affichage pour le rendre plus intuitif, comme le remplacement automatique du dernier opérateur si l'utilisateur change d'avis, améliorant ainsi l'expérience utilisateur.

Réflexions finales : ce que j'ai gagné en créant une calculatrice

Ce projet a permis d'approfondir la gestion des entrées dynamiques, la gestion de l'état et la création d'une interface utilisateur propre à l'aide de Vue.js. J'ai acquis des connaissances pratiques dans les domaines suivants :

• Gestion de l'état : Comment suivre et mettre à jour dynamiquement les entrées et les résultats de l'utilisateur.
• Gestion des événements : réponse aux actions des utilisateurs (nombre de clics, clics de l'opérateur et calcul des résultats).
• Considérations UI/UX : s'assurer que la calculatrice gère les cas extrêmes avec élégance et fournit une interface utilisateur claire et intuitive.
• Manipulation de chaînes : analyser et manipuler des chaînes d'entrée pour créer des expressions mathématiques valides.

Construire cette calculatrice a été une expérience enrichissante qui a renforcé ma capacité à gérer les entrées des utilisateurs et à créer des applications Web dynamiques et interactives à l'aide de Vue.js. Au plaisir d'appliquer ces compétences à des projets plus complexes !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!