Chuẩn hoá hàm JS

​

Kiến thức toàn diện về chuẩn hóa hàm trong JavaScript

Chuẩn hóa hàm (Function Normalization) là quá trình viết và tổ chức mã nguồn sao cho các hàm tuân theo các quy tắc nhất định về cấu trúc, hiệu suất, và tính dễ đọc. Việc chuẩn hóa hàm giúp cải thiện khả năng bảo trì, tái sử dụng và hợp tác giữa các lập trình viên. Dưới đây là kiến thức toàn diện về chuẩn hóa hàm:

Định nghĩa và ý nghĩa của chuẩn hóa hàm

Chuẩn hóa hàm là việc áp dụng các nguyên tắc và quy ước để đảm bảo rằng các hàm được viết một cách nhất quán, rõ ràng và hiệu quả. Mục tiêu chính của chuẩn hóa hàm bao gồm:

• Tăng tính dễ đọc và dễ hiểu.
• Giảm thiểu lỗi và tăng tính bảo trì.
• Cải thiện hiệu suất và tối ưu hóa tài nguyên.
• Thúc đẩy tái sử dụng mã nguồn.

Các nguyên tắc cơ bản để chuẩn hóa hàm

a. Một hàm chỉ nên thực hiện một nhiệm vụ duy nhất

Hàm nên tập trung vào một mục đích cụ thể và không làm quá nhiều việc cùng lúc. Điều này giúp hàm dễ hiểu, dễ kiểm thử và dễ bảo trì.

Ví dụ:

// Không chuẩn hóa
function processData(data) {
    const parsedData = JSON.parse(data);
    console.log("Data processed:", parsedData);
    return parsedData;
}

// Chuẩn hóa
function parseData(data) {
    return JSON.parse(data);
}

function logData(data) {
    console.log("Data processed:", data);
}

b. Đặt tên hàm rõ ràng và mô tả đúng nhiệm vụ

Tên hàm nên phản ánh chính xác nhiệm vụ mà nó thực hiện. Sử dụng động từ để mô tả hành động và danh từ để mô tả đối tượng.

Ví dụ:

// Không chuẩn hóa
function doStuff(a, b) {
    return a + b;
}

// Chuẩn hóa
function addNumbers(a, b) {
    return a + b;
}

c. Giới hạn độ dài của hàm

Hàm nên ngắn gọn và dễ đọc. Nếu hàm quá dài, hãy tách thành các hàm nhỏ hơn.

Quy tắc phổ biến:

• Hàm không nên vượt quá 20-30 dòng.
• Nếu cần xử lý logic phức tạp, chia nhỏ thành các hàm phụ trợ.

Ví dụ:

// Không chuẩn hóa
function calculateOrder(order) {
    const tax = order.price * 0.1;
    const discount = order.price > 100 ? order.price * 0.05 : 0;
    const total = order.price + tax - discount;
    console.log(`Total: ${total}`);
    return total;
}

// Chuẩn hóa
function calculateTax(price) {
    return price * 0.1;
}

function calculateDiscount(price) {
    return price > 100 ? price * 0.05 : 0;
}

function calculateOrder(order) {
    const tax = calculateTax(order.price);
    const discount = calculateDiscount(order.price);
    const total = order.price + tax - discount;
    console.log(`Total: ${total}`);
    return total;
}

d. Sử dụng tham số hợp lý

• Tránh sử dụng quá nhiều tham số (tối đa 3-4 tham số).
• Nếu cần truyền nhiều tham số, sử dụng object để nhóm chúng lại.

Ví dụ:

// Không chuẩn hóa
function createUser(firstName, lastName, age, email, address) {
    // Logic...
}

// Chuẩn hóa
function createUser(user) {
    const { firstName, lastName, age, email, address } = user;
    // Logic...
}

e. Tránh side effects

Hàm nên tránh thay đổi trạng thái bên ngoài (global variables, DOM,...). Điều này giúp hàm trở nên thuần túy (pure function) và dễ kiểm thử hơn.

Ví dụ:

// Không chuẩn hóa
let total = 0;

function addToTotal(amount) {
    total += amount;
    return total;
}

// Chuẩn hóa
function addToTotal(total, amount) {
    return total + amount;
}

f. Xử lý đầu vào không hợp lệ

Luôn kiểm tra và xử lý các trường hợp đầu vào không hợp lệ để tránh lỗi runtime.

Ví dụ:

function divide(a, b) {
    if (b === 0) throw new Error("Cannot divide by zero");
    return a / b;
}

Chuẩn hóa cú pháp và định dạng

a. Thụt lề và khoảng trắng

• Sử dụng 2 hoặc 4 dấu cách để thụt lề.
• Đặt khoảng trắng xung quanh toán tử và sau dấu phẩy.

Ví dụ:

// Không chuẩn hóa
function add(a,b){return a+b;}

// Chuẩn hóa
function add(a, b) {
    return a + b;
}

b. Thêm dấu chấm phẩy

Luôn thêm dấu chấm phẩy ở cuối mỗi câu lệnh để tránh lỗi.

Ví dụ:

// Không chuẩn hóa
let x = 10
let y = 20

// Chuẩn hóa
let x = 10;
let y = 20;

c. Viết hoa và đặt tên biến, hàm

• Biến và hàm: Sử dụng camelCase (viết thường chữ cái đầu tiên, viết hoa chữ cái đầu của từ tiếp theo).
• Class: Sử dụng PascalCase (viết hoa chữ cái đầu tiên của mỗi từ).

Ví dụ:

// Biến và hàm
let userName = "Alice";
function calculateTotal() {}

// Class
class UserAccount {}

Chuẩn hóa hiệu suất

a. Tránh lặp lại công việc không cần thiết

Nếu một giá trị được tính toán nhiều lần, lưu trữ nó trong một biến để tránh tính toán lại.

Ví dụ:

// Không chuẩn hóa
for (let i = 0; i < Math.random(); i++) {
    console.log(i);
}

// Chuẩn hóa
const randomValue = Math.random();
for (let i = 0; i < randomValue; i++) {
    console.log(i);
}

b. Tối ưu hóa vòng lặp

Tránh sử dụng các phương thức nặng nề (như .map, .filter) trong vòng lặp lớn nếu không cần thiết.

Ví dụ:

// Không chuẩn hóa
for (let i = 0; i < array.length; i++) {
    array[i] = array[i] * 2;
}

// Chuẩn hóa
array.forEach((item, index) => {
    array[index] = item * 2;
});

Chuẩn hóa tài liệu và chú thích

a. Thêm chú thích rõ ràng

Chú thích giúp người khác hiểu rõ ý nghĩa của mã nguồn.

Ví dụ:

/**
 * Hàm tính tổng hai số
 * @param {number} a - Số thứ nhất
 * @param {number} b - Số thứ hai
 * @returns {number} Tổng của hai số
 */
function add(a, b) {
    return a + b;
}

b. Viết README và tài liệu hướng dẫn

Nếu dự án lớn, hãy viết tài liệu mô tả cách sử dụng và cấu trúc của mã nguồn.

Chuẩn hóa testing

a. Viết unit test

Sử dụng các thư viện như Jest, Mocha để viết unit test cho mã nguồn.

Ví dụ:

test("adds 1 + 2 to equal 3", () => {
    expect(add(1, 2)).toBe(3);
});

b. Test các trường hợp biên

Kiểm tra các trường hợp đặc biệt như đầu vào rỗng, null, undefined, hoặc giá trị cực đại/cực tiểu.

Tuân thủ coding style

a. Theo dõi các chuẩn coding style

Tuân thủ các chuẩn coding style phổ biến như:

• Airbnb JavaScript Style Guide
• Google JavaScript Style Guide

b. Sử dụng ESLint/Prettier

Cài đặt và sử dụng các công cụ như ESLint và Prettier để tự động kiểm tra và định dạng mã nguồn.

Trường hợp đặc biệt với Arrow Function

Arrow functions có cú pháp ngắn gọn nhưng cũng có những hạn chế:

• Không có this riêng, kế thừa từ phạm vi bên ngoài.
• Không hỗ trợ arguments.
• Không thể sử dụng làm constructor.

Ví dụ:

// Không chuẩn hóa
const greet = () => {
    console.log(`Hello, ${this.name}`); // `this` không hoạt động như mong muốn
};

// Chuẩn hóa
const greet = function () {
    console.log(`Hello, ${this.name}`);
};

Tổng kết

Dưới đây là các yếu tố chính để chuẩn hóa hàm trong JavaScript:

1. Nguyên tắc cơ bản:
   • Một hàm chỉ nên thực hiện một nhiệm vụ duy nhất.
   • Đặt tên hàm rõ ràng, giới hạn độ dài, tránh side effects.
2. Cú pháp và định dạng:
   • Thụt lề, dấu chấm phẩy, đặt tên biến/hàm theo quy ước.
3. Hiệu suất:
   • Tránh lặp lại công việc, tối ưu hóa vòng lặp.
4. Tài liệu và chú thích:
   • Viết chú thích rõ ràng, tài liệu hướng dẫn.
5. Testing:
   • Viết unit test, kiểm tra các trường hợp biên.
6. Coding style:
   • Theo dõi chuẩn coding style, sử dụng ESLint/Prettier.

Bằng cách tuân thủ các nguyên tắc trên, bạn sẽ viết được các hàm chuẩn hóa, dễ đọc, dễ bảo trì và hiệu quả hơn!