สไตล์การเข้ารหัส

รหัสของเราจะต้องสะอาดและอ่านง่ายที่สุดเท่าที่จะเป็นไปได้

นั่นคือศิลปะของการเขียนโปรแกรมอย่างแท้จริง – เพื่อทำงานที่ซับซ้อนและเขียนโค้ดในลักษณะที่ถูกต้องและมนุษย์สามารถอ่านได้ รูปแบบโค้ดที่ดีช่วยได้อย่างมาก

ไวยากรณ์

นี่คือเอกสารสรุปพร้อมกฎที่แนะนำบางส่วน (ดูรายละเอียดเพิ่มเติมด้านล่าง):

ตอนนี้เรามาหารือเกี่ยวกับกฎและเหตุผลโดยละเอียด

ไม่มีกฎเกณฑ์ "คุณต้อง"

ไม่มีอะไรตั้งอยู่บนหินที่นี่ สิ่งเหล่านี้เป็นความชอบด้านสไตล์ ไม่ใช่หลักคำสอนทางศาสนา

เครื่องมือจัดฟันหยิก

ในโปรเจ็กต์ JavaScript ส่วนใหญ่ วงเล็บปีกกาจะเขียนในรูปแบบ "อียิปต์" โดยมีเครื่องหมายปีกกาเปิดอยู่ในบรรทัดเดียวกับคีย์เวิร์ดที่เกี่ยวข้อง ไม่ใช่ขึ้นบรรทัดใหม่ ควรมีช่องว่างก่อนวงเล็บเปิด เช่นนี้

 ถ้า (เงื่อนไข) {
  //ทำแบบนี้
  // ...และนั่น
  // ...และนั่น
-

โครงสร้างบรรทัดเดียว เช่น if (condition) doSomething() เป็นกรณีขอบที่สำคัญ เราควรใช้เหล็กจัดฟันเลยหรือเปล่า?

ต่อไปนี้คือรูปแบบที่มีคำอธิบายประกอบ เพื่อให้คุณสามารถตัดสินความสามารถในการอ่านได้ด้วยตัวเอง:

1. - ผู้เริ่มต้นบางครั้งก็ทำอย่างนั้น แย่! ไม่จำเป็นต้องใช้เหล็กดัดฟัน:

    ถ้า (n < 0) {alert (`ไม่รองรับกำลัง ${n}`);}

2. - แยกเป็นเส้นแยกกันโดยไม่มีเครื่องหมายปีกกา อย่าทำอย่างนั้น ง่ายที่จะเกิดข้อผิดพลาดเมื่อเพิ่มบรรทัดใหม่:

    ถ้า (n < 0)
     alert(`ไม่รองรับกำลัง ${n}`);

3. - บรรทัดเดียวที่ไม่มีวงเล็บปีกกา – ยอมรับได้ หากสั้น:

    ถ้า (n < 0) แจ้งเตือน (`ไม่รองรับกำลัง ${n});

4. - ตัวแปรที่ดีที่สุด:

    ถ้า (n < 0) {
     alert(`ไม่รองรับกำลัง ${n}`);
   -

สำหรับโค้ดที่สั้นมาก อนุญาตให้ใช้บรรทัดเดียวได้ เช่น if (cond) return null แต่บล็อกโค้ด (เวอร์ชันสุดท้าย) มักจะอ่านง่ายกว่า

ความยาวสาย

ไม่มีใครชอบอ่านโค้ดแนวนอนยาวๆ แนวทางปฏิบัติที่ดีที่สุดในการแยกพวกเขา

ตัวอย่างเช่น:

 // backtick quotes ` อนุญาตให้แยกสตริงออกเป็นหลายบรรทัด
ให้ STR = `
  TC39 ของ ECMA International คือกลุ่มนักพัฒนา JavaScript
  ผู้ดำเนินการ นักวิชาการ และอื่นๆ ร่วมมือกับชุมชน
  เพื่อรักษาและพัฒนาคำจำกัดความของ JavaScript
-

และสำหรับคำสั่ง if :

 ถ้า (
  ไอดี === 123 &&
  moonPhase === 'แรมข้างแรม' &&
  zodiacSign === 'ราศีตุลย์'
-
  ให้ TheSorceryBegin();
-

ความยาวบรรทัดสูงสุดควรได้รับการตกลงกันในระดับทีม โดยปกติแล้วจะมีความยาว 80 หรือ 120 อักขระ

เยื้อง

การเยื้องมีสองประเภท:

• เยื้องแนวนอน: 2 หรือ 4 ช่องว่าง

  การเยื้องแนวนอนทำได้โดยใช้ช่องว่าง 2 หรือ 4 ช่องหรือสัญลักษณ์แท็บแนวนอน (ปุ่ม Tab ) จะเลือกอันไหนคือสงครามศักดิ์สิทธิ์เก่า ช่องว่างเป็นเรื่องธรรมดามากขึ้นในปัจจุบัน

  ข้อดีอย่างหนึ่งของการเว้นวรรคบนแท็บก็คือการเว้นวรรคทำให้สามารถกำหนดค่าการเยื้องได้อย่างยืดหยุ่นมากกว่าสัญลักษณ์แท็บ

  ตัวอย่างเช่น เราสามารถจัดตำแหน่งพารามิเตอร์ให้ตรงกับวงเล็บเปิดได้ดังนี้:

   แสดง (พารามิเตอร์
       จัดชิด // เว้นช่องว่าง 5 ช่องทางด้านซ้าย
       หนึ่ง,
       หลังจาก,
       อื่น
    -
    -
  -

• การเยื้องแนวตั้ง: บรรทัดว่างสำหรับแยกโค้ดออกเป็นบล็อกลอจิคัล

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

   ฟังก์ชั่นธาร(x, n) {
    ให้ผลลัพธ์ = 1;
    -
    สำหรับ (ให้ i = 0; i < n; i++) {
      ผลลัพธ์ *= x;
    -
    -
    ส่งคืนผลลัพธ์;
  -

  แทรกบรรทัดใหม่พิเศษเพื่อช่วยทำให้โค้ดอ่านง่ายขึ้น โค้ดไม่ควรเกินเก้าบรรทัดโดยไม่มีการเยื้องแนวตั้ง

อัฒภาค

ควรมีเครื่องหมายอัฒภาคอยู่หลังแต่ละคำสั่ง แม้ว่าจะสามารถข้ามได้ก็ตาม

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

หากคุณเป็นโปรแกรมเมอร์ JavaScript ที่มีประสบการณ์ คุณอาจเลือกรูปแบบโค้ดที่ไม่มีอัฒภาคเช่น StandardJS มิฉะนั้น ควรใช้เครื่องหมายอัฒภาคเพื่อหลีกเลี่ยงข้อผิดพลาดที่อาจเกิดขึ้น นักพัฒนาส่วนใหญ่ใส่เครื่องหมายอัฒภาค

ระดับการทำรัง

พยายามหลีกเลี่ยงการซ้อนโค้ดหลายระดับมากเกินไป

ตัวอย่างเช่น ในลูป บางครั้งเป็นความคิดที่ดีที่จะใช้คำสั่ง continue เพื่อหลีกเลี่ยงการซ้อนเพิ่มเติม

ตัวอย่างเช่น แทนที่จะเพิ่ม if แบบมีเงื่อนไขที่ซ้อนกันดังนี้:

 สำหรับ (ให้ i = 0; i < 10; i++) {
  ถ้า (เงื่อนไข) {
    ... // <- อีกหนึ่งระดับการซ้อน
  -
-

เราสามารถเขียนได้:

 สำหรับ (ให้ i = 0; i < 10; i++) {
  ถ้า (!cond) ดำเนินการต่อ;
  ... // <- ไม่มีระดับการซ้อนเพิ่มเติม
-

สิ่งที่คล้ายกันสามารถทำได้โดยใช้ if/else และ return

ตัวอย่างเช่น โครงสร้างสองรายการด้านล่างนี้เหมือนกัน

ตัวเลือกที่ 1:

 ฟังก์ชั่นธาร(x, n) {
  ถ้า (n < 0) {
    alert("ไม่รองรับค่าลบ");
  } อื่น {
    ให้ผลลัพธ์ = 1;

    สำหรับ (ให้ i = 0; i < n; i++) {
      ผลลัพธ์ *= x;
    -

    ส่งคืนผลลัพธ์;
  -
-

ตัวเลือก 2:

 ฟังก์ชั่นธาร(x, n) {
  ถ้า (n < 0) {
    alert("ไม่รองรับค่าลบ");
    กลับ;
  -

  ให้ผลลัพธ์ = 1;

  สำหรับ (ให้ i = 0; i < n; i++) {
    ผลลัพธ์ *= x;
  -

  ส่งคืนผลลัพธ์;
-

ส่วนที่สองสามารถอ่านได้ง่ายกว่าเนื่องจาก "กรณีพิเศษ" ของ n < 0 ได้รับการจัดการตั้งแต่เนิ่นๆ เมื่อการตรวจสอบเสร็จสิ้นแล้ว เราก็สามารถไปยังโฟลว์โค้ด "หลัก" ได้โดยไม่จำเป็นต้องซ้อนเพิ่มเติม

การจัดวางฟังก์ชัน

หากคุณกำลังเขียนฟังก์ชัน "ตัวช่วย" หลายฟังก์ชันและโค้ดที่ใช้ฟังก์ชันเหล่านี้ มีสามวิธีในการจัดระเบียบฟังก์ชัน

1. ประกาศฟังก์ชัน เหนือ โค้ดที่ใช้:

    // ประกาศฟังก์ชัน
   ฟังก์ชั่น createElement() {
     -
   -
   
   ฟังก์ชั่น setHandler (องค์ประกอบ) {
     -
   -
   
   ฟังก์ชั่น walkAround () {
     -
   -
   
   // รหัสที่ใช้
   ให้ elem = createElement();
   setHandler(องค์ประกอบ);
   เดินรอบ();

2. รหัสก่อนจากนั้นจึงทำงาน

    // รหัสที่ใช้ฟังก์ชั่น
   ให้ elem = createElement();
   setHandler(องค์ประกอบ);
   เดินรอบ();
   
   // --- ฟังก์ชันตัวช่วย ---
   ฟังก์ชั่น createElement() {
     -
   -
   
   ฟังก์ชั่น setHandler (องค์ประกอบ) {
     -
   -
   
   ฟังก์ชั่น walkAround () {
     -
   -

3. แบบผสม: มีการประกาศฟังก์ชันในตำแหน่งที่มีการใช้งานครั้งแรก

ส่วนใหญ่แล้ว แนะนำให้ใช้ตัวแปรที่สอง

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

คำแนะนำสไตล์

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

เมื่อสมาชิกทุกคนในทีมใช้แนวทางสไตล์เดียวกัน โค้ดจะดูเหมือนกัน ไม่ว่าสมาชิกในทีมคนไหนจะเป็นคนเขียนก็ตาม

แน่นอนว่าทีมสามารถเขียนแนวทางสไตล์ของตนเองได้ตลอดเวลา แต่โดยปกติแล้วไม่จำเป็นต้องเขียน มีคำแนะนำที่มีอยู่มากมายให้เลือก

ตัวเลือกยอดนิยมบางส่วน:

• คู่มือสไตล์ Google JavaScript

• คู่มือสไตล์ JavaScript ของ Airbnb

• สำนวน.JS

• มาตรฐานJS

• (และอีกมากมาย)

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

Linters อัตโนมัติ

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

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

เครื่องมือขุยที่รู้จักกันดีมีดังนี้:

• JSLint – หนึ่งใน linters แรกๆ

• JSHint – การตั้งค่ามากกว่า JSLint

• ESLint – อาจเป็นอันใหม่ล่าสุด

พวกเขาทั้งหมดสามารถทำงานได้ ผู้เขียนใช้ ESLint

Linters ส่วนใหญ่ถูกรวมเข้ากับโปรแกรมแก้ไขยอดนิยมมากมาย เพียงเปิดใช้งานปลั๊กอินในตัวแก้ไขและกำหนดค่าสไตล์

ตัวอย่างเช่น สำหรับ ESLint คุณควรทำสิ่งต่อไปนี้:

1. ติดตั้ง Node.js

2. ติดตั้ง ESLint ด้วยคำสั่ง npm install -g eslint (npm เป็นตัวติดตั้งแพ็คเกจ JavaScript)

3. สร้างไฟล์กำหนดค่าชื่อ .eslintrc ในรูทของโปรเจ็กต์ JavaScript ของคุณ (ในโฟลเดอร์ที่มีไฟล์ทั้งหมดของคุณ)

4. ติดตั้ง/เปิดใช้งานปลั๊กอินสำหรับโปรแกรมแก้ไขของคุณที่ทำงานร่วมกับ ESLint บรรณาธิการส่วนใหญ่มีหนึ่งคน

นี่คือตัวอย่างของไฟล์ .eslintrc :

 -
  "extends": "eslint: แนะนำ",
  "env": {
    "เบราว์เซอร์": จริง
    "โหนด": จริง
    "es6": จริง
  -
  "กฎ": {
    "ไม่มีคอนโซล": 0,
    "เยื้อง": 2
  -
-

ในที่นี้คำสั่ง "extends" ระบุว่าการกำหนดค่าจะขึ้นอยู่กับชุดการตั้งค่า “eslint:recommended” หลังจากนั้นเราระบุของเราเอง

นอกจากนี้ยังสามารถดาวน์โหลดชุดกฎสไตล์จากเว็บและขยายออกไปแทนได้ ดูhttps://eslint.org/docs/user-guide/getting-startedสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้ง

นอกจากนี้ IDE บางตัวยังมี Linting ในตัว ซึ่งสะดวกแต่ไม่สามารถปรับแต่งได้เหมือนกับ ESLint

สรุป

กฎไวยากรณ์ทั้งหมดที่อธิบายไว้ในบทนี้ (และในคู่มือสไตล์ที่อ้างอิงถึง) มีเป้าหมายเพื่อเพิ่มความสามารถในการอ่านโค้ดของคุณ พวกเขาทั้งหมดเป็นที่ถกเถียงกัน

เมื่อเราคิดถึงการเขียนโค้ดที่ “ดีขึ้น” คำถามที่เราควรถามตัวเองคือ “อะไรทำให้โค้ดอ่านง่ายและเข้าใจง่ายขึ้น” และ “อะไรสามารถช่วยเราหลีกเลี่ยงข้อผิดพลาดได้” สิ่งเหล่านี้คือสิ่งสำคัญที่ต้องคำนึงถึงเมื่อเลือกและโต้เถียงสไตล์โค้ด

การอ่านคำแนะนำเกี่ยวกับสไตล์ยอดนิยมจะช่วยให้คุณตามทันแนวคิดล่าสุดเกี่ยวกับแนวโน้มสไตล์โค้ดและแนวปฏิบัติที่ดีที่สุด

งาน

สไตล์ไม่ดี

ความสำคัญ: 4

เกิดอะไรขึ้นกับรูปแบบโค้ดด้านล่าง

 ฟังก์ชั่นธาร(x,n)
-
  ให้ผลลัพธ์=1;
  สำหรับ (ให้ i=0;i<n;i++) {ผล*=x;}
  ส่งคืนผลลัพธ์;
-

ให้ x=prompt("x?",''), n=prompt("n?",'')
ถ้า (n<=0)
-
  alert(`ไม่รองรับ Power ${n} โปรดกรอกจำนวนเต็มที่มากกว่าศูนย์`);
-
อื่น
-
  การแจ้งเตือน (ธาร(x,n))
-

แก้ไขมัน

สารละลาย

คุณสามารถสังเกตสิ่งต่อไปนี้:

 ฟังก์ชั่น pow(x,n) // <- ไม่มีช่องว่างระหว่างอาร์กิวเมนต์
{ // <- วงเล็บรูปในบรรทัดแยก
  ให้ผลลัพธ์=1;   // <- ห้ามเว้นวรรคก่อนหรือหลัง =
  for(let i=0;i<n;i++) {result*=x;} // <- ไม่มีช่องว่าง
  // เนื้อหาของ { ... } ควรขึ้นบรรทัดใหม่
  ส่งคืนผลลัพธ์;
-

ให้ x=prompt("x?",''), n=prompt("n?",'') // <-- เป็นไปได้ในทางเทคนิค
// แต่ควรสร้างเป็น 2 บรรทัดดีกว่า และไม่มีช่องว่างและขาดหายไป ;
if (n<=0) // <- ไม่มีช่องว่างภายใน (n <= 0) และควรเป็นบรรทัดเพิ่มเติมด้านบน
{ // <- วงเล็บรูปในบรรทัดแยก
  // ด้านล่าง - บรรทัดยาวสามารถแบ่งออกเป็นหลายบรรทัดเพื่อให้อ่านง่ายขึ้น
  alert(`ไม่รองรับ Power ${n} โปรดกรอกจำนวนเต็มที่มากกว่าศูนย์`);
-
else // <- สามารถเขียนเป็นบรรทัดเดียวได้ เช่น "} else {"
-
  alert(pow(x,n)) // ไม่มีช่องว่างและหายไป ;
-

ตัวแปรคงที่:

 ฟังก์ชั่นธาร(x, n) {
  ให้ผลลัพธ์ = 1;

  สำหรับ (ให้ i = 0; i < n; i++) {
    ผลลัพธ์ *= x;
  -

  ส่งคืนผลลัพธ์;
-

ให้ x = prompt("x?", "");
ให้ n = prompt("n?", "");

ถ้า (n <= 0) {
  alert(ไม่รองรับ `Power ${n},
    กรุณากรอกตัวเลขจำนวนเต็มที่มากกว่าศูนย์`);
} อื่น {
  การแจ้งเตือน ( ธาร(x, n) );
-