Erstellen einer Multiselect -Komponente als Webkomponente

aktualisieren 12.05.2016: Ein Begleitartikel, "So erstellen Sie zugängliche Webkomponenten", befasst sich mit den Einschränkungen dieses Artikels. Bitte lesen Sie beide für ein vollständiges Verständnis. Dieser Artikel profitierte von Peer Review von Ryan Lewis. Vielen Dank an die Peer -Rezensenten von SitePoint!

Moderne Webanwendungen erfordern ein effizientes Komponentenmanagement. Um mit großen Mengen an HTML, JavaScript und CSS zu handeln, müssen Anwendungen in wiederverwendbare, eingekapselte Komponenten zerlegt werden, um Stilkonflikte und Skriptstörungen zu verhindern. Traditionell ist der Komponentencode über mehrere Dateien verteilt. Darüber hinaus behindert das komplexe Aufschlag mit zahlreichen Divs und Spans die Lesbarkeit und Wartbarkeit. Webkomponenten, ein W3C -Standard, bieten eine Lösung. In diesem Tutorial werden Webkomponenten erläutert und demonstriert, dass ein Multiselect -Widget erstellt wird.

Key Takeaways:

<li> Webkomponenten optimieren die Entwicklung durch Einkapselung von Markup, Stilen und Skripten, Verbesserung der Wartbarkeit und Reduzierung von Konflikten. <li> Dieses Tutorial erstellt ein wiederverwendbares Multiselect -Widget mit benutzerdefinierten Elementen, Shadow DOM und HTML -Vorlagen. <li> Die Komponente wird nativ von modernen Browsern unterstützt, wobei Polyfills eine breitere Kompatibilität gewährleisten. <li> Funktionen umfassen anpassbare Platzhalter, dynamische Updates und benutzerdefinierte Ereignisbehandlungen. <li> Erweiterung von Webkomponenten mithilfe von Frameworks wie Polymer und X-Tag wird ebenfalls diskutiert.

Webkomponenten verstehen:

Webkomponenten befassen sich mit den oben genannten Herausforderungen. Sie ermöglichen das Verknüpfen einer einzelnen HTML -Datei mit der Implementierung einer Komponente und verwenden sie auf einer Seite über ein benutzerdefiniertes HTML -Element. Dies verbessert die Kapselung und verbessert die Code -Ausdruckskraft. Die Kernspezifikationen sind:

<li> benutzerdefinierte Elemente: benutzerdefinierte HTML -Elemente für Komponenten definieren. <li> HTML -Vorlagen: Definieren Sie das Markup der Komponente. <li> Shadow DOM: Kapuliert die interne Struktur der Komponente und isoliert sie aus den Stilen und Skripten der Seite. <li> HTML -Importe: (weitgehend ersetzt) ​​erleichtert inklusive Komponenten in Seiten.

Erstellen wir eine produktionsbereite Multiselect-Komponente. Ein Demo und ein Quellcode sind auf Github verfügbar.

Erstellen einer produktionsbereiten Multiselect-Komponente:

Unser Multiselect -Widget hat die folgende Markup -Struktur:

<x-multiselect placeholder="Select Item">
  <li value="1" selected>Item 1</li>
  <li value="2">Item 2</li>
  <li value="3" selected>Item 3</li>
</x-multiselect>

Das Element <x-multiselect> verwendet ein placeholder Attribut. Listelemente (<li>) haben value und selected Attribute. Die Komponente enthält eine selectedItems() -Methode, die ein Array ausgewählter Werte zurückgibt (in diesem Beispiel). Es feuert auch ein [1, 3] -Ergnales bei Auswahländerungen ab. Das Ziel ist die vollständige moderne Browserkompatibilität. change

Vorlage (): multiselect.html

Die HTML, CSS und JavaScript der Komponente befinden sich in

. Eine HTML -Vorlage definiert die Struktur der Komponente: multiselect.html

<template id="multiselectTemplate">
  <style>
    /* component styles */
  </style>
  <div class="multiselect">
    <div class="multiselect-field"></div>
    <div class="multiselect-popup">
      <ul class="multiselect-list">
        <content select="li"></content>
      </ul>
    </div>
  </div>
</template>

Das

Element fügt <content select="li"> Elemente aus dem Hostelement in das Schattendom. <li> ein

Komponentenerstellung:

Das JavaScript registriert das benutzerdefinierte Element:

// 1. Find template
var ownerDocument = document.currentScript.ownerDocument;
var template = ownerDocument.querySelector('#multiselectTemplate');

// 2. Create component prototype
var multiselectPrototype = Object.create(HTMLElement.prototype);

// 3. Define createdCallback
multiselectPrototype.createdCallback = function() {
  var root = this.createShadowRoot();
  var content = document.importNode(template.content, true);
  root.appendChild(content);
};

// 4. Register custom element
document.registerElement('x-multiselect', { prototype: multiselectPrototype });

Dies beinhaltet das Finden der Vorlage, das Erstellen eines Prototyps, der von

erbt, um HTMLElement.prototype zu definieren, um das Schattendom zu erstellen, und das Registrieren des benutzerdefinierten Elements. createdCallback

(Der Rest der Implementierung der Komponente, einschließlich Rendering, Ereignishandling, Attributbearbeitung und Styling, folgen hier. Aufgrund von Längenbeschränkungen ist es weggelassen, ist jedoch im verknüpften Github -Repository verfügbar.)

Browserunterstützung und Polyfills:

Webkomponenten haben eine hervorragende Unterstützung in modernen Browsern, aber Polyfills wie

gewährleisten die Kompatibilität für alle großen Browser. Die Demo-Seite demonstriert die Verwendung und befasst sich mit potenziellen polyfischbezogenen Problemen (z. B. Handhabung webcomponentsjs Variationen und Schattendom-Styling). document.currentScript

Polymer und x-Tag:

Frameworks wie Polymer und X-Tag vereinfachen Sie die Entwicklung von Webkomponenten, bieten zusätzliche Funktionen und Reduzierung von Boilerplate-Code.

Schlussfolgerung:

Webkomponenten fördern die Webentwicklung erheblich. Dieses Tutorial zeigt, dass eine funktionale Multiselect -Komponente aufgebaut wird und die Leistung und den Nutzen dieser Technologie hervorhebt. Denken Sie daran, den Artikel "So erstellen Sie zugängliche Webkomponenten" für Best Practices für Barrierefreiheit zu.

Das obige ist der detaillierte Inhalt vonErstellen einer Multiselect -Komponente als Webkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!