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.
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
Lưu ý đây là cấu trúc react native trên mobileApp
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; }
// 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
xx
// 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
// constants.js export const API_URL = 'https://api.example.com'; export const TIMEOUT = 5000;
Xem lại bài trước
// services/auth.js export class AuthService { login(username, password) { // Logic for login } logout() { // Logic for logout } }
Xem lại bài trước
Link
// 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" />; }
// 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);
// 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!
Leave A Comment