Dynamic Loader

Der Dynamic Loader ist eine zentrale Komponente der Kryzo Engine und ermöglicht das bedarfsgesteuerte Nachladen von Modulen zur Laufzeit. Anstatt sämtliche Funktionalitäten bereits beim Start der Anwendung zu laden, werden Module erst dann importiert und ausgeführt, wenn sie tatsächlich benötigt werden. Dieses Prinzip reduziert die initiale Ladezeit der Anwendung, vermeidet unnötige Netzwerk- und Speicherzugriffe und sorgt für eine bessere Skalierbarkeit bei größeren Projekten. Insbesondere bei komponentenbasierten Oberflächen oder modularen Erweiterungen können Funktionen gezielt dort aktiviert werden, wo die entsprechenden Elemente tatsächlich vorhanden sind.

Der Dynamic Loader unterstützt sowohl Module innerhalb der Kryzo-Modulstruktur als auch projektbezogene Erweiterungen aus beliebigen Verzeichnissen. Dadurch können eigene Komponenten, Plugins oder Integrationen unabhängig von der Engine entwickelt und dynamisch eingebunden werden. Jedes geladene Modul erhält die beim Aufruf definierten Parameter und kann eigenständig entscheiden, wie vorhandene Elemente verarbeitet werden. Um Mehrfachinitialisierungen zu vermeiden, empfiehlt sich die Verwendung einer internen Kennzeichnung pro Element. Dadurch können Module jederzeit erneut ausgeführt werden, ohne bereits erfolgreich verarbeitete Elemente doppelt zu initialisieren.

Beispiel Einsatz Dynamic Loader

/* 
    Das Modul steht bei dem Laden der Webanwendung nicht zur Verfügung.
    Erst beim Einsatz des Dynamic Loader, wird das Modul geladen.        

    Festlegen der Variablen zum Laden des Moduls
    Speziell Variable "folder":
        - wenn bspw "elements"   → Pfad: "assets/build/modules/elements/" ( Build bezogener Pfad )
        - wenn bspw "./plugins/" → Pfad: "./plugins/" ( relativer Pfad zum Projekt )
*/

const folder     = 'elements';
const className  = 'myCustomClass';
const params     = { key: 'abc123' };

/* Dynamic Loader ausführen, nur wenn das:die gewünschte: Element:e existiert */

if(document.querySelector('.myElement')){
    dynamicLoading(folder, className, params);
}

Beispiel Modul myCustomClass

/* Datei: "assets/build/modules/elements/myCustomClass.js" */

/* Map, um mehrfach Initialisierung zu verhindern */
const INIT = Symbol('my-custom-init');

export function myCustomClass(params) {
    
    /* Alle zu verarbeitenden Elemente erfassen */
    const items = document.querySelectorAll('.myElement');

    /* Elemente mit Schleife durchlaufen */
    for (const el of items) {

        /* Wurde bereits umgewandelt - ist alles korrekt
           nächstes Element verarbeiten */
        if (el[INIT] === true) continue;

        /* Wurde bereits umgewandelt - es ist nicht alles korrekt
           Element prüfen */
        if (el[INIT] === false){
            /* 
                Prüfen, was schiefgelaufen ist 
                Wenn aufgrund von Fehlern nicht neu initialisiert werden soll

                continue;
            */
        }

        try{
            /*

                An dieser Stelle die gewünschten Operationen durchführen
                Für erneute Verarbeitung aus der INIT Map wieder entfernen

            */
            /* Erfolgreich: Element als verarbeitet mappen */
            el[INIT] = true;
        }
        catch(e){
            el[INIT] = false;
            console.warn('Modul Operation fehhlgeschlagen',e);
        }
    }
}

Dynamic Loadings wie Modul behandeln

/*
    Aus Kryzo Build Ordner laden
*/
const MYMOD = await dynamicLoading('elements', 'mymod', {});
      MYMOD.run();

/* Aus Ordner relative zum WebRoot laden */
const MYMOD = await dynamicLoading('custom_plugins', 'my-handler', {}, 'webroot/');
      MYMOD.run();

Beispiel Klasse

/*
    Beispiel relativ zum WebRoot
    Datei: ./custom_plugins/my-handler.js
*/
export class MyHandler {
    constructor({ myOption1, myOption2 } = {}) {
        this.myOption1 = myOption1;
        this.myOption2 = myOption2;
        this.init();
    }
    init(){
        console.log('Do something', this.myOption1);
    }
    run(){
        console.log('run!');
    }
}