Qu'est-ce que l'ESM front-end ? Des exemples de code spécifiques sont nécessaires
Dans le développement front-end, ESM fait référence aux modules ECMAScript, qui est une méthode de développement modulaire basée sur les spécifications ECMAScript. ESM apporte de nombreux avantages, tels qu'une meilleure organisation du code, l'isolation entre les modules et la réutilisabilité. Cet article présentera les concepts de base et l'utilisation d'ESM et fournira quelques exemples de code spécifiques.
<script type="module" src="main.js"></script>
Dans un fichier de module, nous pouvons utiliser l'instruction import pour introduire les interfaces d'autres modules, et utiliser l'instruction export pour exposer nos propres interfaces à d'autres modules. Par exemple, nous avons deux fichiers de module :
// module1.js export function sayHello() { console.log("Hello, module1!"); } // module2.js import { sayHello } from "./module1.js"; sayHello();
2.2 Interface d'exportation et d'importation
Dans ESM, vous pouvez utiliser l'instruction export pour exporter une variable, une fonction ou une classe du module vers d'autres modules. Par exemple :
// module1.js export const PI = 3.14; export function square(x) { return x * x; }
D'autres modules peuvent utiliser l'instruction import pour importer l'interface dans module1.js et l'utiliser. Par exemple :
// module2.js import { PI, square } from "./module1.js"; console.log(PI); // 输出3.14 console.log(square(2)); // 输出4
2.3 Exportation par défaut et importation par défaut
En plus d'exporter des interfaces nommées, ESM prend également en charge l'exportation et l'importation par défaut. Un module ne peut avoir qu'une seule exportation par défaut, et l'exportation par défaut n'a pas besoin d'être encapsulée avec {}. L'importation par défaut peut utiliser n'importe quel nom de variable à recevoir. Par exemple :
// module1.js export default function sayGoodbye() { console.log("Goodbye!"); } // module2.js import goodbye from "./module1.js"; goodbye(); // 输出Goodbye!
L'avantage d'ESM est que les dépendances des modules sont plus claires et qu'il n'est pas nécessaire d'utiliser des variables globales pour contrôler l'ordre de chargement et d'exécution des modules. L'avantage de CommonJS est qu'il peut calculer dynamiquement les dépendances des modules au moment de l'exécution, ce qui lui confère une plus grande flexibilité.
Ce qui suit est un exemple de mélange d'ESM et CommonJS :
// module1.js (ESM) export const PI = 3.14; // module2.js (CommonJS) const { PI } = require("./module1.js"); console.log(PI); // 输出3.14
Résumé :
ESM est une méthode de développement modulaire couramment utilisée dans le développement front-end. Elle gère les relations de référence entre les modules via l'importation et l'exportation statiques. Dans ESM, les modules peuvent se référencer les uns les autres et réutiliser le code, et il n'y a pas lieu de s'inquiéter de la pollution des variables globales. Dans le développement réel, nous pouvons diviser des codes complexes selon des idées modulaires pour améliorer la maintenabilité et la lisibilité du code.
Ce qui précède est une introduction aux concepts de base et à l'utilisation d'ESM. J'espère que grâce à l'introduction de cet article, les lecteurs pourront avoir une certaine compréhension d'ESM et être capables d'appliquer la technologie ESM dans le développement réel.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!