我从使用 Vue.js 构建计算器中学到了什么

发布于2024-11-08

What I’ve Learned from Building a Calculator with Vue.js

对于我的第四个项目，我使用 Vue.js 开发了一个 计算器 应用程序。对于理解如何处理用户输入、显示动态结果以及使用 JavaScript 执行计算来说，这是一次宝贵的经验。以下是我在构建此应用程序时学到的主要经验教训的细分。

1. 处理用户输入并更新显示

计算器需要接受用户输入（数字和运算符）并动态更新显示。我使用 Vue 的 响应式属性 来跟踪当前的输入和结果。 Vue 中的 ref 函数可以轻松存储和修改这些值：

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

每次用户单击数字或运算符时，结果属性都会更新，确保显示屏显示最新的输入。函数handleClick用于将值追加到结果中：

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

这是处理用户交互和基于反应性属性更新界面的重要课程。

2. 管理运算符：避免冗余输入

构建计算器的一个关键挑战是确保不会连续添加多个运算符（例如，避免像 3 4 这样的输入）。为了解决这个问题，我添加了一个检查，如果最后一个字符已经是运算符，则替换运算符：

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

此方法可确保输入字符串末尾仅存在一个运算符，从而提高计算器的鲁棒性。

3. 清除和删除输入

计算器需要提供清除所有输入（使用AC按钮）或删除最后一个输入字符（使用DEL按钮）的功能。我使用clearAll和clear方法实现了这两个操作：

全部清除 (AC)：重置整个输入。

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

删除最后一个字符 (DEL)：删除输入字符串的最后一个字符。

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

这是处理字符串操作并提供流畅的用户体验的有用练习。

4. 执行计算

计算器的核心功能之一是计算用户输入的表达式。我使用 JavaScript 内置的 eval() 函数来计算输入表达式的结果：

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

虽然 eval() 对于这个基本计算器来说简单而有效，但我已经了解了它在处理任意用户输入时带来的潜在安全风险。在未来的项目中，我可能会探索编写自定义解析器以提高安全性和灵活性。

5. Vue 和 Bootstrap 的用户界面

为了构建计算器界面，我使用了 Bootstrap 进行快速响应式设计。这些按钮排列在网格中，并为数字和运算符提供适当的颜色编码：

我学会了如何将Vue的事件处理与Bootstrap的类相结合，以创建视觉上吸引人的和响应式计算器界面。

6. 处理边缘情况并增强用户体验

我在构建计算器时遇到了几种边缘情况。例如，在执行计算后，如果用户输入新的数字，计算器需要重置之前的结果。这是通过检查计算标志来处理的：

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

另一个有用的功能是格式化显示以使其更加直观，例如如果用户改变主意，则自动替换最后一个运算符，从而改善用户体验。