20 แนวทางการเขียน JavaScript ที่ดี

javascript-736400_640

1. ใช้เครื่องหมาย === และ !== แทนการใช้ == และ != เมื่อมีการเปรียบเทียบเสมอ

2. ปิดท้ายคำสั่งด้วยเครื่องหมาย ; ทุกครั้ง

3. ใช้ JSLint (http://www.jslint.com) ในการหาตรวจสอบคุณภาพโค้ด และตรวจดู errors ต่างๆ

4. ถ้ามีการเปิด blocks ของโค้ด ให้เขียนวงเล็บปีกกาในบรรทัดเดียวกัน เช่น

if (findSite === 'codingthailand.com')  {
console.log('free programming courses!!');
}

if (findSite === 'codingthailand.com') {

console.log('free programming courses!!');

}

5. การประกาศตัวแปร (Variables) ให้ประกาศบรรทัดแรกทุกครั้งโดยเฉพาะฟังก์ชันเพื่อป้องกันปัญหาเรื่อง global variable เช่น

function showSkills() {
var yourSkill = 'JavaScript'; //ประกาศบรรทัดบนสุดตรงนี้
console.log(yourSkill);
}

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; 
}

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);
}

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);

1	setInterval("document.getElementById('container').innerHTML += 'My new number: ' + i", 3000);

ให้เขียนเป็นฟังก์ชันแล้วเรียกใช้ดีกว่า

setInterval(someFunction, 3000);

1	setInterval(someFunction, 3000);

11. ถ้าจะสร้าง Object ใหม่ให้ใช้ {} ปีกกา แทนการใช้ New Object() เช่น

var obj = {
name: 'Akenarin',
lastName: 'Komkoon',
showSkill : function() {
console.log(this.name);
}
}

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>

เขียนแค่นี้พอ

<script type="text/javascript">
....
</script>

....

</script>

หรือ

<script>
....
</script>

....

</script>

14. ถ้าประกาศ Objects อย่าใช้คำสงวน เป็นคีย์ (key) เพราะมันจะใช้ไม่ได้ใน IE8

15. ใช้ฟังก์ชัน push ของ Array ในการกำหนดค่าเข้าไปในแทนการใส่ค่าโดยตรง เช่น

var someArr = [];
someArr.push('hello');
หลีกเลี่ยง
someArr[0] = 'hello';

var someArr = [];

someArr.push('hello');

หลีกเลี่ยง

someArr[0] = 'hello';

16. ใช้เครื่องหมาย Single quotes (‘) สำหรับสตริง (String) เช่น

var myweb = 'codingthailand.com';
console.log('My website is ' + myweb);

1 2	var myweb = 'codingthailand.com'; console.log('My website is ' + myweb);

17. ใช้เครื่องหมายจุด . ในการเข้าถึงพรอพเพอร์ตี้ (properties) ของ Objects เช่น

var programmer = {
name : 'akenarin',
skill : 'html'
}

var programmer = {

name : 'akenarin',

skill : 'html'

}

ตอนเข้าถึง properties ให้เรียกแบบนี้

programmer.name;
programmer.skill;

1 2	programmer.name; programmer.skill;

18. ใช้หนึ่ง var หรือหนึ่ง let ต่อหนึ่งตัวแปร เพราะดูง่าย และป้องกันความผิดพลาด เช่น

var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

var items = getItems();

var goSportsTeam = true;

var dragonball = 'z';

19. ตัวแปรที่ยังไม่มีค่า ให้ประกาศไว้ข้างหลังสุดของการประกาศตัวแปรทั้งหมด เช่น

var items = getItems();
var goHome = true;
var football;
var car;

var items = getItems();

var goHome = true;

var football;

var car;

20. ใช้การเขียนโค้ดแบบ camelCase คือ ขึ้นต้นด้วยตัวเล็กและคำต่อไปขึ้นต้นด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อออบเจ็กต์, ฟังก์ชัน, และ อินสแตนซ์ และ ใช้ PascalCase คือ ขึ้นต้นทุกคำด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อ constructor หรือ คลาส

แน่นอนทั้ง 20 ข้อนี้บางข้อเป็นเพียงข้อแนะนำ ก็ลองปรับให้เข้ากับตัวเองดูนะครับ 🙂

20 แนวทางการเขียน JavaScript ที่ดี

โค้ชเอก

ใส่ความเห็น ยกเลิกการตอบ