javascript / expert
Snippet
Verbindung von deklarativer UI und imperativen Web-APIs via Actions
Svelte Actions ermöglichen die chirurgische Integration imperativer Browser-APIs wie IntersectionObserver in den deklarativen Komponenten-Lebenszyklus. Dieses Muster stellt sicher, dass Listener ordnungsgemäß bereinigt werden, wenn das Element unmounted wird, was Memory Leaks verhindert und die Logik außerhalb des Haupt-Script-Tags hält.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export function intersection(node, { threshold = 0, once = false }) {const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {node.dispatchEvent(new CustomEvent('intersect', { detail: entry }));if (once && entry.isIntersecting) observer.unobserve(node);});}, { threshold });observer.observe(node);return {destroy() {observer.disconnect();}};}
svelte
Erklärung
1
node.dispatchEvent(new CustomEvent(...))
Kommuniziert über native DOM-Events zurück an die Svelte-Komponente für eine saubere API.
2
destroy() { observer.disconnect(); }
Entscheidender Lifecycle-Hook, der ausgeführt wird, wenn das Element den DOM verlässt, um den Observer zu bereinigen.