Hướng dẫn dùng firstname JavaScript

hướng dẫn viết mã javascript

Chúng ta luôn sử dụng các quy ước mã hóa giống nhau cho tất cả các chương trình JavaScript.

Các quy ước về mã hóa JavaScript

Các quy ước về mã hóa là các hướng dẫn về phong cách cho lập trình. Chúng 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à chú thích.
• 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 lập trình viên.

Tên biến JavaScript

Tại book-code, chúng ta 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.

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

price = 19.9;
tax = 0.1;

fullPrice = price + (price * tax);

Khoảng trống xung quanh các toán tử

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

var z = x + y;
const myArray = ["Innova","Kia","Camry"];

Thụt lề mã

Luôn sử dụng 2 dấu cách để thụt lề các khối mã.

function fullPrice() {
  return price + (price * tax);
}

Không nên 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.

Quy tắ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.

Ví dụ

const cars = ["Innova","Kia","Camry"];
const 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 (phức tạ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.

Ví dụ: Một hàm

function fullPrice() {
  return price + (price * tax);
}

Ví dụ: Vòng lặp

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

Ví dụ: Điều kiện

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

Quy tắt đố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 nháy 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 giá trị-thuộc tính 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",
  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"};

Quy ước đặt tên

Luôn sử dụng cùng một quy ước đặt tên cho tất cả mã. 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 (nó khá phổ biến)
• Hằng số (như PI) được viết bằng UPPERCASE

Chúng ta có nên sử dụng hyp-hens , camelCase hoặc 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 trả lời câu 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 biế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 lập trình 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 biến bằng dấu $. Nó sẽ khiến bạn xung đột với nhiều tên thư viện JavaScript.

Liên kết tập lệnh JavaScript bên ngoài

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).

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ể, chúng ta hãy sử dụng cùng một quy ước đặt tên (như JavaScript) trong HTML.

Xem lại bài "Quy tắt viết mã HTML".

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. Nên chúng ta 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. Nên london.jpg có thể được truy cập dưới dạng London.jpg hoặc london.jpg.

Nếu chúng ta sử dụng kết hợp chữ hoa và chữ thường, bạn phải cực kỳ nhất quán. Vì nếu chúng ta 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.

Để 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ể).

Trình bày mã code

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.