[ Better ] 9 Tổng hợp Các khuôn Phương Pháp Viết Code Hiệu Quả

Lập trình phải tuân thủ các nguyên tắc và thực tiễn lập trình để viết mã nguồn một cách có tổ chức. Khuôn khổ chung và các ví dụ mã nguồn được minh họa ở đây thông qua bài Tổng hợp Các khuôn.

Sử Dụng Cấu Trúc Thư Mục trong Lập trình tổng hợp các khuôn mẫu react

project-root/
│
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   ├── Footer.js
│   │   └── Button.js
│   ├── utils/
│   │   ├── math.js
│   │   └── date.js
│   ├── services/
│   │   ├── api.js
│   │   └── auth.js
│   ├── App.js
│   └── index.js
│
├── public/
│   ├── index.html
│   └── styles.css
│
└── package.json

Với cấu trúc bên trên

với mỗi components sẽ là các item trên page
Với mỗi services là một mô hình theo dạng MVC hoặc MVVM
Với Utils các hàm tiện ích
App.js hàm main nơi khởi tạo đầu tiên để chạy toàn bộ app
Có thể thêm 1 folder là screens hoặc pages để gôm các components vào

Lưu ý đây là cấu trúc react native trên mobileApp

Sử Dụng Higher-Order Functions

Trong lập trình hàm, khái niệm các hoạt động cao hơn (HOF) rất quan trọng. HOF là các hàm có thể trả về một hàm, sử dụng một hàm khác làm đối số hoặc cả hai. Mã nguồn trở nên linh hoạt, tái sử dụng được và dễ bảo trì hơn khi sử dụng HOF.

– Ví dụ về filter

// Không tuân thủ

function getEvenNumbers(numbers) {
    let result = [];
    for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] % 2 === 0) {
            result.push(numbers[i]);
        }
    }
    return result;
}

// Tuân thủ

function getEvenNumbers(numbers) {
    return numbers.filter(number => number % 2 === 0);
}

Lợi ích của các chức năng cao hơn
Tái sử dụng mã: dễ dàng tái sử dụng logic chung.
Đơn giản hóa mã là một phương pháp để giảm số lần lặp lại của các đoạn mã tương tự.
Tính mô-đun hóa: Mã nguồn được chia thành các thành phần nhỏ để người dùng có thể hiểu và kiểm tra chúng.
Tính trừu tượng: giúp tạo ra các hàm trừu tượng hơn có thể sử dụng nhiều loại đầu vào.

– ví dụ về map

// Không tuân thủ

function sumNumbers(numbers) {
    let total = 0;
    for (let i = 0; i < numbers.length; i++) {
        total += numbers[i];
    }
    return total;
}

// tuân thủ

function sumNumbers(numbers) {
    let total = 0;
    for (let i = 0; i < numbers.length; i++) {
        total += numbers[i];
    }
    return total;
}

Tuân Thủ Nguyên Tắc DRY (Don’t Repeat Yourself)

// utils/math.js
export function calculateArea(shape, ...dimensions) {
    switch (shape) {
        case 'square':
            return dimensions[0] * dimensions[0];
        case 'rectangle':
            return dimensions[0] * dimensions[1];
        case 'circle':
            return Math.PI * dimensions[0] * dimensions[0];
        default:
            throw new Error('Unknown shape');
    }
}

Xem lại bài trước

Tuân Thủ Nguyên Tắc KISS (Keep It Simple, Stupid)

// services/api.js
export async function fetchData(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
}

Xem lại bài trước

tong hop cac khuon phuong phap viet code hieu qua2

Sử Dụng Constants

// constants.js
export const API_URL = 'https://api.example.com';
export const TIMEOUT = 5000;

Xem lại bài trước

Tuân Thủ Nguyên Tắc Single Responsibility Principle (SOLID)

// services/auth.js
export class AuthService {
    login(username, password) {
        // Logic for login
    }

    logout() {
        // Logic for logout
    }
}

Xem lại bài trước

Link

Sử Dụng Components Tái Sử Dụng (React)

// components/Title.js
import React from 'react';

export function Title({ text }) {
    return <h1>{text}</h1>;
}

// components/Header.js
import React from 'react';
import { Title } from './Title';

export function Header() {
    return <Title text="My App" />;
}

// components/Footer.js
import React from 'react';
import { Title } from './Title';

export function Footer() {
    return <Title text="My App" />;
}

Tái Sử Dụng Cấu Trúc Dữ Liệu

// models/user.js
export function createUser(name, age) {
    return { name, age };
}

// usage
import { createUser } from './models/user';

const user1 = createUser('John', 30);
const user2 = createUser('Jane', 25);

Tách Biệt Các Chức Năng (Separation of Concerns)

// services/userService.js
import { fetchData } from './api';

export async function getUserData(userId) {
    const url = `${API_URL}/users/${userId}`;
    return fetchData(url);
}

// components/UserProfile.js
import React, { useEffect, useState } from 'react';
import { getUserData } from '../services/userService';

export function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        getUserData(userId).then(setUser);
    }, [userId]);

    if (!user) return <div>Loading...</div>;

    return (
        <div>
            <h1>{user.name}</h1>
            <p>Age: {user.age}</p>
        </div>
    );
}

Áp dụng các nguyên tắc trên vào mã nguồn của bạn sẽ làm cho mã nguồn của bạn tổ chức hơn, dễ bảo trì hơn và mở rộng hơn. Ngoài ra, điều này làm cho mã nguồn trở nên dễ hiểu hơn đối với các lập trình viên khác.

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

#Base Code #Souce Code

Npm: @tools.mtips5s.com

Bộ công cụ My Self: @github

Npm: @npm

Docker: @docker

Chúc các bạn thành công!