JS import / export

Les instructions import ou export servent à utiliser du code javascript écrit dans d'autres fichiers. Elles fonctionnent uniquement avec les protocoles http:// ou https://. Le protocole file:// ne permet pas d'utiliser import ou export ; une erreur "Cross-Origin Request Blocked" est générée. Voir developer.mozilla.org/fr/docs/Web/HTTP/CORS.

Bien noter qu'on est ici dans un contexte de javascript côté client, et non pas côté serveur, comme avec node.js, qui possède sa propre manière d'importer les modules.

Pour une référence plus complète, voir developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules

Importer / exporter une fonction

Exemple d'utilisation : voir les fichiers function1.js et function2.js.

function2.js

On indique avec export la possibilité d'utiliser f2 dans d'autres fichiers.

export function f2(){
    console.log("dans f2");
}

function1.js

On indique avec import qu'on va utiliser f2, déclarée et exportée dans un autre fichier.
On indique aussi avec export la possibilité d'utiliser f1 dans d'autres fichiers.

import {f2} from './function2.js';

export function f1(){
    console.log("dans f1");
    f2();
}

Utilisation

<script type="module">
    import {f1} from './function1.js';
    console.log('Test import fonctions');
    f1();
</script>

Exécution

Si vous êtes sur une URL utilisant le protocole http:// ou https://, ouvrez une console javascript et vous verrez le code précédent s'exécuter.

Importer / exporter une classe

Exemple d'utilisation : voir les fichiers class1.js et class2.js.

class2.js

export class class2 {

    publicMethod() {
        return 'publicMethod() dans class2';
    }

} // end class

class1.js

import {class2} from './class2.js';

export class class1 {

    publicMethod() {
        return 'publicMethod() dans class1';
    }

    publicMethodFromClass2() {
        const c2 = new class2();
        return c2.publicMethod();
    }

} // end class

Utilisation

<script type="module">
    import {class1} from './class1.js';
    const c1 = new class1();
    console.log("Test import classe");
    console.log("publicMethod = " + c1.publicMethod());
    console.log("publicMethodFromClass2 = " + c1.publicMethodFromClass2());
</script>

Exécution

Si vous êtes sur une URL utilisant le protocole http:// ou https://, ouvrez une console javascript et vous verrez le code précédent s'exécuter.