JavaScript Style Guide and Coding Conventions - Hướng dẫn phong cách và quy ước viết code trong JavaScript

by GokiSoft.Com - 21:47 18/05/2020 3,278 Lượt Xem

Short URL: https://gokisoft.com/1405

Luôn sử dụng một quy ước viết code cho tất cả các dự án JavaScript.

Quy ước viết code JavaScript(JavaScript Coding Conventions)

Các quy ước code là các hướng dẫn phong cách lập trình. Chúng thông thường bao gồm:

Các quy tác đặt tên và khai báo cho các biến và các hàm.
Các quy tắc sử dụng khoảng trắng, thụt dòng, và các chú thích.
Thực hành lập trình và các nguyên lý.

Quy ước lập trình khiến chất lượng code được đảm bảo:

Cải thiện khả năng đọc code
Làm code dễ dàng hơn trong việc bảo trì

Các quy ước code có thể là các quy tắc được tài liệu hóa cho các nhóm làm theo, hoặc chỉ là sự luyện tập cá nhân của bạn.

Trang này thể hiện các quy ước phổ biến trong các quy ước code trong JavaScript.

Bạn cũng nên đọc chương tiếp theo "Các luyện tập tốt nhất(Best Practices)", và học cách tránh các bẫy về code.

Tên biến

Trong W3school chúng ta dùng camelCase cho việc xác đinh tên (biến và hàm).

Tất cả các tên bắt đầu bằng một chữ cái.

Ở cuối của trang này, bạn sẽ tìm thấy các bàn luận rộng hơn về các quy tắc đặt tên.

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

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

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

ví dụ

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

Thụt đầu dòng code

Luôn sử dụng hai khoảng trắng để lùi đầu dòng cho các khối code:

hàm:

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

Không sử dụng tab cho việc thụt đầu dòng. Các trình biên dịch khác nhau dịch các tab theo các cách khác nhau.

Các quy tắc về cú pháp

Các quy tắc dùng 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 với một dấu chấm phẩy.

ví dụ

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 tạp(ghép) :

Đặt dấu ngoặc nhọn mở ở cuối dòng đầu tiên.
Sử dụng một khoảng trắng trước dấu ngoặc nhọn mở.
Đặt dấu ngoặc nhọn đóng trên một dòng mởi, không sử dụng khoảng trắng đầu dòng.
Đừng kết thúc một 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;
}

Câu điều kiện

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

Các quy tắc của đối tượng(object)

Các quy tắc dung cho việc định nghĩa đối tượng:

Đặt dấu ngoặc mở trên cùng dòng với tên đối tượng.
Sử dụng dấu hai chấm thêm một khoảng trắng giữa mỗi thuộc tính và các giá trị của nó.
Sử dụng các dấu nháy xung quanh các giá trị chuỗi, không sử dụng chúng xung 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 ngoặc đóng trên một dòng mới, mà không có khoảng trắng ở đầu.
Luôn luôn kết thúc một định nghĩa đối tượng bằng một dấu chấm phẩy.

ví dụ

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

Các đối tượng ngắn có thể được viết nén, trên một dòng, chỉ dùng các khoảng trắng giữa các thuộc tính, như thế này:

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

Độ dài của một dòng < 80

Cho khả năng đọc dễ dàng, tránh các dòng dài hơn 80 kí tự.

Nếu một câu lệnh JavaScript không vừa trên một dòng, nơi tốt nhất để ngắt nó, là sau một toán tử hoặc một dấu phẩy.

ví dụ

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

<!DOCTYPE html>
<html>
<body>

<h2>My Web Page</h2>

<p>The best place to break a code line is after an operator or a comma.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>

</body>
</html>

Các quy ước đặt tên(Naming Conventions)

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

Các tên biến và tên hàm được viết dưới dạng camelCase
Các biến toàn cục được viết dưới dạng CHỮ IN HOA(UPERCASE) (Chúng tôi không dùng, nhưng nó rất phổ biến)
Các hằng số (như PI) được viết dưới dạng CHỮ IN HOA(UPPERCASE)

Bạn có nên sử dụng gạch-nối, camelCase, hoặc dấu_gạch_dưới trong các tên biến không?

Đây là một câu hỏi mà các lập trình viên thường xuyên thảo luận. Kết quả phụ thuộc vào người mà bạn hỏi:

Các dấu gạch ngang trong HTML và CSS(Hyphens in HTML and CSS):

Các thuộc tính HTML5 có thể bắt đầu bằng dữ liệu-(data-) (data-quantity, data-price).

CSS dùng các dấu gạch ngang trong các tên thuộc tính (font-size).

Các dấu gạch ngang có thể bị nhầm như một phép trừ. Dấu gạch ngang không cho phép trong đặt tên của JavaScript.

Dấu gạch dưới(Underscrores):

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

PascalCase:

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

camelCase:

camelCase được dùng bởi chính JavaScript, với jQuery, và các thư viện JavaScript khác.

Đừng bắt đầu các tên bằng một dấu $. Nó sẽ khiến bạn bị xung đột với nhiều tên thư viện của JavaScript.

Tải lên JavaScript trong HTML

Dùng cú pháp đơn giản cho việc tải lên các script bên ngoài (kiểu của thành phần là không cần thiết).

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

Truy cập các thành phần HTML

Một kết quả của việc sử dụng các phong cách HTML "không gọn gàng", có thể dẫn đến lỗi JavaScript.

Hai dòng lệnh JavaScript này sẽ dẫn đến hai kết quả khác nhau

var obj = getElementById("Demo")

var obj = getElementById("demo")

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

Các file mở rộng(File Extensions)

Các file HTML nên có một đuôi mở rộng là .html (không phải .htm).

Các file CSS nên có một đuôi mở rộng là .css

Các file JavaScript nên có một đuôi mở rộng là .js.

Sử dụng các tên file viết thường.

Hầu hết các máy chủ web (Apache, Unix) đều là phân biệt hoa thường với các tên file:

london.jpg không thể được truy cập như London.jpg.

Các máy chủ khác (Microsoft, IIS) không phân biệt hoa thường:

london.jpg có thể được truy cập như London.jpg hay london.jpg.

Nếu bạn sử dụng kết hợp chữ hoa và chữ thường, bạn phải cực kì nhất quán.

Nếu bạn di chuyển từ một máy chủ không phân biệt hoa thường, sang một máy chủ phân biệt hoa thường, kể cả một lỗi nhỏ có thể làm hỏng trang web của bạn.

Để tránh các lỗi này, luôn dùng các tên file viết thường (nếu có thể).