Une introduction aux systèmes de modules en JavaScript

Le concept de modules vient du paradigme de la programmation modulaire. Ce paradigme propose que le logiciel soit composé de composants séparés et interchangeables appelés « modules » en décomposant les fonctions du programme en fichiers autonomes pouvant fonctionner séparément ou couplés dans une application.

UTILISEZ LA VIDÉO DU JOUR

Un module est un fichier autonome qui encapsule du code pour implémenter certaines fonctionnalités et promouvoir la réutilisation et l'organisation.

Ici, vous couvrirez les systèmes de modules utilisés dans les applications JavaScript, y compris le modèle de module, le système de modules CommonJS utilisé dans la plupart des applications Node.js et le système de modules ES6.

Le modèle de module

Avant l'introduction des modules JavaScript natifs, le modèle de conception de module était utilisé comme un système de modules pour étendre les variables et les fonctions à un seul fichier.

Cela a été implémenté à l'aide d'expressions de fonction immédiatement appelées, communément appelées IIFE. Un IIFE est une fonction non réutilisable qui s'exécute dès sa création.

Voici la structure de base d'un IIFE :

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

Le bloc de code ci-dessus décrit les IIFE utilisés dans trois contextes différents.

Les IIFE ont été utilisés parce que les variables déclarées à l'intérieur d'une fonction sont étendues à la fonction, ce qui les rend accessibles uniquement à l'intérieur de la fonction, et parce que les fonctions vous permettent de renvoyer des données (les rendant accessibles au public).

Par exemple:

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

Le bloc de code ci-dessus est un exemple de la façon dont les modules ont été créés avant l'introduction des modules JavaScript natifs.

Le bloc de code ci-dessus contient un IIFE. L'IIFE contient une fonction qu'il rend accessible en la retournant. Toutes les variables déclarées dans l'IIFE sont protégées de la portée globale. Ainsi, la méthode ( direNom ) n'est accessible que par la fonction publique, appelDitesNom .

Notez que l'IIFE est enregistré dans une variable, fou . En effet, sans variable pointant vers son emplacement en mémoire, les variables seront inaccessibles après l'exécution du script. Ce modèle est possible grâce à Fermetures JavaScript .

Le système de modules CommonJS

Le système de module CommonJS est un format de module défini par le groupe CommonJS pour résoudre les problèmes de portée JavaScript en exécutant chaque module dans son espace de noms.

Le système de modules CommonJS fonctionne en forçant les modules à exporter explicitement les variables qu'ils souhaitent exposer à d'autres modules.

Ce système de modules a été créé pour JavaScript côté serveur (Node.js) et, en tant que tel, n'est pas pris en charge par défaut dans les navigateurs.

Pour implémenter des modules CommonJS dans votre projet, vous devez d'abord initialiser NPM dans votre application en exécutant :

npm init -y

Les variables exportées suivant le système de modules CommonJS peuvent être importées comme suit :

meilleure application de messagerie gratuite pour Windows 10

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Les modules sont importés dans CommonJS en utilisant le exiger instruction, qui lit un fichier JavaScript, exécute le fichier lu et renvoie la exportations objet. La exportations L'objet contient toutes les exportations disponibles dans le module.

Vous pouvez exporter une variable suivant le système de modules CommonJS en utilisant soit des exportations nommées, soit des exportations par défaut.

Exportations nommées

Les exportations nommées sont des exportations identifiées par les noms qui leur ont été attribués. Les exportations nommées permettent plusieurs exportations par module, contrairement aux exportations par défaut.

Par exemple:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

Dans le bloc de code ci-dessus, vous exportez deux fonctions nommées ( monexportation et un autreExporter ) en les attachant au exportations objet.

De même, vous pouvez exporter les fonctions comme suit :

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

Dans le bloc de code ci-dessus, vous définissez le exportations objet aux fonctions nommées. Vous ne pouvez attribuer que exportations objet à un nouvel objet via la module objet.

Votre code renverrait une erreur si vous tentiez de le faire de cette façon :

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Il existe deux manières d'importer des exportations nommées :

1. Importez toutes les exportations en tant qu'objet unique et accédez-y séparément à l'aide de la notation pointée .

Par exemple:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Déstructurer les exportations du exportations objet.

Par exemple:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Une chose est commune à toutes les méthodes d'importation, elles doivent être importées en utilisant les mêmes noms avec lesquels elles ont été exportées.

Exportations par défaut

Une exportation par défaut est une exportation identifiée par le nom de votre choix. Vous ne pouvez avoir qu'une seule exportation par défaut par module.

Par exemple:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

Dans le bloc de code ci-dessus, vous exportez une classe ( Foo ) en réaffectant le exportations s'y opposer.

L'importation d'exportations par défaut est similaire à l'importation d'exportations nommées, sauf que vous pouvez utiliser le nom de votre choix pour les importer.

Par exemple:

c'est quel genre de téléphone

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

Dans le bloc de code ci-dessus, l'exportation par défaut était nommée Bar , bien que vous puissiez utiliser le nom de votre choix.

Le système de modules ES6

Le système de modules ECMAScript Harmony, communément appelé modules ES6, est le système de modules JavaScript officiel.

Les modules ES6 sont pris en charge par les navigateurs et les serveurs, bien que vous ayez besoin d'un peu de configuration avant de les utiliser.

Dans les navigateurs, vous devez spécifier le taper comme module dans la balise d'importation de script.

Ainsi:

//index.html 
<script src="./app.js" type="module"></script>

Dans Node.js, vous devez définir taper à module dans ton package.json dossier.

Ainsi:

//package.json 
"type":"module"

Vous pouvez également exporter des variables à l'aide du système de modules ES6 en utilisant des exportations nommées ou des exportations par défaut.

Exportations nommées

Semblables aux importations nommées dans les modules CommonJS, elles sont identifiées par les noms qui leur ont été attribués et permettent plusieurs exportations par module.

Par exemple:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

Dans le système de module ES6, les exportations nommées sont exportées en préfixant la variable avec le exporter mot-clé.

Les exportations nommées peuvent être importées dans un autre module dans ES6 de la même manière que CommonJS :

Déstructurer les exportations requises du exportations objet.
Importer toutes les exportations en tant qu'objet unique et y accéder séparément à l'aide de la notation par points.

Voici un exemple de déstructuration :

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Voici un exemple d'importation de l'objet entier :

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

Dans le bloc de code ci-dessus, l'astérisque ( * ) signifie 'tous'. La comme mot-clé attribue le exportations objet à la chaîne qui le suit, dans ce cas, fou .

Exportations par défaut

Semblables aux exportations par défaut dans CommonJS, elles sont identifiées par le nom de votre choix et vous ne pouvez avoir qu'une seule exportation par défaut par module.

Par exemple:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Les exports par défaut sont créés en ajoutant le défaut mot-clé après le exporter mot-clé, suivi du nom de l'exportation.

L'importation d'exportations par défaut est similaire à l'importation d'exportations nommées, sauf que vous pouvez utiliser le nom de votre choix pour les importer.

Par exemple:

//otherModule.js 
import Bar from "./main.js";

Exportations mixtes

La norme de module ES6 vous permet d'avoir à la fois des exportations par défaut et des exportations nommées dans un module, contrairement à CommonJS.

créer une liste de diffusion dans Outlook

Par exemple:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Importance des modules

Diviser votre code en modules les rend non seulement plus faciles à lire, mais aussi plus réutilisables et maintenables. Les modules en JavaScript rendent également votre code moins sujet aux erreurs, car tous les modules sont exécutés en mode strict par défaut.