JavaScript Academy · Leçon

Schéma de module (IIFE)

Encapsulez du code avec des fonctions immédiatement invoquées.

Schéma de module (IIFE) est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Ce que résout le modèle de module

Avant les modules ES, le modèle de module permettait de regrouper un état et un behavior associés tout en gardant les éléments internes privés et en exposant une interface publique claire. Il repose sur les fermetures.

L’IIFE

Une IIFE (expression de fonction immédiatement invoquée) est une fonction qui s’exécute au moment même où elle est définie. L’entourer de parenthèses et l’appeler crée instantanément une portée privée.

const result = (function () {
  return 42;
})();
console.log(result); // 42

Pourquoi l’exécuter immédiatement

L’IIFE vous fournit une portée privée temporaire sans laisser traîner une fonction nommée. Tout ce qu’elle contient est isolé de l’espace de noms global.

(function () {
  const temp = "not global";
  console.log(temp);
})();
// temp is unreachable out here

Renvoyer une interface publique

Le modèle de module est une IIFE qui renvoie un objet. Les méthodes de l’objet sont des fermetures sur les variables privées et forment l’interface publique.

const counter = (function () {
  let count = 0; // private
  return {
    inc: () => ++count,
    value: () => count
  };
})();
counter.inc();
console.log(counter.value()); // 1

Privé ou public

Tout ce qui est déclaré à l’intérieur mais qui n’est pas renvoyé reste privé. Seul ce que vous placez sur l’objet renvoyé est accessible.

const calc = (function () {
  const pi = 3.14159; // private constant
  return {
    area: (r) => pi * r * r
  };
})();
console.log(calc.area(2)); // 12.56636
console.log(calc.pi);      // undefined

Fonctions auxiliaires privées

Les fonctions auxiliaires peuvent rester à l’intérieur du module, être utilisées par les méthodes publiques, sans jamais être exposées.

const validator = (function () {
  const clean = (s) => s.trim().toLowerCase(); // private
  return {
    isEmail: (s) => clean(s).includes("@")
  };
})();
console.log(validator.isEmail(" A@B.com ")); // true

Le modèle de module révélateur

Une variante populaire définit toutes les fonctions en privé, puis renvoie un objet qui « révèle » des références vers les fonctions publiques. Elle garde la liste de l’interface publique bien visible à la fin.

const store = (function () {
  let items = [];
  function add(x) { items.push(x); }
  function count() { return items.length; }
  return { add, count }; // reveal
})();
store.add("a");
console.log(store.count()); // 1

Instances uniques

Comme l’IIFE ne s’exécute qu’une fois, un module est en pratique une instance unique : il n’existe qu’une seule instance avec un seul état privé.

const config = (function () {
  let settings = { theme: "dark" };
  return {
    get: (k) => settings[k],
    set: (k, v) => { settings[k] = v; }
  };
})();
config.set("theme", "light");
console.log(config.get("theme")); // "light"

Fournir des dépendances

Vous pouvez transmettre des variables globales ou d’autres modules comme arguments de l’IIFE, ce qui rend les dépendances explicites et permet une minification sûre.

const mathUtils = (function (M) {
  return { roundUp: (n) => M.ceil(n) };
})(Math);
console.log(mathUtils.roundUp(4.1)); // 5

Éviter la pollution de l’espace global

Le but est de n’avoir qu’un seul nom global, celui du module, au lieu de dizaines de variables isolées. Cela évite les conflits de noms entre les scripts.

Relation avec les modules ES

Aujourd’hui, import/export fournissent une véritable portée de module au niveau du langage et remplacent en grande partie ce modèle. Cependant, comprendre les modules IIFE permet de mieux saisir le fonctionnement de la confidentialité et de l’encapsulation, et vous les rencontrerez encore dans du code ancien.

Vérification rapide

Le modèle de module et les IIFE.

Récapitulatif

Le modèle de module utilise une IIFE pour créer une portée privée, puis renvoie un objet dont les méthodes sont des fermetures sur un état masqué. Les éléments internes restent privés ; seuls les membres renvoyés sont publics. Les variantes comme le modèle de module révélateur clarifient l’interface, et les modules fonctionnent comme des instances uniques. Les instructions ES import/export remplacent désormais ce modèle, tout en reposant sur les mêmes idées.

Questions Fréquemment Posées

La leçon « Schéma de module (IIFE) » est-elle gratuite ?

Oui — le texte complet de « Schéma de module (IIFE) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Schéma de module (IIFE) » ?

Encapsulez du code avec des fonctions immédiatement invoquées. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Schéma de module (IIFE) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy