JavaScript 2 dấu cách hoặc 4

Đó thực sự là nghệ thuật lập trình - nhận một tác vụ phức tạp và mã hóa nó theo cách vừa chính xác vừa dễ đọc cho con người. Một kiểu mã tốt hỗ trợ rất nhiều trong việc đó

Đây là một mánh gian lận với một số quy tắc được đề xuất [xem bên dưới để biết thêm chi tiết]

Bây giờ hãy thảo luận chi tiết về các quy tắc và lý do cho chúng

Không có quy tắc “bạn phải”

Không có gì là cố định ở đây. Đây là những sở thích về phong cách, không phải giáo điều tôn giáo

Trong hầu hết các dự án JavaScript, dấu ngoặc nhọn được viết theo kiểu “Ai Cập” với dấu ngoặc nhọn mở trên cùng một dòng với từ khóa tương ứng – không phải trên một dòng mới. Cũng nên có một khoảng trắng trước dấu ngoặc mở, như thế này

if [condition] {
  // do this
  // ...and that
  // ...and that
}

Cấu trúc một dòng, chẳng hạn như

if [n < 0] {alert[`Power ${n} is not supported`];}

6, là trường hợp cạnh quan trọng. Có nên sử dụng niềng răng không?

Dưới đây là các biến thể được chú thích để bạn có thể tự đánh giá khả năng đọc của chúng

1. 😠 Người mới bắt đầu đôi khi làm điều đó. Xấu. niềng răng xoăn là không cần thiết

   if [n < 0] {alert[`Power ${n} is not supported`];}

2. 😠 Tách thành dòng riêng không dấu ngoặc. Đừng bao giờ làm vậy, dễ bị lỗi khi thêm dòng mới

   if [n < 0]
     alert[`Power ${n} is not supported`];

3. 😏 Một dòng không có dấu ngoặc – chấp nhận được, nếu nó ngắn

   if [n < 0] alert[`Power ${n} is not supported`];

4. 😃 Biến thể tốt nhất

   if [n < 0] {
     alert[`Power ${n} is not supported`];
   }

Đối với một mã rất ngắn gọn, một dòng được cho phép, e. g.

if [n < 0] {alert[`Power ${n} is not supported`];}

7. Nhưng một khối mã [biến thể cuối cùng] thường dễ đọc hơn

Không ai thích đọc một dòng mã dài. Cách tốt nhất là tách chúng ra

Ví dụ

// backtick quotes ` allow to split the string into multiple lines
let str = `
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

Và, đối với câu lệnh

if [n < 0] {alert[`Power ${n} is not supported`];}

8

if [
  id === 123 &&
  moonPhase === 'Waning Gibbous' &&
  zodiacSign === 'Libra'
] {
  letTheSorceryBegin[];
}

Độ dài dòng tối đa phải được thống nhất ở cấp độ nhóm. Nó thường là 80 hoặc 120 ký tự

Có hai loại thụt lề

• thụt lề ngang. 2 hoặc 4 không gian

  Thụt đầu dòng ngang được thực hiện bằng cách sử dụng 2 hoặc 4 dấu cách hoặc ký hiệu tab ngang [Tab phím]. Chọn cái nào là một cuộc chiến thần thánh cũ. Không gian ngày nay phổ biến hơn

  Một lợi thế của khoảng trắng so với tab là khoảng trắng cho phép cấu hình thụt lề linh hoạt hơn so với biểu tượng tab

  Chẳng hạn, chúng ta có thể căn chỉnh các tham số với dấu ngoặc mở, như thế này

  if [n < 0] {alert[`Power ${n} is not supported`];}

  0

• Thụt lề dọc. các dòng trống để chia mã thành các khối logic

  Ngay cả một chức năng đơn lẻ thường có thể được chia thành các khối logic. Trong ví dụ bên dưới, việc khởi tạo biến, vòng lặp chính và trả về kết quả được chia theo chiều dọc

  if [n < 0] {alert[`Power ${n} is not supported`];}

  1

  Chèn thêm một dòng mới để giúp mã dễ đọc hơn. Không được có nhiều hơn chín dòng mã mà không có thụt lề dọc

Dấu chấm phẩy phải có sau mỗi câu lệnh, ngay cả khi nó có thể bị bỏ qua

Có những ngôn ngữ mà dấu chấm phẩy thực sự là tùy chọn và nó hiếm khi được sử dụng. Tuy nhiên, trong JavaScript, có những trường hợp ngắt dòng không được hiểu là dấu chấm phẩy, khiến mã dễ bị lỗi. Xem thêm về điều đó trong chương

Nếu bạn là một lập trình viên JavaScript có kinh nghiệm, bạn có thể chọn kiểu mã không có dấu chấm phẩy như StandardJS. Nếu không, tốt nhất là sử dụng dấu chấm phẩy để tránh những cạm bẫy có thể xảy ra. Phần lớn các nhà phát triển đặt dấu chấm phẩy

Cố gắng tránh lồng mã quá nhiều cấp

Ví dụ, trong vòng lặp, đôi khi nên sử dụng lệnh để tránh lồng thêm

Ví dụ: thay vì thêm một điều kiện

if [n < 0] {alert[`Power ${n} is not supported`];}

8 lồng nhau như thế này

if [n < 0] {alert[`Power ${n} is not supported`];}

3

Chúng tôi có thể viết

if [n < 0] {alert[`Power ${n} is not supported`];}

0

Điều tương tự có thể được thực hiện với

if [n < 0]
  alert[`Power ${n} is not supported`];

1 và

if [n < 0]
  alert[`Power ${n} is not supported`];

2

Ví dụ: hai cấu trúc bên dưới giống hệt nhau

lựa chọn 1

if [n < 0] {alert[`Power ${n} is not supported`];}

1

Lựa chọn 2

if [n < 0] {alert[`Power ${n} is not supported`];}

2

Cái thứ hai dễ đọc hơn vì “trường hợp đặc biệt” của

if [n < 0]
  alert[`Power ${n} is not supported`];

3 được xử lý sớm. Sau khi kiểm tra xong, chúng ta có thể chuyển sang luồng mã “chính” mà không cần lồng bổ sung

Nếu bạn đang viết một vài hàm “trợ giúp” và mã sử dụng chúng, có ba cách để tổ chức các hàm

1. Khai báo các chức năng trên mã sử dụng chúng

   if [n < 0] {alert[`Power ${n} is not supported`];}

   3

2. Mã đầu tiên, sau đó chức năng

   if [n < 0] {alert[`Power ${n} is not supported`];}

   4

3. Trộn. một hàm được khai báo ở nơi nó được sử dụng lần đầu tiên

Hầu hết thời gian, biến thể thứ hai được ưa thích hơn

Đó là bởi vì khi đọc mã, trước tiên chúng ta muốn biết nó làm gì. Nếu mã đi trước, thì nó sẽ rõ ràng ngay từ đầu. Sau đó, có lẽ chúng ta sẽ không cần phải đọc các chức năng, đặc biệt nếu tên của chúng mô tả những gì chúng thực sự làm

Hướng dẫn về phong cách chứa các quy tắc chung về cách viết mã, e. g. sử dụng trích dẫn nào, bao nhiêu khoảng cách để thụt lề, độ dài dòng tối đa, v.v. Rất nhiều điều nhỏ nhặt

Khi tất cả các thành viên của một nhóm sử dụng cùng một hướng dẫn kiểu, mã sẽ trông thống nhất, bất kể thành viên nào trong nhóm đã viết nó

Tất nhiên, một nhóm luôn có thể viết hướng dẫn phong cách của riêng họ, nhưng thường thì không cần. Có nhiều hướng dẫn hiện có để lựa chọn

Một số lựa chọn phổ biến

• Hướng dẫn kiểu Google JavaScript
• Hướng dẫn phong cách JavaScript của Airbnb
• thành ngữ. JS
• tiêu chuẩnJS
• [cộng với nhiều hơn nữa]

Nếu bạn là một nhà phát triển mới làm quen, hãy bắt đầu với cheat sheet ở đầu chương này. Sau đó, bạn có thể duyệt qua các hướng dẫn về phong cách khác để chọn thêm ý tưởng và quyết định xem bạn thích phong cách nào nhất

Linters là công cụ có thể tự động kiểm tra kiểu mã của bạn và đưa ra các đề xuất cải thiện

Điều tuyệt vời về chúng là kiểm tra kiểu cũng có thể tìm thấy một số lỗi, như lỗi chính tả trong tên biến hoặc hàm. Do tính năng này, nên sử dụng trình nói dối ngay cả khi bạn không muốn dính vào một “kiểu mã” cụ thể

Dưới đây là một số công cụ linting nổi tiếng

• JSLint – một trong những linters đầu tiên
• JSHint – nhiều cài đặt hơn JSLint
• ESLint – có lẽ là cái mới nhất

Tất cả họ đều có thể làm công việc. Tác giả sử dụng ESLint

Hầu hết các linters được tích hợp với nhiều trình soạn thảo phổ biến. chỉ cần bật plugin trong trình chỉnh sửa và định cấu hình kiểu

Chẳng hạn, đối với ESLint, bạn nên làm như sau

1. Cài đặt nút. js
2. Cài đặt ESLint bằng lệnh

   if [n < 0]
     alert[`Power ${n} is not supported`];

   4 [npm là trình cài đặt gói JavaScript]
3. Tạo một tệp cấu hình có tên

   if [n < 0]
     alert[`Power ${n} is not supported`];

   5 trong thư mục gốc của dự án JavaScript của bạn [trong thư mục chứa tất cả các tệp của bạn]
4. Cài đặt/bật plugin cho trình chỉnh sửa của bạn tích hợp với ESLint. Phần lớn các biên tập viên có một

Đây là một ví dụ về tệp

if [n < 0]
  alert[`Power ${n} is not supported`];

5

if [n < 0] {alert[`Power ${n} is not supported`];}

5

Ở đây, chỉ thị

if [n < 0]
  alert[`Power ${n} is not supported`];

7 biểu thị rằng cấu hình dựa trên “eslint. bộ cài đặt được đề xuất. Sau đó, chúng tôi xác định riêng của chúng tôi

Cũng có thể tải xuống các bộ quy tắc kiểu từ web và thay vào đó mở rộng chúng. Xem https. // eslint. org/docs/user-guide/getting-started để biết thêm chi tiết về cài đặt

Ngoài ra, một số IDE nhất định có linting tích hợp, thuận tiện nhưng không thể tùy chỉnh như ESLint

Tất cả các quy tắc cú pháp được mô tả trong chương này [và trong các hướng dẫn về phong cách được tham chiếu] nhằm mục đích tăng khả năng đọc mã của bạn. Tất cả chúng đều có thể tranh cãi

Khi chúng ta nghĩ về việc viết mã “tốt hơn”, những câu hỏi chúng ta nên tự hỏi mình là. “Điều gì làm cho mã dễ đọc hơn và dễ hiểu hơn?”

Đọc các hướng dẫn về phong cách phổ biến sẽ cho phép bạn cập nhật những ý tưởng mới nhất về xu hướng phong cách mã và các phương pháp hay nhất

Tôi nên thụt lề 2 hoặc 4 dấu cách?

Tôi nên sử dụng 4 dấu cách hay tab?

Khoảng cách có quan trọng trong JavaScript không?

Tại sao có 4 dấu cách thay vì các tab?