คู่มือสไตล์ JavaScript
ใช้แบบแผนการเข้ารหัสเดียวกันเสมอสำหรับโปรเจ็กต์ JavaScript ทั้งหมดของคุณ
อนุสัญญาการเข้ารหัส JavaScript
ข้อตกลงการเข้ารหัสเป็นแนวทางสไตล์สำหรับการเขียนโปรแกรม โดยทั่วไปแล้วจะครอบคลุมถึง:
- กฎการตั้งชื่อและการประกาศสำหรับตัวแปรและฟังก์ชัน
- กฎการใช้ช่องว่าง การเยื้อง และความคิดเห็น
- หลักปฏิบัติและหลักการเขียนโปรแกรม
การเข้ารหัสแบบปลอดภัยคุณภาพ :
- ปรับปรุงความสามารถในการอ่านโค้ด
- ทำให้การดูแลโค้ดง่ายขึ้น
ข้อตกลงในการเข้ารหัสสามารถจัดทำเป็นเอกสารกฎสำหรับทีมที่จะปฏิบัติตาม หรือเป็นเพียงแนวทางปฏิบัติในการเขียนโค้ดส่วนบุคคลของคุณ
หน้านี้อธิบายหลักการทั่วไปของโค้ด JavaScript ที่ใช้โดย W3Schools
คุณควรอ่านบทต่อไป "แนวทางปฏิบัติที่ดีที่สุด" และเรียนรู้วิธีหลีกเลี่ยงข้อผิดพลาดในการเข้ารหัส
ชื่อตัวแปร
ที่ W3schools เราใช้camelCaseสำหรับชื่อตัวระบุ (ตัวแปรและฟังก์ชัน)
ชื่อทั้งหมดขึ้นต้นด้วยตัวอักษร
ที่ด้านล่างของหน้านี้ คุณจะพบการสนทนาที่กว้างขึ้นเกี่ยวกับกฎการตั้งชื่อ
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
ช่องว่างรอบๆ ตัวดำเนินการ
ใส่ช่องว่างรอบโอเปอเรเตอร์เสมอ ( = + - * / ) และหลังเครื่องหมายจุลภาค:
ตัวอย่าง:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
รหัสเยื้อง
ใช้ช่องว่าง 2 ช่องเพื่อเยื้องบล็อกโค้ดเสมอ:
ฟังก์ชั่น:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
อย่าใช้แท็บ (ตัวสร้างตาราง) สำหรับการเยื้อง บรรณาธิการต่างตีความแท็บต่างกัน
กฎคำสั่ง
กฎทั่วไปสำหรับข้อความง่ายๆ:
- ลงท้ายประโยคง่ายๆ ด้วยเครื่องหมายอัฒภาคเสมอ
ตัวอย่าง:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
กฎทั่วไปสำหรับคำสั่งที่ซับซ้อน (แบบผสม):
- ใส่วงเล็บเปิดที่ท้ายบรรทัดแรก
- ใช้ช่องว่างก่อนวงเล็บเปิด
- ใส่วงเล็บปิดบนบรรทัดใหม่โดยไม่มีช่องว่างนำหน้า
- อย่าจบประโยคที่ซับซ้อนด้วยเครื่องหมายอัฒภาค
ฟังก์ชั่น:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
ลูป:
for (let i = 0; i < 5; i++) {
x += i;
}
เงื่อนไข:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
กฎของวัตถุ
กฎทั่วไปสำหรับคำจำกัดความของวัตถุ:
- วางวงเล็บเปิดในบรรทัดเดียวกับชื่อวัตถุ
- ใช้โคลอนบวกหนึ่งช่องว่างระหว่างแต่ละพร็อพเพอร์ตี้กับค่าของมัน
- ใช้เครื่องหมายคำพูดรอบค่าสตริง ไม่ใช่รอบค่าตัวเลข
- อย่าใส่เครื่องหมายจุลภาคหลังคู่ค่าคุณสมบัติ-ค่าสุดท้าย
- วางวงเล็บปิดบนบรรทัดใหม่โดยไม่มีช่องว่างนำหน้า
- จบคำจำกัดความของวัตถุด้วยเครื่องหมายอัฒภาคเสมอ
ตัวอย่าง
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
ออบเจ็กต์สั้นสามารถเขียนในบรรทัดเดียวโดยใช้ช่องว่างระหว่างคุณสมบัติดังนี้:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
ความยาวสาย <80
เพื่อให้อ่านง่าย ให้หลีกเลี่ยงบรรทัดที่ยาวเกิน 80 อักขระ
หากคำสั่ง JavaScript ไม่พอดีกับหนึ่งบรรทัด ตำแหน่งที่ดีที่สุดที่จะแยกคำสั่งคือหลังจากโอเปอเรเตอร์หรือเครื่องหมายจุลภาค
ตัวอย่าง
document.getElementById("demo").innerHTML =
"Hello Dolly.";
อนุสัญญาการตั้งชื่อ
ใช้หลักการตั้งชื่อเดียวกันเสมอสำหรับรหัสทั้งหมดของคุณ ตัวอย่างเช่น:
- ชื่อตัวแปรและฟังก์ชันที่เขียนเป็นcamelCase
- ตัวแปรโกลบอลเขียนด้วยUPPERCASE (เราไม่ได้ แต่เป็นเรื่องปกติ)
- ค่าคงที่ (เช่น PI) เขียนด้วยUPPERCASE
คุณควรใช้hyp- hens , camelCaseหรือ under_scoresในชื่อตัวแปรหรือไม่
นี่เป็นคำถามที่โปรแกรมเมอร์มักจะพูดคุยกัน คำตอบขึ้นอยู่กับว่าคุณถามใคร:
ยัติภังค์ใน HTML และ CSS:
แอตทริบิวต์ HTML5 สามารถเริ่มต้นด้วย data- (data-quantity, data-price)
CSS ใช้ยัติภังค์ในชื่อคุณสมบัติ (ขนาดแบบอักษร)
ยัติภังค์อาจถูกเข้าใจผิดว่าเป็นความพยายามในการลบ ไม่อนุญาตให้ใช้ยัติภังค์ในชื่อ JavaScript
ขีดเส้นใต้:
โปรแกรมเมอร์หลายคนชอบใช้ขีดล่าง (date_of_birth) โดยเฉพาะในฐานข้อมูล SQL
เครื่องหมายขีดล่างมักใช้ในเอกสารประกอบของ PHP
PascalCase:
PascalCase มักเป็นที่ต้องการของโปรแกรมเมอร์ภาษาซี
อูฐกรณี:
camelCase ถูกใช้โดย JavaScript โดย jQuery และไลบรารี JavaScript อื่นๆ
อย่าขึ้นต้นชื่อด้วยเครื่องหมาย $ มันจะทำให้คุณขัดแย้งกับชื่อไลบรารี JavaScript มากมาย
กำลังโหลด JavaScript ใน HTML
ใช้ไวยากรณ์อย่างง่ายสำหรับการโหลดสคริปต์ภายนอก (ไม่จำเป็นต้องใช้แอตทริบิวต์ type):
<script src="myscript.js"></script>
การเข้าถึงองค์ประกอบ HTML
ผลที่ตามมาของการใช้รูปแบบ HTML ที่ "ไม่เป็นระเบียบ" อาจส่งผลให้เกิดข้อผิดพลาด JavaScript
คำสั่ง JavaScript ทั้งสองนี้จะให้ผลลัพธ์ที่แตกต่างกัน:
const obj = getElementById("Demo")
const obj = getElementById("demo")
หากเป็นไปได้ ให้ใช้หลักการตั้งชื่อแบบเดียวกัน (เช่น JavaScript) ใน HTML
ไปที่ คู่มือสไตล์ HTML
นามสกุลไฟล์
ไฟล์ HTML ควรมีนามสกุล.html ( อนุญาตให้ใช้ . htm )
ไฟล์ CSS ควรมีนามสกุล.css
ไฟล์ JavaScript ควรมีนามสกุล . js
ใช้ชื่อไฟล์ตัวพิมพ์เล็ก
เว็บเซิร์ฟเวอร์ส่วนใหญ่ (Apache, Unix) คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่เกี่ยวกับชื่อไฟล์:
London.jpg ไม่สามารถเข้าถึงได้ในชื่อ London.jpg
เว็บเซิร์ฟเวอร์อื่นๆ (Microsoft, IIS) ไม่คำนึงถึงขนาดตัวพิมพ์:
London.jpg สามารถเข้าถึงได้เป็น London.jpg หรือ london.jpg
หากคุณใช้ตัวพิมพ์ใหญ่และตัวพิมพ์เล็กผสมกัน คุณจะต้องมีความสอดคล้องกันอย่างยิ่ง
หากคุณเปลี่ยนจากที่ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ไปยังเซิร์ฟเวอร์ที่คำนึงถึงขนาดตัวพิมพ์ ข้อผิดพลาดเล็กๆ น้อยๆ ก็สามารถทำลายเว็บไซต์ของคุณได้
เพื่อหลีกเลี่ยงปัญหาเหล่านี้ ให้ใช้ชื่อไฟล์ตัวพิมพ์เล็กเสมอ (ถ้าเป็นไปได้)
ประสิทธิภาพ
คอมพิวเตอร์ไม่ใช้แบบแผนการเข้ารหัส กฎส่วนใหญ่มีผลกระทบเพียงเล็กน้อยต่อการทำงานของโปรแกรม
การเยื้องและการเว้นวรรคพิเศษไม่สำคัญในสคริปต์ขนาดเล็ก
สำหรับโค้ดที่กำลังพัฒนา ควรเน้นความสามารถในการอ่าน สคริปต์การผลิตที่ใหญ่ขึ้นควรย่อให้เล็กสุด