Hướng dẫn về phong cách 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.
Quy ước mã hóa JavaScript
Quy ước mã hóa là hướng dẫn về phong cách lập trình . Chúng thường bao gồm:
- Quy tắc đặt tên và khai báo biến và hàm.
- Quy tắc sử dụng khoảng trắng, thụt lề và nhận xét.
- Thực hành 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ã
- Giúp việc bảo trì mã dễ dàng hơn
Các quy ước mã hóa 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 mã hóa của cá nhân bạn.
Trang này mô tả các quy ước chung về mã JavaScript được Example.com.vn sử dụng.
Bạn cũng nên đọc chương tiếp theo "Các phương pháp thực hành tốt 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 đề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 rãi 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);Không gian xung quanh người vận 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 mã
Luôn sử dụng 2 dấu cách để thụt lề khối mã:
Chức năng:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Không sử dụng tab (bảng lập bảng) để thụt lề. Các biên tập viên khác nhau diễn giải các tab khác nhau.
Quy tắc tuyên bố
Quy tắc chung cho 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"
};Quy tắc chung cho các câu lệnh phức tạp (ghé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ó khoảng trắng ở đầu.
- Đừ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
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 các giá trị chuỗi, không phải xung quanh các 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ó khoảng trắng ở đầ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",
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 khoảng trắng 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, 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 nó là sau toán tử hoặc dấu phẩy.
Quy ước đặt tên
Luôn sử dụng quy ước đặt tên giống nhau 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
- Các biến toàn cục được viết bằng CHỮ HOA (Chúng tôi không có, 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à câu hỏi mà các lập trình viên thường xuyên 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:
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 nối trong tên thuộc tính (cỡ 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.
trường hợp lạc đà:
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 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 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("Demo")
const obj = getElementById("demo")
Nếu có thể, hãy sử dụng quy ước đặt tên giống nhau (như JavaScript) trong HTML.
Hãy 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ó phần mở rộng .html ( cho phép .htm ).
Các 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 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 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á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 đều có ít tác động đến việc thực hiện chương trình.
Thụt lề và khoảng trống thừa không có ý nghĩa trong các tập lệnh nhỏ.
Đối với mã đang phát triển, nên ưu tiên khả năng đọc. Các kịch bản sản xuất lớn hơn nên được giảm thiểu.
