Rumah > hujung hadapan web > tutorial js > Memahami Kod Bersih: Memformat ⚡️

Memahami Kod Bersih: Memformat ⚡️

王林
Lepaskan: 2024-08-19 17:07:33
asal
307 orang telah melayarinya

Understanding Clean Code: Formatting ⚡️

Dalam pembangunan perisian, kod bukan sahaja untuk mesin tetapi juga untuk manusia.

Pemformatan kod yang betul adalah penting untuk kebolehbacaan dan kebolehselenggaraan.

Kod Bersih Bab 5 membincangkan prinsip ini, memfokuskan pada kepentingan pemformatan untuk kod profesional.


? Mengapa Pemformatan Penting

Pemformatan yang betul bukan hanya mengenai estetika; ia mengenai kejelasan. Kod yang diformat dengan baik:

  • Meningkatkan kebolehbacaan: Pembangun lain (atau diri masa depan anda) boleh dengan cepat memahami perkara yang dilakukan oleh kod itu.

  • Meningkatkan kebolehselenggaraan: Kod yang diformat dengan bersih lebih mudah untuk dikemas kini, difaktorkan semula dan nyahpepijat.

  • Menggalakkan ketekalan: Kod yang konsisten boleh diramal, mengurangkan beban kognitif bagi sesiapa yang membacanya.


? Prinsip Utama Pemformatan Kod

? 1. Keterbukaan Menegak: Mengelompokkan Kod Berkaitan Bersama

Keterbukaan menegak merujuk kepada penggunaan garisan kosong untuk memisahkan blok kod yang berbeza, menjadikannya lebih mudah untuk membezakan bahagian yang berbeza.

Contoh:

function processOrder(order) {
    // Validate the order
    if (!validateOrder(order)) {
        throw new Error("Invalid order");
    }

    // Process payment
    const paymentResult = processPayment(order);

    // Update inventory
    updateInventory(order);

    // Notify customer
    notifyCustomer(order);
}
Salin selepas log masuk

Dalam contoh ini, setiap langkah dalam fungsi processOrder dipisahkan oleh garis kosong, dengan jelas menggambarkan fasa proses yang berbeza.


? 2. Keterbukaan Mendatar: Kod Menjajarkan untuk Kejelasan

Keterbukaan mendatar melibatkan penjajaran kod secara mendatar untuk menjadikannya lebih mudah dibaca, terutamanya apabila berurusan dengan pernyataan yang serupa atau berkaitan.

Contoh:

const productName  = "Laptop";
const productPrice = 999.99;
const productStock = 50;
Salin selepas log masuk

Menjajarkan pengisytiharan pembolehubah dengan cara ini memudahkan untuk melihat perkara yang diwakili oleh setiap pembolehubah sepintas lalu.


? 3. Inden: Penstrukturan Kod Secara Hierarki

Lekukan adalah kunci untuk menggambarkan struktur hierarki kod. Ia membantu pembaca dengan cepat mengenal pasti blok kod yang tergolong bersama, seperti gelung, bersyarat dan fungsi.

Contoh:

function calculateDiscount(price) {
    if (price > 100) {
        return price * 0.1;
    } else {
        return 0;
    }
}
Salin selepas log masuk

Di sini, struktur if-else diinden untuk menunjukkan bahawa pernyataan pulangan adalah sebahagian daripada logik bersyarat.


? 4. Panjang Talian: Memastikan Ia Boleh Diurus

Barisan kod yang panjang mungkin sukar dibaca dan difahami. Peraturan umum adalah untuk mengekalkan baris di bawah 80-100 aksara. Jika baris terlalu panjang, pertimbangkan untuk memutuskannya.

Contoh:

// Instead of this:
const orderSummary = `Order for ${customer.name}, Total: $${order.total}, Items: ${order.items.length}`;

// Do this:
const orderSummary = `Order for ${customer.name}, 
    Total: $${order.total}, 
    Items: ${order.items.length}`;
Salin selepas log masuk

Memutuskan rentetan merentas berbilang baris menjadikannya lebih mudah dibaca, terutamanya jika rentetan mengandungi berbilang pembolehubah.


? 5. Bracing Konsisten: Mengurangkan Kekusutan

Gaya pendakap adalah satu lagi bidang yang konsistensi adalah penting. Dua gaya biasa ialah:

  • Gaya K&R: Pendakap buka pada baris yang sama dengan pernyataan.
  • Gaya Allman: Pendakap pembukaan pada baris baharu.

Contoh Gaya K&R:

function add(a, b) {
    return a + b;
}
Salin selepas log masuk

Contoh Gaya Allman:

function add(a, b) 
{
    return a + b;
}
Salin selepas log masuk

Pilih gaya dan kekalkan gaya itu di seluruh pangkalan kod anda. Ketekalan adalah lebih penting daripada gaya tertentu.


? 6. Elakkan Kod Padat: Tinggalkan Ruang untuk Bernafas

Kod padat, di mana terlalu banyak operasi dijejalkan ke dalam ruang kecil, boleh menjadi sukar dibaca. Sebarkan kod anda untuk menjadikannya lebih mudah didekati.

Contoh:

// Dense code
if (user.isLoggedIn) { user.showDashboard(); }

// Better
if (user.isLoggedIn) {
    user.showDashboard();
}
Salin selepas log masuk

Versi kedua lebih mudah dibaca kerana panggilan fungsi berada pada baris yang berasingan daripada syarat.



Kesimpulan ✅

Pemformatan adalah penting untuk kebolehbacaan dan kebolehselenggaraan kod.

Mengikut prinsip dalam Kod Bersih, anda boleh menjadikan kod JavaScript anda lebih profesional dan lebih mudah difahami dan digunakan.

Selamat Pengekodan!

Atas ialah kandungan terperinci Memahami Kod Bersih: Memformat ⚡️. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan