Vinh Web »

javascript

Javascript Clean Code Tips và ví dụ Thực tiễn (15 Tips để Code tốt hơn)

27 lượt xem 1 bình luận

Code nên được viết theo cách dễ hiểu, dễ sửa và đơn giản để mở rộng tính năng mới. Bởi vì code được đọc nhiều hơn là được viết, nên clean code được chú trọng rất nhiều. Trong bài này chúng ta hãy tìm hiểu về JavaScript Clean Code.

Tính dễ đọc của một source code gồm:

  • Dễ dàng duy trì
  • Tốn ít thời gian để hiểu và triển khai cho một developer mới
  • Code có thể reused dễ dàng

Xem thêm: 21 Cheatsheet thiết yếu cho Lập trình viên trong 2021

0. Naming

Đứng biến việc đặt tên biến thành trò đố vui. Đặt tên biến và hàm là một cách chúng ta thể hiện ý đồ của chúng ở nơi đầu được tạo. Javascript Clean Code

Bằng cách này biến và hàm có thể dễ dàng tìm kiếm và hiểu, đặc biệt như khi có developer mới vào team.

Chỉ sử dụng tên viết tắt khi bạn muốn lập trình viên tiếp theo làm việc trên code của bạn đoán xem bạn đang nghĩ gì 😉 

Bad 👎

let x = 10;

let y = new Date().getFullYear();

if (x > 30) {
    //...
}

if (y - x >1990) {
    //...
}

Good 👍

let userAge = 30;

let currentYear = new Date().getFullYear();

if (userAge > 30) {
    //...
}

if (currentYear - userAge >1990) {
    //...
}
Javascript Clean Code Tips

Ngoài ra, đừng thêm các chữ cái thừa không cần thiết vào tên biến hoặc hàm. Javascript Clean Code

Bad 👎

let nameValue;
function theProduct();

Good 👍

let name;
function product();

1. Câu điều kiện

Tránh câu điều kiện phủ định. Câu phủ định thường khó hiểu hơn là câu khẳng định.

Bad 👎

if (!userExist(user)) {
  //...
}

Good 👍

if (userExist(user)) {
  //...
}

2. Hàm (Function) chỉ nên làm một việc

Hàm không nên có nhiều hơn 30 dòng code (ngoại trừ khoảng cách hoặc comment). Hàm càng nhỏ thì càng dễ hiểu và tái cấu trúc. Cố gắng đảm bảo rằng hàm của bạn đang chỉnh sửa hoặc truy vấn một cái gì đó chứ không phải cả hai.

3. Sử dụng default arguments

Sử dụng default arguments thay vì câu điện ngắn.

Default arguments thường ngắn gọn hơn là câu điều kiện ngắn. Hãy nhớ rằng nếu bạn dùng chúng, function của bạn chỉ có một giá trị mặc định. Javascript Clean Code

Bad 👎

function getUserData(name) {
  const userName = userName || "Patrick Collision";
  // ...
}

Good 👍

function getUserData(name = "Patrick Collision") {
  // ...
}

4. Mức độ Trừu tượng

Khi viết bất kỳ hàm nào, nếu bạn có nhiều hơn một mức độ trừu tượng thì hàm của bạn sẽ thường làm nhiều việc hơn một việc. Chia một chức năng lớn thành nhiều chức năng nhỏ dẫn đến khả năng tái sử dụng và kiểm tra dễ hơn. Javascript Clean Code

Bad 👎

function checkSomething(statement) {
  const REGEXES = [
    // ...
  ];

  const statements = statement.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      // ...
    });
  });

  const names= [];
  tokens.forEach(token => {
    // lex...
  });

  names.forEach(node => {
    // parse...
  });
}

Good 👍

function checkSomething(statement) {
  const tokens = tokenize(statement);
  const syntaxTree = parse(tokens);
  syntaxTree.forEach(node => {
    // parse...
  });
}

function tokenize(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      tokens.push(/* ... */);
    });
  });

  return tokens;
}

function parse(tokens) {
  const syntaxTree = [];
  tokens.forEach(token => {
    syntaxTree.push(/* ... */);
  });

  return syntaxTree;
}

5. Đừng bỏ qua việc bắt lỗi

Không làm gì khi gặp lỗi, sẽ khiến bạn khó khắn trong việc nhận biết lỗi, phản ứng và fix lỗi cụ thể đó.

Hiện thị lỗi là console (console.log) không tốt lắm vì đôi khi nó có thể bị mất khi có nhiều thử khác được print ra. Javascript Clean Code

Bad 👎

try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}

Good 👍

try {
  functionThatMightThrow();
} catch (error) {
  notifyUserOfError(error);   
  reportErrorToService(error);   
}

6. Tối ưu Comment

Chỉ comment vào phần code xử lý logic phức tạp. Comment không bắt buộc, Code tốt chính là document cho chính nó. Javascript Clean Code

Bad 👎

function hashing(data) {
  // The hash
  let hash = 0;

  // Length of string
  const length = data.length;

  // Loop through every character in data
  for (let i = 0; i < length; i++) {
    // Get character code.
    const char = data.charCodeAt(i);
    // Make the hash
    hash = (hash << 5) - hash + char;
    // Convert to 32-bit integer
    hash &= hash;
  }
}

Good 👍

function hashing(data) {
  let hash = 0;
  const length = data.length;

  for (let i = 0; i < length; i++) {
    const char = data.charCodeAt(i);
    hash = (hash << 5) - hash + char;

    // Convert to 32-bit integer
    hash &= hash;
  }
}

7. Loại bỏ commented code

Đừng để commented code trong code của bạn. Version control tồn tại cho việc này. Để code cũ trong lịch sử, nếu bạn cần lấy chúng lại, xem trong git history.

Bad 👎

doSomething();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();

Good 👍

doSomething();

8. Chỉ Import những thứ bạn cần

Destructing được giới thiệu trong ES6. Điều này giúp ta lấy được giá trị từ mảng, hoặc properties từ đối tượng, đến một biến cụ thể. Ta có thể sử dụng destructing cho bất kỳ loại object hoặc module nào.

Ví dụ, nếu bạn cần lấy function add() và subtruct() từ một module khác.

Javascript Clean Code

Bad 👎

const calculate = require('./calculations')

calculate.add(4,2);
calculate.subtract(4,2);

Good 👍

const { add, subtract } = require('./calculations')

add(4,2);
subtract(4,2);

Việc này có lý hơn khi bạn chỉ import funciton bạn cần dùng chứ thay vì cả một module.

9. Giữ cho function của bạn có 3 arguments hoặc ít hơn

Giới hạn thông số của một biến thực sự quan trọng bởi nó khiến việc tes function dễ dàng hơn. Có nhiều hơn 3 thông số dẫn đến việc test đưa ra rất nhiều kết quả khác nhau với mỗi phần.

“Nếu có trên ba arguments trong function của bạn, thì đó là quá nhiều. Việc này dẫn đến vi phạm quy tắc SRP (Single Responsibility Priciple)”

10. Sử dụng array spreads để copy array

Sử dụng array spreads là một qua tắc trong Javascript Clean Code

Bad 👎

const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

Good 👍

const itemsCopy = [...items];

11. Viết code trên một dòng

Code lồng nhau khá khó để hiểu. Luôn viết code trên một dòng nhiều nhất có thể. Nó khiến code đơn giản, sạch sẽ, dễ đọc và duy trì.

12. Sử dụng ESLint và Prettier

Luôn sử dụng ESLint và Prettier để định dạng kiểu code chung thông qua team và các developers.

Cũng như sử dụng tính năng mới nhất của JavaScript để viết code, như destructing, spread operator, async-await, template literals, optional chaining…

13. Sử dụng dấu ngoặc đơn thích hợp

Bad 👎

const foo = a && b < 0 || c > 0 || d + 1 === 0;

if (a || b && c) {
  return d;
}

Good 👍

const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

if (a || (b && c)) {
  return d;
}

14. Return sớm từ hàm

Để tránh lồng ghép với câu điều kiện if else, luôn trả về giá trị của hàm sớm nhất có thể.

Bad 👎

function isPercentage(val) {
  if (val >= 0) {
    if (val < 100) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

Good 👍

function isPercentage(val) {
  if (val < 0) {
    return false;
  }

  if (val > 100) {
    return false;
  }

  return true;
}

Hoặc có thể cải thiện hơn:

function isPercentage(val) {
  var isInRange = (val >= 0 && val <= 100);
  return isInRange;
}

Kết luận Javascript Clean Code

Theo 15 quy tắc của Javascript Clean Code này, chắc chắn sẽ giúp cho những developer khác khi nhìn vào code của bạn.

ref: https://apoorvtyagi.tech

Bắt đầu dịch vụ của bạn ngay hôm nay

Cùng trao đổi, thảo luận và xây dựng sản phẩm mà bạn mong muốn. Làm việc ngay hôm nay.

Bắt đầu