Bagaimana cara menulis kode JS yang bersih? 5 tips menulis untuk dibagikan

Mengurangi beban membaca, menginspirasi pemikiran kreatif, dan mempelajari keterampilan JavaScript dengan mudah. ​​Rigongyiping, jym, rush~

1. Mendefinisikan angka sebagai konstanta.

Kita sering menggunakan angka, seperti kode berikut:

const isOldEnough = (person) => {
  kembalikan orang.getAge() >= 100;
}

Siapa yang tahu apa maksud spesifik 100 ini? Kita biasanya perlu menggabungkan konteks fungsi untuk berspekulasi dan menilai nilai apa yang mungkin diwakili secara spesifik oleh 100 ini.

Jika ada beberapa angka seperti itu, maka akan dengan mudah menimbulkan kebingungan yang lebih besar.

Tulis JavaScript yang bersih: Mendefinisikan angka sebagai konstanta

memecahkan masalah ini dengan jelas:

const AGE_REQUIREMENT = 100;
const isOldEnough = (orang) => {
  kembalikan orang.getAge() >= AGE_REQUIREMENT;
}

Sekarang, dengan mendeklarasikan nama konstanta tersebut, kita dapat langsung memahami bahwa 100 berarti "persyaratan usia". Saat memodifikasi, Anda dapat dengan cepat menemukannya, memodifikasinya di satu tempat, dan menerapkannya di banyak tempat.

2. Hindari penggunaan nilai Boolean sebagai parameter fungsi.

Meneruskan nilai Boolean ke dalam fungsi sebagai parameter adalah metode penulisan umum yang mudah menyebabkan kebingungan kode.

const validasiMakhluk = (makhluk, isHuman) => {
  jika (adalah Manusia) {
    // ...
  } kalau tidak {
    // ...
  }
}

Nilai Boolean yang dimasukkan ke dalam fungsi sebagai parameter tidak dapat mengungkapkan arti yang jelas. Nilai tersebut hanya dapat memberi tahu pembaca bahwa fungsi ini akan membuat penilaian dan menghasilkan dua situasi atau lebih.

Namun, kami menganjurkan Prinsip Tanggung Jawab Tunggal untuk fungsi, jadi:

Tulis JavaScript yang bersih: Hindari nilai boolean sebagai parameter fungsi

const validasiPerson = (orang) => {
  // ...
}
const validasiMakhluk = (makhluk) => {
  // ...
}

3. Mengenkapsulasi beberapa kondisi

kita sering menulis kode seperti ini:

if (
  orang.getAge() > 30 &&
  orang.getName() === "simon" &&
  person.getOrigin() === "swedia"
) {
  // ...
}

Bukan tidak mungkin, namun lama kelamaan, Anda tiba-tiba tidak mengerti untuk apa penilaian tersebut, sehingga disarankan untuk merangkum kondisi tersebut dengan variabel atau fungsi.

Tulis JavaScript yang bersih: rangkum beberapa kondisi

const isSimon =
  orang.getAge() > 30 &&
  orang.getName() === "simon" &&
  person.getOrigin() === "swedia";
jika (isSimon) {
  // ...
}

atau

const isSimon = (orang) => {
  kembali (
    orang.getAge() > 30 &&
    orang.getName() === "simon" &&
    person.getOrigin() === "swedia"
  );
};
jika (isSimon(orang)) {
  // ...
}

Oh, ternyata syarat ini untuk menentukan apakah orang tersebut adalah Simon ~

Kode semacam ini adalah kode gaya deklaratif, yang lebih mudah dibaca.

4. Hindari penilaian negatif.

Dalam penilaian bersyarat, penggunaan penilaian negatif akan menambah beban berpikir.

Misalnya pada kode di bawah, kondisi !isCreatureNotHuman(creature) bernilai negatif ganda sehingga agak sulit dibaca.

const isCreatureNotHuman = (makhluk) => {
  // ...
}

if (!isCreatureNotHuman(makhluk)) {
  // ...
}

Tulis JavaScript yang bersih: Hindari kondisi penilaian negatif

dengan menulis ulang ke dalam aturan penulisan berikut agar lebih mudah dibaca. Meskipun ini hanya trik kecil, dalam sejumlah besar logika kode, mengikuti prinsip ini di banyak tempat pasti akan sangat membantu berguna.

Seringkali, ketika membaca kode, saya terus membaca. Ketika saya melihat metode penulisan yang "buruk", saya tidak tahan lagi. Detailnya akan ditumpangkan, dan tanggul sepanjang seribu mil akan runtuh di sarang semut.

const isCreatureHuman = (makhluk) => {
  // ...
}
if (isCreatureHuman(makhluk)) {
  // ...
}

5. Hindari banyak if...else...

Hal ini selalu ditekankan oleh Bengua:

Misalnya kode berikut:

if(x===a){
   res=A
}lainnya jika(x===b){
   res=B
}lainnya jika(x===c){
   res=C
}lainnya jika(x===d){
    //...
}

Ditulis ulang sebagai peta:

let mapRes={
    A A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

Contoh lainnya adalah kode berikut:

const isMammal = (makhluk) => {
  if (makhluk === "manusia") {
    kembali benar;
  } else if (makhluk === "anjing") {
    kembali benar;
  } else if (makhluk === "kucing") {
    kembali benar;
  }
  // ...
kembali salah;
}

Ditulis ulang sebagai array:

const isMammal = (makhluk) => {
  const mamalia = ["manusia", "anjing", "kucing", /* ... */];
  return mamalia.includes(makhluk);
}

Tulis JavaScript yang bersih: hindari banyak if...else...

Jadi, ketika ada banyak if...else... dalam kode, pikirkan satu langkah lagi dan lihat apakah Anda dapat membuat sedikit modifikasi untuk membuat kode terlihat lebih "bersih" ".

Ringkasan: Teknik di atas mungkin tidak layak disebutkan dalam contoh, namun dalam proyek sebenarnya, ketika logika bisnis menjadi kompleks dan jumlah kode menjadi besar, tips ini pasti akan memberikan efek dan bantuan positif bahkan di luar imajinasi.

Di atas adalah bagaimana cara menulis kode JS yang bersih? 5 tips menulis dibagikan secara detail. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di website PHP Cina!