1. ใช้เครื่องหมาย === และ !== แทนการใช้ == และ != เมื่อมีการเปรียบเทียบเสมอ
2. ปิดท้ายคำสั่งด้วยเครื่องหมาย ; ทุกครั้ง
3. ใช้ JSLint (http://www.jslint.com) ในการหาตรวจสอบคุณภาพโค้ด และตรวจดู errors ต่างๆ
4. ถ้ามีการเปิด blocks ของโค้ด ให้เขียนวงเล็บปีกกาในบรรทัดเดียวกัน เช่น
|
|
if (findSite === 'codingthailand.com') { console.log('free programming courses!!'); } |
5. การประกาศตัวแปร (Variables) ให้ประกาศบรรทัดแรกทุกครั้งโดยเฉพาะฟังก์ชันเพื่อป้องกันปัญหาเรื่อง global variable เช่น
|
|
function showSkills() { var yourSkill = 'JavaScript'; //ประกาศบรรทัดบนสุดตรงนี้ console.log(yourSkill); } |
6. การประกาศตัวแปรให้ขึ้นต้นด้วย var ทุกครั้ง
7. ใช้วงเล็บปีกกา {} เสมอในกรณีที่ประกาศบล็อกมากกว่าหนึ่งบล็อก (blocks) ถ้ามี 1 บล็อกก็ให้อยู่บรรทัดเดียวกัน เช่น
|
|
if (someVar) x = false //ไม่ดี ให้เขียนเป็น if (someVar) x = false; //ดี หรือ if (someVar) { x = false; //ดี y = true; } |
8. การ embed โค้ด แทรกโค้ด javascript ให้แทรกด้านล่างของหน้าเว็บเสมอ (ก่อน tag body)
9. ประกาศตัวแปรต่างๆ ไว้นอกคำสั่ง for เสมอ เมื่อประกาศแล้ว ค่อยนำมาใช้ใน for เช่น
|
|
var userName = document.getElementById('user'); for (var i = 0, len = someArr.length; i < len; i++) { userName.innerHtml += 'my number: ' + i; //เรียกใช้ userName แบบนี้ console.log(i); } |
10. อย่าเอาคำสั่งที่เป็นตัวอักษร (String) ไปไว้ในคำสั่ง “SetInterval” หรือ “SetTimeOut” เช่น
|
|
setInterval("document.getElementById('container').innerHTML += 'My new number: ' + i", 3000); |
ให้เขียนเป็นฟังก์ชันแล้วเรียกใช้ดีกว่า
|
|
setInterval(someFunction, 3000); |
11. ถ้าจะสร้าง Object ใหม่ให้ใช้ {} ปีกกา แทนการใช้ New Object() เช่น
|
|
var obj = { name: 'Akenarin', lastName: 'Komkoon', showSkill : function() { console.log(this.name); } } |
12. Arrays ก็เช่นกันให้ใช้ [] แทน New Array()
13. ลบคำว่า “language” ออกจากคำสั่ง script เพราะมันไม่จำเป็นแล้ว
จาก
|
|
<script type="text/javascript" language="javascript"> .... </script> |
เขียนแค่นี้พอ
|
|
<script type="text/javascript"> .... </script> |
หรือ
14. ถ้าประกาศ Objects อย่าใช้คำสงวน เป็นคีย์ (key) เพราะมันจะใช้ไม่ได้ใน IE8
15. ใช้ฟังก์ชัน push ของ Array ในการกำหนดค่าเข้าไปในแทนการใส่ค่าโดยตรง เช่น
|
|
var someArr = []; someArr.push('hello'); หลีกเลี่ยง someArr[0] = 'hello'; |
16. ใช้เครื่องหมาย Single quotes (‘) สำหรับสตริง (String) เช่น
|
|
var myweb = 'codingthailand.com'; console.log('My website is ' + myweb); |
17. ใช้เครื่องหมายจุด . ในการเข้าถึงพรอพเพอร์ตี้ (properties) ของ Objects เช่น
|
|
var programmer = { name : 'akenarin', skill : 'html' } |
ตอนเข้าถึง properties ให้เรียกแบบนี้
|
|
programmer.name; programmer.skill; |
18. ใช้หนึ่ง var หรือหนึ่ง let ต่อหนึ่งตัวแปร เพราะดูง่าย และป้องกันความผิดพลาด เช่น
|
|
var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; |
19. ตัวแปรที่ยังไม่มีค่า ให้ประกาศไว้ข้างหลังสุดของการประกาศตัวแปรทั้งหมด เช่น
|
|
var items = getItems(); var goHome = true; var football; var car; |
20. ใช้การเขียนโค้ดแบบ camelCase คือ ขึ้นต้นด้วยตัวเล็กและคำต่อไปขึ้นต้นด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อออบเจ็กต์, ฟังก์ชัน, และ อินสแตนซ์ และ ใช้ PascalCase คือ ขึ้นต้นทุกคำด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อ constructor หรือ คลาส
แน่นอนทั้ง 20 ข้อนี้บางข้อเป็นเพียงข้อแนะนำ ก็ลองปรับให้เข้ากับตัวเองดูนะครับ 🙂
