How to write clean code

folder Kiến thức công nghệ
today 28/10/2024 09:13
Tại sao phải viết mã sạch? Hãy tưởng tượng nếu bạn cố tìm một thứ gì đó trong một căn phòng bừa bộn — bạn sẽ lãng phí thời gian tìm kiếm, đúng không?
how-to-write-clean-code

Image of writing clean code by shahan

Mã lệnh bừa bộn cũng vậy! Rất KHÓ để tìm ra vấn đề hoặc hiểu điều gì đang diễn ra. Với mã lệnh sạch sẽ, bạn có thể tránh được mớ hỗn độn đó.

Bạn biết không?.. Việc viết mã sạch sẽ giúp bạn tiết kiệm thời gian quý báu cho những nhà phát triển khác. Tin tôi đi... Bạn đang cứu thế giới đấy! 🦸

7 Mẹo Để Viết Mã Sạch 🧯

Image of writing clean code by shahan

  1. Sử Dụng Tên Có Ý Nghĩa

    Khi bạn tạo một biến hoặc hàm, hãy đặt tên sao cho nó thể hiện rõ chức năng của nó.

Hãy nghĩ về việc đặt tên như khi bạn đặt tên cho một thư mục trên máy tính của mình. Thay vì gọi nó là b, hãy gọi nó là numberOfUsers. Bằng cách này, bạn không cần thêm chú thích để giải thích b là gì.

Example:

let numberOfUsers = 5; // Clear and easy to understand

2. Tuân Thủ Nguyên Tắc Trách Nhiệm Đơn (SRP)

Một hàm chỉ nên thực hiện một nhiệm vụ và làm nó tốt.

Điều này giúp mã dễ hiểu và dễ sửa chữa khi cần thiết. Nó giống như việc dùng một công cụ cho một nhiệm vụ, chẳng hạn như bút chì để viết và kéo để cắt.

Image of writing clean code by shahan

Example:

function addNumbers(a, b) {
    return a + b;
}
 

Hàm này chỉ cộng hai số lại với nhau. Nó không làm gì khác.

3. Tránh Các Chú Thích Không Cần Thiết

Thay vì thêm chú thích khắp nơi, hãy cố gắng làm cho mã của bạn tự giải thích bằng cách sử dụng tên rõ ràng.

Chỉ sử dụng chú thích khi có điều gì đó phức tạp hoặc cần lưu ý đặc biệt. Quá nhiều chú thích có thể làm mọi người bối rối. 😕🤬

Example:

// Good: Clear name, no extra comment needed
let userAge = 25; 

// Bad: Unclear name, needs a comment
let a; // age of the user

4. Giữ Mã Của Bạn Dễ Đọc

Sử dụng khoảng trắng, thụt lề và ngắt dòng để giữ cho mã của bạn gọn gàng.

Cũng giống như viết một đoạn văn, bạn nên chia mã của mình thành những phần nhỏ hơn để nó không bị dồn vào một dòng.

Example:

// Good Code
if (isLoggedIn) {
    console.log("Welcome!");
} else {
    console.log("Please log in.");
}

// Bad Code
if(isLoggedIn){console.log("Welcome!");}else{console.log("Please log in.");}

5. Viết Các Bài Kiểm Tra Đơn Vị

Các bài kiểm tra đơn vị là những lần kiểm tra cho mã của bạn.

Chúng đảm bảo rằng mọi thứ hoạt động như nó nên có. Khi bạn thay đổi mã của mình, những bài kiểm tra này sẽ cho bạn biết nếu có điều gì đó bị hỏng.

Example:

function add(a, b) {
    return a + b;
}

// Test
console.assert(add(2, 3) === 5, 'Test failed: 2 + 3 should be 5');

6. Cẩn Thận Với Các Phụ Thuộc

Khi bạn xây dựng phần mềm, hãy cố gắng giữ cho các thành phần tách biệt để chúng không phụ thuộc quá nhiều vào nhau.

Ví dụ, một chiếc máy rửa bát có thể ở bất kỳ bếp nào, không chỉ ở một bếp cụ thể. Cách đó dễ quản lý hơn.

Image of writing clean code by shahan

7. Tổ Chức Dự Án Của Bạn

Giữ cho các tệp và thư mục của bạn được tổ chức, giống như việc giữ cho bàn làm việc của bạn sạch sẽ. Điều này giúp bạn dễ dàng tìm kiếm mọi thứ khi dự án của bạn phát triển lớn hơn.

Image of writing clean code by codewithshahan

Example:

Sử dụng các thư mục như components, servicesutils trong dự án của bạn.
Giữ các tệp tương tự lại với nhau để bạn biết nơi cần tìm kiếm.

 

Bài viết cùng chuyên mục

hatonet

Hướng dẫn cài và sử dụng vue-object-to-formdata cho dự án nuxtjs

today 11/12/2024 22:15
vue-object-to-formdata là một thư viện JavaScript được thiết kế để chuyển đổi một đối tượng JavaScript (Object) thành đối tượng FormData. Đây là một đối tượng có thể dễ dàng sử dụng trong các yêu cầu HTTP để gửi dữ liệu, đặc biệt là khi bạn cần gửi dữ liệu như là một phần của biểu mẫu (form), ví dụ: khi upload file hoặc gửi dữ liệu dưới dạng multipart/form-data.
Xem thêm arrow_right_alt
hatonet

Hướng dẫn cài đặt và sử dụng v-tooltip trong project nuxt js

today 04/12/2024 21:34
v-tooltip là một thư viện Vue.js nhẹ, dễ sử dụng, giúp tạo ra các tooltip (hộp thông báo khi người dùng di chuột qua một phần tử) trong các ứng dụng Vue. Tooltip là một yếu tố giao diện người dùng (UI) thông báo hoặc giải thích ngắn gọn về một đối tượng khi người dùng hover (di chuột) hoặc focus vào phần tử đó.
Xem thêm arrow_right_alt
hatonet

Hướng dẫn cài đặt và sử dụng thư viện Elementjs nuxtjs

today 28/11/2024 23:14
Thư viện Element UI là một bộ thư viện giao diện người dùng mạnh mẽ, cung cấp nhiều thành phần (components) tùy chỉnh sẵn, giúp bạn xây dựng giao diện ứng dụng dễ dàng và nhanh chóng. Đối với Nuxt.js , bạn có thể tích hợp và sử dụng Element UI một cách đơn giản. Dưới đây là hướng dẫn từng bước.
Xem thêm arrow_right_alt

Việc làm tại Hatonet

Actively collaborate with team leads to develop a cohesive vision for each Agent that ensures audience resonance, and successful integration with the existing cast through personality, visual aesthetics, and gameplay Lead, manage, and mentor a high performing, healthy, and collaborative concept art team Work with production to ensure your team’s timely and successful delivery of products Maintain and contribute to artifacts that inform, align, and empower teams to successfully create character concept art in the VALORANT style

  • GWS
  • Trưởng phòng IT
Onsite
vietnam_flag