Retourner ' la page d'accueil de TJSRetourner ' la page d'accueil de TJS

Structure : import

Importe des fonctions JS depuis un fichier JS externe

Syntaxe
import * as module from

Attention, incompatible avec Internet Explorer
ES6
ECMAScript 2015

Description
L'instruction import permet d'importer un, plusieurs ou tous éléments définis et exportés dans le fichier externe fichier-module.js

Il existe plusieurs syntaxes possibles selon les besoins applicatifs.
Pour importer toutes les éléments du module disponible du fichier :
import * as monModule from "fichier-module.js"
Dans cette importation, on crée un espace de nommage monModule. Tous les appels aux éléments du fichier se font avec le préfixe défini par as :
monModule.fonction_exportee_numero1()

Pour n'importer qu'un élément :
import {fonction_exportee_numero1} from "mon-module.js"

Pour importer une série d'éléments :
import {fonction_exportee_numero1, fonction_exportee_numero5} as module from "mon-module.js"

Dans ces deux derniers cas, il n'y a pas d'espace de nommage. L'appel aux fonctions exportées se fait directement.

Voir les exemples suivants pour les différents types d'imports.


Exemple 1 : Import d'un module complet
Code source
<script src="./traitement.js" type="module"></script>
Retour des traitements affiché ici :
<div id="retour"></div>

Notez qu'il il n'est pas possible d'inclure le contenu de traitement.js directement dans le corps du document HTML sous peine d'erreur JS "Uncaught SyntaxError: Cannot use import statement outside a module"

Résultat
Retour des traitements affiché ici :
Notez qu'il il n'est pas possible d'inclure le contenu de traitement.js directement dans le corps du document HTML sous peine d'erreur JS "Uncaught SyntaxError: Cannot use import statement outside a module"
Emulation de la console
Explication
Le fichier comprenant les exports s'appelle ici fichier-module.js et il contient :
/* Fichier JS pour les fiches références import, export, as */

/* Constante PI */
export const PI=Math.PI;

/* Retourne le diamètre d'un cercle à partir de son rayson */
export function diametreCercle(rayon) {
return 2 * rayon;
}

/* Retourne la circonférence d'un cercle à partir de son rayon */
export function circonferenceCercle(rayon) {
return 2 * PI * rayon;
}

/* Retourne surface d'un cercle à partir de son rayson */
export function surfaceCercle(rayon) {
return PI * rayon * rayon;
}

/* Retourne le volume d'une sphère à partir de son rayon */
export function volumeSphere(rayon) {
return (4 / 3) * PI * rayon * rayon * rayon;
}


On importe dans la page HTML le fichier traitement.js qui réalise des traitements basés sur les fonctions exportées. Le fichier traitement.js contient :
/* Fichier JS à inclure comme module dans .html */
import * as monModule from './fichier-module.js';

let html="";
html+=monModule.PI+"<br>";
html+="Surface d'un cercle de rayon 5m : "+monModule.surfaceCercle(5)+" m2<br>";
html+="Volume d'une sphere de rayon 5m : "+monModule.volumeSphere(5)+" m3<br>";

document.getElementById("retour").innerHTML=html;
Page mise à jour le

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 23/04/2025 07:17:53 sur php 7 en 339.68 ms