Rolf B: JS script sowohl bei dynamisch als auch statisch geladenem content ausführen

Beitrag lesen

problematische Seite

Hallo borisbaer,

Spricht da irgendetwas dagegen?

Ich finde es unnötig kompliziert. Warum einen Industrieroboter aufbauen, nur um ein Bild aufzuhängen?

Es gibt zwei Momente, wo Du Registrierungen durchführen musst.

  • Beim Laden der Seite vom Server. Da muss alles registriert werden, egal ob innerhalb oder außerhalb des .append Elements
  • Nach dem Laden einer Seite per Ajax. Da müssen Dinge auf den Elemente registriet werden, der innerhalb des .append Elements liegen. Das tust Du derzeit mittels MutationObserver, wenn ich das richtig verstehe.

Du musst das aber nicht über den Observer steuern. Den Aufruf der Erstregistrierung kannst Du in einen DOMContentLoaded Eventhandler stecken. Und die Nachregistrierung rufst Du einfach "von Hand" auf, nachdem Du das Ergebnis des Ajax-Calls ins DOM gesteckt hast. Fertig.

Das JavaScript-Modul dazu lädst Du einmalig beim Seitenabruf. Entweder klassisch im <head> mit DOMContentLoaded Event, oder Du notierst am script-Element das defer Attribut, dann wird das Script im Hintergrund geladen, aber erst ausgeführt, wenn das DOM bereit ist. Und zwar direkt vor dem DOMContentLoaded Event. Das kann sogar schon der IE10.

Noch besser ist ein ES6-Modul (also <script type="module">). ES6-Module haben zwei Vorteile:

  • Sie werden automatisch mit defer ausgeführt. Kein DOMContentLoaded Event nötig
  • Sie werden automatisch gekapselt, d.h. du kannst nach Herzenslust "globale" Variablen und Funktionen erzeugen - sie bleiben im Modul.
  • Sie laufen automatisch im strict mode.

Der Nachteil war einmal: Der IE kann das nicht.

Der Nachteil ist aber auch: Alles, was im Modul steckt, ist gekapselt. Wenn Du Funktionen eines Modul von anderen Scripts aus nutzen willst, musst Du Dich mit export und import von ES6 Modulen beschäftigen. Das heißt auch: Ein Eventhandler in einem Modul ist mit onclick="..." nicht ansprechbar. Du musst alle Events mit addEventListener registrieren.

Darauf gehe ich ein, wenn es relevant sein sollte.

Rolf

--
sumpsi - posui - obstruxi