Hướng dẫn what are bad naming conventions in javascript? - quy ước đặt tên xấu trong javascript là gì?

Trong một bài viết trước đó, tôi đã đề cập đến cách bạn có thể cung cấp cho các biến boolean của bạn một cái tên tốt hơn bằng cách tiền tố nó với IS/có/có thể. Bây giờ tôi muốn đưa ra lời khuyên về các tên biến xấu, bạn nên tránh 💥

Đọc mã là khó khăn, vì vậy don don làm cho nó thậm chí còn phức tạp hơn bằng cách sử dụng các tên mà họ phải đoán. Mã của bạn nên truyền đạt sự hiểu biết. Vì vậy, nó tốt hơn để sử dụng những từ mà mọi người có thể hiểu. Điều này sẽ làm cho người khác dễ dàng hơn rất nhiều và thậm chí là bạn làm việc với mã của bạn. Yay! Giành chiến thắng 😊

  • @avi.codes: Sử dụng Camelcase trong khi đặt tên các biến và chữ hoa trong khi đặt tên hằng số.

  • @JonashAvers: Điều đó luôn tốt hơn là cảm thấy cần thêm nhận xét để mô tả ý của bạn và biến được sử dụng để làm gì. Mục tiêu là: "Đừng làm tôi nghĩ"

# Điều hướng cơ sở mã của bạn với tên biến tốt hơn

Có một tên mô tả tốt cũng giúp tìm kiếm và tìm thấy dễ dàng hơn rất nhiều trong một cơ sở mã lớn 💯

  • @agm1984: Tôi đăng ký ý tưởng rằng, chỉ vì bạn có thể làm cho tên của bạn ngắn không có nghĩa là bạn nên làm. Bạn có thể mở một tệp 200 dòng đến dòng 175, xem
    // bad
    var dogname = 'Droopy'; 
    // bad
    var dog_name = 'Droopy'; 
    // bad
    var DOGNAME = ‘Droopy’; 
    // bad
    var DOG_NAME = 'Droopy'; 
    // good
    var dogName = 'Droopy';
    2 và giống như, chuyển đổi cái gì? Không có gì đánh bại một tìm kiếm từ khóa tốt chỉ tìm thấy 2-5 trận đấu trong 2 tệp thay vì như 29 trận đấu trong 18 tệp.

Cảm ơn: @agm1984

# Tài nguyên

  • Biểu cảm: Cách cung cấp cho các biến của bạn tên tốt hơn
  • Nghệ thuật đặt tên biến
  • Tầm quan trọng của việc đặt tên trong lập trình
  • Thêm về các quy ước đặt tên biến JavaScript
  • Quy ước đặt tên JavaScript


Các mẩu tin liên quan

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';
0

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';
1

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

Tên biến nào không được phép trong JavaScript?

Tên biến JavaScript không nên bắt đầu bằng chữ số (0-9). Họ phải bắt đầu bằng một chữ cái hoặc một nhân vật dấu gạch dưới. Ví dụ: 123Test là một tên biến không hợp lệ nhưng _123Test là một biến hợp lệ. Tên biến JavaScript nhạy cảm trường hợp.should not start with a numeral (0-9). They must begin with a letter or an underscore character. For example, 123test is an invalid variable name but _123test is a valid one. JavaScript variable names are case-sensitive.

Tên biến không được chấp nhận là gì?

Tên biến có thể không bắt đầu bằng một chữ số hoặc dấu gạch dưới, và có thể không kết thúc bằng một dấu gạch dưới ...
Age_ (kết thúc bằng một dấu gạch dưới) ;.
0 (bắt đầu bằng một chữ số) ;.
Thực phẩm+Nonfood (chứa ký tự là++không được phép).

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

Đặt tên quy ước biến và tên chức năng được viết là Camelcase.Các biến toàn cầu được viết bằng các hằng số chữ hoa (chúng tôi không, nhưng nó khá phổ biến) (như PI) được viết bằng chữ hoa.Variable and function names written as camelCase. Global variables written in UPPERCASE (We don't, but it's quite common) Constants (like PI) written in UPPERCASE.

Tên biến dài có xấu không?

Theo tiêu chuẩn, các tên mô tả dài hơn được khuyên nên làm cho nó dễ đọc và có thể duy trì hơn về dài hạn.Nếu bạn sử dụng đặt tên rất ngắn, ví dụ:Một biến là A, bạn sẽ quên mình, một lúc nào đó biến đó có nghĩa là gì.longer descriptive names are advised to make it more readable and maintainable on longer term. If you use very short naming e.g. a variable as a , you will forget yourself, what that variable is meant for after sometime.