Amalan Terbaik dalam JavaScript Moden - Bahagian 1

JavaScript adalah, tanpa syak lagi, bahasa pengaturcaraan yang paling banyak digunakan di dunia dan mempunyai pengaruh yang besar pada salah satu teknologi terpenting dalam kehidupan seharian kita: Internet. Dengan kuasa ini terdapat tanggungjawab yang besar, dan ekosistem JavaScript telah berkembang pesat, menjadikannya sukar untuk mengikuti amalan terbaik.

Dalam artikel ini, kami akan meneroka beberapa amalan terbaik teratas dalam JavaScript moden untuk menulis kod yang lebih bersih, boleh diselenggara dan cekap.

1. Peraturan projek adalah perkara yang paling penting

Setiap projek mungkin mempunyai peraturan khusus untuk mengekalkan ketekalan kod. Peraturan ini akan sentiasa diutamakan daripada sebarang pengesyoran luar, termasuk yang terdapat dalam artikel ini. Sebelum melaksanakan amalan dalam projek, pastikan ia sejajar dengan peraturan yang ditetapkan dan semua ahli pasukan bersetuju.

2. Gunakan JavaScript yang dikemas kini

JavaScript telah berkembang dengan pesat sejak dicipta pada tahun 1995. Banyak amalan lama yang anda temui di Internet mungkin sudah lapuk. Sebelum melaksanakan teknik, sahkan bahawa ia serasi dengan versi bahasa semasa.

3. Gunakan let dan const bukannya var

Walaupun var masih sah, penggunaannya dianggap usang dan, dalam banyak kes, boleh memperkenalkan pepijat yang sukar dikesan kerana skop fungsiannya. Sebaliknya, mari dan const memberi kita skop yang lebih boleh diramal dan selamat, terhad kepada blok di mana ia diisytiharkan.

Bila hendak menggunakan let dan bila hendak menggunakan const?

• Gunakan const apabila pembolehubah tidak mengubah rujukan atau nilainya. Ini menjadikan kod anda lebih mudah difahami dan mengurangkan ralat dengan melindungi nilai yang tidak boleh diubah.
• Gunakan let jika anda perlu menetapkan semula nilai pembolehubah pada masa hadapan, tetapi hanya dalam kes di mana ia perlu.

Peraturan emas: Gunakan const secara lalai. Jika kemudian anda perlu menukar nilai, tukar kepada biarkan.

Contoh praktikal

1. const untuk nilai malar:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

1. biar untuk menukar nilai:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

1. Perbandingan skop (biar vs var):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

1. Elakkan masalah dengan gelung dan panggil balik:

Dengan var anda boleh mempunyai gelagat yang tidak dijangka dalam gelung, terutamanya dalam fungsi tak segerak:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

Sementara biarkan perkara ini diperbaiki:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Menggantikan var dengan let dan const bukan sahaja amalan yang baik, tetapi ia juga membantu menjadikan kod anda lebih selamat, lebih mudah dibaca dan lebih mudah untuk nyahpepijat. Jadikan masa depan anda terima kasih.

4. Pilih Kelas: Kesederhanaan dalam JavaScript

Menggunakan Function.prototype untuk pengaturcaraan berorientasikan objek dalam JavaScript ialah pendekatan yang lebih lama dan sering ralat. Sebaliknya, kelas yang diperkenalkan dalam ES6 menawarkan sintaks yang lebih intuitif yang lebih dekat dengan bahasa berorientasikan objek lain, memudahkan kebolehbacaan dan penyelenggaraan kod.

Contoh dengan kelas (moden dan jelas):

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Perbandingan dengan Function.prototype (rumit dan kurang intuitif):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

Seperti yang anda lihat, pendekatan berasaskan prototaip memerlukan lebih banyak langkah untuk menentukan kaedah dan boleh menjadi lebih mengelirukan bagi pembangun yang kurang berpengalaman. Bukan sahaja kelas lebih mudah dibaca, tetapi ia juga mempromosikan kod yang lebih bersih dan modular.

Mengapa menggunakan kelas?

• Lebih mudah dibaca dan kurang terdedah kepada ralat.
• Mereka memudahkan pewarisan dengan lanjutan dan penggunaan super.
• Lebih serasi dengan alatan moden dan piawaian ES6.

5. Gunakan Medan Persendirian Sebenar dalam JavaScript

Untuk masa yang lama, pembangun JavaScript menggunakan konvensyen seperti garis bawah (_) untuk mensimulasikan medan peribadi dalam kelas. Walau bagaimanapun, ini hanyalah konvensyen visual, kerana hartanah masih boleh diakses dari luar kelas. Kini, terima kasih kepada medan persendirian sebenar, kami boleh menjamin bahawa hartanah tertentu tidak boleh diakses sepenuhnya dari luar.

⚠️ Perhatian: Ciri ini mungkin tidak tersedia dalam konsol sesetengah penyemak imbas.

Mengapa menggunakan medan persendirian sebenar?

1. Ekapsulasi Tulen: Lindungi data anda dan pastikan ia tidak boleh diakses atau diubah suai di luar konteks kelas.
2. Kebolehbacaan: Menggunakan awalan # menjelaskan sifat mana yang peribadi, meningkatkan pemahaman kod.
3. Keselamatan data: Elakkan ralat tidak sengaja atau akses tidak disengajakan kepada sifat dalaman.

Contoh asas:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

Contoh Lanjutan: Kaunter Dilindungi

Bayangkan anda ingin membuat kelas yang merekodkan bilangan lawatan ke halaman, tetapi anda tidak mahu sesiapa pun dapat memanipulasi pembilang itu secara langsung.

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Dalam kes ini, kaunter #visits dilindungi sepenuhnya daripada akses luaran, yang menjamin bahawa nilainya tidak dimanipulasi secara tidak wajar.

Pertimbangan

• Medan peribadi tidak boleh diakses walaupun oleh subkelas.
• Jika anda perlu berinteraksi dengan data peribadi dalam warisan, pertimbangkan untuk menggunakan kaedah yang dilindungi dan bukannya medan peribadi.

6. Gunakan fungsi anak panah

fungsi anak panah ialah cara moden dan elegan untuk menulis fungsi dalam JavaScript. Mereka menawarkan sintaks yang lebih pendek dan, tidak seperti fungsi tradisional, secara automatik mewarisi konteks ini, yang mengelakkan masalah biasa dalam pengaturcaraan berorientasikan objek.

Ia amat berguna dalam fungsi tertib tinggi seperti memetakan, menapis dan mengurangkan, di mana kita perlu menghantar fungsi sebagai hujah.

Mengapa menggunakan fungsi anak panah?

1. Sintaks yang lebih pendek dan bersih: Sesuai untuk memastikan kod lebih mudah dibaca.
2. Konteks automatik ini: Sesuai untuk mengelakkan ralat dalam panggilan balik atau kaedah.
3. Penggunaan yang sesuai dalam fungsi sebaris: Seperti yang kami gunakan dalam peta, penapis atau acara.

Contoh praktikal

1. Dengan peta untuk mengubah tatasusunan

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

2. Dengan penapis untuk menapis elemen

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

3. Dengan mengurangkan untuk menambah nilai

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

4. Dalam acara DOM (berhati-hati dengan konteks!)

Apabila kami menggunakan fungsi anak panah dalam acara, konteks ini tidak akan berubah, yang boleh berguna:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Petua: bila tidak menggunakannya

Walaupun fungsi anak panah hebat, ia tidak sesuai untuk segala-galanya. Elakkannya dalam kes di mana anda perlu mengakses konteks fungsi itu sendiri, seperti dalam fungsi yang menggunakan dinamik ini atau jika anda perlu menulis kaedah dalam prototaip.

Contoh di mana fungsi biasa adalah lebih baik:

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

Jika anda menukar cetakan kepada fungsi anak panah, anda akan kehilangan konteks ini.

Mari perbaiki bahagian itu! Saya menambah beberapa konteks, penjelasan yang lebih jelas dan beberapa contoh tambahan untuk menjadikannya lebih lengkap dan berguna.

7. Pengendali gabungan nol (??)

Pengendali gabungan nol (??) ialah alternatif yang lebih tepat kepada pengendali logik || untuk menetapkan nilai lalai. Manakala || menganggap "palsu" sebagai nilai seperti 0, palsu atau "", pengendali ?? hanya menilai null atau undefined sebagai nilai "hilang". Ini menjadikannya pilihan yang lebih selamat dan khusus dalam banyak kes.

Apakah perbezaan utama?

Dengan ||, sebarang nilai "palsu" akan digantikan dengan nilai lalai.

Dengan ??, hanya menggantikan nilai yang batal atau tidak ditentukan. Ini membolehkan anda menyimpan nilai "palsu" seperti 0 atau "" jika ia sah dalam konteks anda.

Contoh asas:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

Sebaliknya, dengan ||:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Kes praktikal dengan ??

• Tetapkan nilai lalai tanpa menulis ganti nilai yang sah:

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

• Sahkan konfigurasi pilihan:

Andaikan anda mempunyai sistem yang membolehkan anda menyesuaikan pilihan:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

• Elakkan ralat apabila bekerja dengan sifat pilihan:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

Atas ialah kandungan terperinci Amalan Terbaik dalam JavaScript Moden - Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!