Modullader in JavaScript

1. Modul in JavaScript
2. Modullader in JavaScript

In diesem Artikel erfahren Sie anhand eines Beispiels, was ein Modullader in JavaScript ist und wie Sie einen Modullader zum Laden von JavaScript-Modulen in der Haupt-JavaScript-Datei verwenden.

Modul in JavaScript

Die mehreren Codeanweisungen, die verwendet werden, um Implementierungsdetails zusammenzufassen und bestimmte Aufgaben auszuführen, werden als Modul bezeichnet. Es kann auch wiederverwendet werden, und wir können vermeiden, wiederholt ähnlichen Code zu schreiben.

Wir können unser Modul in einer anderen Codequelle laden und verwenden. Wir können das Modul verwenden, um Abhängigkeiten einfach zu transponieren, um sie zu verwalten.

Modul Grundmuster:

Wir können ein Modul mit dem Muster erstellen, wie unten gezeigt.

// Expose module as a global variable

var MyModule = function() {
  // Inner logic of the module

  function helloWorld() {
    console.log('Hello world');  // will print "Hello world" in log
  }

  // Expose API

  return {
    helloWorld: helloWorld
  }
}

Jetzt können wir eine Instanz unseres Moduls erstellen, wie unten gezeigt.

var module_instance = new MyModule();

Jetzt können wir auf seine öffentliche API zugreifen.

module_instance.helloWorld();

Modullader in JavaScript

Um ein bereits geschriebenes Modul in einem bestimmten Modulformat zu interpretieren und zu laden, verwenden wir Modullader, die zur Laufzeit des Quellcodes ausgeführt werden. Modullader lädt in den Browsern.

Wir müssen die Hauptdatei definieren, die der Modullader laden soll. Der Modullader führt das Interpretieren und Herunterladen der Hauptdatei durch.

Es gibt einige Module-Loader-Beispiele in JavaScript.

• RequireJs
• SystemJs

RequireJs

RequireJs ist eine Bibliothek, die die AMD-Standards (Asynchronous Module Definition) unterstützt. Wie unten gezeigt, müssen wir RequireJs in unser HTML-Dokument herunterladen und laden.

<script src="scripts/require.js"></script>

Vor oder nach dem Laden des require.js-Skripts kann RequireJs konfiguriert werden. Wir müssen eine Vielzahl von erforderlichen Namen beschreiben und die Konfiguration speichern.

SystemJs

In JavaScript ist SystemJs ein universeller Modullader. In Winkeln zum Laden von Modulen wird es immens verwendet.

Wenn wir eine jQuery-Bibliothek in unserer main.js-Datei benötigen, können wir unsere main.js-Datei mit dem Schlüsselwort import starten, und sie lädt automatisch jQuery-Bibliotheksmodule. Mit SystemJs können wir separate JavaScript-Module in unsere Haupt-JavaScript-Datei laden, wie unten gezeigt.

System.Import('main.js');