Invoker -Befehle: Zusätzliche Möglichkeiten, mit Dialog, Popover zu arbeiten ... und mehr?

Das Element und die Popover -API sind leistungsstarke Ergänzungen zur Webplattform. Ich habe kürzlich dialog eine detaillierte Analyse ihrer Anwendungen und ohne Papiere Techniken vorgestellt. Ihre getrennten Implementierungen fühlen sich jedoch unnötig komplex an.

Webbrowser führen "Invoker -Befehle" - die Attribute

und command - ein, um die Interaktion mit Popovers, Dialogen und zukünftigen Funktionen zu vereinfachen und Javascript -Vertrauen zu minimieren. Diese Attribute führen auch neue JavaScript -Ereignisse ein. commandfor

Experimenteller Status:

Denken Sie daran, dies sind experimentelle Merkmale. Aktivieren Sie sie in:

Chrom Kanarien 134 (Flag:
• ) enable-experimental-web-platform-features
Firefox Nightly 135 (Flag:
• ) dom.element.invokers.enabled
Safari -Technologie Vorschau (Flag:
• ) InvokerAttributesEnabled

ihre elegante Abstraktion von Skriptaufgaben deutet darauf hin, dass eine weit verbreitete Adoption wahrscheinlich ist.

Grundnutzung:

Verwenden Sie ein schalttastartiges Element (z. B.

, <button></button>) mit dem Attribut <a></a> (Angabe des Befehlsnamens wie "show-modal") und command (Bezugnahme auf die ID des Zielelements). commandfor.

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

Lassen Sie uns die Befehlswerte untersuchen.

Attributwerte:

• show-modal: Das HTML -Äquivalent von showModal(). Es ermöglicht eine modale Anzeige ohne JavaScript. Dies spiegelt die vorhandenen HTML-infokierten Popovers wider und erzeugt einen konsistenterer Ansatz.

• show: Ein show -Befehl für nicht modale Dialoge fehlt. Angesichts der Funktionen der Popover-API können nicht modale Dialoge veraltet werden.

• close: Das HTML -Äquivalent von close(), das den Dialog schließt.

• show-popover, hide-popover, toggle-popover: Diese Spiegel showPopover(), hidePopover() bzw. togglePopover(). Obwohl sie nützlich sind, ist ihre Funktionalität bereits durch vorhandene Popover -Attribute zugänglich.

Hier ist eine Zusammenfassung:

Command	Equivalent JavaScript Method	Notes
show-modal	showModal()	Shows a modal dialog.
close	close()	Closes a dialog or popover.
show-popover	showPopover()	Shows a popover (redundant with existing popover attributes).
hide-popover	hidePopover()	Hides a popover (redundant with existing popover attributes).
toggle-popover	togglePopover()	Toggles a popover (redundant with existing popover attributes).
--custom-command	N/A	Custom commands prefixed with --.

JavaScript -Ereignishandhabung:

Invoker -Befehle auslösen ein command Ereignis im Zielelement. Dies ist besonders nützlich für dialog Elemente, denen ein show Ereignis fehlt.

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

Popover -Ereignishandling ist ähnlich:

dialogs.forEach(dialog => {
  dialog.addEventListener("command", event => {
    if (event.command === "show-modal") { /* Dialog shown */ }
    else if (event.command === "close") { /* Dialog closed */ }
  });
});

event.source bietet das aufgerufene Tastelelement. Attribute können auch über JavaScript festgelegt werden:

popovers.forEach(popover => {
  popover.addEventListener("command", event => {
    if (event.command === "show-popover") { /* Popover shown */ }
    // ...
  });
});

benutzerdefinierte Befehle:

benutzerdefinierte Befehle (z. B. --spin-me-a-bit) Ermöglichen Sie eine erweiterte Funktionalität.

zukünftige Unterstützung:

Während sich zunächst auf <dialog></dialog> und Popover konzentriert, wird die zukünftige Unterstützung für <details></details>, <input type="color">, <video></video> und Vollbild -Steuerelemente erwartet.

Vorteile:

Invoker-Befehle reduzieren JavaScript, bieten eine ereignisähnliche Handhabung an und bieten alternative Interaktionsmethoden für vorhandene APIs. Sie verfeinern und verbessern vorhandene Merkmale.

Das obige ist der detaillierte Inhalt vonInvoker -Befehle: Zusätzliche Möglichkeiten, mit Dialog, Popover zu arbeiten ... und mehr?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!