Perkara yang Saya Pelajari daripada Membina Kalkulator dengan Vue.js

Untuk projek keempat saya, saya membangunkan apl Kalkulator menggunakan Vue.js. Ia merupakan pengalaman berharga dalam memahami cara mengendalikan input pengguna, memaparkan hasil dinamik dan melakukan pengiraan dengan JavaScript. Berikut ialah pecahan pelajaran penting yang saya pelajari semasa membina apl ini.

1. Mengendalikan Input Pengguna dan Mengemas kini Paparan

Kalkulator perlu menerima input pengguna (nombor dan operator) dan mengemas kini paparan secara dinamik. Saya menggunakan sifat reaktif Vue untuk menjejaki input dan hasil semasa. Fungsi ref dalam Vue memudahkan untuk menyimpan dan mengubah suai nilai ini:

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

Setiap kali pengguna mengklik pada nombor atau operator, sifat hasil dikemas kini, memastikan paparan menunjukkan input terbaharu. Fungsi handleClick digunakan untuk menambah nilai pada hasil:

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

Ini adalah pelajaran penting dalam mengendalikan interaksi pengguna dan mengemas kini antara muka berdasarkan sifat reaktif.

2. Pengurus Urusan: Mengelakkan Input Berlebihan

Satu cabaran utama dalam membina kalkulator ialah memastikan berbilang operator tidak ditambah secara berturut-turut (cth., mengelakkan input seperti 3 4). Untuk menangani perkara ini, saya menambah cek untuk menggantikan operator jika aksara terakhir sudah menjadi operator:

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

Kaedah ini memastikan bahawa hanya satu operator hadir pada penghujung rentetan input, meningkatkan kekukuhan kalkulator.

3. Mengosongkan dan Memadamkan Input

Kalkulator perlu menyediakan fungsi untuk mengosongkan semua input (menggunakan butang AC) atau memadam aksara input terakhir (menggunakan butang DEL). Saya melaksanakan dua tindakan ini dengan kaedah clearAll dan clear:

• Kosongkan Semua (AC): Menetapkan semula keseluruhan input.

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

• Padam Aksara Terakhir (DEL): Mengalih keluar aksara terakhir rentetan input.

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

Ini adalah latihan yang berguna dalam mengendalikan manipulasi rentetan dan memberikan pengalaman pengguna yang lancar.

4. Melakukan Pengiraan

Salah satu fungsi teras kalkulator adalah untuk menilai ungkapan yang dimasukkan oleh pengguna. Saya menggunakan fungsi eval() terbina dalam JavaScript untuk mengira hasil ungkapan input:

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

Walaupun eval() ringkas dan berkesan untuk kalkulator asas ini, saya telah mengetahui tentang potensi risiko keselamatan yang ditimbulkannya apabila mengendalikan input pengguna sewenang-wenangnya. Dalam projek akan datang, saya mungkin meneroka penulisan penghurai tersuai untuk keselamatan dan fleksibiliti yang dipertingkatkan.

5. Antara Muka Pengguna dengan Vue dan Bootstrap

Untuk membina antara muka kalkulator, saya menggunakan Bootstrap untuk reka bentuk yang pantas dan responsif. Butang disusun dalam grid dengan pengekodan warna yang sesuai untuk nombor dan pengendali:

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

Saya belajar cara menggabungkan pengendalian acara Vue dengan kelas Bootstrap untuk mencipta antara muka kalkulator menarik secara visual dan responsif.

6. Mengendalikan Kes Edge dan Meningkatkan UX

Saya menemui beberapa kes tepi semasa membina kalkulator. Contohnya, selepas melakukan pengiraan, jika pengguna memasukkan nombor baharu, kalkulator perlu menetapkan semula keputusan sebelumnya. Ini dikendalikan dengan menyemak bendera yang dikira:

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

Ciri berguna lain ialah memformat paparan untuk menjadikannya lebih intuitif, seperti menggantikan operator terakhir secara automatik jika pengguna berubah fikiran, meningkatkan pengalaman pengguna.

Pemikiran Akhir: Perkara yang Saya Perolehi daripada Membina Kalkulator

Projek ini memberikan kajian mendalam dalam mengendalikan input dinamik, mengurus keadaan dan membina antara muka pengguna yang bersih menggunakan Vue.js. Saya mendapat pengetahuan praktikal dalam bidang berikut:

• Pengurusan negeri: Cara menjejak dan mengemas kini input dan hasil pengguna secara dinamik.
• Pengendalian acara: Membalas tindakan pengguna (klik nombor, klik operator dan pengiraan hasil).
• Pertimbangan UI/UX: Memastikan kalkulator mengendalikan kes tepi dengan anggun dan menyediakan antara muka pengguna yang jelas dan intuitif.
• Manipulasi rentetan: Menghuraikan dan memanipulasi rentetan input untuk mencipta ungkapan matematik yang sah.

Membina kalkulator ini merupakan pengalaman yang bermanfaat yang menguatkan keupayaan saya untuk mengurus input pengguna dan mencipta aplikasi web yang dinamik dan interaktif menggunakan Vue.js. Tidak sabar untuk menggunakan kemahiran ini pada projek yang lebih kompleks!

Atas ialah kandungan terperinci Perkara yang Saya Pelajari daripada Membina Kalkulator dengan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!