Amalan Terbaik untuk Menulis Kod Bersih dan Boleh Diselenggara dalam JavaScript

Kod yang bersih dan boleh diselenggara adalah penting untuk kejayaan jangka panjang dan kebolehskalaan mana-mana projek perisian. Ia meningkatkan kerjasama dalam kalangan ahli pasukan, mengurangkan kemungkinan pepijat dan menjadikan kod lebih mudah difahami, diuji dan diselenggara. Dalam catatan blog ini, kami akan meneroka beberapa amalan terbaik untuk menulis kod yang bersih dan boleh diselenggara dalam JavaScript, bersama-sama dengan contoh kod untuk menggambarkan setiap amalan.

1. Pemformatan Kod Konsisten:

Pemformatan kod yang konsisten adalah penting untuk kebolehbacaan. Ia membantu pembangun memahami kod dengan lebih cepat dan meningkatkan kerjasama. Gunakan panduan gaya kod yang konsisten dan diterima secara meluas, seperti yang disediakan oleh ESLint, dan konfigurasikan editor atau IDE anda untuk memformat kod secara automatik dengan sewajarnya.
Contoh:

// Bad formatting
function calculateSum(a,b){
    return a + b;
}

// Good formatting
function calculateSum(a, b) {
  return a + b;
}

2. Pembolehubah Deskriptif dan Nama Fungsi:

Gunakan nama deskriptif dan bermakna untuk pembolehubah, fungsi dan kelas. Elakkan nama pembolehubah satu huruf atau singkatan yang mungkin mengelirukan orang lain. Amalan ini meningkatkan kebolehbacaan kod dan mengurangkan keperluan untuk ulasan.
Contoh:

// Bad naming
const x = 5;

// Good naming
const numberOfStudents = 5;

3. Prinsip Modulariti dan Tanggungjawab Tunggal:

Ikuti prinsip Tanggungjawab Tunggal untuk fungsi dan kelas. Setiap fungsi atau kelas harus mempunyai satu tanggungjawab yang jelas. Pendekatan ini meningkatkan kebolehgunaan semula kod dan menjadikannya lebih mudah untuk menguji, nyahpepijat dan menyelenggara.
Contoh:

// Bad practice
function calculateSumAndAverage(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  const average = sum / numbers.length;
  return [sum, average];
}

// Good practice
function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

function calculateAverage(numbers) {
  const sum = calculateSum(numbers);
  const average = sum / numbers.length;
  return average;
}

4. Elakkan Pembolehubah Global:

Minimumkan penggunaan pembolehubah global kerana ia boleh membawa kepada konflik penamaan dan menjadikan kod lebih sukar untuk difikirkan. Sebaliknya, masukkan kod anda dalam fungsi atau modul dan gunakan pembolehubah setempat apabila boleh.
Contoh:

// Bad practice
let count = 0;

function incrementCount() {
  count++;
}

// Good practice
function createCounter() {
  let count = 0;

  function incrementCount() {
    count++;
  }

  return {
    incrementCount,
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
counter.incrementCount();

5. Pengendalian Ralat dan Kekukuhan:

Kendalikan ralat dengan anggun dan berikan mesej ralat yang bermakna atau logkannya dengan sewajarnya. Sahkan input, kendalikan kes tepi dan gunakan teknik pengendalian pengecualian yang betul seperti blok cuba-tangkap.
Contoh:

// Bad practice
function divide(a, b) {
  return a / b;
}

// Good practice
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error(error.message);
}

6. Elakkan Penduaan Kod:

Penduaan kod bukan sahaja membawa kepada kod kembung tetapi juga menjadikan penyelenggaraan dan pembetulan pepijat lebih mencabar. Merangkumkan kod boleh guna semula ke dalam fungsi atau kelas dan berusaha untuk pendekatan DRY (Jangan Ulangi Diri Sendiri). Jika anda mendapati diri anda menyalin dan menampal kod, pertimbangkan untuk memfaktorkannya semula menjadi fungsi atau modul yang boleh digunakan semula.
Contoh:

// Bad formatting
function calculateSum(a,b){
    return a + b;
}

// Good formatting
function calculateSum(a, b) {
  return a + b;
}

7. Gunakan Komen dengan Bijak:

Walaupun kod bersih sepatutnya menjelaskan sendiri, terdapat kes di mana ulasan diperlukan untuk menyediakan konteks tambahan atau menjelaskan logik yang kompleks. Gunakan komen dengan berhati-hati dan buat ia ringkas dan bermakna. Fokus pada menerangkan "mengapa" dan bukannya "bagaimana."
Contoh:

// Bad naming
const x = 5;

// Good naming
const numberOfStudents = 5;

8. Optimumkan Prestasi:

Kod yang cekap meningkatkan prestasi keseluruhan aplikasi anda. Berhati-hati dengan pengiraan yang tidak perlu, penggunaan memori yang berlebihan dan potensi kesesakan. Gunakan struktur data dan algoritma yang sesuai untuk mengoptimumkan prestasi. Profil dan ukur kod anda menggunakan alatan seperti Chrome DevTools untuk mengenal pasti isu prestasi dan menanganinya dengan sewajarnya.
Contoh:

// Bad practice
function calculateSumAndAverage(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  const average = sum / numbers.length;
  return [sum, average];
}

// Good practice
function calculateSum(numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

function calculateAverage(numbers) {
  const sum = calculateSum(numbers);
  const average = sum / numbers.length;
  return average;
}

9. Tulis Ujian Unit:

Ujian unit adalah penting untuk memastikan ketepatan dan kebolehselenggaraan kod anda. Tulis ujian automatik untuk merangkumi senario dan kes kelebihan yang berbeza. Ini membantu menangkap pepijat lebih awal, memudahkan pemfaktoran semula kod dan memberi keyakinan dalam mengubah suai kod sedia ada. Gunakan rangka kerja ujian seperti Jest atau Mocha untuk menulis dan menjalankan ujian.
Contoh (menggunakan Jest):

// Bad practice
let count = 0;

function incrementCount() {
  count++;
}

// Good practice
function createCounter() {
  let count = 0;

  function incrementCount() {
    count++;
  }

  return {
    incrementCount,
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
counter.incrementCount();

10. Gunakan Konsep Pengaturcaraan Berfungsi:

Konsep pengaturcaraan fungsional, seperti kebolehubahan dan fungsi tulen, boleh menjadikan kod anda lebih mudah diramal dan lebih mudah untuk difikirkan. Terima struktur data tidak berubah dan elakkan mengubah objek atau tatasusunan apabila boleh. Tulis fungsi tulen yang tidak mempunyai kesan sampingan dan menghasilkan output yang sama untuk input yang sama, menjadikannya lebih mudah untuk diuji dan nyahpepijat.
Contoh:

// Bad practice
function divide(a, b) {
  return a / b;
}

// Good practice
function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

try {
  const result = divide(10, 0);
  console.log(result);
} catch (error) {
  console.error(error.message);
}

11. Dokumenkan kod anda dengan JSDoc

Gunakan JSDoc untuk mendokumentasikan fungsi, kelas dan modul anda. Ini membantu pembangun lain memahami kod anda dan menjadikannya lebih mudah untuk diselenggara.

// Bad practice
function calculateAreaOfRectangle(length, width) {
  return length * width;
}

function calculatePerimeterOfRectangle(length, width) {
  return 2 * (length + width);
}

// Good practice
function calculateArea(length, width) {
  return length * width;
}

function calculatePerimeter(length, width) {
  return 2 * (length + width);
}

12. Gunakan linter dan pemformat

Gunakan alatan seperti ESLint dan Prettier untuk menguatkuasakan gaya kod yang konsisten dan menangkap isu yang berpotensi sebelum ia menjadi masalah.

// Bad practice
function calculateTotalPrice(products) {
  // Loop through products
  let totalPrice = 0;
  for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
  }
  return totalPrice;
}

// Good practice
function calculateTotalPrice(products) {
  let totalPrice = 0;
  for (let i = 0; i < products.length; i++) {
    totalPrice += products[i].price;
  }
  return totalPrice;
  // The total price is calculated by summing up the prices of all the products in the array.
}

Kesimpulan:

Menulis kod yang bersih dan boleh diselenggara bukan hanya soal keutamaan peribadi; ia adalah tanggungjawab profesional. Dengan mengikuti amalan terbaik yang digariskan dalam catatan blog ini, anda boleh meningkatkan kualiti kod JavaScript anda, menjadikannya lebih mudah untuk memahami, menyelenggara dan bekerjasama serta memastikan kejayaan jangka panjang projek perisian anda. Ketekalan, kebolehbacaan, modulariti dan pengendalian ralat adalah prinsip utama yang perlu diingat apabila berusaha untuk mendapatkan kod yang bersih dan boleh diselenggara. Selamat mengekod!

Atas ialah kandungan terperinci Amalan Terbaik untuk Menulis Kod Bersih dan Boleh Diselenggara dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!