Module

Jede Datei ist ein Modul

Module werden als JavaScript Datei gespeichert und wo sie verwendet werden sollen vor Verwendung geladen sein.

Die entscheidende Frage ist, was soll vom Modul exportiert werden?

Es kann nur eine Sache als default vom Modul exportiert werden

Ein Modul verwendet immer die Option "use strict"; .

Der default Name kann verändert werden!!

Modul erzeugen

Beispiel für ein Modul: Es wird können eine Klasse und andere Methoden exportiert werden

 // Klasse zum exportieren
 export default class Person {
     constructor (name,alter){
        this.name = name;
        this.alter = alter
    }
 }

// Funktion zum exportieren
 export function multi(a,b){
    return a*b;
 }

// andere Funktion zum exportieren
 export function addiere(a,b){
    return a*b;
 }

Dieses Modul wird unter dem Dateinamen: programmierung-modul-beispiel-2.js abgesichert.

Anwendung 1

Modul verwenden

Beispiel: Das Modul wird geladen und verwendet:

Zuerst das Modul laden:

Die Besonderheiten sind: im script-Tag den Typ module angeben. Und den Dateipfad mit ./ beginnen!!!

Alles, was das Modul exportieren darf, kann importiert werden. Funktionen werden mit geschwungenen Klammern, getrennt durch einen Beistrich importiert. Die importierten Namen können während des Importes geändert werden mit as

 // Klasse zum exportieren
 <script type="module">
     import Person, {multi as multipliziere, addiere} from "./programmierung-modul-beispiel-2.js";
 </script>
 }

Dieses Modul wird unter dem Dateinamen: programmierung-modul-beispiel-2.js abgesichert.

 <script type="module">
     // Das Modul importieren
     import Person, {multi as multipliziere, addiere} from "./programmierung-modul-beispiel-2.js";

     // Objekt aus importierter Klasse bilden 
     var roland = new Person("Roland", 60)
     
     // Methode des Objektes
     // der importierten Klasse verwenden
     alert(roland.name);
     
     // Eine Methode die direkt importiert
     // und während des Import
     // umbenannt wurde verwenden
     alert (multipliziere(4,5));       
    </script>

Anwendung 1

Modul kapseln

Es wird ausgenutzt, dass Variablen die mit var, let oder const deklariert sind nur innerhalb ihrer Bereiche gelten! Es werden die jeweiligen Funktionen geschickt verschachtelt. Außerdem verschwinden anonyme Funktionen nach Aufruf.

Dieses Modul wird unter dem Dateinamen: programmierung-modul-beispiel-4.js abgesichert:

Das Modul wird in einen privaten und einem öffentlichen Bereich aufgeteilt. Es sollte nur über die öffentlichen Methoden interagieren. Die internen Vorgänge sollten unerreicht sein. Nicht die export Angabe mit default vergessen!!

 // (Die gesamte Funktion in Klammern)(Leere Parameter damit sofort ausgeführt!)
 var modul = (function () {
   
 // ### Anfang des privaten Bereiches der anonymen Funktion ### //
     var privateVariable = "ohneWert oder 0";

     function privateFunktion() {
         alert("privateFunktion wurde aufgerufen\n" + "Private Variable: " + privateVariable);
     }
 // ### Ende des privaten Bereiches der anonymen Funktion ### //
 // Übergibt im return als öffentliche Methode des Objektes einer Variablen ein Objekt-Literal {}.
     return {
         öffentlicheMethode: function (parameter) {
             privateVariable = parameter;
             alert("öffentlicheMethode wurde aufgerufen\n" + "Private Variable: " + privateVariable);
             privateFunktion();
         },

         andereMethode: function () {
             alert("andereMethode wurde aufgerufen\n" + "Private Variable: " + privateVariable);
        } 
      };
 } )();

 export default modul;

Anwendung 2

Beispiel: Das Modul wird geladen und verwendet:

 <script type="module"> 
     import modul from "./programmierung-modul-beispiel-4.js";

     // modul ist ein Objekt
     modul.öffentlicheMethode("test");
     modul.andereMethode();
 </script>

Zuerst das Modul laden:

Die Besonderheiten sind: im script-Tag den Typ module angeben. Und den Dateipfad mit ./ beginnen!!!