Importe des fonctions JS depuis un fichier JS externe
Syntaxe import * as module from
Attention, incompatible avec Internet Explorer
Non
Oui
Oui
Oui
Oui
Oui
Oui
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.
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>";
En savoir plus
