Aperçu

Avant ES6, RequireJS ou seaJS était utilisé pour implémenter la modularisation (ce sont des bibliothèques de modularisation basées respectivement sur la spécification AMD et la spécification CMD).

ES6 a introduit la modularisation, avec la philosophie de conception consistant à déterminer les dépendances de modules et les variables d'entrée/sortie au moment de la compilation.

La modularisation ES6 est divisée en deux modules : export (@) et import.

Fonctionnalités

Les modules ES6 activent automatiquement le mode strict, que vous l'ajoutiez ou non en haut du module.use strict;。

Les modules peuvent importer et exporter divers types de variables, tels que des fonctions, des objets, des chaînes de caractères, des nombres, des booléens, des classes, etc.

Chaque module a son propre contexte. Les variables déclarées dans chaque module sont des variables locales et ne polluent pas la portée globale.

Chaque module n'est chargé qu'une seule fois (c'est un singleton). Si le même fichier dans le même répertoire est chargé à nouveau, il est lu directement depuis la mémoire.

export et import

Utilisation de base

Les modules importent et exportent divers types de variables, tels que des chaînes de caractères, des nombres, des fonctions et des classes.

  • Les déclarations de fonctions et de classes exportées doivent avoir des noms (la commande export default est un cas à part).
  • Non seulement les déclarations peuvent être exportées, mais les références (comme les fonctions) peuvent également l'être.
  • La commande export peut apparaître n'importe où dans le module, mais elle doit être au niveau supérieur du module.
  • La commande import est hissée au sommet du module entier et exécutée en premier.
/*-----export [test.js]-----*/ let myName = "Tom"; let myAge = 20; let myfn = function(){ return "Mon nom est" + myName + "! I'm '" + myAge + "ans." } let myClass = class myClass { static a = "ouais !"; } export { myName, myAge, myfn, myClass } /*-----import [xxx.js]-----*/ import { myName, myAge, myfn, myClass } from "./test.js"; console.log(myfn());// Je m'appelle Tom ! J'ai 20 ans. console.log(myAge);// 20 console.log(myName);// Tom console.log(myClass.a );// ouais !

Il est recommandé d'utiliser des accolades pour spécifier un ensemble de variables à exporter, écrit à la fin du document, afin de définir clairement les interfaces exportées.

Les fonctions et les classes ont toutes les deux besoin de noms correspondants. Exporter à la fin du document évite également l'absence de noms correspondants.

Utilisation de as

Les noms d'interface exportés par la commande export doivent avoir une correspondance biunivoque avec les variables à l'intérieur du module.

Les noms des variables importées doivent correspondre aux noms des interfaces exportées ; l'ordre peut être différent.

/*-----export [test.js]-----*/ let myName = "Tom"; export { myName as exportName } /*-----import [xxx.js]-----*/ import { exportName } from "./test.js"; console.log(exportName);// TomUsageasRenommez les noms d'interface exportés pour masquer les variables à l'intérieur du module./*-----export [test1.js]-----*/ let myName = "Tom"; export { myName } /*-----export [test2.js]-----*/ let myName = "Jerry"; export { myName } /*-----import [xxx.js]-----*/ import { myName as name1 } from "./test1.js"; import { myName as name2 } from "./test2.js"; console.log(name1);// Tom console.log(name2);// Jerry

Lorsque les noms d'interface exportés par différents modules ont des noms en double, utilisez as pour redéfinir les noms des variables.

Caractéristiques de la commande import

Propriété en lecture seule: Dans le script qui charge le module, il n'est pas permis de réécrire la référence de l'interface. Autrement dit, vous pouvez modifier les valeurs des propriétés des variables importées qui sont de type objet, mais vous ne pouvez pas modifier les valeurs des variables importées qui sont de type primitif.

import {a} from "./xxx.js" a = {}; // error import {a} from "./xxx.js" a.foo = "hello"; // a = { foo : 'hello' }

Modèle singleton: La même instruction import, exécutée plusieurs fois, ne s'exécutera qu'une seule fois, pas plusieurs fois. Importer le même module et déclarer différentes références d'interface déclarera les variables correspondantes, mais l'import ne s'exécutera qu'une seule fois.

import { a } "./xxx.js"; import { a } "./xxx.js"; //Équivalent à import { a } "./xxx.js"; import { a } from "./xxx.js"; import { b } from "./xxx.js"; //Équivalent à import { a, b } from "./xxx.js";

Fonctionnalité d'exécution statique : import est exécuté statiquement, donc les expressions et les variables ne peuvent pas être utilisées.

import { "f" + "oo" } from "methods"; // error let module = "methods"; import { foo } from module; // error if (true) { import { foo } from "method1"; } else { import { foo } from "method2"; } // error

La commande export default

  • Dans un fichier ou un module, il peut y avoir plusieurs instructions export et import, mais un seul export default.
  • Dans export default, default est la variable d'interface exportée correspondante.
  • Lors de l'exportation avec export, vous devez ajouter { } lors de l'importation ; export default ne le nécessite pas.
  • Les membres exposés par export default peuvent être reçus à l'aide de n'importe quelle variable.
var a = "Je m'appelle Tom !"; export default a; //Un seul export default var c = "erreur"; //erreur, default est déjà la variable exportée correspondante et ne peut pas être suivi d'une instruction de déclaration de variable. import b from "./xxx.js"; //Pas besoin de {} ; utilisez n'importe quelle variable pour le recevoir.

Utilisation combinée

Remarque: import() est une proposition ; nous ne détaillerons pas cela ici pour le moment.

export et import peuvent être utilisés dans le même module, avec les caractéristiques suivantes :

  • Vous pouvez renommer les interfaces exportées, y compris default.
  • Combiner export et import peut aussi tout exporter ; les interfaces exportées par le module courant remplaceront les exports hérités.
export { foo, bar } from "methods"; //Cela équivaut à peu près aux deux instructions suivantes, sauf que la méthode import/export ci-dessus n'importe pas foo et bar dans ce module. import { foo, bar } from "methods"; export { foo, bar }; /*------- Fonctionnalité 1 --------*/ //Renommage ordinaire export { foo as bar } from "methods"; //Réexporter foo comme default export { foo as default } from "methods"; //Réexporter default comme foo export { default as foo } from "methods"; /*------- Fonctionnalité 2 --------*/ export * from "méthodes";