Qu’est-ce qu’un ESM modulaire frontal ?

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.

1. Concept de base d'ESM
   Dans ESM, nous pouvons diviser le code en plusieurs modules, et chaque module expose certaines interfaces à utiliser par d'autres modules. Chaque module peut introduire les dépendances dont il a besoin via l'instruction import sans se soucier des conflits de variables globales. Dans le même temps, les modules peuvent également exposer leurs interfaces à d'autres modules via l'instruction d'exportation.
2. Utilisation d'ESM
   2.1 Syntaxe de base
   Pour utiliser ESM, vous devez utiliser la balise de script dans le fichier HTML pour charger le module et spécifier le type comme "module". Par exemple :

<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!

3. La différence entre ESM et CommonJS (module.exports/require)
   ESM et CommonJS sont deux méthodes de développement modulaires différentes. ESM utilise l'importation et l'exportation statiques, et les dépendances des modules sont déterminées au moment de la compilation, tandis que CommonJS utilise l'importation et l'exportation dynamiques, et les dépendances des modules ne peuvent être déterminées qu'au moment de l'exécution.

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!