Maison >interface Web >js tutoriel >Comprendre le code propre : fonctions ⚡

Comprendre le code propre : fonctions ⚡

WBOYoriginal: 2024-08-16 06:11:36651parcourir

Understanding Clean Code: Functions ⚡

Dans le développement de logiciels, les fonctions sont les éléments constitutifs de toute application. Ils constituent le principal moyen par lequel nous structurons notre logique, encapsulons notre comportement et divisons les tâches complexes en éléments gérables.

Cependant, toutes les fonctions ne sont pas égales. Dans le chapitre 3 de Clean Code, l'accent est mis sur l'écriture de tâches petites, ciblées et qui font bien une chose.

Dans cet article, nous allons plonger dans ces principes et explorer comment les appliquer en JavaScript.

?1. Petites fonctions : moins c'est plus

L'un des principes fondamentaux du Clean Code est que les fonctions doivent être petites.

Mais que signifie « petit » dans ce contexte ? L’auteur préconise des fonctions qui ne font généralement que quelques lignes.

L'idée est qu'une petite fonction est plus facile à comprendre, à tester et à maintenir.

Regardons un exemple en JavaScript :

// Bad Example: A large, unfocused function
function processOrder(order) {
    applyDiscount(order);
    calculateShipping(order);
    calculateTax(order);
    generateInvoice(order);
    sendConfirmationEmail(order);
    updateInventory(order);
}

Cette fonction, bien qu'apparemment simple, en fait trop. Chacune de ces tâches pourrait et devrait être décomposée en sa propre fonction.

// Good Example: Small, focused functions
function processOrder(order) {
    applyDiscount(order);
    calculateShipping(order);
    calculateTax(order);
    generateInvoice(order);
    sendConfirmationEmail(order);
    updateInventory(order);
}

function applyDiscount(order) {
    // Discount logic
}

function calculateShipping(order) {
    // Shipping calculation logic
}

function calculateTax(order) {
    // Tax calculation logic
}

function generateInvoice(order) {
    // Invoice generation logic
}

function sendConfirmationEmail(order) {
    // Email sending logic
}

function updateInventory(order) {
    // Inventory update logic
}

Dans l'exemple révisé, chaque fonction fait une chose, ce qui rend le code plus facile à lire et à maintenir.

La fonction processOrder sert désormais d'orchestrateur de haut niveau, tandis que des fonctions plus petites et plus ciblées gèrent les détails.

?2. Faire une chose

Une fonction doit faire une chose et bien la faire. Si vous vous retrouvez à écrire une fonction qui effectue plusieurs tâches, c'est le signe que vous devez la refactoriser en fonctions plus petites.

Voici un exemple :

// Bad Example: A function doing multiple things
function formatAndSendEmail(email, subject, message) {
    const formattedMessage = `<html><body>${message}</body></html>`;
    sendEmail(email, subject, formattedMessage);
}

Bien que cette fonction semble concise, elle fait deux choses : formater le message et envoyer l'e-mail. Au lieu de cela, décomposez-le :

// Good Example: Functions doing one thing
function formatMessage(message) {
    return `<html><body>${message}</body></html>`;
}

function sendFormattedEmail(email, subject, message) {
    const formattedMessage = formatMessage(message);
    sendEmail(email, subject, formattedMessage);
}

Désormais, chaque fonction a une seule responsabilité, ce qui rend le code plus facile à tester et à réutiliser.

La fonction formatMessage peut être testée indépendamment de la logique d'envoi des emails.

?3. Évitez les effets secondaires

Les fonctions doivent minimiser les effets secondaires, ce qui signifie qu'elles ne doivent pas modifier l'état du système de manière inattendue. Les fonctions avec des effets secondaires peuvent être plus difficiles à déboguer et à raisonner.

Voici un exemple :

// Bad Example: A function with a side effect
let globalCounter = 0;

function incrementCounter() {
    globalCounter++;
}

La fonction IncreaseCounter modifie l'état global, ce qui peut entraîner des bugs si elle n'est pas soigneusement gérée.

Une meilleure approche consiste à renvoyer une nouvelle valeur et à laisser l'appelant décider quoi en faire :

// Good Example: Avoiding side effects
function incrementCounter(counter) {
    return counter + 1;
}

globalCounter = incrementCounter(globalCounter);

En évitant les effets secondaires, vous rendez vos fonctions plus prévisibles et plus faciles à utiliser.

?4. Niveau unique d'abstraction

Les fonctions doivent fonctionner à un seul niveau d'abstraction. Mélanger différents niveaux de détail au sein d’une même fonction peut rendre la compréhension plus difficile.

Par exemple :

// Bad Example: Mixed levels of abstraction
function getUserData(userId) {
    const user = database.fetchUserById(userId); // Low-level
    return `${user.firstName} ${user.lastName} (${user.email})`; // High-level
}

Ici, la fonction mélange la récupération de base de données de bas niveau avec le formatage de haut niveau des données utilisateur.

Il vaut mieux séparer ces préoccupations :

// Good Example: Single level of abstraction
function getUser(userId) {
    return database.fetchUserById(userId);
}

function formatUserData(user) {
    return `${user.firstName} ${user.lastName} (${user.email})`;
}

const user = getUser(userId);
const formattedUserData = formatUserData(user);

Désormais, chaque fonction fonctionne à un seul niveau d'abstraction, ce qui rend le code plus clair et plus facile à maintenir.

Conclusion ⚡

L'écriture de fonctions propres est la pierre angulaire de l'écriture de code maintenable.

En gardant les fonctions petites, en vous assurant qu'elles font une seule chose, en évitant les effets secondaires et en maintenant un seul niveau d'abstraction, vous pouvez créer un code plus facile à lire, à comprendre et à maintenir.

Alors que vous continuez à perfectionner vos compétences en JavaScript, gardez à l'esprit ces principes de Clean Code pour écrire des fonctions qui incarnent véritablement l'art de la simplicité et de la clarté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript less if for while break continue function this idea database

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Alors vous voulez devenir développeur Web ? Voici ce que vous devez savoir !Article suivant：Alors vous voulez devenir développeur Web ? Voici ce que vous devez savoir !

Articles Liés

Voir plus