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
450 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!

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