Việc viết code sạch và dễ bảo trì là một điều rất quan trọng đối với bất kỳ nhà phát triển nào, và trong bài viết này, chúng ta sẽ khám phá một số phương pháp tốt nhất mà bạn có thể áp dụng để đảm bảo rằng các đoạn code JavaScript của bạn không chỉ tốt về mặt chức năng mà nó còn dễ đọc và hiểu. Cho dù bạn là người mới bắt đầu hay là một nhà phát triển có kinh nghiệm, những mẹo và kỹ thuật này sẽ giúp bạn viết code sạch hơn, dễ bảo trì hơn và dễ làm việc hơn trong dài hạn

Chú ý đến đối số của hàm

Giới hạn số lượng tham số mà hàm nhận là vô cùng quan trọng vì điều này làm cho việc triển khai, kiểm thử code của bạn dễ dàng hơn. Có nhiều hơn ba tham số sẽ dẫn đến một loạt các trường hợp phức tạp mà bạn phải kiểm tra.

Các điểm quan trọng của quy tắc "Function Arguments":

Với JavaScript, destructuring được giới thiệu từ ES2015/ES6 để làm cho các thuộc tính mà hàm mong đợi trở nên rõ ràng. Điều này mang lại một số lợi ích:

Không nên làm:

Nên làm:

Một hàm một sứ mệnh

"Functions should do one thing", Đây là quy tắc quan trọng nhất trong kỹ thuật phần mềm. Khi các hàm thực hiện nhiều hơn một công việc, chúng trở nên khó kết hợp, kiểm thử và suy luận. Khi cô lập một hàm chỉ để thực hiện một hành động duy nhất, bạn có thể tái cấu trúc dễ dàng và code của bạn sẽ đọc dễ hiểu hơn nhiều.

Hãy đảm bảo, Khi bạn đọc tên của hàm, bạn nên có thể hiểu được chính xác nhiệm vụ của nó là gì. Tin tôi đi, chỉ cần bạn nhớ quy tắc này, bạn đã rất khác biệt so với nhiều nhà phát triển khác rồi đấy.

Không nên làm:

Nên làm:

Đừng cố gắng trừu tượng quá nhiều

Nguyên tắc "Functions should only be one level of abstraction" (Hàm chỉ nên có một cấp độ trừu tượng) ám chỉ rằng các hàm nên được viết một cách rõ ràng và chỉ nên thực hiện một nhiệm vụ cụ thể tại một cấp độ trừu tượng nhất định. Khi bạn có nhiều hơn một cấp độ trừu tượng trong hàm của mình, thường đó là dấu hiệu của việc hàm đó đang làm quá nhiều việc.

Việc tuân thủ nguyên tắc này sẽ giúp mã nguồn trở nên dễ đọc, dễ bảo trì và tái sử dụng.

Không nên làm:

Trong ví dụ này, hàm calculateCircleProperties không tuân theo nguyên tắc "Functions should only be one level of abstraction." Nó không chỉ tính diện tích hoặc chu vi của hình tròn, mà còn thực hiện các hành động khác như lưu thông tin vào cơ sở dữ liệu và hiển thị thông tin. Điều này làm cho hàm trở nên phức tạp và khó bảo trì hơn vì nó thực hiện nhiều nhiệm vụ cùng một lúc.

Nên làm:

Đóng gói các điều kiện

"Encapsulate conditionals" là một nguyên tắc trong lập trình để đảm bảo rằng các điều kiện (conditions) được đóng gói (encapsulated) một cách sáng sủa và dễ quản lý.

Khi áp dụng nguyên tắc này, chúng ta sẽ sắp xếp và hợp nhất một số lệnh điều kiện (ví dụ: các lệnh if-else) thành một cấu trúc hoặc hàm duy nhất. Nguyên tắc này có thể giúp cải thiện tính đọc và khả năng bảo trì của mã và giảm việc code bị lặp lại. Nó thường được áp dụng trong việc thiết kế và triển khai mã nguồn.

Không nên làm:

Nên làm:

Hạn chế những điều kiện

Khi đọc đến đây, chắc hẳn nhiều người sẽ nói rằng điều này dường như là một nhiệm vụ bất khả thi, "Làm sao tôi có thể làm bất cứ điều gì mà không có lệnh if?". Thực tế, câu trả lời là bạn có thể sử dụng tính đa hình để làm việc đó trong nhiều trường hợp. Câu hỏi thứ hai thường là: "Tại sao tôi phải làm như thế?" Câu trả lời là một khái niệm về code sạch chúng ta vừa đọc xem ở trên: "Mỗi hàm chỉ nên làm một công việc việc". Khi bạn có các lớp và hàm với các lệnh, bạn đang nói với người dùng rằng hàm của bạn làm nhiều hơn một việc.

Tránh điều kiện (avoiding conditions) là một nguyên tắc trong lập trình mà mục tiêu chính là giảm sự phụ thuộc vào các câu lệnh điều kiện if, else, hoặc các biểu thức điều kiện khác. Việc này thường là để làm cho mã nguồn trở nên dễ đọc, dễ bảo trì, và linh hoạt hơn.

Không nên làm:

Nên làm:

Sử dụng chuỗi phương thức

Kiểu thiết kế này rất hữu ích trong JavaScript và bạn có thể thấy nó trong nhiều thư viện như jQuery và Lodash. Nó cho phép mã của bạn trở nên rõ ràng và ít lặp lại hơn. Vì lí do đó, tôi khuyên bạn hãy sử dụng chuỗi phương thức (method chaining) trong code của mình và nhìn những đoạn code của bạn sẽ sạch đến thế nào. Trong các hàm của lớp của bạn, đơn giản chỉ cần trả về this ở cuối mỗi hàm và bạn có thể chuỗi các phương thức lớp tiếp theo lên đó.

Không nên làm:

Nên làm:

Ưu tiên sử dụng composition hơn là inheritance

"Favor object composition over class inheritance", một tư tưởng khá nổi tiếng được đề cập trong cuốn sách "Design Patterns" của Gang of Four, rằng bạn nên ưu tiên sử dụng composition thay vì inheritance khi có thể. Có nhiều lý do tốt để sử dụng inheritance và cũng có nhiều lý do tốt để sử dụng composition.

Điểm chính của quy tắc này là nếu ý nghĩa của bạn tự nhiên hướng đến inheritance, hãy cố gắng nghĩ xem composition có thể mô hình hóa vấn đề của bạn tốt hơn hay không. Trong một số trường hợp, việc sử dụng composition có thể là cách tiếp cận tốt nhất. Sau đó, có thể bạn đặt câu hỏi: "Khi nào thì tôi nên sử dụng inheritance?" Điều này phụ thuộc vào vấn đề bạn đang giải quyết, nhưng đây là một danh sách khá tốt về khi nào inheritance hợp lý hơn composition:

Tại sao chúng ta nên ưu tiên sử dụng composition

Sử dụng Inheritance

Sử dụng Composition

Tổng kết

Khi bạn đọc đến đoạn này thì tôi cảm thấy rất vui vì bạn đã thích bài viết! Nếu bạn muốn tìm hiểu thêm về JavaScript và phát triển web hiện đại, hãy theo dõi tôi nhé. Bằng cách áp dụng những nguyên tắc trong bài viết này, bạn có thể nâng cao kỹ năng và trở thành một chuyên gia về clean code. Hãy tiếp tục cố gắng để đạt được sự xuất sắc!