Ersetzen Sie JavaScript -Dialoge durch das neue HTML -Dialogfeld

Verabschieden Sie sich vom Dialogfeld JavaScript und nutzen Sie HTML<dialog></dialog> Element! Dieser Artikel zeigt, wie HTML verwendet wird<dialog></dialog> Elemente und JavaScript -Klassen ersetzen elegant traditionelle JavaScript -Dialogfelder ( alert() , confirm() und prompt() ) und verbessern die Benutzererfahrung und -zugrunde.

Sind Sie müde von diesen monotonen Stilen und begrenzten Funktionen von JavaScript -Dialogen? Obwohl sie bequem sind, haben sie Mängel in Bezug auf Zugänglichkeit, Stilanpassung und Modernisierung. Dieser Artikel bietet eine flexiblere und leistungsfähigere Alternative.

Ich habe API -Aufrufe und JavaScript -Dialoge in einem Projekt stark verwendet, um Benutzer -Feedback zu sammeln. Warten darauf, dass ein anderer Entwickler abgeschlossen ist<modal></modal> Während der Entwicklung der Komponente habe ich alert() , confirm() und prompt() -Funktionen verwendet. Zum Beispiel:

 const Deletelocation = Bestätigung ('Speicherort löschen?');
if (deletelocation) {
  alarm ('Ort gelöscht');
}

Zu diesem Zeitpunkt wurde mir klar, alert() , confirm() und prompt() mit vielen oft übersehenen Modalfensterfunktionen ausgestattet sind:

1. True Modal Fenster: Immer oben auf dem Stapel, auch in z-index: 99999;<div> Über.<li> <strong>Tastaturzugriff:</strong> Drücken Sie die Eingabetaste, um zu bestätigen. Drücken Sie die Escape, um abbrechen zu können.</li> <li> <strong>Bildschirmleser freundlich:</strong> Fokus bewegen und das Lesen des modalen Fensterinhalts ermöglichen.</li> <li> <strong>Fokuserfassung:</strong> Das Drücken der Registerkarte Taste springt nicht auf fokussierbare Elemente auf der Hauptseite (in Firefox und Safari springt der Fokus auf die UI der Browser.</li> <li> <strong>Unterstützung für Benutzereinstellungen:</strong> Helle und dunkle Modi werden außerhalb der Box unterstützt.</li> <li> <strong>Pause Code Ausführung:</strong> Warten Sie auf Benutzereingaben.</li> <p> Diese JavaScript -Methoden erfüllen meine Bedürfnisse in 99% der Fälle. Warum benutzt ich sie nicht oft? Wahrscheinlich, weil sie wie Systemfehler aussehen und nicht gestylt werden können. Eine weitere wichtige Überlegung ist, dass sie allmählich veraltet werden. Das erste besteht darin, es aus dem Cross-Domain-Iframe zu entfernen, der in Zukunft vollständig von der Webplattform entfernt wird, obwohl dieser Plan anscheinend angehalten zu werden scheint.</p> <p> Welche Alternativen müssen wir in diesem Sinne <code>alert() , confirm() und prompt() ersetzen? Sie haben vielleicht von HTML gehört<dialog></dialog> Elemente, dieser Artikel wird sich darauf konzentrieren, wie man ihn in Verbindung mit JavaScript -Klassen verwendet.

   Obwohl es unmöglich ist, die volle Funktionalität des JavaScript -Dialogfelds vollständig zu kopieren, wenn wir<dialog></dialog> showModal() -Methode wird in Verbindung mit Versprechen verwendet (Versprechen kann auflösen (Akzeptieren) oder Abbrechen), sodass wir fast die gleiche Funktionalität erhalten können. Wenn wir noch einen Schritt weiter gehen, tun wir es für HTML<dialog></dialog> Elemente fügen Soundeffekte hinzu, genau wie ein echter Systemdialog!

   Wenn Sie die Demo jetzt anzeigen möchten, besuchen Sie hier.

   JavaScript Dialog

   Erstens benötigen wir eine grundlegende JavaScript -Klasse, die ein Einstellungsobjekt enthält, das mit den Standardeinstellungen zusammengeführt wird. Diese Einstellungen werden für alle Dialoge verwendet, es sei denn, Sie überschreiben sie, wenn Sie aufgerufen werden (dazu später mehr).

    Exportieren Sie Standardklassendialog {
     Konstruktor (Einstellungen = {}) {
       this.Settings = Object.assisign (
         {
           / * Standardeinstellungen - Siehe Beschreibung unten */
         },
         Einstellungen
       );
       this.init ();
     }
     // ...
   }

   Einstellungen umfassen:

   • accept : die Beschriftung der Schaltfläche "Akzeptieren".
   • bodyClass : Das Dialogfeld ist geöffnet und der Browser unterstützt es nicht<dialog></dialog> bei der CSS -Klasse des Elements hinzugefügt.
   • cancel : Die Beschriftung der Schaltfläche "Abbrechen".
   • dialogClass : Hinzufügen zu<dialog></dialog> Benutzerdefinierte CSS -Klasse für Elemente.
   • message :<dialog></dialog> Interner Inhalt.
   • soundAccept : Die URL der Audiodatei, die der Benutzer beim Klicken auf die Schaltfläche "Akzeptieren" abspielt.
   • soundOpen : Die URL der Audiodatei, die der Benutzer beim Öffnen des Dialogfelds abspielt.
   • template : Eine optionale HTML -Vorlage, injiziert in<dialog></dialog> Mitte.

   Initialisierungsvorlagen und Browserunterstützungserkennung

   In init -Methode werden wir eine Helferfunktion hinzufügen, um das HTML des Browsers zu erkennen<dialog></dialog> Unterstützung für Elemente und festlegen grundlegender HTML:

    init () {
     // Prüfen<dialog> Unterstützen Sie dies.
     this.dialog = document.createelement ('Dialog');
     this.dialog.dataset.comPonent = this.dialogSupported? 'Dialog': 'no-dialog';
     this.dialog.role = 'Dialog';
   
     // HTML -Vorlage this.dialog.innerhtml = `
       <fieldset data-ref="fieldset" role="document">
   <legend data-ref="message"></legend>
   <div data-ref="template"></div>
   </fieldset>
   <menu></menu> `;
   
     document.body.appendchild (this.dialog);
     // ...
   }</dialog>

   Browserpaar<dialog></dialog> Die Unterstützungssituation variiert, daher müssen wir Erkennung durchführen und eine Fallback -Lösung bereitstellen.

   (Die nachfolgenden Schritte ähneln dem Originaltext, und die Länge ist zu lang. Einige Codedetails werden hier weggelassen, aber wichtige Logik- und Code -Snippets bleiben beibehalten, und die Sprache wird poliert und angepasst.)

   ... (lassen Sie einige Codedetails aus, einschließlich DOM -Knoten -Referenzen, Schaltflächenattribute, Abbrechen -Schaltflächenereignisse, Polyfills, die Browser nicht unterstützen, Tastaturnavigation, Anzeige<dialog></dialog> Warten auf Benutzereingaben, Verstecken<dialog></dialog> , Fokusverarbeitung, Hinzufügen von alert , confirm und prompt Methoden, asynchron/Warten, Cross-Browser-Stile, benutzerdefinierte Dialogbeispiele usw.) ...

   Zusammenfassen

   Durch die in diesem Artikel bereitgestellten Lösungen können Sie problemlos modernere und flexiblere HTML verwenden<dialog></dialog> Elemente ersetzen herkömmliche JavaScript -Dialoge, um die Benutzererfahrung und die Anwendungsaufnahme zu verbessern. Denken Sie daran, den Stil und die Funktionalität nach Ihren spezifischen Anforderungen anzupassen, um ein benutzerdefiniertes Dialog zu erstellen, das Ihnen am besten passt.