Maison > interface Web > js tutoriel > Clean Code : gérer les effets secondaires avec la programmation fonctionnelle

Clean Code : gérer les effets secondaires avec la programmation fonctionnelle

Mary-Kate Olsen
Libérer: 2025-01-10 22:29:45
original
367 Les gens l'ont consulté

Clean Code: Managing Side Effects with Functional Programming

Les effets secondaires peuvent rendre le code imprévisible et difficile à maintenir. Explorons comment la programmation fonctionnelle nous aide à les gérer efficacement.

Quels sont les effets secondaires ?

Une fonction crée un effet secondaire si elle fait autre chose que prendre des entrées et renvoyer des sorties. Certains effets secondaires courants incluent :

  • Changer les variables globales
  • Modification des paramètres d'entrée
  • Écrire dans des fichiers ou des bases de données
  • Faire des appels API
  • Mise à jour du DOM
  • Connexion à la console

Pourquoi les effets secondaires peuvent causer des problèmes

Voici un exemple qui montre des effets secondaires problématiques :

let userProfile = {
  name: "Alice Johnson",
  email: "alice@example.com",
  preferences: {
    theme: "dark",
    notifications: true
  }
};

function updateUserTheme(newTheme) {
  userProfile.preferences.theme = newTheme;
}

function toggleNotifications() {
  userProfile.preferences.notifications = !userProfile.preferences.notifications;
}

// Multiple functions modifying the same global state
updateUserTheme("light");
toggleNotifications();

console.log(userProfile); // State is unpredictable
Copier après la connexion

Ce code présente plusieurs problèmes :

  1. Il utilise l'état global
  2. Plusieurs fonctions peuvent modifier les mêmes données
  3. Les changements deviennent difficiles à suivre
  4. Les tests deviennent compliqués

Une meilleure solution avec des fonctions pures

Voici une version améliorée utilisant les principes de programmation fonctionnelle :

const createUserProfile = (name, email, theme, notifications) => ({
  name,
  email,
  preferences: {
    theme,
    notifications
  }
});

const updateTheme = (profile, newTheme) => ({
  ...profile,
  preferences: {
    ...profile.preferences,
    theme: newTheme
  }
});

const toggleNotifications = (profile) => ({
  ...profile,
  preferences: {
    ...profile.preferences,
    notifications: !profile.preferences.notifications
  }
});

// Usage
const initialProfile = createUserProfile(
  "Alice Johnson",
  "alice@example.com",
  "dark",
  true
);

const updatedProfile = updateTheme(initialProfile, "light");
const finalProfile = toggleNotifications(updatedProfile);

console.log(initialProfile); // Original state unchanged
console.log(finalProfile);   // New state with updates
Copier après la connexion

Exemple pratique : opérations sur les fichiers

Voici comment gérer les effets secondaires nécessaires dans les opérations sur les fichiers à l'aide de la programmation fonctionnelle :

// Separate pure business logic from side effects
const createUserData = (user) => ({
  id: user.id,
  name: user.name,
  createdAt: new Date().toISOString()
});

const createLogEntry = (error) => ({
  message: error.message,
  timestamp: new Date().toISOString(),
  stack: error.stack
});

// Side effect handlers (kept at the edges of the application)
const writeFile = async (filename, data) => {
  const serializedData = JSON.stringify(data);
  await fs.promises.writeFile(filename, serializedData);
  return data;
};

const appendFile = async (filename, content) => {
  await fs.promises.appendFile(filename, content);
  return content;
};

// Usage with composition
const saveUser = async (user) => {
  const userData = createUserData(user);
  return writeFile('users.json', userData);
};

const logError = async (error) => {
  const logData = createLogEntry(error);
  return appendFile('error.log', JSON.stringify(logData) + '\n');
};
Copier après la connexion

Gérer les effets secondaires avec la programmation fonctionnelle

  1. Fonctions pures
   // Pure function - same input always gives same output
   const calculateTotal = (items) => 
     items.reduce((sum, item) => sum + item.price, 0);

   // Side effect wrapped in a handler function
   const processPurchase = async (items) => {
     const total = calculateTotal(items);
     await saveToDatabase(total);
     return total;
   };
Copier après la connexion
  1. Composition des fonctions
   const pipe = (...fns) => (x) => 
     fns.reduce((v, f) => f(v), x);

   const processUser = pipe(
     validateUser,
     normalizeData,
     saveUser
   );
Copier après la connexion
  1. Transformation des données
   const transformData = (data) => {
     const addTimestamp = (item) => ({
       ...item,
       timestamp: new Date().toISOString()
     });

     const normalize = (item) => ({
       ...item,
       name: item.name.toLowerCase()
     });

     return data
       .map(addTimestamp)
       .map(normalize);
   };
Copier après la connexion

Test des fonctions pures

Les tests deviennent beaucoup plus simples avec des fonctions pures :

describe('User Profile Functions', () => {
  const initialProfile = createUserProfile(
    'Alice',
    'alice@example.com',
    'dark',
    true
  );

  test('updateTheme returns new profile with updated theme', () => {
    const newProfile = updateTheme(initialProfile, 'light');

    expect(newProfile).not.toBe(initialProfile);
    expect(newProfile.preferences.theme).toBe('light');
    expect(initialProfile.preferences.theme).toBe('dark');
  });

  test('toggleNotifications flips the notifications setting', () => {
    const newProfile = toggleNotifications(initialProfile);

    expect(newProfile.preferences.notifications).toBe(false);
    expect(initialProfile.preferences.notifications).toBe(true);
  });
});
Copier après la connexion

Pensées finales

La programmation fonctionnelle offre des outils puissants pour gérer les effets secondaires :

  • Gardez la logique de base pure et prévisible
  • Gérez les effets secondaires aux bords de votre application
  • Utiliser la composition pour combiner des fonctions
  • Renvoyer de nouvelles données au lieu de modifier l'état existant

Ces pratiques conduisent à un code plus facile à tester, à comprendre et à maintenir.


Comment gérez-vous les effets secondaires dans votre code fonctionnel ? Partagez vos approches dans les commentaires !

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!

source:dev.to
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal