10 quy ước đặt tên JavaScript cơ bản mà mọi nhà phát triển nên biết

Điều cần thiết là duy trì tính đơn giản, dễ đọc và dễ bảo trì trong mã của bạn để quản lý các dự án JavaScript phức tạp. Luôn tuân thủ các quy ước đặt tên là chìa khóa để đạt được mục tiêu này.

Biến, boolean, hàm, hằng số, lớp, thành phần, phương thức, hàm riêng, biến toàn cục và tệp nằm trong số các phần tử JavaScript yêu cầu quy ước đặt tên nhất quán. Bạn có thể cải thiện khả năng hiểu và tổ chức mã bằng cách triển khai các quy ước đặt tên được tiêu chuẩn hóa trên tất cả các thành phần này, tiết kiệm thời gian và công sức về lâu dài.

1. Đặt tên biến

Trong JavaScript, dữ liệu được lưu trữ trong các biến. Điều cần thiết là chọn tên mô tả cho các biến phản ánh chính xác chức năng của chúng. Ví dụ, bạn có thể thay thế tên tài khoản hoặc Tổng giá cho tên của một biến hơn là x.

Một cách hay để đặt tên biến như sau:

 let totalPrice = 100;
let userName = "John"; 

Khả năng đọc mã được cải thiện có thể đạt được bằng cách sử dụng tên biến mô tả

2. Đặt tên Boolean

Các biến chỉ có thể có hai giá trị tức là, hoặc ĐÚNG VẬY hoặc SAI, được gọi là Boolean. Điều quan trọng là chọn tên thích hợp cho các biến boolean thể hiện mục đích của chúng.

Để minh họa, thay vì chọn một tên biến chẳng hạn như là đúngbạn nên đi với isValid hoặc hasValue.

Hãy xem xét trường hợp này:

 let isValid = true;
let hasValue = false; 

Trong ví dụ này, các tên biến boolean mô tả làm rõ những gì chúng đại diện.

3. Chức năng đặt tên

Hàm trong JavaScript đề cập đến một đơn vị mã độc lập nhằm thực hiện một tác vụ cụ thể. Nó là một khối mã có thể được gọi hoặc gọi bởi các phần khác của mã và hoạt động như một thực thể độc lập.

Để đặt tên hàm hiệu quả, hãy sử dụng tên mô tả truyền đạt mục đích của chúng. Chẳng hạn, thay vì tạo một hàm foochọn tên minh họa hơn như xác thựcUserInput hoặc tínhTotalPrice.

Ví dụ:

 function calculateTotalPrice(price, quantity) {
 return price * quantity;
}
function validateUserInput(input) {
 return input !== undefined && input !== null;
}
 

4. Hằng số đặt tên

Hằng số là các biến không thể gán lại. Khi đặt tên cho hằng số, điều quan trọng là phải sử dụng tất cả các chữ cái viết hoa và dấu gạch dưới để phân tách các từ.

Ví dụ:

 const MAX_PRICE = 1000;
const MIN_PRICE = 0; 

Trong ví dụ này, tất cả các chữ hoa và dấu gạch dưới đã được sử dụng để phân tách các từ trong tên hằng.

5. Đặt tên cho các lớp

Trong JavaScript, các đối tượng có thể được tạo bằng các bản thiết kế được gọi là các lớp. Để đạt được các phương pháp đặt tên hoàn hảo, điều cực kỳ quan trọng là phải thực thi PascalCase, một quy ước đặt tên bắt buộc viết hoa chữ cái đầu tiên của mỗi từ.

Lấy ví dụ:

 class ShoppingCart {
 constructor(make, model) {
   this.make = make;
   this.model = model;
 }
}
 

Trong ví dụ này, lớp Giỏ hàng đã được đặt tên bằng PascalCase, có nghĩa là chữ cái đầu tiên của mỗi từ trong tên lớp đã được viết hoa và không có dấu cách hoặc dấu gạch dưới giữa các từ.

6. Đặt tên cho các thành phần

Các thành phần là các khối xây dựng thiết yếu trong quá trình phát triển phần mềm hiện đại, đặc biệt là trong các khung như React, trong đó nhấn mạnh mã có thể tái sử dụng.

Bằng cách chia nhỏ giao diện người dùng hoặc ứng dụng phức tạp thành các phần nhỏ hơn, dễ quản lý, bạn có thể tạo các thành phần có thể tái sử dụng trong các dự án khác nhau, giảm thời gian phát triển và tăng hiệu quả mã.

Một lần nữa, chúng tôi khuyên bạn nên sử dụng quy ước đặt tên PascalCase để đặt tên cho các thành phần. Điều này có nghĩa là viết hoa chữ cái đầu tiên của mỗi từ trong tên thành phần.

Một quy ước như vậy giúp bạn phân biệt các thành phần với các đoạn mã khác, đơn giản hóa việc nhận dạng và thao tác.

 function Button(props) {
  return <button>{props.label}</button>;
} 

Trong ví dụ này, quy ước đặt tên PascalCase đã được sử dụng để đặt tên cho thành phần Cái nút.

7. Phương pháp đặt tên

Khi đặt tên cho các phương thức, điều quan trọng là sử dụng các tên mô tả truyền đạt thành công những gì phương thức hoàn thành vì các phương thức là các hàm liên quan đến một đối tượng.

Ví dụ:

 class Car {
 constructor(make, model) {
   this.make = make;
   this.model = model;
 }
 startEngine() {
   
   } 
 stopEngine() { 
   
   }
 }
}
 

Tên mô tả (startEngine, dừng động cơ) được sử dụng cho các phương pháp trong ví dụ này, đảm bảo dễ hiểu mục đích dự định của chúng.

8. Đặt tên cho các hàm riêng tư

Các chức năng được xác định là riêng tư chỉ bị hạn chế truy cập trong đối tượng nơi chúng được xác định. Điều quan trọng là phải thêm dấu gạch dưới (_) ở đầu để chỉ ra rằng các chức năng này là riêng tư.

Đây là một ví dụ:

 class Car {
 constructor(make, model) {
   this.make = make;
   this.model = model;
 }
 _startEngine() {
   
 }
 _stopEngine() {
   
 }
}
 

Bằng cách sử dụng dấu gạch dưới ở đầu trong ví dụ này, điều đó cho thấy rằng các chức năng là riêng tư.

9. Đặt tên biến toàn cục

Các biến được phân loại là toàn cầu có thể được truy cập từ bất kỳ phần nào của cơ sở mã. Trong khi đặt tên các biến toàn cục như vậy, điều quan trọng là sử dụng các tên rõ ràng và mang tính mô tả để truyền đạt mục đích dự định của chúng một cách hiệu quả.

Ví dụ:

 const MAX_PRICE = 1000;
const MIN_PRICE = 0;
function checkPrice(price) {
 if (price > MAX_PRICE) {
   
 } else if (price < MIN_PRICE) {
   
 }
}
 

10. Đặt tên tập tin

Tổ chức tệp hiệu quả là một khía cạnh quan trọng của việc quản lý dự án JavaScript thành công. Để đảm bảo các quy ước đặt tên hợp lý và nhất quán, điều cần thiết là phải phân tách các từ trong tên tệp bằng chữ cái viết thường và dấu gạch nối.

Chữ thường được ưa thích hơn vì JavaScript là ngôn ngữ phân biệt chữ hoa chữ thường, nghĩa là ngôn ngữ này xử lý chữ thường và chữ hoa khác nhau. Sử dụng chữ thường cho tên tệp đảm bảo tính nhất quán và tránh nhầm lẫn khi tham chiếu tệp trong mã.

Dấu gạch ngang được sử dụng để phân tách các từ trong tên tệp vì dấu cách không được phép trong tên tệp. Các lựa chọn thay thế khác như dấu gạch dưới hoặc camelCase cũng có thể được sử dụng, nhưng dấu gạch nối thường được ưu tiên hơn vì tính dễ đọc của chúng.

Việc sử dụng dấu gạch nối cũng giúp người dùng có thể truy cập tên tệp dễ dàng hơn bằng bộ đọc màn hình hoặc các công nghệ hỗ trợ khác.

 my-app/
├── src/
  ├── components/
    ├── button.js
      ├── input-field.js
├── utils/
     ├── string-utils.js
     ├── date-utils.js
├── app.js
├── index.js 

Trong ví dụ này, chữ thường và dấu gạch nối được sử dụng để phân tách các từ trong tên tệp.

Tầm quan trọng của việc tuân theo các quy ước đặt tên trong JavaScript

Tuân theo các quy ước đặt tên tốt là một khía cạnh thiết yếu của việc viết mã rõ ràng và có thể bảo trì bằng JavaScript. Bằng cách tuân theo các quy ước này, bạn có thể làm cho mã của mình dễ đọc và dễ bảo trì hơn, đặc biệt là trong một số khung JavaScript nơi bạn được yêu cầu xử lý mã cồng kềnh, điều này có thể giúp bạn tiết kiệm thời gian và công sức trong thời gian dài.