Hướng dẫn kiểu JavaScript
Luôn sử dụng các quy ước mã hóa giống nhau cho tất cả các dự án JavaScript của bạn.
Các quy ước về mã hóa JavaScript
Các quy ước về mã hóa là hướng dẫn về phong cách cho lập trình . Họ thường bao gồm:
- Các quy tắc đặt tên và khai báo cho biến và hàm.
- Quy tắc sử dụng khoảng trắng, thụt lề và nhận xét.
- Các nguyên tắc và thực hành lập trình
Quy ước mã hóa chất lượng an toàn :
- Cải thiện khả năng đọc mã
- Giúp bảo trì mã dễ dàng hơn
Các quy ước về mã hóa có thể là các quy tắc được lập thành văn bản để các nhóm tuân theo hoặc chỉ là thực hành mã hóa cá nhân của bạn.
Trang này mô tả các quy ước mã JavaScript chung được W3Schools sử dụng.
Bạn cũng nên đọc chương tiếp theo "Các phương pháp hay nhất" và tìm hiểu cách tránh những cạm bẫy khi viết mã.
Tên biến
Tại W3schools, chúng tôi sử dụng camelCase cho các tên định danh (biến và hàm).
Tất cả các tên đều bắt đầu bằng một chữ cái .
Ở cuối trang này, bạn sẽ tìm thấy một cuộc thảo 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 xung quanh nhà điều hành
Luôn đặt dấu cách xung quanh các toán tử (= + - * /) và sau dấu phẩy:
Ví dụ:
let x = y + z;
const myArray = ["Volvo", "Saab",
"Fiat"];
Thụt lề mã
Luôn sử dụng 2 dấu cách để thụt lề các khối mã:
Chức năng:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Không sử dụng các tab (tabulators) để thụt lề. Các trình soạn thảo khác nhau diễn giải các tab khác nhau.
Nội quy Tuyên bố
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.
Ví dụ:
const cars = ["Volvo", "Saab",
"Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Các quy tắc chung cho câu lệnh phức hợp (phức hợp):
- Đặt dấu ngoặc mở ở cuối dòng đầu tiên.
- Sử dụng một khoảng trắng trước dấu ngoặc mở.
- Đặt dấu ngoặc nhọn trên một dòng mới, không có dấu cách ở đầu.
- Không kết thúc một câu lệnh phức tạp bằng dấu chấm phẩy.
Chức năng:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Vòng lặp:
for (let i = 0; i < 5; i++) {
x += i;
}
Điều kiện:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Quy tắc đối tượng
Các quy tắc chung cho đị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 cộng với 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 xung quanh giá trị chuỗi, không xung quanh giá trị số.
- Không thêm dấu phẩy sau cặp thuộc tính-giá trị cuối cùng.
- Đặt dấu ngoặc đóng trên một dòng mới, không có dấu cách ở đầu.
- Luôn kết thúc định nghĩa đối tượng bằng dấu chấm phẩy.
Thí dụ
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor:
"blue"
};
Các đối tượng ngắn có thể được viết dưới dạng nén, trên một dòng, chỉ sử dụng dấu cách giữa các thuộc tính, như sau:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Độ dài dòng <80
Để dễ đọc, hãy tránh các dòng dài hơn 80 ký tự.
Nếu một câu lệnh JavaScript không nằm trên một dòng, thì vị trí tốt nhất để ngắt câu lệnh đó là sau một toán tử hoặc một dấu phẩy.
Thí dụ
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à tên hàm được viết dưới dạng camelCase
- Các biến toàn cục được viết bằng UPPERCASE (Chúng tôi không làm, nhưng nó khá phổ biến)
- Hằng số (như PI) được viết bằng UPPERCASE
Bạn có nên sử dụng hyp- hens , camelCase hay under_scores 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 thảo luận. Câu trả lời tùy thuộc vào người bạn hỏi:
Dấu gạch nối trong HTML và CSS:
Các thuộc tính HTML5 có thể bắt đầu bằng data- (data-number, data-price).
CSS sử dụng dấu gạch ngang trong tên thuộc tính (kích thước phông chữ).
Dấu gạch nối có thể bị nhầm lẫn là phép trừ. Dấu gạch nối không được phép trong tên JavaScript.
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 bằng dấu $. Nó sẽ khiến bạn xung đột với nhiều tên thư viện JavaScript.
Đang tải JavaScript trong HTML
Sử dụng cú pháp đơn giản để tải các tập lệnh bên ngoài (thuộc tính type không cần thiết):
<script src="myscript.js"></script>
Truy cập các phần tử HTML
Hệ quả của việc sử dụng các kiểu HTML "không gọn gàng", có thể dẫn đến lỗi JavaScript.
Hai câu lệnh JavaScript này sẽ tạo ra các kết quả khác nhau:
const obj = getElementById("Demo")
const obj = getElementById("demo")
Nếu có thể, hãy sử dụng cùng một quy ước đặt tên (như JavaScript) trong HTML.
Truy cập Hướng dẫn kiểu HTML .
Phần mở rộng tệp
Tệp HTML phải có đuôi .html (cho phép .htm ).
Tệp CSS phải có phần mở rộng .css .
Các tệp JavaScript phải có phần mở rộng .js .
Sử dụng tên tệp viết thường
Hầu hết các máy chủ web (Apache, Unix) đều phân biệt chữ hoa chữ thường về tên tệp:
Không thể truy cập london.jpg dưới dạng 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 chữ hoa và chữ thường, bạn phải cực kỳ nhất quán.
Nếu bạn chuyển từ một máy chủ không phân biệt chữ hoa chữ thường sang một máy chủ phân biệt chữ hoa chữ thường, thì ngay cả những lỗi nhỏ cũng có thể làm hỏng trang web của bạn.
Để tránh những vấn đề này, hãy luôn sử dụng tên tệp viết thường (nếu có thể).
Màn biểu diễn
Các quy ước mã hóa không được sử dụng bởi máy tính. Hầu hết các quy tắc có rất ít tác động đến việc thực thi các chương trình.
Thụt lề và khoảng trắng thừa không đáng kể trong các tập lệnh nhỏ.
Đối với mã đang được phát triển, nên ưu tiên tính dễ đọc. Các kịch bản sản xuất lớn hơn nên được giảm thiểu.