Petua mudah membantu menjadikan kod CLEAR dan MAIN lebih mudah

Dengan pengalaman saya sendiri sebagai pengaturcara bahagian hadapan, saya sering membina tabiat saya sendiri semasa menulis kod untuk membantu kod menjadi fleksibel dan meningkatkan keupayaan membaca serta mengekalkan kod.
Ini semua adalah petua yang sangat mudah tetapi sangat berguna yang ingin saya kongsikan supaya anda dapat memahami sepenuhnya pada pandangan pertama.

Teknik 1: Kurangkan bilangan pernyataan if-else

Setiap kali kami menulis sesuatu yang menggunakan lebih daripada 2 if-else, kami perlu mempertimbangkan sama ada terdapat cara yang lebih optimum untuk menulis kod tersebut. Contoh mudah adalah seperti berikut:

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

Dalam contoh ini saya menulis fungsi untuk mendapatkan harga jenama telefon, jika saya ingin menambah harga telefon oppo, saya perlu menambah cawangan if-else, atau saya ingin mengubah suai harga telefon Xiaomi Saya perlu bekerja keras untuk mencari lokasi telefon Xiaomi di rahang saya.
Menulis kod seperti ini boleh menjadikan kod itu terdedah kepada ralat seperti bertele-tele, sukar dibaca, sukar dicari dan dikembangkan.
Tetapi jangan risau saya akan tunjukkan cara menulisnya dengan betul tanpa melanggar prinsip KERING. Kami akan menggunakan objek untuk menyimpan harga produk dan bukannya menggunakan rantai if-else-if
.

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Dalam contoh yang dipertingkatkan di atas, kita boleh membaca kod dengan lebih jelas, atau apabila kita ingin menukar harga produk, kita tidak perlu menukar logik teras fungsi getPrice().

Teknik 2: Teknik paip mengurangkan bilangan gelung yang tidak diperlukan

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Ini adalah cara tradisional, anda boleh menggunakan gelung for untuk menggelung melalui setiap elemen dalam tatasusunan dan semak elemen yang memenuhi syarat kemudian tambahkannya pada tatasusunan hasil.
Walaupun kaedah di atas tidak salah, menulis kod seperti ini boleh menjadikan kod lebih bertele-tele dan sukar dibaca. Sebaliknya kita boleh menggunakan fungsi biasa seperti penapis dan peta untuk membantu memastikan kod ringkas dan meningkatkan semantik.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Teknik 3: Gunakan find untuk menggantikan gelung pendua

Teruskan dengan contoh segmen telefon di atas. Kemudian menggunakan find menunjukkan kemudahan yang jelas

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

Kaedah carian ini membolehkan anda mencari dengan cepat elemen pertama dalam tatasusunan yang memenuhi syarat yang disediakan, menjadikan kod lebih jelas daripada menggunakan gelung tradisional.

Teknik 4: Penggunaan termasuk untuk menggantikan gelung berlebihan

Apabila kita perlu menyemak sama ada tatasusunan mengandungi nilai tertentu, menggunakan termasuk boleh memudahkan kod anda dan bukannya menggelung melalui tatasusunan untuk menyemak kewujudan elemen.

Contohnya:

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Anda hanya perlu menggunakan termasuk:

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Kaedah ini menyediakan penyelesaian yang elegan kepada proses yang lebih rumit menggunakan gelung tradisional.

Ciri ini amat berguna apabila berurusan dengan tatasusunan yang anda perlu semak dengan kerap.

Teknik 5: Gunakan pembolehubah yang mengembalikan hasil yang unik

Setahu saya, terutamanya dalam fungsi padat, kita boleh menggunakan nama pembolehubah yang konsisten untuk hasil yang dikembalikan. Ini menjelaskan dari mana nilai pulangan datang dan menyediakan konvensyen penamaan pembolehubah standard yang jika orang lain membaca kod anda, mereka boleh mengenalinya dengan mudah.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Teknik 6: Mengekalkan integriti objek

Semasa memanipulasi data JSON yang dikembalikan dari bahagian belakang, kami sering memproses atribut tertentu secara individu dalam nilai kunci. Ini lebih jelas apabila kita kadangkala mempunyai kes yang hanya menggunakan beberapa atribut. Ramai pengaturcara cenderung hanya mengekstrak sifat yang diperlukan untuk operasi, ini adalah kaedah pertama yang orang fikirkan, namun ini adalah cara yang praktikal dan tidak lama untuk melakukan sesuatu.

Apabila terdapat ketidakpastian sama ada fungsi memerlukan kebergantungan tambahan kemudian, adalah dinasihatkan untuk mengekalkan integriti keseluruhan objek. Sebagai contoh, komponen fungsi boleh menggunakan ikon dan kandungan tetapi mungkin tajuk atau tarikh boleh digunakan kemudian. Melewati keseluruhan objek kepada komponen berfungsi dan bukannya sifat individu bukan sahaja mengurangkan panjang senarai prop tetapi juga meningkatkan kebolehbacaan dan fleksibiliti kod

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

? Kesimpulan akhir

Teknik pengekodan JS di atas boleh meningkatkan prestasi kualiti kod anda, menjadikannya lebih mudah dibaca dan diselenggara dalam jangka masa panjang. Jadi cuba petua mudah ini dalam projek anda dan alami sendiri penambahbaikan. Semoga anda gembira pengekodan !!!

Atas ialah kandungan terperinci Petua mudah membantu menjadikan kod CLEAR dan MAIN lebih mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!