Kontextbewusste Webkomponenten sind einfacher als Sie denken

In diesem Artikel werden die häufig übersehenen Lebenszyklus-Rückrufe von Webkomponenten untersucht und zeigen, wie sie kontextbewusste Elemente ermöglichen. Wir werden eine Webkomponente erstellen, die auf seine Umgebung reagiert und die Leistung dieser Funktionen zeigt.

Serienübersicht

Dieser Artikel ist Teil einer Reihe zur Vereinfachung der Entwicklung von Webkomponenten:

• Webkomponenten: einfacher als Sie denken
• Interaktive Webkomponenten: einfacher als Sie denken
• Verwenden von Webkomponenten in WordPress: einfacher als Sie denken
• Aufladende integrierte Elemente mit Webkomponenten: einfacher als Sie denken
• Kontextbewusste Webkomponenten: Einfacher als Sie denken ( dieser Artikel )
• Webkomponenten Pseudoklassen und Pseudoelemente: einfacher als Sie denken

Webkomponenten -Lebenszyklus -Rückrufe

Vier wichtige Rückrufe bestimmen den Lebenszyklus einer Webkomponente:

• connectedCallback : Feuert, wenn das Element zum DOM hinzugefügt wird.
• disconnectedCallback : Feuert, wenn das Element aus dem DOM entfernt wird.
• adoptedCallback : Entlassen, wenn das Element in ein neues Dokument verschoben wird.
• attributeChangedCallback : Von einem beobachteten Attribut geändert.

Veranschaulichen wir diese mit einem praktischen Beispiel.

Postapokalyptische Person Komponente

Wir werden a erstellen<postapocalyptic-person></postapocalyptic-person> Komponente. Jede Person ist entweder menschlich oder zombie, bestimmt von der .human oder .zombie -Klasse in seinem übergeordneten Element. Die Komponente zeigt ein geeignetes Bild mit einem Schattendom an.

 CustomElements.define (
  "Postapokalyptische Person",
  Die Klasse erweitert Htmlelement {
    constructor () {
      super();
      this.shadowroot = this.attachShadow ({modus: "open"});
    }
    // ... Lebenszyklus -Rückrufe werden hier hinzugefügt ...
  }
);

Unsere erste HTML:

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

Verwenden von connectedCallback

connectedCallback wird aufgerufen, wenn<postapocalyptic-person></postapocalyptic-person> wird der Seite hinzugefügt. Wir werden es verwenden, um das Bild hinzuzufügen:

 connectedCallback () {
  const image = document.createelement ("img");
  if (this.parentnode.classList.contains ("humanans")) {
    Image.src = "https://assets.codepen.io/1804713/lady.png";
  } else if (this.parentnode.classList.contains ("Zombies")) {
    Image.src = "https://assets.codepen.io/1804713/ladyz.png";
  }
  this.shadowroot.Appendchild (Bild);
}

Dies stellt sicher, dass das richtige Bild basierend auf der Klasse des Elternteils angezeigt wird. Hinweis: connectedCallback kann mehrmals abfeuern. Verwenden Sie this.isConnected , um den Verbindungsstatus zu überprüfen.

Menschen mit connectedCallback zählen

Fügen wir Schaltflächen hinzu, um Personen hinzuzufügen/zu entfernen und zu verfolgen: Zählungen:

<div>
  <button id="addbtn">Person hinzufügen</button>
  <button id="rmvbtn">Person entfernen</button>
  <br>Menschen: <span id="human-count">0</span>
  Zombies: <span id="zombie-count">0</span>
</div>

Button Event Hörer:

 // ... (Fügen/entfernen Sie Person Logik) ...

Aktualisiert connectedCallback , um die Anzahl zu aktualisieren:

 connectedCallback () {
  // ... (Bildlogik) ...
  // Aktualisieren Sie die Zählungen basierend auf der Bildquelle
}

Aktualisieren von Zählungen mit disconnectedCallback

disconnectedCallback -Decrements zählen, wenn eine Person entfernt wird. Wir werden die Bildquelle als Proxy für Typ verwenden:

 disconnectedCallback () {
  const image = this.shadowroot.querySelector ('img');
  // Decrement -Zahlen basierend auf der Bildquelle
}

Clown -Erkennung mit adoptedCallback und attributeChangedCallback

Wir werden die Möglichkeit von versteckten Clowns vorstellen und sie zu einem verschieben<iframe></iframe> Verwenden adoptedCallback und enthüllt sie mit attributeChangedCallback . Die Details dieses erweiterten Beispiels sind für die Kürze weggelassen, aber das Kernkonzept beinhaltet die Verwendung von adoptedCallback , um zu erkennen, wann eine Komponente in ein neues Dokument und attributeChangedCallback verschoben wird, um auf Attributänderungen zu reagieren und das Bild entsprechend zu aktualisieren.

Dies zeigt, wie Lebenszyklus-Rückrufe leistungsstarke Tools zum Erstellen dynamischer und kontextbewusster Webkomponenten bieten und sie vielseitiger und reaktionsschneller machen.

Das obige ist der detaillierte Inhalt vonKontextbewusste Webkomponenten sind einfacher als Sie denken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!