จะเขียนโค้ด JS ที่สะอาดได้อย่างไร 5 เคล็ดลับการเขียนที่จะแบ่งปัน

ลดภาระในการอ่าน สร้างแรงบันดาลใจในการสร้างสรรค์ และเรียนรู้ทักษะ JavaScript ได้อย่างง่ายดาย Rigongyiping, jym, rush~

1. กำหนดตัวเลขเป็นค่าคง

ที่ เช่น โค้ดต่อไปนี้:

const isOldEnough = (person) => {
  ส่งคืน person.getAge() >= 100;
}

ใครจะรู้ว่า 100 นี้หมายถึงอะไรโดยเฉพาะ? โดยปกติเราจำเป็นต้องรวมบริบทของฟังก์ชันเพื่อคาดเดาและตัดสินว่าค่า 100 นี้อาจเป็นตัวแทนค่าใดโดยเฉพาะ

หากมีตัวเลขดังกล่าวหลายตัวจะทำให้เกิดความสับสนได้ง่ายยิ่งขึ้น

เขียน JavaScript ที่ชัดเจน: การกำหนดตัวเลขเป็นค่าคง

ที่จะช่วยแก้ปัญหานี้ได้อย่างชัดเจน:

const AGE_REQUIREMENT = 100;
const isOldEnough = (คน) => {
  กลับ person.getAge() >= AGE_REQUIREMENT;
}

ตอนนี้ การประกาศชื่อของค่าคงที่ทำให้เราเข้าใจได้ทันทีว่า 100 หมายถึง "ข้อกำหนดด้านอายุ" เมื่อแก้ไข คุณสามารถค้นหาได้อย่างรวดเร็ว แก้ไขในที่เดียว และมีผลในหลายที่

2. หลีกเลี่ยงการใช้ค่าบูลีนเป็นพารามิเตอร์ของฟังก์ชัน

การส่งค่าบูลีนไปยังฟังก์ชันเนื่องจากพารามิเตอร์เป็นวิธีการเขียนทั่วไปที่ทำให้โค้ดสับสนได้ง่าย

const validateCreature = (สิ่งมีชีวิต isHuman) => {
  ถ้า (คือมนุษย์) {
    -
  } อื่น {
    -
  -
}

ค่าบูลีนที่ส่งผ่านไปยังฟังก์ชันเป็นพารามิเตอร์ไม่สามารถแสดงความหมายที่ชัดเจนได้ เพียงบอกผู้อ่านว่าฟังก์ชันนี้จะตัดสินและสร้างสถานการณ์ตั้งแต่สองสถานการณ์ขึ้นไป

อย่างไรก็ตาม เราสนับสนุนหลักการความรับผิดชอบเดียวสำหรับฟังก์ชันต่างๆ ดังนั้น:

เขียน JavaScript ที่สะอาด: หลีกเลี่ยงค่าบูลีนเป็นพารามิเตอร์ของฟังก์ชัน

const validatePerson = (person) => {
  -
-
const validateCreature = (สิ่งมีชีวิต) => {
  -
}

3. การสรุปเงื่อนไขหลายข้อ

เรามักจะเขียนโค้ดดังนี้:

if (
  person.getAge() > 30 &&
  person.getName() === "ไซมอน" &&
  person.getOrigin() === "สวีเดน"
-
  -
}

ไม่ใช่เรื่องที่เป็นไปไม่ได้ แต่หลังจากผ่านไปนาน จู่ๆ คุณจะไม่เข้าใจว่าการตัดสินเหล่านี้มีไว้เพื่ออะไร ดังนั้นจึงขอแนะนำให้สรุปเงื่อนไขเหล่านี้ด้วยตัวแปรหรือฟังก์ชัน

เขียน JavaScript ที่สะอาด: แค็ปซูลหลายเงื่อนไข

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "ไซมอน" &&
  person.getOrigin() === "สวีเดน";
ถ้า (isSimon) {
  -
}

หรือ

const isSimon = (บุคคล) => {
  กลับ (
    person.getAge() > 30 &&
    person.getName() === "ไซมอน" &&
    person.getOrigin() === "สวีเดน"
  -
-
ถ้า (isSimon (คน)) {
  -
}

โอ้ ปรากฎว่าเงื่อนไขเหล่านี้มีไว้เพื่อตัดสินว่าบุคคลนี้คือไซมอนหรือไม่ ~

โค้ดประเภทนี้เป็นโค้ดสไตล์ที่ประกาศ ซึ่งสามารถอ่านได้ง่ายกว่า

4. หลีกเลี่ยงการตัดสินเชิงลบ

ในการตัดสินแบบมีเงื่อนไข การใช้วิจารณญาณเชิงลบจะทำให้เกิดภาระในการคิดเพิ่มเติม

ตัวอย่างเช่น ในโค้ดด้านล่าง เงื่อนไข !isCreatureNotHuman(creature) จะเป็นลบสองเท่า ซึ่งทำให้อ่านยากนิดหน่อย

const isCreatureNotHuman = (สิ่งมีชีวิต) => {
  -
-

ถ้า (!isCreatureNotHuman (สิ่งมีชีวิต)) {
  -
}

เขียน JavaScript ที่สะอาดตา: หลีกเลี่ยงเงื่อนไขการตัดสินเชิงลบ

โดยการเขียนใหม่ลงในกฎการเขียนต่อไปนี้เพื่อให้อ่านง่ายขึ้น แม้ว่านี่จะเป็นเพียงเคล็ดลับเล็กๆ น้อยๆ แต่ในตรรกะของโค้ดจำนวนมาก แต่การปฏิบัติตามหลักการนี้ในหลาย ๆ ที่ก็จะมีผลอย่างมาก มีประโยชน์.

หลายครั้งที่อ่านโค้ดก็อ่านต่อ พอเห็นวิธีเขียนที่ "แย่" ก็ทนไม่ไหวแล้ว รายละเอียดต่างๆ จะถูกทับทับ และเขื่อนยาวพันไมล์ก็จะถล่มลงมาในรังมด

const isCreatureHuman = (สิ่งมีชีวิต) => {
  -
-
ถ้า (isCreatureHuman (สิ่งมีชีวิต)) {
  -
}

5. หลีกเลี่ยง if...else...

ประเด็นนี้ถูกเน้นโดย Bengua มาโดยตลอด:

ตัวอย่างเช่น โค้ดต่อไปนี้:

if(x===a){
   ละเอียด=ก
} อื่นถ้า(x===b){
   ละเอียด=B
} อื่นถ้า(x===c){
   ละเอียด=ค
} อื่นถ้า(x===d){
    -
}

เขียนใหม่เป็นแผนที่:

ให้ mapRes={
    ก:ก,
    BB,
    ค:ค,
    -
-
res=mapRes[x]

อีกตัวอย่างหนึ่งคือโค้ดต่อไปนี้:

const isMammal = (creature) => {
  ถ้า (สิ่งมีชีวิต === "มนุษย์") {
    กลับเป็นจริง;
  } อื่นถ้า (สิ่งมีชีวิต === "สุนัข") {
    กลับเป็นจริง;
  } อื่นถ้า (สิ่งมีชีวิต === "แมว") {
    กลับเป็นจริง;
  -
  -
กลับเท็จ;
}

เขียนใหม่เป็นอาร์เรย์:

const isMammal = (creature) => {
  const สัตว์เลี้ยงลูกด้วยนม = ["มนุษย์", "สุนัข", "แมว", /* ... */];
  กลับสัตว์เลี้ยงลูกด้วยนมรวม (สิ่งมีชีวิต);
}

เขียน JavaScript ที่ชัดเจน: หลีกเลี่ยง if...else... จำนวนมาก

ดังนั้น เมื่อมี if...else... จำนวนมากในโค้ด ให้คิดอีกขั้นหนึ่งแล้วดูว่าคุณสามารถปรับเปลี่ยนเล็กน้อยได้หรือไม่ เพื่อให้โค้ดดู "สะอาด" มากขึ้น"

สรุป: เทคนิคข้างต้นอาจดูไม่คุ้มที่จะกล่าวถึงในตัวอย่างนี้ แต่ในโครงการจริง เมื่อตรรกะทางธุรกิจมีความซับซ้อนและมีจำนวนโค้ดมากขึ้น เคล็ดลับเหล่านี้จะให้ผลเชิงบวกและช่วยเหลือได้อย่างแน่นอน เกินกว่าจินตนาการ

ข้างต้นเป็นวิธีการเขียนโค้ด JS ที่สะอาด? มีการแบ่งปันเคล็ดลับการเขียน 5 ข้อโดยละเอียด สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!