javascript / expert
Snippet
Polymorphe Zustandsauswertung durch abstrakte Vererbung in Svelte Action-Direktiven
Durch die Kombination von objektorientierter Polymorphie und ES6-Klassenvererbung mit Svelte-Node-Actions können dynamische Verhaltensweisen in DOM-Elemente injiziert werden, während ein sauberes Cleanup über Schnittstellen gewährleistet wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class BaseInteractionHandler {constructor(node) {this.node = node;}handleEvent(event) {throw new Error('Abstract method handleEvent must be overridden');}destroy() {}}class HoverInteractionHandler extends BaseInteractionHandler {constructor(node) {super(node);this.onPointerEnter = (e) => this.handleEvent(e);this.node.addEventListener('pointerenter', this.onPointerEnter);}handleEvent(event) {this.node.dataset.hovered = 'true';}destroy() {this.node.removeEventListener('pointerenter', this.onPointerEnter);}}export function polymorphicAction(node, HandlerClass = HoverInteractionHandler) {const instance = new HandlerClass(node);return {destroy() {instance.destroy();}};}
svelte
Erklärung
1
class BaseInteractionHandler
Definiert einen abstrakten OOP-Schnittstellenvertrag für DOM-Lifecycle und Ereignisbehandlung.
2
class HoverInteractionHandler extends BaseInteractionHandler
Konkrete Unterklasse, die das Basisverhalten für Hover-Zustandslogik erweitert.
3
export function polymorphicAction(node, HandlerClass = HoverInteractionHandler)
Svelte Action-Fabrikfunktion, die polymorphe Klassenkonstruktoren entgegennimmt.
4
instance.destroy();
Delegiert die Aufräumverantwortung des Nodes direkt an das instanziierte Klassenobjekt.