Cách viết comment bằng JavaScript

Trong lập trình, sự cân nhắc đầu tiên của ta thường là máy - cách máy tính đọc và diễn giải mã ta viết. Tuy nhiên, điều quan trọng không kém là xem xét những người sẽ đọc và làm việc với mã. Cho dù bạn đang làm việc với một group hay một mình, bạn cần phải học cách comment và cấu trúc mã của bạn một cách chính xác cho người đọc.

Chú thích là chú thích trong mã nguồn của chương trình bị trình thông dịch bỏ qua và do đó không ảnh hưởng đến kết quả thực của mã. Các comment có thể vô cùng hữu ích trong việc giải thích mục đích của mã của bạn đang hoặc nên làm.

Là một nhà phát triển, có thể khó chịu khi đi sâu vào mã do người khác viết mà không được comment đúng cách và rất dễ quên mã của chính bạn nghĩa là gì khi bạn không còn đắm mình trong bối cảnh của một chương trình. Comment mã của bạn sớm sẽ củng cố thói quen lập trình tốt trong suốt sự nghiệp của bạn để tránh những vấn đề này sau này.

Cú pháp comment

Ta hãy xem xét nhanh hai loại cú pháp comment JavaScript khác nhau.

Comment một dòng được viết với hai dấu gạch chéo về phía trước ( // ):

// This is a comment

Tất cả các ký tự ngay sau cú pháp // cho đến cuối dòng sẽ bị JavaScript bỏ qua.

Comment khối , đôi khi được gọi là comment dòng đột biến , được viết bằng thẻ mở ( /* ) và thẻ đóng ( */ ). Nếu bạn biết CSS, thì bạn đã quen thuộc với các comment cấp khối.

/* This is a comment */

Mọi thứ giữa thẻ mở và thẻ đóng trong khối mã trên sẽ bị bỏ qua.

Cả comment một dòng và nhiều dòng đều được viết bên trên mã mà chúng được chỉ định để giải thích, như được minh họa trong “Hello, World!” Này thí dụ:

xin chào.js

// Print "Hello, World!" to the console console.log("Hello, World!");

Khi viết comment , hãy thụt lề chúng ở cùng mức với mã ngay bên dưới chúng:

Ocean.js

// Initialize a function function alphabetizeOceans() {     // Define oceans variable as a list of strings     const oceans = ["Pacific", "Atlantic", "Indian", "Antarctic", "Arctic"];      // Print alphabetized array to the console     console.log(oceans.sort()); }

Lưu ý các comment cũng giống như một phần của mã như chính chương trình. Comment lỗi thời có thể gây hại hơn là không có comment nào, vì vậy hãy nhớ duy trì và cập nhật comment thường xuyên cùng với mọi thứ khác.

Comment nội tuyến

Comment một dòng được gọi là comment nội dòng khi chúng xuất hiện ở cuối dòng mã.

let x = 99;    // assign numerical value to x let y = x + 2; // assign the sum of x + 2 to y

Comment nội tuyến được dùng để chú thích nhanh về các đoạn nội dung nhỏ, cụ thể. Vì comment chỉ nên liên quan đến dòng chính xác mà nó được viết, nó là loại comment rõ ràng nhất.

Lưu ý không có cách nào để kết thúc một dòng comment trên một dòng, vì vậy hãy đảm bảo không đặt bất kỳ mã nào sau cú pháp // , như trong ví dụ bên dưới.

bị hỏng.js

for (let i = 0; i === 10; i++) // for loop that runs ten times {     // Running this code results in a syntax error }

Mặc dù các comment nội tuyến có thể hữu ích, nhưng chúng nên được sử dụng một cách tiết kiệm - mã có trong vô số các comment nội tuyến sẽ nhanh chóng trở nên lộn xộn và do đó khó đọc.

Chặn comment

Comment cấp khối, hoặc comment nhiều dòng, là các chú thích dạng dài được sử dụng để giới thiệu và giải thích một phần mã. Thường thì những loại comment này được đặt ở đầu file hoặc trước một khối mã đặc biệt phức tạp.

hello.js

/* Initialize and invoke a the greetUser function to assign user's name to a constant and print out a greeting. */  function greetUser() {     const name = prompt("What is your name?");     console.log("Hello ," + name + "! How are you?"); }  greetUser();

Đôi khi bạn cũng có thể thấy một version sửa đổi một chút của cú pháp khối comment , bắt đầu bằng /** và bao gồm dấu hoa thị ở phía bên trái của khối comment .

sea.js

/**  * Initialize constant with an array of strings.  * Loop through each item in the array and print  * it to the console.  */  const seaCreatures = ["Shark", "Fish", "Octopus"];  for (const seaCreature of seaCreatures) {   console.log(seaCreature); }

Đôi khi loại comment này cũng sẽ bao gồm các chi tiết về file lập trình, bao gồm tên, version và tác giả của tập lệnh.

Nếu bạn là người mới bắt đầu sử dụng JavaScript, bạn có thể viết càng nhiều càng tốt để học và hiểu mã bạn viết. Khi bạn tiến bộ với quyền là nhà phát triển JavaScript, bạn sẽ tìm cách trả lời mục đích hoặc lý do đằng sau mã, trái ngược với cách thức hoặc điều gì .

Comment ra mã để thử nghiệm

Chú thích cũng được dùng để nhanh chóng và dễ dàng ngăn chặn việc thực thi mã cho mục đích thử nghiệm và gỡ lỗi. Điều này được gọi là " comment ra mã".

Nếu có lỗi trong một số mã bạn đã viết, comment các phần sẽ ngăn chúng chạy và có thể hữu ích trong việc xác định nguồn root của vấn đề. Bạn cũng có thể sử dụng nó để chuyển đổi giữa các mã để kiểm tra các kết quả khác nhau.

math.js

// Function to add two numbers function addTwoNumbers(x, y) {   let sum = x + y;   return sum; }  // Function to multiply two numbers function multiplyTwoNumbers(x, y) {   let product = x * y;   return product; }  /* In this example, we're commenting out the addTwoNumbers function, therefore preventing it from executing. Only the multiplyTwoNumbers function will run */  // addTwoNumbers(3, 5); multiplyTwoNumbers(5, 9);

Cả comment một dòng và comment khối đều được dùng để comment mã, tùy thuộc vào kích thước của phần được chuyển đổi.

Lưu ý : Việc comment mã chỉ nên được thực hiện trong mục đích thử nghiệm. Đừng để lại các đoạn mã đã comment trong tập lệnh cuối cùng của bạn.

Khi tìm ra logic của một chương trình, comment về mã có thể hữu ích khi bạn xác định lỗi ở đâu hoặc đánh giá các dòng mã cung cấp tiện ích nhất.

Kết luận

Mã JavaScript được máy tính thông dịch, nhưng sẽ luôn được đọc bởi các lập trình viên khác, bao gồm cả bản thân bạn trong tương lai. Dành thời gian để lại chú thích thích hợp về các phần mã phức tạp sẽ mang lại lợi ích trong tương lai, giúp bạn và các cộng tác viên hiểu ý định của mã bạn đã viết dễ dàng hơn.

Tags:

Các tin liên quan

Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09
Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10