แนวทางการกำหนดรูปแบบ JavaScript

เลือกข้อตกลงเกี่ยวกับการเขียนโค้ดเดียวกันสำหรับทุกโครงการ JavaScript ของคุณ

ข้อตกลงเกี่ยวกับการเขียนโค้ด JavaScript

ข้อตกลงเกี่ยวกับการเขียนโค้ด (Coding conventions) หมายถึง:แนวทางการกำหนดรูปแบบการเขียนโค้ดเหล่าหลักกฎนี้ประกอบด้วย:

  • กฎการตั้งชื่อและประกาศตัวแปรและฟังก์ชัน
  • กฎการใช้ช่องว่าง หลังเปลี่ยนแบบและหมายเหตุ
  • ประสบการณ์และหลักความเห็นการเขียนโค้ด

ข้อตกลงเกี่ยวกับการเขียนโค้ดให้ความแน่ใจในคุณภาพ:

  • ปรับปรุงความเข้าใจง่ายของโค้ด
  • เพิ่มการดูแลโค้ด

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

หน้านี้นำเสนอข้อตกลงเกี่ยวกับ JavaScript ที่ใช้โดย CodeW3C.com

คุณควรยืดเยื้อยู่และอ่านบทต่อไปใน

变量名

在 CodeW3C.com，我们对标识符名称（变量和函数）使用了驼峰式大小写.

所有名称以字母开头。

在本页的底部，我们会更广泛地讨论命名规则。

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

运算符周围的空格

请始终在运算符（ = + - * / ）周围以及逗号之后添加空格：

ตัวอย่าง

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

代码缩进

请始终使用对代码块缩进使用 4 个空格：

函数

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

请不要对缩进使用制表符。不同的编辑器对 tab 的解释也不尽相同。

语句规则

简单语句的通用规则：

请始终以分号结束单条语句：

ตัวอย่าง

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

针对复杂语句（compound）的通用规则：

  • 请在第一行的结尾处写开括号
  • 请在开括号前使用一个空格
  • 请在新行上写闭括号，不带前导空格
  • 请不要以分号来结束复杂语句

函数：

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

循环：

for (i = 0; i < 5; i++) {
    x += i;
}

条件：

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

对象规则

针对对象定义的通用规则：

  • 把开括号与对象名放在同一行
  • 在每个属性与其值之间使用冒号加一个空格
  • 不要在最后一个属性值对后面写逗号
  • 请在新行上写闭括号，不带前导空格
  • 请始终以分号结束对象定义

ตัวอย่าง

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

可以对短对象在一行中进行压缩，只在属性之间使用空格，就像这样：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

ความยาวของบทต่ำกว่า 80

เพื่อเพิ่มความอธิบาย จงหลีกเลี่ยงให้ความยาวของบทเกิน 80 ตัวอักษรต่อบท:

ถ้าบทความ JavaScript มีความยาวเกินเนื้อหาหนึ่งบท จางใช้การเปลี่ยนบทเมื่อมีอยู่อุปสรรคหรือหลังจากคำบวกหรือคำบอกเลย:

ตัวอย่าง

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

ทดลองด้วยตัวเอง

นามที่ตรงกันตรงข้ามกัน

ใช้นามที่ตรงกันตรงข้ามกันสำหรับทุกๆ โค้ดของคุณเสมอ ตัวอย่างเช่น:

  • ชื่อตัวแปรและฟังก์ชันด้วยCamelCaseเขียน
  • ตัวแปรทั่วไปใช้ใช้คำศัพท์ใหญ่(เราไม่ทำแต่ค่อยค่อยกันมาก็ตาม)
  • ค่าคงที่ (เช่น PI) ใช้ใช้คำศัพท์ใหญ่

เราควรใช้ในชื่อตัวแปรหรือไม่?Hyphens、CamelCaseหรือตัวอ่อนหลังครับ?

นี่เป็นประเด็นที่ผู้แปลงภาษามักจะหารือกัน:

Hyphens ใน HTML และ CSS:

HTML5 สามารถใช้คำนำหน้า data- ในคุณสมบัติ (data-quantity, data-price):

CSS ใช้ Hyphens ในชื่อโครงสร้าง (font-size):

ตัวแทนย่อของ Hyphens อาจถูกเห็นในทางที่ผิด (เช่นการหักในการคำนวณ) ชื่อ JavaScript ไม่อนุญาตให้ใช้ Hyphens:

ตัวอ่อนหลัง:

ผู้แปลงภาษาหลายคนชื่นชอบใช้ตัวอ่อนหลัง (date_of_birth) โดยเฉพาะในฐานข้อมูล SQL:

ตัวอ่อนหลังจะมักถูกใช้ในเอกสาร PHP:

PascalCase:

ผู้แปลงภาษา C มักใช้ PascalCase ในการตั้งชื่อ:

CamelCase:

JavaScript ตัวเอง jQuery และ JavaScript ลิบรายงานใช้ CamelCase ในการตั้งชื่อ:

อย่าใช้สัญลักษณ์ $ ในการตั้งชื่อ JavaScript นามที่มีสัญลักษณ์นี้อาจทำให้เกิดข้อขัดแย้งชื่อ JavaScript。

การโหลด JavaScript ใน HTML

ใช้คำสั่งง่ายๆ ในการโหลดสคริปต์ภายนอก (ตัวแปรที่ควรใช้ไม่จำเป็น):

<script src="myscript.js"></script>

เข้าถึงองค์ประกอบ HTML

ผลของการใช้ HTML สไตล์ที่ไม่เรียบร้อยอาจทำให้เกิดข้อผิดพลาด JavaScript。

สองบทความ JavaScript นี้จะก่อให้เกิดผลที่ต่างกัน:

var obj = getElementById("Demo")
var obj = getElementById("demo")

ถ้าเป็นไปได้ กรุณาใช้นามที่ใช้กันเดียวกันใน HTML (เช่น JavaScript นั้นเอง)。

เข้าถึงมาตราฐานสไตล์ HTML.

นามสกุลไฟล์

ไฟล์ HTML ควรใช้ .html นามสกุล (ไม่ใช่ .htm)

ไฟล์ CSS ควรใช้ .css นามสกุล

ไฟล์ JavaScript ควรใช้ .js นามสกุล

ใช้ชื่อไฟล์ต่ำหลังเครื่องหมายของไฟล์

เว็บเซิร์ฟเวอร์ส่วนใหญ่ (Apache, Unix) มีความสำคัญกับการเขียนใหญ่หรือเล็กของชื่อไฟล์

london.jpg ไม่สามารถเข้าถึงได้ด้วย London.jpg

เว็บเซิร์ฟเวอร์แบบอื่น ๆ (IIS ของ Microsoft) ไม่มีความสำคัญกับการเขียนใหญ่หรือเล็ก

london.jpg สามารถเข้าถึงได้ด้วย London.jpg หรือ london.jpg

หากคุณผสมผสานการใช้ใหญ่หรือเล็ก คุณจะต้องเก็บตัวเองเพื่อให้เป็นต่อเนื่องและสม่ำเสมอ

หากคุณย้ายเว็บไซต์จากเซิร์ฟเวอร์ที่ไม่มีความสำคัญกับการเขียนใหญ่หรือเล็ก แม้แต่ความผิดพลาดเล็กนี้ก็อาจทำลายเว็บไซต์ของคุณ

เพื่อหลีกเลี่ยงปัญหาเหล่านี้ ควรใช้ชื่อไฟล์ต่ำหลังเครื่องหมายของไฟล์ทั้งหมด (หากเป็นไปได้)

ประสิทธิภาพ

คอมพิวเตอร์จะไม่ใช้กฎระเบียบรหัส ส่วนใหญ่กฎที่เกี่ยวข้องไม่มีผลต่อการทำงานของโปรแกรม

มุมมองและช่องว่างเพิ่มเติมไม่ได้เป็นสิ่งสำคัญสำหรับสคริปต์ที่เล็ก

สำหรับสคริปต์ที่กำลังพัฒนา ควรให้ความสำคัญกับความเข้าใจง่าย ควรลดระบบรหัสที่ใหญ่ขึ้น