我從使用 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
}

另一個有用的功能是格式化顯示以使其更加直觀，例如如果使用者改變主意，則自動替換最後一個運算符，從而改善使用者體驗。