Event-Handler in Storefront Javascript Plugins

Shopware 6 (German) Programmierung
1

Hi,

kurze Frage warum wurde an einigen Stellen nicht darauf geachtet, das die Events sauber entfernt werden? Erzeugt das bind nicht eine neue Referenz? Das zieht sich durch mehrere Javascript Plugins in der Storefront durch.

Iterator.iterate(this._triggers, element => {
   element.removeEventListener('touchmove', this._onTouchMove.bind(this));
   element.addEventListener('touchmove', this._onTouchMove.bind(this));
});

oder das hier warum wird erst ein remove gemacht wenn es sich um eine neue Referenz handelt?

const onClick = this._getModal.bind(this);
this.el.removeEventListener('click', onClick);
this.el.addEventListener('click', onClick);

 

2

Da ist viel redundanter JavaScript im Storefront, das was man sich durch jQuery lite erspart, holt man sich 10-mal wieder rein. Die Bindings auf die per XHR geladenen DOM Elemente sind auch nicht schlau gelöst.

Es gibt doch auch die Möglichkeit bei jQuery:

$(document).on('click', '.selector', function() {...});

Statt immer so:

$('.selector').click(function () {...});

Die listener müssten doch auch im vanilla JS einfach nach zu stellen sein und erspart das binden und unbinden… vorallem bei den nachgeladenen DOM Elementen wie z.B. das Produktlisting.

Wenn ich selbst das Produktlisting lade funktioniert z.B. der add to cart Button nicht, weil irgendwelche Bindings fehlen, das ist sehr frustrierend.

3

Keine Ahnung ob das hier passend ist, aber es wurde bewusst auf die Nutzung von JQuery so gut es geht verzichtet, um eben einfacher auf Bootstrap 5 umsteigen zu können. Da gibt es dann garkein JQuery mehr. Also den Weg wollten wir uns da nicht selbst verbauen. So zumindest die Antwort, warum kein JQuery genutzt wird. Vom Rest hab ich leider keine Ahnung :smiley:

4

tldr; Das fällt für mich (aktuell) in den Bereich der Micro-Optimierung

Grundsätzlich spricht man von vergleichweise wenigen Listener, die erst mal pauschal entfern werden, um Sie dann im Zweifel danach wieder hinzufügen. Den Performanceverlust im Vergleich zu einer “korrekten” Entfernung der abgelaufenen Listener kann man bei der Anzahl glaube ich vernachlässigen. Schließlich benötigt der Abgleich auf weiter gültige Listener wiederum eine eigene Logik - auch wenn du im Grunde Recht hast.

PS: Im Bereich touchmove ist es möglicherweise doch keine Micro-Optimierung - to be examined  Angry-Face

VG, Arnd