Les imports/exports ES6 (JavaScript 2015)

Les imports/exports ne sont pas encore implémentés dans les navigateurs, il existe des modules loader ou des modules bundler pour travailler avec les modules. Dans tous les exemples suivants on utilise webpack pour faire fonctionner les imports/exports.

Il suffit de reprendre le tutorial d'installation de webpack sur ce site et de modifier les fichiers js2 et js1.

Principes généraux de la modularisation avec JavaScript (import/export)

Export/import d’une variable

js1.js

var x = 44;
export {x};

js2.js

import {x} from "./js1.js";
alert("x :" + x);

On peut aussi déclarer la variable let ou const. Var, let et const ne sont importants que dans le fichier qui exporte les variables.

Comme les variables importées sont en lecture seule on ne peut pas les modifier. Exemple : x = 66 est interdit.

Export/import d’une fonction

js1.js

function display(msg)
{
    alert(msg);
};
export {display};

js2.js

import {display} from './js1.js';
display("hellooo world");

Export/import d’un objet littéral

js1.js

    
var obj = {
    nom : "durant",
    age : 15
    };

export {obj};

Si vous exportez un objet tous les modules qui vont l’importer auront les mêmes données c’est un singleton.

js2.js

import {obj} from "./js1.js";
alert("nom :" + obj.nom);

Export/import d’une classe

js1.js

function Personne(nom)
{
    this.Nom = nom;

    this.Afficher = function()
    {
        document.write(this.Nom);
    }

}
export {Personne};

js2.js

import {Personne} from "./js1.js";
let unePersonne = new Personne("durant");
let uneAutrePersonne = new Personne("martin");

unePersonne.Afficher();
uneAutrePersonne.Afficher();

Export/import par défaut d’une fonction

On a le droit de définir un export par défaut dans un module. Les exports par défaut ne fonctionnent qu’avec les fonctions, les objets et les classes. Vous pouvez spécifier n’importe quel nom au moment de l’import.

js1.js

export default function(x) {
    return x * 2;
}

On peut avoir d’autres déclarations d’export nommés dans le même module.

js2.js

    
import Multiplier from "./js1.js";
alert (Multiplier(5));

Plus besoin d’accolade pour les exports par défaut. Vous pouvez choisir le nom de l’import.

Export/import par défaut d’un objet littéral

Il faut supprimer l’exemple précédant.

js1.js

export default {
nom : "clyde",
age : 15
}         

js2.js

import unObjet from "./js1.js";
alert (unObjet.nom);