Bagaimana untuk menulis kod JS bersih? 5 tips menulis untuk dikongsi

Bagaimana untuk menulis kod JS bersih? Dalam artikel ini, saya akan berkongsi dengan anda 5 petua untuk menulis JavaScript yang bersih. Saya harap ia akan membantu anda!

Kurangkan beban membaca, inspirasikan minda kreatif, pelajari kemahiran JavaScript dengan mudah, satu hari pada satu masa, jym, tergesa-gesa~

1 . Tukar nombor Ditakrifkan sebagai pemalar

Kami sering menggunakan nombor, seperti kod berikut:

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

Siapa tahu 100 ini merujuk secara khusus? Kita biasanya perlu menggabungkan konteks fungsi untuk membuat spekulasi dan menilai nilai yang 100 ini mungkin mewakili secara khusus.

Jika terdapat berbilang nombor seperti ini, ia akan menyebabkan kekeliruan yang lebih besar.

Tulis JavaScript bersih: takrifkan nombor sebagai pemalar

untuk menyelesaikan masalah ini dengan jelas:

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

Sekarang, kami lulus Dengan mengisytiharkan nama pemalar, anda boleh segera memahami bahawa 100 bermaksud "keperluan umur". Apabila mengubah suai, anda boleh mencarinya dengan cepat, mengubah suainya di satu tempat dan berkuat kuasa di berbilang tempat.

2. Elakkan menggunakan nilai Boolean sebagai parameter fungsi

Menyalurkan nilai Boolean ke dalam fungsi sebagai parameter ialah cara penulisan yang mudah menyebabkan kekeliruan kod.

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

Nilai Boolean yang dihantar ke dalam fungsi sebagai parameter tidak boleh menyatakan maksud yang jelas. Ia hanya boleh memberitahu pembaca bahawa fungsi ini akan membuat pertimbangan dan menghasilkan dua atau lebih situasi.

Walau bagaimanapun, kami menyokong Prinsip Tanggungjawab Tunggal untuk fungsi, jadi:

Tulis JavaScript yang bersih: elakkan nilai Boolean sebagai parameter fungsi

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3 tidak faham untuk apa pertimbangan ini, jadi saya cadangkan merangkum keadaan ini dengan pembolehubah atau fungsi.

Tulis JavaScript yang bersih: merangkum beberapa syarat

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

atau

Oh, ternyata syarat ini adalah untuk penghakiman Adakah ini orang Simon ~

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}

Kod seperti ini ialah kod gaya deklaratif, yang lebih mudah dibaca.

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}

4. Elakkan syarat pertimbangan negatif

Dalam pertimbangan bersyarat, menggunakan pertimbangan negatif akan menyebabkan beban pemikiran tambahan.

Contohnya, dalam kod di bawah, keadaan ialah negatif berganda, yang menjadikannya agak sukar dibaca.

Tulis JavaScript yang bersih: elakkan syarat pertimbangan negatif

!isCreatureNotHuman(creature)

Tulis semula ke dalam peraturan penulisan berikut untuk memudahkan pembacaan, walaupun ini hanya helah kecil , tetapi dalam jumlah logik kod yang banyak, ia pasti akan membantu untuk mengikuti prinsip ini di banyak tempat.

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

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

Banyak kali apabila membaca kod, saya hanya membacanya Apabila saya melihat kaedah penulisan yang "buruk", saya tidak dapat menahannya lagi Butiran akan ditumpangkan, dan benteng seribu batu akan runtuh dalam sarang semut.

5 Elakkan banyak jika...lain...

Perkara ini sentiasa saya tekankan:

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

Contohnya Kod berikut:

ditulis semula sebagai peta:

Contoh lain ialah kod berikut:

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

ditulis semula sebagai tatasusunan:

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

Tulis JavaScript yang bersih: elakkan banyak jika...lain...

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

Jadi, apabila terdapat banyak jika.. .lain... dalam kod, lebih banyak Fikirkan dan lihat jika anda boleh membuat beberapa perubahan untuk menjadikan kod kelihatan "lebih bersih".

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

Ringkasan: Petua di atas mungkin kelihatan tidak berbaloi untuk disebut dalam contoh, tetapi dalam projek sebenar, apabila logik perniagaan menjadi rumit dan jumlah kod menjadi besar, petua ini pastinya Ia boleh memberikan kesan positif dan bantuan, walaupun di luar imaginasi.

[Cadangan berkaitan:

tutorial pembelajaran javascript

---

]

Atas ialah kandungan terperinci Bagaimana untuk menulis kod JS bersih? 5 tips menulis untuk dikongsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!