我從使用 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 進行快速回應的設計。這些按鈕排列在網格中，並為數字和運算符提供適當的顏色編碼：

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

我學會如何將 Vue 的事件處理 與 Bootstrap 的類別結合起來，創建一個視覺吸引力和響應式計算器介面。

6. 處理邊緣情況並增強使用者體驗

我在建立計算器時遇到了一些邊緣情況。例如，在執行計算後，如果使用者輸入新的數字，計算器需要重置先前的結果。這是透過檢查計算標誌來處理的：

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

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

最後的想法：我從建造計算器中獲得了什麼

該專案深入探討了處理動態輸入、管理狀態以及使用 Vue.js 建立乾淨的使用者介面。我獲得了以下領域的實務知識：

• 狀態管理：如何動態追蹤和更新使用者的輸入和結果。
• 事件處理：回應使用者操作（數字點擊、操作員點擊、計算結果）。
• UI/UX 注意事項：確保計算器能夠優雅地處理邊緣情況，並提供清晰直覺的使用者介面。
• 字串操作：解析和操作輸入字串以建立有效的數學表達式。

建立這個計算器是一次有益的體驗，它增強了我管理使用者輸入和使用 Vue.js 創建動態、互動式 Web 應用程式的能力。期待將這些技能應用到更複雜的專案中！

以上是我從使用 Vue.js 建立計算器中學到了什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！