Hướng dẫn định dạng và quy tắc mã hóa JavaScript

Luôn luôn sử dụng các quy ước mã hóa tương tự cho tất cả các dự án JavaScript của bạn.

Quy ước mã hóa JavaScript

Quy ước mã hóa là những hướng dẫn định dạng cho lập trình. Bao gồm:

• Đặt tên và khai báo quy tắc cho các biến và hàm.
• Quy tắc sử dụng khoảng trắng, căn lề và nhận xét.
• Thực tiễn và nguyên tắc lập trình

Quy ước mã hóa đảm bảo chất lượng:

• Cải thiện khả năng đọc mã
• Làm cho việc thay đổi, sửa mã dễ dàng hơn

Quy ước mã hóa có thể được ghi lại các quy tắc cho các nhóm làm việc, hoặc chỉ được thực hành mã hóa cá nhân của bạn.

Tên các biến

Sử dụng camelCase cho các tên định danh (các biến và các hàm). Tất cả các tên bắt đầu với một từ.

firstName = “John”;
lastName = “Doe”;

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Khoảng trắng quanh toán tử

Luôn đặt khoảng trắng quanh các toán tử (= + – * /), và sau dấu phẩy:

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

Mã nhị phân

Luôn luôn sử dụng 4 khoảng trắng để thụt lề các khối mã. Hàm:

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

Quy tắc viết câu lệnh

Các quy tắc chung cho các câu lệnh đơn giản:

• Luôn kết thúc một câu lệnh đơn giản bằng dấu chấm phẩy.

var values = [“Volvo”, “Saab”, “Fiat”];

var person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};

Các quy tắc chung cho các câu lệnh phức hợp (compound):

• Đặt dấu mở ngoặc ở cuối dòng đầu tiên.
• Sử dụng một khoảng trắng trước khung mở.
• Đặt dấu đóng ngoặc ở dòng mới, không có khoảng trắng ở đầu.
• Không kết thúc câu lệnh phức tạp bằng dấu chấm phẩy.

Hàm:

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

Vòng lặp:

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

Điều kiện:

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

Quy tắc cho đối tượng

Những quy tắc chung cho các định nghĩa đối tượng:

• Đặt dấu mở ngoặc trên cùng một dòng với tên đối tượng.
• Sử dụng dấu hai chấm cộng một khoảng trống giữa mỗi thuộc tính và giá trị của nó.
• Sử dụng dấu ngoặc kép quanh các giá trị chuỗi chứ không phải quanh các giá trị số.
• Không thêm dấu phẩy sau cặp giá trị thuộc tính cuối cùng.
• Đặt dấu đóng ngoặc trên một dòng mới, không có khoảng trắng ở đầu.
• Luôn luôn kết thúc một định nghĩa đối tượng với một dấu chấm phẩy.

Ví dụ:

var person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};

Đối tượng ngắn có thể được viết gộp trên một dòng, chỉ sử dụng các khoảng trống giữa các thuộc tính, như sau:

var person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”};

Chiều dài mã trên một dòng <80

Để đoạn code được dễ đọc hơn, tránh viết quá 80 ký tự trên một dòng. Nếu một lệnh JavaScript không phù hợp trên một dòng, chỗ hợp lý để ngắt là sau một toán tử hoặc một dấu phẩy.

document.getElementById(“demo”).innerHTML =
“Hello Dolly.”;

Quy ước đặt tên

Luôn sử dụng cùng một quy ước đặt tên cho tất cả mã của bạn. Ví dụ:

• Tên biến và hàm được viết bằng camelCase
• Các biến toàn cục được viết bằng UPPERCASE
• Hằng số (như PI) viết bằng UPPERCASE

Dấu nối trong HTML và CSS:

Thuộc tính HTML5 có thể bắt đầu bằng data- (data-quantity, data-price). CSS sử dụng dấu gạch ngang trong tên thuộc tính (cỡ chữ).

Dấu gạch dưới:

Nhiều lập trình viên thích sử dụng dấu gạch dưới (date_of_birth), đặc biệt là trong cơ sở dữ liệu SQL. Dấu gạch dưới thường được sử dụng trong tài liệu PHP.

PascalCase:

PascalCase thường được các lập trình viên C ưa thích.

camelCase:

camelCase được sử dụng bởi chính JavaScript, bởi jQuery, và các thư viện JavaScript khác. Không bắt đầu tên với dấu $. Điều này sẽ đưa bạn vào cuộc xung đột với nhiều tên thư viện JavaScript.

Loading JavaScript trong HTML

Sử dụng cú pháp đơn giản để tải tập lệnh bên ngoài (thuộc tính type là không cần thiết):

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

Truy cập các phần tử HTML

Hậu quả của việc sử dụng định dạng HTML một cách lộn xộn có thể dẫn đến lỗi JavaScript. Hai câu lệnh JavaScript này sẽ cho kết quả khác nhau:

var obj = getElementById(“Demo”)

var obj = getElementById(“demo”)

Nếu có thể, sử dụng cùng một quy ước đặt tên (như JavaScript) trong HTML.

Tiện ích mở rộng file

Các tệp HTML nên có đuôi .html (không phải .htm). Các tệp CSS nên có phần mở rộng .css. Các tệp JavaScript nên có đuôi .js.

Sử dụng tên file là chữ viết thường

Hầu hết các máy chủ web (Apache, Unix) đều phân biệt chữ hoa và chữ thường với tên tập tin: london.jpg không thể truy cập được như London.jpg.

Các máy chủ web khác (Microsoft, IIS) không phân biệt chữ hoa chữ thường: london.jpg có thể được truy cập dưới dạng London.jpg hoặc london.jpg.

Nếu bạn sử dụng kết hợp các chữ hoa và chữ thường, như vậy sẽ không nhất quán. Nếu bạn di chuyển từ một trường hợp insensitive, đến một máy chủ sensitive, ngay cả những lỗi nhỏ có thể phá vỡ trang web của bạn. Để tránh những vấn đề này, luôn sử dụng tên tệp chữ thường (nếu có thể).

Hiệu suất

Quy ước mã hoá không được sử dụng bởi máy tính. Hầu hết các quy tắc đều ít ảnh hưởng đến việc thực hiện các chương trình.

Thụt lề và khoảng trắng không đáng kể trong các tập lệnh nhỏ. Đối với việc phát triển các dòng mã cần dễ đọc hơn. Các script lớn hơn phải được tối giản đi.