Seni Kod Bersih: Panduan Praktikal untuk Menulis JavaScript yang Boleh Diselenggara

Seni Kod Bersih: Panduan Praktikal untuk Menulis JavaScript yang Boleh Diselenggara.

Pengenalan:

Menulis kod bersih adalah lebih daripada pilihan estetik—ia merupakan amalan asas yang mengurangkan pepijat, meningkatkan kerjasama dan memastikan kebolehselenggaraan jangka panjang projek perisian. Panduan ini meneroka prinsip, amalan dan pendekatan pragmatik untuk menulis kod JavaScript yang bersih.

Prinsip Teras

1. Kebolehbacaan Didahulukan

Kod dibaca jauh lebih kerap daripada yang ditulis. Kod yang baik menceritakan kisah yang boleh difahami dengan mudah oleh pembangun lain (termasuk diri masa depan anda).

Teruk:

const x = y + z / 3.14;

Baik:

const radius = diameter / Math.PI;

2. Penting Kebolehselenggaraan

Kod yang boleh diselenggara adalah modular, mengikut prinsip SOLID dan meminimumkan kebergantungan.

Teruk:

function calculateArea(radius) {
    // ...lots of nested logic...
    // ...complex calculations...
    // ...multiple responsibilities...
    return result;
}

Baik:

function calculateArea(radius) {
    return Math.PI * radius * radius;
}

3. Kebolehujian

Kod bersih sememangnya boleh diuji. Pecahkan operasi kompleks kepada unit yang lebih kecil dan boleh disahkan.

Teruk:

function getRandomNumber() {
    return Math.random();
}

Baik:

function getRandomNumber(randomGenerator = Math.random) {
    return randomGenerator();
}

4. Kebolehskalaan

Kod bersih berkembang dengan anggun dengan projek anda.

Teruk:

function handleUserData(data) {
    if (data.type === 'admin') {
        // 50 lines of admin logic
    } else if (data.type === 'user') {
        // 50 lines of user logic
    } else if (data.type === 'guest') {
        // 50 lines of guest logic
    }
}

Baik:

const userHandlers = {
    admin: handleAdminData,
    user: handleUserData,
    guest: handleGuestData
};

function handleUserData(data) {
    return userHandlers[data.type](data);
}

Perangkap dan Penyelesaian Biasa:

1. Dilema Penamaan

Nama harus mendedahkan niat dan konteks.
Teruk:

function calc(a, b) {
    return a * b + TAX;
}

Baik:

function calculatePriceWithTax(basePrice, taxRate) {
    const TAX_MULTIPLIER = 1;
    return basePrice * taxRate + TAX_MULTIPLIER;
}

2. Mengelakkan Neraka Panggilan Balik

Ganti panggil balik bersarang dengan corak async moden.

Teruk:

getUserData(userId, function(user) {
    getOrders(user.id, function(orders) {
        processOrders(orders, function(result) {
            // More nesting...
        });
    });
});

Baik:

async function processUserOrders(userId) {
    try {
        const user = await getUserData(userId);
        const orders = await getOrders(user.id);
        return await processOrders(orders);
    } catch (error) {
        handleError(error);
    }
}

3. Menguruskan Konfigurasi

Tetapkan satu sumber kebenaran untuk nilai konfigurasi.

Teruk:

// Scattered across multiple files
const API_KEY = 'abc123';
const API_ENDPOINT = 'https://api.example.com';

Baik:

// config.js
export const config = {
    api: {
        key: process.env.API_KEY,
        endpoint: process.env.API_ENDPOINT
    }
};

Pertukaran Pragmatik:

Prestasi lwn. Kebolehbacaan

Imbangkan kebolehbacaan dengan keperluan prestasi:

// More readable, slightly less performant
const doubledNumbers = numbers.map(n => n * 2);

// Less readable, more performant (when performance is critical)
for (let i = 0; i 



<h4>
  
  
  Fungsi Tulen lwn Kesan Sampingan
</h4>

<p>Walaupun fungsi tulen adalah ideal, aplikasi sebenar memerlukan kesan sampingan. Asingkan dan uruskannya dengan berhati-hati:<br>
</p>

<pre class="brush:php;toolbar:false">// Pure function
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

// Necessary side effect, clearly isolated
async function saveOrderToDatabase(order) {
    await database.orders.save(order);
    logOrderCreation(order);
}

Amalan Terbaik:

1. Gunakan Nama Bermakna

• Pembolehubah harus menunjukkan tujuannya
• Fungsi harus menerangkan tindakannya
• Kelas hendaklah mewakili entiti mereka

2. Pastikan Fungsi Kecil

• Setiap fungsi harus melakukan satu perkara dengan baik
• Sasarkan tidak lebih daripada 20 baris setiap fungsi
• Ekstrak logik kompleks ke dalam fungsi berasingan

3. Elakkan Nombor Ajaib

• Gunakan pemalar bernama untuk semua nilai angka
• Pemalar berkaitan kumpulan dalam objek konfigurasi

4. Tangani Ralat Dengan Anggun

• Gunakan blok cuba/tangkap dengan sewajarnya
• Sediakan mesej ralat yang bermakna
• Pertimbangkan strategi pemulihan ralat

Kesimpulan:

Kod bersih ialah perjalanan, bukan destinasi. Walaupun kebersihan yang sempurna mungkin tidak dapat dicapai, berusaha untuk kod bersih melalui amalan yang konsisten dan pertukaran pragmatik membawa kepada pangkalan kod yang lebih boleh diselenggara, boleh dipercayai dan kolaboratif. Ingat bahawa konteks itu penting—apa yang bersih dalam satu situasi mungkin tidak dalam situasi lain. Kuncinya ialah mencari keseimbangan yang tepat untuk keperluan khusus anda sambil mengekalkan kod yang orang lain (termasuk diri anda pada masa hadapan) akan berterima kasih kerana menulis.

? Berhubung dengan saya di LinkedIn:

Mari kita menyelami dunia kejuruteraan perisian bersama-sama lebih dalam! Saya kerap berkongsi cerapan tentang JavaScript, TypeScript, Node.js, React, Next.js, struktur data, algoritma, pembangunan web dan banyak lagi. Sama ada anda ingin meningkatkan kemahiran anda atau bekerjasama dalam topik yang menarik, saya ingin berhubung dan berkembang dengan anda.

Ikuti saya: Nozibul Islam

Atas ialah kandungan terperinci Seni Kod Bersih: Panduan Praktikal untuk Menulis JavaScript yang Boleh Diselenggara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!