Amélioration du code JavaScript avec les modules ES : exportation, importation et au-delà

Les modules JavaScript sont un moyen d'organiser et de réutiliser le code JavaScript. L'utilisation de modules peut diviser le code en morceaux plus petits et gérables, qui peuvent ensuite être importés et utilisés dans d'autres parties d'une application selon les besoins. Cette approche modulaire aide à maintenir une base de code propre, facilite le débogage et améliore la réutilisabilité du code.

Modules ES contre CommonJS

Il existe différents systèmes de modules dans l'écosystème JavaScript. ES Modules (ESM) est le standard de la spécification ECMAScript, utilisé principalement dans le navigateur et de plus en plus pris en charge dans Node.js. CommonJS est un autre système de modules traditionnellement utilisé dans Node.js.

Modules ES (ESM)

Les modules ES (ESM) sont un système de modules standardisé en JavaScript, introduit dans ECMAScript 2015 (ES6). Ils permettent une meilleure organisation et réutilisation du code en permettant l'importation et l'exportation de fonctions, d'objets et de primitives entre différents fichiers. Ce système de modules est largement pris en charge dans les environnements JavaScript modernes, notamment les navigateurs et Node.js.

Exporter et Importer

Le mot-clé export étiquette les variables et les fonctions qui doivent être accessibles depuis l'extérieur du module actuel, leur permettant d'être réutilisées dans d'autres parties de votre application. Le mot-clé import permet l'importation de ces fonctionnalités depuis d'autres modules, permettant une programmation modulaire et une réutilisation du code.

L'exportation nommée permet d'exporter plusieurs éléments à partir d'un module. Chaque élément doit être importé avec le même nom avec lequel il a été exporté.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

Lors de l'importation d'exportations nommées, vous devez utiliser les mêmes noms que les exportations.

import { greet } from './module.js';
greet(); // Hello, World!

L'export par défaut permet une seule exportation par défaut par module. L'article peut être importé sous n'importe quel nom.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

Lors de l'importation de l'exportation par défaut, vous pouvez utiliser n'importe quel nom.

import message  from './module.js';
message(); // Hello, World!

Utiliser des modules en HTML

Lorsque vous utilisez des modules dans un navigateur, vous devez les inclure dans votre fichier HTML. Vous utilisez l'attribut type="module" dans le fichier

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript