github / github/auto-complete-element
Use abortcontroller to simplify connectedCallback
- Lingua principale
- JavaScript
- Stelle
- 407
- Fork
- 57
- Merge medio
- 1g 7h
- PR unite (30g)
- 5
Descrizione
Per https://github.com/github/auto-complete-element/pull/53#discussion_r761014561, we register many event handlers like `addEventlistener('foo', this.bar = this.bar.bind(bar))`, but rather than calling function bind we can use `handleEvent` and rather than calling `removeEventListener` a bunch, we can store an abort controller per-instance (e.g. with a private field) and abort during `disconnectedCallback`.
The pattern would look as follows:
```ts
class MyElement extends HTMElement {
#ctl = new AbortController()
connectedCallback() {
this.input.addEventListener('foo', this, { signal: this.#ctl.signal })
// many more events here...
}
handleEvent(event) {
if (event.type === 'foo' && event.currentTarget === this.input) {
// do things
}
}
disconnectedCallback() {
this.#ctl.abort()
}
}
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Individua il connectedCallback dell'elemento personalizzato e la configurazione esistente degli event listener, quindi esamina il suo disconnectedCallback e gli handler attualmente associati o rimossi singolarmente. Sostituisci questo collegamento del ciclo di vita con handleEvent e un AbortController dell'istanza come descritto, quindi verifica che i listener vengano registrati e ripuliti correttamente quando l'elemento viene disconnesso.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript
- Ambito
- frontend
- Tipo di issue
- Refactoring
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100