Menguasai JavaScript: Amalan Terbaik untuk Menulis Kod Bersih

Memandangkan JavaScript terus mendominasi dunia pembangunan web ?, menulis kod yang bersih dan boleh diselenggara adalah penting untuk kejayaan jangka panjang. ?️ Sama ada anda seorang pemula atau mempunyai sedikit pengalaman, mengikuti amalan terbaik memastikan kod anda boleh difahami, berskala dan bebas pepijat.✨ Dalam siaran ini, kami akan meneliti 10 amalan terbaik JavaScript penting yang akan meratakan tingkatkan permainan pengekodan anda! ??

1. Gunakan Pembolehubah Bermakna dan Nama Fungsi

Penamaan ialah salah satu bahagian terpenting dalam menulis kod bersih. Elakkan nama pembolehubah samar seperti x, y atau temp—sebaliknya, jadikan nama pembolehubah dan fungsi anda sebagai deskriptif.

// Bad Example
let x = 10;
function calc(a, b) {
  return a + b;
}

// Good Example
let itemCount = 10;
function calculateTotal(price, tax) {
  return price + tax;
}

2. Gunakan const dan biarkan Daripada var

Kata kunci var mempunyai skop fungsi, yang boleh membawa kepada pepijat. Dalam JavaScript moden, lebih baik menggunakan const untuk pemalar dan biar untuk pembolehubah yang perlu diubah.

// Bad Example (using var)
var name = 'John';
name = 'Jane';

// Good Example (using const and let)
const userName = 'John';
let userAge = 30;

3. Elakkan Pembolehubah Global

Minimumkan penggunaan pembolehubah global kerana ia boleh membawa kepada konflik dan kod yang sukar dinyahpepijat. Pastikan pembolehubah anda setempat apabila boleh.

// Bad Example (Global variable)
userName = 'John';

function showUser() {
  console.log(userName);
}

// Good Example (Local variable)
function showUser() {
  const userName = 'John';
  console.log(userName);
}

4. Tulis Fungsi Tanggungjawab Tunggal yang Pendek

Fungsi harus melakukan satu perkara dan melakukannya dengan baik. Amalan ini menjadikan kod anda lebih mudah untuk diuji, nyahpepijat dan diselenggara.

Contoh Buruk (melakukan terlalu banyak dalam satu fungsi):

function processOrder(order) {
  let total = order.items.reduce((sum, item) => sum + item.price, 0);
  if (total > 100) {
    console.log('Free shipping applied!');
  }
  console.log('Order total:', total);
}

Fungsi ini mengira jumlah dan juga menyemak penghantaran percuma, yang merupakan dua tanggungjawab yang berbeza.

Contoh Baik (tanggungjawab berasingan):

function calculateTotal(order) {
  return order.items.reduce((sum, item) => sum + item.price, 0);
}

function checkFreeShipping(total) {
  if (total > 100) {
    console.log('Free shipping applied!');
  }
}

function processOrder(order) {
  const total = calculateTotal(order);
  checkFreeShipping(total);
  console.log('Order total:', total);
}

Dalam contoh yang baik, tanggungjawab dibahagikan kepada tiga fungsi yang lebih kecil:

• calculateTotal mengendalikan pengiraan sahaja.
• checkFreeShipping menentukan sama ada penghantaran adalah percuma.
• ProcessOrder menyelaraskan fungsi ini, menjadikan kod lebih mudah untuk diurus.

5. Gunakan Fungsi Anak Panah untuk Panggilan Balik Mudah

Fungsi anak panah menyediakan sintaks yang ringkas dan mengendalikan kata kunci ini dengan lebih baik dalam banyak situasi, menjadikannya sesuai untuk panggilan balik yang mudah.

// Bad Example (using function)
const numbers = [1, 2, 3];
let squares = numbers.map(function (num) {
  return num * num;
});

// Good Example (using arrow function)
let squares = numbers.map(num => num * num);

6. Gunakan Huruf Templat untuk Interpolasi Rentetan

Tersurat templat lebih mudah dibaca dan berkuasa daripada gabungan rentetan, terutamanya apabila anda perlu memasukkan pembolehubah atau ungkapan di dalam rentetan.

// Bad Example (string concatenation)
const user = 'John';
console.log('Hello, ' + user + '!');

// Good Example (template literals)
console.log(`Hello, ${user}!`);

7. Gunakan Pemusnahan untuk Objek dan Tatasusunan

Memusnahkan ialah cara mudah untuk mengekstrak nilai daripada objek dan tatasusunan, menjadikan kod anda lebih ringkas dan boleh dibaca.

// Bad Example (no destructuring)
const user = { name: 'John', age: 30 };
const name = user.name;
const age = user.age;

// Good Example (with destructuring)
const { name, age } = user;

8. Elakkan Menggunakan Nombor Ajaib

Nombor ajaib ialah literal angka yang muncul dalam kod anda tanpa konteks, menjadikan kod lebih sukar untuk difahami. Sebaliknya, takrifkan pemalar dengan nama yang bermakna.

// Bad Example (magic number without context)
function calculateFinalPrice(price) {
  return price * 1.08; // Why 1.08? It's unclear.
}

// Good Example (use constants with meaningful names)
const TAX_RATE = 0.08; // 8% sales tax

function calculateFinalPrice(price) {
  return price * (1 + TAX_RATE); // Now it's clear that we are adding tax.
}

9. Tangani Ralat dengan Anggun dengan cuba...tangkap

Pengendalian ralat adalah penting untuk menulis aplikasi yang mantap. Gunakan blok cuba...tangkap untuk mengurus ralat dan mengelakkan ranap program.

// Bad Example (no error handling)
function parseJSON(data) {
  return JSON.parse(data);
}

// Good Example (with error handling)
function parseJSON(data) {
  try {
    return JSON.parse(data);
  } catch (error) {
    console.error('Invalid JSON:', error.message);
  }
}

10. Tulis Komen dengan Bijak

Walaupun kod anda sepatutnya jelas, ulasan masih boleh membantu. Gunakannya untuk menerangkan sebab sesuatu dilakukan mengikut cara tertentu, bukannya apa yang berlaku.

// Bad Example (obvious comment)
let total = price + tax; // Adding price and tax

// Good Example (helpful comment)
// Calculate the total price with tax included
let total = price + tax;

Mengikuti amalan terbaik ini akan membantu anda menulis kod JavaScript yang lebih bersih dan boleh diselenggara. ✨ Sama ada anda baru bermula atau ingin memperhalusi kemahiran anda, memasukkan petua ini ke dalam aliran kerja anda akan menjimatkan masa dan sakit kepala anda dalam jangka masa panjang. ??

Selamat mengekod!?

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