Modules

Multiple fichiers

Lorsqu'un projet devient assez grand, il est souvent nécessaire de découper son code en plusieurs fichiers pour le rendre plus lisible, modulaire et réutilisable. Alors qu'en C, C# et Java on utilise des classes dans leur propre fichier, en Javascript on utilise des modules.

Un module est un fichier Javascript où l'on peut contrôler ce que l'on partage avec les autres fichiers. Ils nous permettent d'écrire du code privée et de n'exposer que ce qui est nécessaire. Cela nous permet de mieux organiser notre code et de le rendre plus facile à maintenir.

Créer un module est simple. Vous en utilisez déjà sans le savoir. Chaque fichier Javascript qui est lié au HTML par une balise <script> avec un attribut type="module" est un module.

Exporter des éléments

Pour partager des éléments d'un module à un autre, on utilise le mot-clé export. On peut exporter des variables, des fonctions et même des objets. Pour ce faire, on ajoute le mot-clé export devant la déclaration de l'élément à exporter. Voici un exemple:

Comme l'exemple ci-dessus le démontre, on peut exporter plusieurs éléments dans un même fichier. Il est fréquent de le faire, donc n'hésitez pas à le faire.

On peut aussi exporter les éléments à la fin du fichier au lieu de les exporter directement dans leur déclaration. Pour y arriver, on créera un bloc d'exportation à la fin du fichier. Voici un exemple:

Importer des éléments

Pour importer des éléments d'un autre module, on utilise le mot-clé import. On importera les éléments voulu dans le haut de notre fichier Javascript, similaire à l'importation de classes ou fonctions avec #include, using et import dans les langages C, C# et Java respectivement. Voici un exemple:

Comme l'exemple ci-dessus le démontre, pour importer des éléments d'un autre module, on doit les spécifier entre les accolades {} après le mot-clé import. On doit aussi spécifier le chemin relatif du fichier à importer après le mot-clé from.

Comme on peut le voir, on peut aussi importer plusieurs éléments d'un même fichier. Il faut simplement les séparer par des virgules. On peut aussi importer un élément avec un autre nom en utilisant le mot-clé as comme ceci:

Cela nous permet de renommer l'élément importé pour qu'il soit plus clair dans notre code ou encore pour éviter des conflits de nommage.

Nouveauté

Les modules tel que démontré dans cette page sont relativement récent. Ils ont été introduit dans la version ES6 de Javascript, en 2015, mais ont été considéré comme largement supporté par tous les navigateurs qu'après les années 2020. Ils sont basé sur un historique très intéressant de tehcnologies que vous verrez dans des cours futurs.

Bien que plusieurs morceaux de code en ligne utilise encore l'ancienne façon de faire, sans les modules, je vous demande de toujours les utiliser dans vos projets.