简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

Verbessern von JavaScript-Code mit ES-Modulen: Export, Import und darüber hinaus

WBOY
Freigeben： 2024-07-21 13:44:07
Original
776 Leute haben es durchsucht

Enhancing JavaScript Code with ES Modules: Export, Import, and Beyond

JavaScript-Module sind eine Möglichkeit, JavaScript-Code zu organisieren und wiederzuverwenden. Mithilfe von Modulen kann der Code in kleinere, überschaubare Teile zerlegt werden, die dann importiert und bei Bedarf in anderen Teilen einer Anwendung verwendet werden können. Dieser modulare Ansatz hilft bei der Aufrechterhaltung einer sauberen Codebasis, erleichtert das Debuggen und verbessert die Wiederverwendbarkeit des Codes.

ES-Module vs. CommonJS

Es gibt verschiedene Modulsysteme im JavaScript-Ökosystem. ES Modules (ESM) ist der Standard in der ECMAScript-Spezifikation, der hauptsächlich im Browser verwendet wird und zunehmend in Node.js unterstützt wird. CommonJS ist ein weiteres Modulsystem, das traditionell in Node.js verwendet wurde.

ES-Module (ESM)

ES-Module (ESM) sind ein standardisiertes Modulsystem in JavaScript, das in ECMAScript 2015 (ES6) eingeführt wurde. Sie ermöglichen eine bessere Organisation und Wiederverwendbarkeit von Code, indem sie den Import und Export von Funktionen, Objekten und Grundelementen zwischen verschiedenen Dateien ermöglichen. Dieses Modulsystem wird in modernen JavaScript-Umgebungen, einschließlich Browsern und Node.js, weitgehend unterstützt.

Export und Import

Das Export-Schlüsselwort kennzeichnet Variablen und Funktionen, auf die von außerhalb des aktuellen Moduls zugegriffen werden sollte, sodass sie in anderen Teilen Ihrer Anwendung wiederverwendet werden können. Das Schlüsselwort import ermöglicht den Import dieser Funktionalitäten aus anderen Modulen und ermöglicht so eine modulare Programmierung und Wiederverwendung von Code.

Der benannte Export ermöglicht den Export mehrerer Elemente aus einem Modul. Jedes Element muss mit demselben Namen importiert werden, mit dem es exportiert wurde.

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

Beim Importieren benannter Exporte müssen Sie dieselben Namen wie die Exporte verwenden.

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

Der Standardexport ermöglicht einen einzelnen Standardexport pro Modul. Der Artikel kann mit einem beliebigen Namen importiert werden.

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

Beim Importieren des Standardexports können Sie einen beliebigen Namen verwenden.

import message  from './module.js';
message(); // Hello, World!
Nach dem Login kopieren

Module in HTML verwenden

Wenn Sie Module in einem Browser verwenden, müssen Sie diese in Ihre HTML-Datei einbinden. Sie verwenden das Attribut type="module" im

Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！