JavaScript-Module

Dieser Leitfaden gibt Ihnen alles, was Sie brauchen, um mit der JavaScript-Modulsyntax zu beginnen.

Ein Hintergrund zu Modulen

JavaScript-Programme haben klein angefangen — die meisten ihrer Anwendungsfälle in den frühen Tagen bestanden darin, isolierte Skripting-Aufgaben zu erledigen, um ein bisschen Interaktivität für Ihre Webseiten bereitzustellen, wo immer es nötig war, sodass große Skripte im Allgemeinen nicht benötigt wurden. Ein paar Jahre später haben wir nun komplette Anwendungen, die in Browsern mit viel JavaScript ausgeführt werden, sowie JavaScript, das in anderen Kontexten verwendet wird (Node.js, zum Beispiel).

Komplexe Projekte erfordern einen Mechanismus zum Aufteilen von JavaScript-Programmen in separate Module, die bei Bedarf importiert werden können. Node.js verfügt schon lange über diese Fähigkeit, und es gibt eine Reihe von JavaScript-Bibliotheken und Frameworks, die die Modulanwendung ermöglichen (zum Beispiel andere auf CommonJS und AMD basierende Modul-Systeme wie RequireJS, webpack und Babel).

Alle modernen Browser unterstützen Modulfunktionen nativ, ohne dass eine Transpilation erforderlich ist. Das kann nur von Vorteil sein — Browser können das Laden von Modulen optimieren, was effizienter ist, als eine Bibliothek zu verwenden und all die zusätzlichen clientseitigen Verarbeitungen und zusätzlichen Reisen durchzuführen. Es macht jedoch Bundler wie webpack nicht überflüssig — Bundler sind weiterhin gut darin, Code in angemessen große Stücke zu unterteilen und können andere Optimierungen wie Minifizierung, Eliminierung von totem Code und Tree-Shaking durchführen.

Einführung eines Beispiels

Um die Verwendung von Modulen zu demonstrieren, haben wir eine Reihe von Beispielen erstellt, die Sie auf GitHub finden können. Diese Beispiele demonstrieren eine Reihe von Modulen, die ein -Element auf einer Webseite erstellen und dann Informationen über verschiedene Formen darauf zeichnen und berichten.

Diese sind ziemlich trivial, wurden jedoch absichtlich einfach gehalten, um Module klar darzustellen.

Hinweis: Wenn Sie die Beispiele herunterladen und lokal ausführen möchten, müssen Sie sie über einen lokalen Webserver ausführen.

Grundstruktur eines Beispiels

In unserem ersten Beispiel (siehe basic-modules) haben wir folgende Dateistruktur:

index.html
main.js
modules/
    canvas.js
    square.js

Hinweis: Alle Beispiele in diesem Leitfaden haben im Grunde die gleiche Struktur; das oben Genannte sollte ziemlich vertraut werden.

Die zwei Module im Verzeichnis modules werden unten beschrieben:

  • canvas.js — enthält Funktionen im Zusammenhang mit dem Einrichten des Canvas:

    • create() — erstellt ein Canvas mit einer angegebenen width (Breite) und height (Höhe) innerhalb eines umschließenden
      mit einer angegebenen ID, das selbst in ein angegebenes Eltern-Element eingefügt wird. Gibt ein Objekt zurück, das den 2D-Kontext des Canvas und die ID der Umhüllung enthält.
    • createReportList() — erstellt eine ungeordnete Liste, die innerhalb eines angegebenen Umhüllungselements hinzugefügt wird, und die verwendet werden kann, um Berichtsdaten auszugeben. Gibt die ID der Liste zurück.

  • square.js — enthält:

    • name — eine Konstante, die den String 'square' enthält.
    • draw() — zeichnet ein Quadrat auf einem angegebenen Canvas mit einer angegebenen Größe, Position und Farbe. Gibt ein Objekt zurück, das die Größe, die Position und die Farbe des Quadrats enthält.
    • reportArea() — schreibt die Fläche eines Quadrats in eine spezifische Berichts-Liste, basierend auf seiner Länge.
    • reportPerimeter() — schreibt den Umfang eines Quadrats in eine spezifische Berichts-Liste, basierend auf seiner Länge.

Beiseite — .mjs versus .js

In diesem Artikel haben wir .js-Erweiterungen für unsere Moduldaten verwendet, Sie sehen jedoch möglicherweise in anderen Ressourcen die .mjs-Erweiterung. V8's Dokumentation empfiehlt dies, zum Beispiel. Die angegebenen Gründe sind:

  • Es sorgt für Klarheit, d.h. es macht deutlich, welche Dateien Module sind und welche reguläres JavaScript darstellen.
  • Es stellt sicher, dass Ihre Moduldateien von Laufzeiten wie Node.js und Build-Tools wie Babel als Modul geparst werden.

Wir haben uns jedoch entschieden, vorerst bei .js zu bleiben. Um Module korrekt in einem Browser zum Laufen zu bringen, müssen Sie sicherstellen, dass Ihr Server sie mit einem Content-Type-Header bereitstellt, der einen JavaScript-MIME-Typ wie text/javascript enthält. Wenn nicht, erhalten Sie einen strengen MIME-Typ-Fehler in der Art von "Der Server hat mit einem Nicht-JavaScript-MIME-Typ geantwortet", und der Browser wird Ihr JavaScript nicht ausführen. Die meisten Server setzen bereits den richtigen Typ für .js-Dateien, aber noch nicht für .mjs-Dateien. Server, die .mjs-Dateien bereits korrekt bereitstellen, sind GitHub Pages und http-server für Node.js.

Das ist in Ordnung, wenn Sie bereits eine solche Umgebung verwenden oder wenn Sie das Potenzial haben, Ihren Server zu konfigurieren, um den korrekten Content-Type für .mjs-Dateien zu setzen. Es könnte jedoch Verwirrung stiften, wenn Sie den Server, von dem Sie die Dateien bereitstellen, nicht kontrollieren oder wenn Sie Dateien zur öffentlichen Nutzung veröffentlichen, wie wir es hier tun.

Für Lern- und Portabilitätszwecke haben wir uns entschieden, bei .js zu bleiben.

Wenn Sie wirklich Wert auf die Klarheit legen, .mjs für Module zu verwenden, im Gegensatz zu .js für "normale" JavaScript-Dateien, aber nicht auf das oben beschriebene Problem stoßen möchten, könnten Sie immer noch .mjs während der Entwicklung verwenden und sie während Ihres Build-Schritts in .js umwandeln.

Es ist auch erwähnenswert, dass:

  • Einige Tools werden möglicherweise niemals .mjs unterstützen.
  • Das

Die Importkarte wird mithilfe eines JSON-Objekts innerhalb eines