Hướng dẫn javascript function naming best practices - các phương pháp hay nhất về đặt tên hàm javascript

Theo quy ước đặt tên tiêu chuẩn làm tăng khả năng đọc và giúp dễ hiểu mã của bạn hơn. Tuy nhiên, nhiều nhà phát triển không nhận thức được cách sử dụng các quy ước đặt tên một cách chính xác và đôi khi chúng làm cho mọi thứ trở nên phức tạp.

Trong bài viết này, tôi sẽ thảo luận về 10 thực tiễn tốt nhất của Công ước JavaScript bạn nên làm theo.

1. Đặt tên quy ước cho các biến

Tên biến JavaScript nhạy cảm trường hợp. Các chữ cái chữ thường và chữ hoa là khác biệt. Ví dụ: bạn có thể xác định ba biến duy nhất để lưu trữ tên chó, như sau.

var DogName = 'Scooby-Doo';
var dogName = 'Droopy';
var DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"

Tuy nhiên, cách được khuyến nghị nhất để khai báo các biến JavaScript là với tên biến trường hợp lạc đà. Bạn có thể sử dụng quy ước đặt tên trường hợp lạc đà cho tất cả các loại biến trong JavaScript và nó sẽ đảm bảo rằng có nhiều biến có cùng tên.camel case variable names. You can use the camel case naming convention for all types of variables in JavaScript, and it will ensure that there aren’t multiple variables with the same name.

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

Tên của các biến nên được tự giải thích và mô tả giá trị được lưu trữ. Ví dụ: nếu bạn cần một biến để lưu trữ tên chó, bạn nên sử dụng DogName thay vì chỉ tên vì nó có ý nghĩa hơn.

// bad
var d = 'Scooby-Doo';
// bad
var name = 'Scooby-Doo';
// good
var dogName = 'Scooby-Doo';

2. Đặt tên quy ước cho & nbsp; booleans

Khi nói đến các biến Boolean, chúng ta nên sử dụng là hoặc có tiền tố. Ví dụ: nếu bạn cần một biến Boolean để kiểm tra xem một con chó có chủ sở hữu hay không, bạn nên sử dụng HasoWNer làm tên biến.is or has as prefixes. For example, if you need a Boolean variable to check if a dog has an owner, you should use hasOwner as the variable name.

// bad
var bark = false;
// good
var isBark = false;
// bad
var ideal = true;
// good
var areIdeal = true;
// bad
var owner = true;
// good
var hasOwner = true;

3. Đặt tên quy ước cho các chức năng Convention for Functions

Tên chức năng JavaScript cũng nhạy cảm trường hợp. Vì vậy, tương tự như các biến, cách tiếp cận trường hợp lạc đà là cách được khuyến nghị để khai báo tên chức năng.camel case approach is the recommended way to declare function names.

Ngoài ra, bạn nên sử dụng danh từ và động từ mô tả làm tiền tố. Ví dụ: nếu chúng ta khai báo một hàm để truy xuất tên, tên hàm phải là getName.

// bad
function name(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

// good
function getName(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

4. Đặt tên quy ước cho các hằng số

Hằng số JavaScript cũng nhạy cảm trường hợp. Tuy nhiên, các hằng số này nên được viết bằng chữ hoa vì chúng là các biến không thay đổi.uppercase because they are nonchanging variables.

var LEG = 4;
var TAIL = 1;
var MOVABLE = LEG + TAIL;

Nếu tên khai báo biến chứa nhiều từ, bạn nên sử dụng Upper_Snake_case. & NBSP;UPPER_SNAKE_CASE. 

var DAYS_UNTIL_TOMORROW = 1;

Tất cả các hằng số nên được xác định khi bắt đầu tệp, phương thức hoặc lớp của bạn.

5. Đặt tên quy ước cho & nbsp; các lớp

Đặt tên quy tắc quy ước cho các lớp JavaScript khá giống với các chức năng. Chúng tôi phải sử dụng các tiêu đề mô tả giải thích các khả năng của lớp.

Sự khác biệt chính giữa tên chức năng và tên lớp là chúng ta phải sử dụng trường hợp Pascal cho tên lớp.Pascal case for class names.

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

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

Các thành phần JavaScript được sử dụng rộng rãi trong các khung phía trước như React. Mặc dù các thành phần được sử dụng trong DOM, nhưng việc xử lý chúng tương tự như các lớp và sử dụng trường hợp Pascal để xác định tên được khuyến nghị.Pascal case to define names is recommended.

// bad
function dogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
} 

// good
function DogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
}

Vì chữ cái ban đầu luôn được viết bằng chữ hoa, một thành phần nổi bật so với các thành phần HTML và Web gốc khi được sử dụng.

7. Đặt tên quy ước cho & nbsp;

Mặc dù có một số khác biệt, cấu trúc của hàm JavaScript và phương pháp là khá giống nhau. Vì vậy, đặt tên quy tắc quy ước là như nhau.

Chúng ta phải sử dụng trường hợp lạc đà để khai báo các phương thức JavaScript và sử dụng các động từ làm tiền tố để làm cho tên có ý nghĩa hơn.camel case to declare JavaScript methods and use verbs as prefixes to make names more meaningful.

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

8. Đặt tên quy ước để biểu thị & nbsp; chức năng riêng tư

Dấu gạch dưới (_) được sử dụng rộng rãi trong các ngôn ngữ như MySQL và PHP để xác định các biến, hàm và phương thức. Nhưng trong JavaScript, một dấu gạch dưới được sử dụng để biểu thị các biến hoặc hàm riêng tư.

Ví dụ: nếu bạn có tên hàm riêng như Toonname, bạn có thể biểu thị nó là hàm riêng bằng cách thêm dấu gạch dưới dưới dạng tiền tố (_toonName).

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

9. Quy ước đặt tên cho các biến toàn cầu

Đối với các biến JavaScript toàn cầu, không có tiêu chuẩn đặt tên cụ thể.

Nên sử dụng trường hợp lạc đà cho các biến toàn cầu có thể thay đổi và chữ hoa cho các biến toàn cầu bất biến.camel case for mutable global variables and uppercase for immutable global variables.

10. Đặt tên quy ước cho Tệp & NBSP; Tên

Hầu hết các máy chủ web (Apache, UNIX) đều nhạy cảm với trường hợp khi nói đến việc xử lý các tệp. Ví dụ, Flower.jpg là hoa.jpg.flower.jpg isn’t Flower.jpg.

Mặt khác, các máy chủ web, chẳng hạn như Microsoft, IIS, không quan tâm đến vụ việc. Trong các máy chủ như vậy, bạn có thể sử dụng Flower.jpg hoặc Flower.jpg để truy cập hoa.jpg.Flower.jpg or flower.jpg to access Flower.jpg.

Tuy nhiên, nếu bạn chuyển từ một máy chủ không nhạy cảm với máy chủ nhạy cảm trường hợp, ngay cả một lỗi nhỏ cũng có thể khiến trang web của bạn gặp sự cố.

Vì vậy, nên sử dụng tên tệp thường trong tất cả các máy chủ mặc dù hỗ trợ nhạy cảm trường hợp của chúng.lowercase file names in all servers despite their case-sensitive support.

Sự kết luận

Trong bài viết này, tôi đã thảo luận về 10 quy ước đặt tên JavaScript có thể được sử dụng để cải thiện kỹ năng mã hóa của chúng tôi. Là nhà phát triển, chúng tôi nên luôn luôn tuân thủ các thực tiễn tốt nhất, vì điều đó sẽ tăng khả năng đọc và giúp bạn và nhóm của bạn dễ hiểu hơn về mã của bạn.

Tôi hy vọng những đề xuất đó sẽ giúp bạn cải thiện kỹ năng mã hóa của bạn. Cảm ơn bạn đã đọc.

Bộ JavaScript SyncFusion sẽ là bộ duy nhất bạn cần để xây dựng một ứng dụng. Nó chứa hơn 65 thành phần UI hiệu suất cao, nhẹ, mô-đun và đáp ứng trong một gói. Tải xuống bản dùng thử miễn phí và đánh giá các điều khiển ngay hôm nay.

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, bạn có thể liên hệ với chúng tôi thông qua các diễn đàn hỗ trợ của chúng tôi, & NBSP; Cổng thông tin hỗ trợ, hoặc & NBSP; Cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn!

Blog liên quan

• Chức năng thuần khiết và không trong sạch trong JavaScript: Hướng dẫn đầy đủ
• Giới thiệu Kiểm soát Breadcrumb JavaScript trong Essential JS 2
• Dễ dàng sử dụng điều khiển JavaScript trong ứng dụng máy chủ Blazor
• Giới thiệu điều khiển pad chữ ký JavaScript & NBSP; trong JS 2 Essential JS 2

Làm thế nào để bạn đặt tên cho một chức năng thực hành tốt nhất?

Các quy ước đặt tên xấu trong JavaScript là gì?

Tên của chức năng nên là gì?

Tên chức năng có nên được viết hoa javascript không?