COOL IT IDEAS AND STUFF
19 simple JavaScript coding standards to keep your code clean
09-Sep-20
คัมภีร์เทพ IT
See the original english version Click here!
Developer ที่เขียน Code ทุกคนล้วนอยากให้ Code ของพวกเขา Clean โดยในบทความนี้จะมาบอกถึง 19 Coding Standards ที่ช่วยให้ JavaScript Code ของคุณ Clean มากขึ้น
สำหรับ Coding Standards ที่กำลังจะกล่าวถึงนี้ จะช่วยทำให้ Code ของคุณ:
- มีความสอดคล้องกัน
- ง่ายในการอ่านและทำความเข้าใจ
- ง่ายในการ Maintain
1. เมื่อมีการเปรียบเทียบ ให้ใช้ === แทนการใช้ ==
สิ่งนี้มีความสำคัญ เนื่องจาก JavaScript เป็น Dynamic Language ดังนั้น การใช้ == อาจจะได้ผลลัพธ์ที่คุณไม่คาดคิดก็ได้
ไม่แนะนำ:
แนะนำ:
2. ให้ใช้ let แทนการใช้ var
มันเป็นวิธีที่เรียบง่าย คือ การใช้ let จะช่วยแก้ปัญหาเกี่ยวกับ Scope ของ var ใน JavaScript
ไม่แนะนำ:
แนะนำ:
3. ให้ใช้ const แทนการใช้ let
ในบางกรณี การใช้ const จะช่วยหยุด Developer ที่พยายามเปลี่ยนแปลงในสิ่งที่ไม่ควรจะเปลี่ยน และช่วยให้การอ่านทำความเข้าใจทำได้ง่ายขึ้น
ไม่แนะนำ:
แนะนำ:
4. ใช้ Semicolons (;) อยู่เสมอ
แม้ว่า JavaScript จะไม่ได้บังคับให้ใส่ Semicolon (;) เมื่อสิ้นสุด Statement เหมือนอย่างภาษาอื่น ๆ แต่การใช้ ; จะช่วยให้ Code มีความสอดคล้องกัน และมีประโยชน์ในเรื่องการเป็นตัวคั่นแต่ละ Statement
ไม่แนะนำ:
แนะนำ:
5. มาตรฐานการตั้งชื่อตัวแปร (Naming Conventions) ใน JavaScript
let : ควรเป็นรูปแบบ camelCase
const : ถ้าอยู่ที่ส่วนบนของ File ให้ใช้ Upper Case Snake Case อย่างเช่น MY_CONST แต่หากถ้าไม่อยู่ที่ส่วนบนของ File ให้ใช้ camelCase
class : ควรใช้เป็น PascalCasing อย่างเช่น MyClass
function : ควรใช้เป็น camelCase อย่างเช่น myFunction
6. ใช้ Template Literals เมื่อต้องการนำ Strings มาต่อกัน
Template Literals เป็น String Literals ที่อนุญาตให้ใช้ Embedded Expressions ได้
ใน IE11 หรือ Version ที่ต่ำกว่า จะไม่รองรับ String Literals
ไม่แนะนำ:
แนะนำ:
7.หากเป็นไปได้ ให้ใช้ ES6 Arrow Functions
Arrow Functions เป็น Syntax ที่ช่วยเพิ่มความกระชับในการเขียน Function Expression พวกมันไม่มีลักษณะเฉพาะและเปลี่ยนวิธีการใช้ this ใน Function
ไม่แนะนำ:
แนะนำ:
8. ใช้วงเล็บปีกกาครอบ Control Structures เสมอ
เราจำเป็นต้องใช้วงเล็บสำหรับ Control Structures ทั้งหมด (เช่น if, else, for, do, while และอื่น ๆ)
คุณอาจรู้สึกว่ามันไม่ได้จำเป็นมากในกรณีที่เราใช้ if statement ในบรรทัดเดียว แต่บ่อยครั้ง สิ่งนี้ก็เป็นสาเหตุให้เกิดความผิดพลาดเมื่อเราไม่ใช้วงเล็บปีกกา ซึ่งอาจทำให้ Developers เผลอเพิ่ม statement อื่น ๆ เข้าไปภายใต้ conditional statement ที่อยู่โดยรอบ
ตัวอย่าง
นี่คือสิ่งที่ควรจะเป็น:
ไม่แนะนำ:
แนะนำ:
9. ตรวจสอบใน JavaScript ให้แน่ใจว่า ให้วงเล็บปีกกาเปิด อยู่ในบรรทัดเดียวกันกับ statement โดยมีช่องว่างคั่นกลาง
ไม่แนะนำ:
แนะนำ:
10. พยายามลดการใช้รูปแบบ Nesting (การซ้อนกัน)
หากคุณใช้ if ซ้อนภายใน if อาจทำให้เกิดความยุ่งเหยิงและทำให้อ่านยากมากขึ้น บางครั้งคุณอาจไม่สามารถหลีกเลี่ยงได้ แต่คุณควรดู Structure ของ JavaScript อยู่เสมอ ว่า คุณจะสามารถเปลี่ยนแปลงมันได้หรือไม่
ไม่แนะนำ:
แนะนำ:
คุณสามารถเห็นได้จากตัวอย่างด้านบนนี้ว่า มันอ่านได้ง่ายกว่า ถ้าเป็นไปได้ เชื่อว่าคงมีหลายคนที่พยายามหลีกเลี่ยงไปใช้อย่างอื่น เคล็ดลับอีกข้อหนึ่งก็คือให้ลองตรวจสอบดูก่อน เหมือนอย่างด้านล่างนี้:
ไม่แนะนำ:
แนะนำ:
11. ลองสร้างความยาวบรรทัด "สูงสุด" สำหรับ File และ Function ต่างๆ
นี่อาจเป็นเรื่องยาก เนื่องจากแต่ละ Application ก็มีความแตกต่างกัน สิ่งสำคัญก็คือต้องมีคำแนะนำ เมื่อคุณคิดว่าบางส่วนของ Code มีขนาดที่ใหญ่มากเกินไป การทำแบบนี้อาจต้องใช้เวลาทดลองเล็กน้อยเพื่อหาความยาวที่เหมาะสมสำหรับคุณ
ตัวอย่าง:
File: ประกอบไปด้วย Code จำนวน 80 บรรทัด
Function: ประกอบไปด้วย Code จำนวน 15 บรรทัด
12. ใช้อักษรตัวพิมพ์เล็กกับชื่อ File
เช่น จาก MyFile.js ควรเป็น myFile.js
13. ใช้ Default Parameters หากเป็นไปได้
ใน JavaScript หากคุณไม่ส่งค่าไปยัง Parameter เมื่อเรียกใช้ Function มันจะเป็น undefined
ไม่แนะนำ:
แนะนำ:
14. ควรใช้ break และมี default ใน Switch Statements
หากคุณจำเป็นต้องใช้ Switch Statements ควรตรวจสอบให้แน่ใจว่า คุณมี break แต่ละ condition และใช้ default ด้วย
ไม่แนะนำ:
แนะนำ:
15. ใช้ named Exports
อย่าใช้ default exports การ Import Modules ต้องตั้งชื่อให้กับค่าเหล่านั้น ซึ่งอาจนำไปสู่ความไม่สอดคล้องกันในการตั้งชื่อ ระหว่าง Modules
ไม่แนะนำ:
แนะนำ:
16. ไม่ควรใช้ Wildcard Imports
สิ่งนี้จะช่วยทำให้แน่ใจว่า คุณมี default export เพียงรายการเดียว
ไม่แนะนำ:
แนะนำ:
17. ใช้ Shortcuts สำหรับ Booleans
ไม่แนะนำ:
แนะนำ:
18. หลีกเลี่ยงการใช้ Ternary Statements ที่ไม่จำเป็น
ไม่แนะนำ:
แนะนำ:
19. ใช้เพียง 1 ตัวแปร ต่อการประกาศตัวแปรแต่ละครั้ง
สิ่งนี้อาจทำให้คุณรู้สึกไม่เห็นด้วยอีกครั้ง แต่การประกาศตัวแปรมากกว่า 1 ตัว อาจทำให้เกิดข้อผิดพลาดได้ในบางกรณี
ไม่แนะนำ:
แนะนำ:
สรุป
Coding Standards ในแต่ละภาษา สามารถช่วยในเรื่องความสามารถในการอ่าน/ทำความเข้าใจและการ Maintain Application สิ่งหนึ่งที่อาจยุ่งยากหากคุณทำงานเป็นทีมก็คือ การพยายามทำให้ทุกคนทำตาม Coding Standards ที่ตั้งไว้ แนวคิดบางอย่างที่อาจช่วยได้มีดังนี้:
- การ Review Code โดยดู Code ไปทีละบรรทัด
- ใช้การ Linting หรือ Code Analyzers
- การสร้าง Application ที่สอดคล้องกัน เพื่อที่ Developer ทุกคนจะได้ทราบว่า ต้องสร้างหรือ Update อะไรบ้าง
- เมื่อคุณสร้างอะไรใหม่ขึ้นมา ก็ควรให้ Senior Developer สักคนมาช่วยมาดู เนื่องจาก Developer คนอื่นจะสามารถใช้ Code นั้นเป็นแนวทางได้
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด