[Javascript] – Phần 64: Hướng dẫn Style cho JavaScript

Giới thiệu:

JavaScript là một ngôn ngữ scripting mạnh mẽ và linh hoạt, nhưng việc viết code JavaScript không đơn giản là viết cú pháp hợp lệ. Để đảm bảo code dễ đọc, dễ maintain và chạy hiệu quả, bạn cần tuân theo một số quy tắc style.

Quy tắc chung:

• Đặt tên biến và hàm:
  • Sử dụng camelCase (ví dụ: firstName, lastName).
  • Bắt đầu bằng chữ cái.
  • Sử dụng từ viết tắt chuẩn (ví dụ: id, url).
  • Tránh sử dụng từ khóa và biến toàn cục (trừ khi cần thiết).
• Khoảng trắng:
  • Sử dụng 2 dấu cách để thụt lề cho các khối code.
  • Dùng dấu cách xung quanh toán tử và sau dấu phẩy.
  • Không sử dụng tab để thụt lề.
• Dấu ngoặc:
  • Sử dụng dấu ngoặc đơn cho biểu thức toán học.
  • Sử dụng dấu ngoặc kép cho chuỗi.
  • Sử dụng dấu ngoặc tròn cho hàm và điều kiện.
• Bình luận:
  • Sử dụng // để comment một dòng.
  • Sử dụng /* */ để comment nhiều dòng.
  • Bình luận về những đoạn code khó hiểu hoặc có thay đổi.
• Ký tự in hoa:
  • Sử dụng ký tự in hoa cho các biến toàn cục (thường không dùng cách này).
  • Sử dụng ký tự in hoa cho các hằng số (ví dụ: PI).

Các quy tắc cụ thể:

• Biến và hàm:
  • Sử dụng camelCase cho các tên biến và hàm.
  • Tránh sử dụng các từ khóa và biến toàn cục trừ khi cần thiết.
  • Sử dụng từ viết tắt chuẩn (ví dụ: id, url).
• Dấu ngoặc:
  • Dùng dấu ngoặc đơn cho biểu thức toán học.
  • Dùng dấu ngoặc kép cho chuỗi.
  • Dùng dấu ngoặc tròn cho hàm và điều kiện.
  • Đặt dấu mở ngoặc ở cuối dòng và dấu đóng ngoặc trên dòng mới.
• Khối code:
  • Thụt lề 2 dấu cách cho các khối code (như hàm, điều kiện, vòng lặp).
  • Đặt dấu ngoặc mở và đóng trên dòng riêng.
• Bình luận:
  • Sử dụng // để comment một dòng.
  • Sử dụng /* */ để comment nhiều dòng.
  • Bình luận về những đoạn code khó hiểu hoặc có thay đổi.
• Dấu chấm phẩy:
  • Kết thúc các câu lệnh đơn giản bằng dấu chấm phẩy.
  • Không cần chấm phẩy cho câu lệnh cuối cùng trong một khối code.
• Không gian:
  • Sử dụng một khoảng trắng trước và sau toán tử.
  • Sử dụng một khoảng trắng sau dấu phẩy.
  • Không sử dụng khoảng trắng không cần thiết (ví dụ: trước dấu mở ngoặc).
• Độ dài dòng:
  • Cố gắng giữ độ dài dòng code dưới 80 ký tự.
  • Nếu cần break dòng, hãy break sau toán tử hoặc dấu phẩy.

Một số quy tắc khác:

• Sử dụng các dấu ngoặc đơn để nhóm các biểu thức phức tạp.
• Sử dụng các biến tạm thời để làm cho code rõ ràng hơn.
• Tránh sử dụng các global variable trừ khi cần thiết.
• Sử dụng const và let để khai báo biến thay vì var.
• Bố cục code:
  • Tách code thành các hàm nhỏ.
  • Sử dụng các khoảng trắng để phân tách các phần code khác nhau.
  • Sử dụng indentation để làm rõ cấu trúc code.

Kiểm tra code:

• Sử dụng các công cụ kiểm tra code để tìm lỗi và giúp tuân theo các quy tắc style.
• Sử dụng các linter như ESLint để kiểm tra và format code.

Dưới đây là một số ví dụ.

Biến và hàm:

// Sử dụng camelCase cho tên biến và hàm
const firstName = "John";
const lastName = "Doe";

// Tránh sử dụng các từ khóa và biến toàn cục trừ khi cần thiết
// var là từ khóa đã bị khai tử trong ES6
// var globalVariable = "Hello";

// Sử dụng từ viết tắt chuẩn
const id = "my-id";
const url = "https://example.com";

Dấu ngoặc:

// Dùng dấu ngoặc đơn cho biểu thức toán học
const sum = (1 + 2) * 3;

// Dùng dấu ngoặc kép cho chuỗi
const message = "Hello, world!";

// Dùng dấu ngoặc tròn cho hàm và điều kiện
function add(a, b) {
  return a + b;
}

if (a > b) {
  // ...
}

Khối code:

// Thụt lề 2 dấu cách cho các khối code
function add(a, b) {
  // ...
}

// Đặt dấu ngoặc mở và đóng trên dòng riêng
function add(a, b) {
  // ...
}

Ghi chú:

// Sử dụng // để comment một dòng
// Đây là một comment một dòng

// Sử dụng /* */ để comment nhiều dòng
/*
  Đây là một comment nhiều dòng
  Bạn có thể sử dụng nhiều dòng để comment
*/

// Bình luận về những đoạn code khó hiểu hoặc có thay đổi
// Đây là một comment về một đoạn code khó hiểu

Dấu chấm phẩy:

// Kết thúc các câu lệnh đơn giản bằng dấu chấm phẩy
const a = 1;
const b = 2;

// Không cần chấm phẩy cho câu lệnh cuối cùng trong một khối code
function add(a, b) {
  return a + b;
}

Không gian:

// Sử dụng một khoảng trắng trước và sau toán tử
const a = 1 + 2;

// Sử dụng một khoảng trắng sau dấu phẩy
const a = 1;
const b = 2;

// Không sử dụng khoảng trắng không cần thiết
// const a = 1 + 2;

Độ dài dòng:

// Cố gắng giữ độ dài dòng code dưới 80 ký tự
const a = 1 + 2;
const b = 3 + 4;
const c = 5 + 6;

// Nếu cần break dòng, hãy break sau toán tử hoặc dấu phẩy
const a = 1 +
  2;
const b = 3 +
  4;
const c = 5 +
  6;

Một số quy tắc khác:

// Sử dụng các dấu ngoặc đơn để nhóm các biểu thức phức tạp
const sum = (a + b) * c;

// Sử dụng các biến tạm thời để làm cho code rõ ràng hơn
const result = a + b;

// Tránh sử dụng các global variable trừ khi cần thiết
// globalVariable = "Hello";

// Sử dụng const và let để khai báo biến thay vì var
const a = 1;
let b = 2;

// Bố cục code:
// Tách code thành các hàm nhỏ
function add(a, b) {
  return a + b;
}

// Sử dụng các khoảng trắng để phân tách các phần code khác nhau
function add(a, b) {
  // ...
}

// Sử dụng indentation để làm rõ cấu trúc code
function add(a, b) {
  // ...
}

Kiểm tra code:

// Sử dụng các công cụ kiểm tra code để tìm lỗi và giúp tuân theo các quy tắc style
const a = 1;
const b = "2";

// Sử dụng các linter như ESLint để kiểm tra và format code
const a = 1;
const b = "2";

Kết luận:

Việc tuân theo các quy tắc style sẽ giúp code JavaScript của bạn dễ đọc, dễ maintain và chạy hiệu quả hơn. Hãy nhớ rằng, đây chỉ là một số quy tắc chung, và bạn có thể linh hoạt dựa vào trường hợp cụ thể. Quan trọng nhất là code của bạn phải rõ ràng, dễ hiểu và chạy đúng cách.