Các quy ước viết mã có thể là các quy tắc được ghi lại để các nhóm tuân theo hoặc chỉ là cách thực hành viết mã của cá nhân bạn
Trang này mô tả các quy ước mã JavaScript chung được sử dụng bởi W3Schools.
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 tên định danh [biến và hàm]
Tất cả các tên bắt đầu bằng một chữ cái
Ở dưới cùng của trang này, bạn sẽ tìm thấy một cuộc thảo luận rộng hơn về quy tắc đặt tên
firstName = "John";
lastName = "Doe";
giá = 19. 90;
thuế = 0. 20;
fullPrice = giá + [giá * thuế];
Không gian xung quanh nhà khai thác
Luôn đặt khoảng trắng 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 đầu dòng mã
Luôn sử dụng 2 dấu cách để thụt đầu dòng các khối mã
Chức năng
function toC[độ F] {
return [5 / 9] * [độ F - 32];
}
Không sử dụng tab [trình lập bảng] để thụt đầu dòng. Các trình chỉnh sửa khác nhau diễn giải các tab khác nhau
Tuyên bố Quy tắc
Quy tắc chung cho các báo cáo đơ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 xe = ["Volvo", "Saab", "Fiat"];
const person = {
firstName. "John",
họ. "Doe",
tuổi. 50,
màu mắt. "màu xanh"
};
Các quy tắc chung cho các câu lệnh phức tạ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 đóng 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 toC[độ F] {
return [5 / 9] * [độ F - 32];
}
vòng lặp
for [let i = 0; i < 5; i++] {
x += i;
}
điều kiện
if [time < 20] {
greeting = "Chúc một ngày tốt lành";
} other {
lời chào
}
Quy tắc đối tượng
Quy tắc chung cho định nghĩa đối tượng
- Đặt dấu ngoặc mở 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 với một dấu cách 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 phải 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
Ví dụ
const person = {
firstName. "John",
họ. "Doe",
tuổi. 50,
màu mắt. "màu xanh"
};
Các đối tượng ngắn có thể được viết nén, trên một dòng, chỉ sử dụng khoảng trắng giữa các thuộc tính, như thế này
const người = {tên đầu tiên. "John", họ Tên. "Doe", tuổi. 50, màu mắt. "màu xanh da trời"};
Độ 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 vừa 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 dấu phẩy
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 dưới dạng camelCase
- Biến toàn cục được viết bằng chữ HOA [Chúng tôi không viết, nhưng nó khá phổ biến]
- Các hằng số [như PI] được viết bằng chữ HOA
Bạn có nên sử dụng hyp-hens, camelCase hoặc under_scores trong tên biến không?
Đây là một câu hỏi lập trình viên thường thảo luận. Câu trả lời phụ 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 dữ liệu- [số lượng dữ liệu, giá dữ liệu]
CSS sử dụng dấu gạch nối trong tên thuộc tính [cỡ chữ]
Dấu gạch ngang có thể bị nhầm 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
Trường hợp Pascal
PascalCase thường được các lập trình viên C ưa thích
trường hợp lạc đà
camelCase được chính JavaScript, jQuery và các thư viện JavaScript khác sử dụng
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 tập lệnh bên ngoài [không cần thuộc tính type]
Truy cập các phần tử HTML
Hậu quả của việc sử dụng các kiểu HTML "lộn xộn", 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["Bản trình diễn"]
const obj = getElementById["demo"]
Nếu có thể, hãy sử dụng cùng quy ước đặt tên [như JavaScript] trong HTML
Truy cập Hướng dẫn về Phong cách HTML
Phần mở rộng tệp
Các tệp HTML phải có một. phần mở rộng html [. htm được cho phép]
Các tệp CSS phải có một. phần mở rộng css
Các tệp JavaScript phải có một. tiện ích mở rộng js
Sử dụng tên tệp chữ thường
Hầu hết các máy chủ web [Apache, Unix] đều phân biệt chữ hoa chữ thường đối với tên tệp
London. jpg không thể được truy cập 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 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áy chủ không phân biệt chữ hoa chữ thường sang máy chủ phân biệt chữ hoa chữ thường, 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ể]
Hiệu suất
Các quy ước mã hóa không được máy tính sử dụng. Hầu hết các quy tắc có ít tác động đến việc thực hiện 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 khả năng đọc. Kịch bản sản xuất lớn hơn nên được giảm thiểu