moderne Webbenutzer erwarten eine reibungslose und dynamische einseitige Anwendungserfahrung (SPA). Das Erstellen eines Spa erfordert jedoch h?ufig komplexe Frameworks wie React und Angular, und das Lernen und die Verwendung kann komplex sein. HTMX entstanden - es ist eine Bibliothek, die eine neue Perspektive für den Erstellen dynamischer Weberlebnisse bietet, indem Funktionen wie AJAX und CSS -überg?nge direkt in HTML genutzt werden.

Dieser Leitfaden untersucht die Funktionen von HTMX, wie sie die dynamische Webentwicklung vereinfacht und wie sie sein Potenzial nutzen kann, um Ihren Webentwicklungsprozess zu verbessern.

Schlüsselpunkte

• HTMX-Grundlagen: HTMX reduziert die Komplexit?t, die normalerweise mit JavaScript-intensivem Spa verbunden ist, indem HTML genutzt wird, um dynamische Web-Erlebnisse zu erzielen.
• Einfache Installation: HTMX kann durch CDN problemlos in das Projekt integriert werden, sodass es ohne komplizierte Einstellungen schnell integriert werden kann.
• Vereinfachen Sie AJAX: Diese Bibliothek erm?glicht einfache AJAX -Anforderungen direkt aus HTML -Elementen unter Verwendung bestimmter Eigenschaften, wodurch die Benutzerinteraktion verbessert wird, ohne dass viel JavaScript -Code erforderlich ist.
• Dynamisches Inhaltsladen: HTMX unterstützt Inhaltsaktualisierungen für bestimmte Elemente und bietet mehrere M?glichkeiten zum Einfügen neuer Inhalte, wodurch die Webseite interaktiver wird.
• Verbesserte Benutzererfahrung: HTMX verfügt über integrierte CSS-übergangs- und experimentelle Ansichts-übergangs-APIs, die bei der Aktualisierung von Inhalten reibungslose visuelle Effekte erm?glichen.
• Formulierung und überprüfung: HTMX integriert in die HTML5 -überprüfung, um sicherzustellen, dass die Formulare wie erwartet ausgeführt werden und die Benutzerfreundlichkeit und Funktionalit?t verbessert.

Was ist HTMX? Wie funktioniert es?

Entwickler haben traditionell zwei Hauptoptionen beim Aufbau interaktiver Web -Erlebnisse, jeweils eigene Kompromisse. Einerseits gibt es mehrseitige Anwendungen (MPAs), die die gesamte Seite jedes Mal aktualisieren, wenn der Benutzer mit ihm interagiert. Dieser Ansatz stellt sicher, dass der Server den Anwendungszustand steuert und der Client ihn treu ausdrückt. Die vollst?ndige Seite des Nachladens führt jedoch zu einer langsamen und ungeschickten Benutzererfahrung.

Andererseits beruhen einzelne Seitenanwendungen (SPAs) auf JavaScript, das im Browser ausgeführt wird, um den Anwendungszustand zu verwalten. Sie kommunizieren mit dem Server mithilfe von API -Aufrufen, die Daten zurückgeben, normalerweise im JSON -Format. Das Spa verwendet dann diese Daten, um die Benutzeroberfl?che ohne Seitenanfall zu aktualisieren, und bietet eine reibungslosere Benutzererfahrung, die dem nativen Desktop- oder mobilen Apps etwas ?hnlich ist. Dieser Ansatz ist jedoch auch nicht perfekt. Die Rechenaufwand ist in der Regel aufgrund der gro?en Kundenverarbeitung h?her.

htmx bietet einen Kompromiss für beide extremen Situationen. Es bietet den Nutzererfahrungsvorteil von SPA-ohne das vollst?ndige Seiten-Nachladen-gleichzeitig die serverseitige Einfachheit von MPA beibehalten. In diesem Modell gibt der Server nicht die Daten zurück, die der Client interpretieren und rendern muss, sondern , sondern ein HTML -Fragment . Dann ersetzt HTMX diese Snippets einfach, um die Benutzeroberfl?che zu aktualisieren.

Dieser Ansatz vereinfacht den Entwicklungsprozess durch Minimierung der Kundenkomplexit?t und die gro?e Anzahl von JavaScript -Abh?ngigkeiten, die üblicherweise von SPAs verwendet werden. Es erfordert kein kompliziertes Setup und bietet eine reibungslose und reaktionsschnelle Benutzererfahrung.

Installation htmx

Es gibt mehrere M?glichkeiten, HTMX in Ihr Projekt aufzunehmen. Sie k?nnen es direkt von der Github -Seite Ihres Projekts herunterladen. Wenn Sie node.js verwenden, k?nnen Sie es über NPM über den Befehl npm installieren htmx.org installieren.

ist jedoch der einfachste Weg (der in diesem Handbuch verwendet) darin, es über ein Content Delivery Network (CDN) einzubeziehen. Auf diese Weise k?nnen wir mit HTMX ohne Einrichtung oder Installationsprozess beginnen. Fügen Sie einfach das folgende Skript -Tag in Ihre HTML -Datei ein:

<??>

Dieses Skript -Tag zeigt auf Version 1.9.4, aber wenn eine neuere Version verfügbar ist, k?nnen Sie "1.9.4" durch die neueste Version ersetzen.

htmx ist sehr leicht, mit einer minimalen und gzip -Version mit einem Gewicht von ca. ~ 14 KB. Es hat keine Abh?ngigkeiten und ist mit allen gro?en Browsern kompatibel, einschlie?lich IE11.

Nach dem Hinzufügen von HTMX zu Ihrem Projekt m?chten Sie m?glicherweise überprüfen, ob es ordnungsgem?? funktioniert. Sie k?nnen es mit dem folgenden einfachen Beispiel testen:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Wenn HTMX ordnungsgem?? funktioniert, wird beim Klicken auf die Schaltfl?che eine Get -Anfrage an die Witz -API gesendet und durch die Antwort des Servers ersetzt. Inhalt von

Tags.

AJAX -Anforderung: HTMX -Methode

Eine der Hauptverkaufsargumente von HTMX ist, dass Entwickler AJAX -Anforderungen direkt von HTML -Elementen senden k?nnen, indem sie einen anderen Satz von Attributen nutzen. Jedes Attribut stellt eine andere HTTP -Anforderungsmethode dar:

HX-Get: Stellt eine Get-Anfrage an die angegebene URL.
hx-post: Postanforderung an die angegebene URL.
HX-Put: Ver?ffentlichen Sie eine Put-Anfrage an die angegebene URL.
hx-patch: Geben Sie eine Patch-Anforderung an die angegebene URL an.
hx-delete: Geben Sie eine Anforderung an die angegebene URL an.

Diese Attribute akzeptieren eine URL, an die sie eine AJAX -Anfrage senden. Standardm??ig wird eine AJAX -Anforderung durch ein "natürliches" Ereignis eines HTML -Elements ausgel?st (z. B. ein Klickereignis bei einer Schaltfl?che oder ein ?nderungsereignis im Fall eines Eingabefeldes).

Betrachten Sie Folgendes:

<button hx-get="/api/resource">Load Data</button>

Im obigen Beispiel wird dem Tastenelement eine HX-GET-Eigenschaft zugewiesen. Nach dem Klicken auf die Schaltfl?che wird eine GET -Anforderung an die URL /API /Ressourcen -URL gestellt.

Was passiert, nachdem der Server Daten zurückgegeben hat? Standardm??ig injiziert HTMX diese Antwort direkt in das Startelement - in unserem Beispiel einer Schaltfl?che. HTMX ist jedoch nicht auf dieses Verhalten beschr?nkt und bietet die M?glichkeit, Antwortdaten als Zielelement anzugeben. Wir werden diese Funktion in den n?chsten Abschnitten ausführlicher untersuchen.

Triggeranforderung mit HTMX

htmx initiiert die AJAX -Anforderung als Antwort auf bestimmte Ereignisse, die in einem bestimmten Element auftreten:

• Für Eingabe-, TextArea- und Auswahlelemente ist dies das ?nderungsereignis.
• Für Formularelemente ist dies das Sendenereignis.
• Für alle anderen Elemente ist dies das Klickereignis.

Lassen Sie uns dies demonstrieren, indem Sie das obige Witzbeispiel erweitern, sodass der Benutzer nach Witzen suchen kann, die bestimmte W?rter enthalten:

<??>

Um eine Suche auszul?sen, müssen wir ein ?nderungsereignis ausl?sen. Für <input> Elemente geschieht dies, wenn sich der Wert des Elements ?ndert und den Fokus verliert. Geben Sie also etwas in das Feld ein (z. B. "Bar"), klicken Sie auf der Seite an anderer Stelle, und der Witz wird im <div> -Element angezeigt. Dies ist gut, aber normalerweise m?chten Benutzer ihre Suchergebnisse beim Eingeben aktualisieren. Dazu k?nnen wir unser <input> Element das HTMX -Triggerattribut hinzufügen:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Die Ergebnisse werden nun sofort aktualisiert. Dies ist gut, aber es führt ein neues Problem vor: Wir verwenden jetzt API -Aufrufe mit jeder Tastendruck. Um dies zu vermeiden, k?nnen wir Modifikatoren verwenden, um das Verhalten des Ausl?sers zu ?ndern. HTMX liefert Folgendes:

• einmal: Verwenden Sie diesen Modifikator, wenn Sie nur einmal eine Anfrage ausführen m?chten.
• ge?ndert: Dieser Modifikator stellt sicher, dass die Anfrage nur dann erfolgt, wenn sich der Wert des Elements ge?ndert hat.
• Verz?gerung: : Dieser Modifikator legt die Wartezeit (z. B. 1 Sekunde) fest, bevor die Anforderung gestellt wird. Wenn das Ereignis w?hrend dieser Wartezeit erneut ausgel?st wird, wird der Countdown zurückgesetzt.
• Drosselklappen: : Mit diesem Modifikator k?nnen Sie auch eine Wartezeit (zum Beispiel 1 Sekunde) festlegen, bevor Sie eine Anfrage stellen. Im Gegensatz zur Verz?gerung wird jedoch das Ereignis ignoriert, wenn ein neues Ereignis innerhalb einer festgelegten Zeit ausgel?st wird, so dass die Anforderung erst nach dem definierten Zeitraum ausgel?st wird.
• Von: : Mit diesem Modifikator k?nnen Sie auf Ereignisse auf verschiedenen Elementen, nicht auf den Originalelementen, zuh?ren.

In diesem Fall müssen wir Verz?gerungen ben?tigen:

<button hx-get="/api/resource">Load Data</button>

Wenn Sie nun etwas in das Feld eingeben (versuchen, ein l?ngeres Wort wie "Entwickler" zu verwenden), wird die Anforderung nur ausgel?st, wenn Sie eine Pause oder das Tippen beenden.

Wie Sie sehen k?nnen, k?nnen wir das aktive Suchfeldmuster mit nur wenigen Zeilen von Clientcode implementieren.

Anforderungsanzeige

In der Webentwicklung ist das Benutzer -Feedback von entscheidender Bedeutung, insbesondere bei Vorg?ngen, deren Abschluss viel Zeit in Anspruch nehmen kann (z. B. Ausstellung von Netzwerkanforderungen). Eine h?ufige M?glichkeit, dieses Feedback bereitzustellen, ist eine Anforderungsanzeige - eine visuelle Eingabeaufforderung, die darauf hinweist, dass der Vorgang im Gange ist.

HTMX integriert Unterstützung für Anforderungsindikatoren, sodass wir diese Feedback für Benutzer geben k?nnen. Es verwendet die HX-Indicator-Klasse, um das als Anforderungsindikator verwendete Element anzugeben. Die Opazit?t eines beliebigen Elements mit dieser Klasse stand auf 0, wodurch es unsichtbar ist, aber im DOM vorhanden ist.

Wenn HTMX eine AJAX-Anforderung stellt, wendet sie die HTMX-Request-Klasse auf das Startelement an. Die HTMX-Request-Klasse führt dazu, dass das Element (oder jedes untergeordnete Element mit der HTMX-Indicator-Klasse) zu einer Deckkraft von 1 übergeht.

Betrachten Sie beispielsweise ein Element, das einen Lastspinner als Anforderungsindikator verwendet:

<??>

Wenn eine Schaltfl?che mit dem HX-Get-Attribut klickt und die Anforderung eingeleitet wird, empf?ngt die Schaltfl?che die HTMX-Request-Klasse. Dies führt dazu, dass das Bild angezeigt wird, bis die Anforderung abgeschlossen ist und die Klasse gel?scht wird.

Sie k?nnen auch die HTMX-Indicator-Eigenschaft verwenden, um anzugeben, welches Element die HTMX-Request-Klasse empfangen soll.

zeigen wir dies mit unserem Witz -API -Beispiel:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Hinweis: Wir k?nnen den CSS -Stil des Spinners vom CSS -Lader und Spinner abrufen. Es gibt viele zur Auswahl;

Dies führt dazu, dass der Lastspinner angezeigt wird, wenn die Anfrage im Gange ist.

Wenn unser Netzwerk schnell ist, blinkt der Spinner nur kurz, wenn die Anfrage gestellt wird. Wenn wir sicherstellen m?chten, dass es vorhanden ist, k?nnen wir die Entwicklungstools des Browsers verwenden, um unsere Netzwerkverbindungsgeschwindigkeit zu begrenzen.

oder, nur zum Spa? (dh dies, dies in realen Anwendungen nicht tun), k?nnen wir HTMX so konfigurieren, dass einige Netzwerklatenz simulieren:

<button hx-get="/api/resource">Load Data</button>

Dies nutzt das Ereignissystem von HTMX, mit dem wir sein Verhalten ?ndern und verbessern k?nnen. Hier verwenden wir das Ereignis von HTMX: Afteronload, das nach Abschluss von Ajax -Onload abfeuert. Ich habe auch eine Schlaffunktion aus dem SitePoint -Artikel über dasselbe Thema verwendet.

Dies ist eine fertige Demo. Geben Sie etwas in das Feld ein (z. B. "JavaScript") und beobachten Sie dann den Lastanzeigen, nachdem Sie die Anforderung gestartet haben.

Wie Sie sehen k?nnen, k?nnen wir das aktive Suchfeldmuster mit nur wenigen Zeilen von Clientcode implementieren.

Zielelemente und Inhaltsaustausch

In einigen F?llen m?chten wir m?glicherweise ein Element aktualisieren, das sich von dem unterscheidet, das die Anfrage initiiert. Mit HTMX k?nnen wir das HX-Target-Attribut verwenden, um bestimmte Elemente für die AJAX-Antwort zu lokalisieren. Diese Eigenschaft kann einen CSS -Selektor aufnehmen, mit dem HTMX die zu aktualisierten Elemente finden wird. Wenn wir beispielsweise ein Formular haben, das neue Kommentare in unser Blog ver?ffentlicht, m?chten wir m?glicherweise neue Kommentare an die Kommentarliste anh?ngen, anstatt das Formular selbst zu aktualisieren.

Wir haben das tats?chlich im ersten Beispiel gesehen:

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

Die Taste

ersetzt ihren eigenen Inhalt nicht, aber die HX-Target-Eigenschaft erkl?rt, dass die Antwort den Inhalt des Elements durch ID "Witz-Container" ersetzen sollte.

erweitertes CSS -Selektor

HTMX bietet auch einige erweiterte Methoden, um Elemente auszuw?hlen, an die der Inhalt geladen werden sollte. Dazu geh?ren dies, am n?chsten, als n?chstes, vorher und finden.

• Dieses Schlüsselwort gibt an, dass Elemente mit dem Hx-Target-Attribut das tats?chliche Ziel sind.
• N?chstes Schlüsselwort findet den n?chsten Vorfahren des Quellelements, das dem angegebenen CSS -Selektor entspricht.
• N?chste und vorherige Schlüsselw?rter suchen nach nachfolgenden oder Pr?ambelelementen im DOM, die dem angegebenen CSS -Selektor entsprechen.
• Finden Sie Schlüsselwort Finden Sie das erste untergeordnete Element, das dem angegebenen CSS -Selektor entspricht.

In Bezug auf unser vorheriges Beispiel k?nnen wir auch hx-target = "n?chstes P" schreiben, um die Angabe der ID zu vermeiden.

Inhaltsaustausch

standardm??ig ersetzt HTMX den Inhalt des Zielelements durch eine AJAX -Antwort. Aber was ist, wenn wir neue Inhalte anh?ngen m?chten, anstatt ihn zu ersetzen? Hier kommt das HX-SWAP-Attribut ins Spiel. Mit dieser Eigenschaft k?nnen wir angeben, wie neuer Inhalte in das Zielelement eingefügt werden. M?gliche Werte sind ?u?erehtml, Innerhtml, vorabgin, aftergin, voranenden und Afterend. Beispielsweise wird die Verwendung von hx-swap = "voran" zum Ende des Zielelements neue Inhalte hinzufügen, was perfekt für unser neues Kommentarszenario ist.

CSS -übergang in htmx

CSS -übergang erm?glicht es, dass der Stil eines Elements reibungslos von einem Zustand in einen anderen ver?ndert wird, ohne JavaScript zu verwenden. Diese überg?nge k?nnen so einfach wie Farb?nderungen oder so komplex sein wie eine vollst?ndige 3D -Transformation.

htmx erleichtert es einfach, CSS in unserem Code zu verwenden: Wir müssen nur konsistente Element -IDs in HTTP -Anfragen beibehalten.

Betrachten Sie diesen HTML -Inhalt:

<??>

Nach einer HTMX-AJAX-Anforderung an /New-Content gibt der Server Folgendes zurück:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Obwohl sich der Inhalt ge?ndert hat, verwaltet <div> dieselbe ID. Die Fadein -Klasse wurde jedoch dem neuen Inhalt hinzugefügt. Wir k?nnen jetzt einen CSS -übergang erstellen, der reibungslos vom Ausgangszustand zum neuen Zustand übergeht:

<button hx-get="/api/resource">Load Data</button>

Wenn HTMX neue Inhalte l?dt, l?st es den CSS -übergang aus und erzeugt einen reibungslosen visuellen Fortschritt in den aktualisierten Zustand.

Verwenden Sie Ansicht übergangsapi

Die neue Ansichts -übergangs -API bietet eine M?glichkeit, zwischen verschiedenen Zust?nden eines DOM -Elements zu animieren. Im Gegensatz zu CSS -überg?ngen, bei denen die CSS -Eigenschaften eines Elements ver?ndert werden, handelt es sich bei den überg?ngen von Sichtweise um den Inhalt eines Elements an.

Die API der Ansicht übergang ist eine neue experimentelle Funktion, die derzeit aktiv entwickelt wird. Zum Zeitpunkt des Schreibens wird diese API in Chrome 111 implementiert, und es wird erwartet, dass mehr Browser in Zukunft Unterstützung hinzufügen (Sie k?nnen ihre Unterstützung für Caniuse überprüfen). HTMX bietet eine Schnittstelle für die Verwendung der API der Ansichtsübergangs-API und zum Sturz zu einem Nichttransitionsmechanismus in Browsern, die APIs nicht unterstützen.

In HTMX gibt es zwei M?glichkeiten, die Ansichtsübergangs -API zu verwenden:

• Stellen Sie die Konfigurationsvariable htmx.config.globalviewTransitions auf true ein. Dadurch werden überg?nge für alle B?rsen verwendet.
• Verwenden Sie den übergang: True Option in der Hx-Swap-Eigenschaft.

überg?nge anzeigen k?nnen mit CSS definiert und konfiguriert werden. Hier ist ein Beispiel für einen "Bounce" -Tangang, bei dem alte Inhalte herausprallt und neue Inhalte in:

abprallt

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

Im HTMX-Code verwenden wir den übergang: TRUE in der HX-SWAP-Eigenschaft und wenden die Bounce-It-Klasse auf das an, was wir animieren m?chten:

...
hx-trigger="keyup"
...

In diesem Beispiel wird der alte Inhalt der Inhalt von <div> aktualisiert, und der neue Inhalt wird ein angenehmes und ansprechendes visuelles Effekt erzeugen.

Denken Sie daran, dass diese Demo im Moment nur für Browser auf Chrombasis verfügbar ist.

Formprüfung

HTMX integriert sich gut in die HTML5 -Verifizierungs -API und verhindern, dass Formularanfragen gesendet werden, wenn die Benutzereingangsüberprüfung fehlschl?gt.

Wenn ein Benutzer beispielsweise übereinstimmt, wird eine Postanforderung nur an /Kontakt gesendet, wenn das Feld Eingabe eine gültige E -Mail -Adresse enth?lt:

<??>

Wenn wir noch einen Schritt weiter gehen m?chten, k?nnen wir eine serverseitige überprüfung hinzufügen, um sicherzustellen, dass nur gmail.com akzeptiert wird:

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

Hier fügen wir ein übergeordnetes Element (Div#-Plack -Wrapper) hinzu, das sich als Empf?nger der Anforderung (unter Verwendung dieses Schlüsselworts) deklariert und die Exchange -Richtlinie für ?u?erehtml verwendet. Dies bedeutet, dass das gesamte <div> durch die Antwort des Servers ersetzt wird, auch wenn es nicht das Element ist, das die Anforderung tats?chlich ausl?st. Wir haben auch Hx-post = "/contact/e-Mail" zum Eingabebuch hinzugefügt, was bedeutet, dass dieses Feld immer dann eine Postanforderung an/Kontakt/E-Mail-Endpunkt sendet. Diese Anfrage enth?lt den Wert unseres Feldes.

Auf der Serverseite (in /Kontakt /E -Mail) k?nnen wir PHP verwenden, um zu überprüfen:

<button hx-get="/api/resource">Load Data</button>

Wie Sie sehen k?nnen, erwartet HTMX, dass der Server HTML ( nicht json) zurückgibt und ihn in den angegebenen Speicherort auf der Seite einfügt.

Wenn wir den oben genannten Code ausführen, geben Sie eine nicht gmail.com-Adresse in die Eingabe ein und stellen dann den Fokus der Eingabe ab, eine Fehlermeldung unter dem Feld "Nur Google Mail-Adressen akzeptiert!"

Hinweis: Wenn wir dynamisch Inhalt in das DOM einfügen, sollten wir auch überlegen, wie der Bildschirmleser diesen Inhalt interpretiert. Im obigen Beispiel befindet sich die Fehlermeldung in unserem Tag, sodass der Bildschirmleser das Feld beim n?chsten Mal in den Fokus liest. Wenn die Fehlermeldung an anderer Stelle eingefügt wird, sollten wir sie mit der Eigenschaft von ARIA-beschriebenen Verbindungen mit dem richtigen Feld in Verbindung bringen.

Es ist auch erw?hnenswert, dass HTMX w?hrend des überprüfungsprozesses eine Reihe von Ereignissen ausl?st, mit denen wir unsere eigenen Methoden zur Verifizierung von Logik und Fehler hinzufügen k?nnen. Wenn wir beispielsweise eine E -Mail -überprüfung im JavaScript -Code implementieren m?chten, k?nnen wir dies tun:

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

Hier verwenden wir die HTMX: Validierung: Validate des Ereignisses von HTMX, das vor der Methode des Elements aufgerufen wird.

Wenn wir jetzt versuchen, das Formular mit einer nicht gmail.com-Adresse einzureichen, werden wir dieselbe Fehlermeldung sehen.

Was kann HTMX sonst noch tun?

HTMX ist ein vielseitiges, leichtes und einfach zu bedienendes Werkzeug. Es kombiniert erfolgreich HTML -Einfachheit mit dynamischen Funktionen, die h?ufig mit komplexen JavaScript -Bibliotheken zugeordnet sind und eine überzeugende Alternative zum Erstellen interaktiver Webanwendungen bieten.

ist jedoch keine universelle L?sung. Für komplexere Anwendungen ben?tigen Sie m?glicherweise noch das JavaScript -Framework. Wenn Ihr Ziel jedoch es ist, schnelle, interaktive und benutzerfreundliche Webanwendungen zu erstellen, ohne zu viel Komplexit?t hinzuzufügen, ist es auf jeden Fall eine überlegung wert.

Wenn sich die Webentwicklung weiterentwickelt, bieten Tools wie HTMX aufregende neue M?glichkeiten, um ein besseres Benutzererlebnis aufzubauen. Probieren Sie es nicht in zukünftigen Projekten aus und sehen Sie, was HTMX für Sie tun kann?

FAQs über HTMX (FAQ)

Was ist HTMX und wie unterscheidet es sich von anderen UI -Design -Tools?

HTMX ist eine moderne, leichte HTML -Erweiterung für AJAX-, CSS -überg?nge, Websockets und Server -Senden von Ereignissen. Sie k?nnen Sie ohne JavaScript oder JQuery direkt von HTML von HTML auf moderne Browserfunktionen zugreifen. Dies unterscheidet es von anderen UI -Design -Tools, die oft stark auf JavaScript beruhen. HTMX ist einfach in ein Backend zu integrieren und erfordert nicht, dass Sie vorhandenen Code umschreiben. Es ist ein leistungsstarkes Tool, um die Benutzeroberfl?che zu verbessern und gleichzeitig den Code einfach und leicht zu warten.

Wie kann man mit HTMX beginnen?

Es ist sehr einfach, mit HTMX zu beginnen. Sie müssen nur das HTML -Skript in die HTML -Datei aufnehmen. Sobald Sie dies getan haben, k?nnen Sie die HTMX -Eigenschaften in HTML -Tags verwenden, um Ajax, WebSockets und andere Funktionen zu erm?glichen. Die HTMX -Website bietet umfassende Anleitungen und Beispiele, um Ihnen den Einstieg zu erleichtern.

Kann HTMX mit einem Backend verwendet werden?

Ja, einer der Hauptvorteile von HTMX sind die backendunabh?ngigen Merkmale. Es kann mit jeder serverseitigen Sprache oder einem beliebigen serverseitigen Sprache oder einer beliebigen Framework verwendet werden. Dies macht es zu einem universellen Werkzeug für Entwickler, die in verschiedenen Umgebungen arbeiten.

Was sind einige h?ufige Anwendungsf?lle für HTMX?

htmx kann in einer Vielzahl von Szenarien verwendet werden, in denen Sie die Benutzeroberfl?che verbessern m?chten, ohne sich auf JavaScript zu verlassen. Dies beinhaltet die Einreichung von Formular, Echtzeitsuche, unbegrenzte Bildlauf, Echtzeit-Updates und vieles mehr. Es ist ein leistungsstarkes Tool zum Erstellen dynamischer, interaktiver Webanwendungen.

Wie handelt es sich bei HTMX mit CSS -überg?ngen?

HTMX hat eine integrierte Unterstützung für CSS-überg?nge. Sie k?nnen das Attribut "HX-Swap" verwenden, um anzugeben, wie Elemente ein- und ausgetauscht werden sollten, wenn eine Anfrage gestellt wird. Auf diese Weise k?nnen Sie reibungslose, visuell ansprechende überg?nge erstellen, ohne JavaScript zu schreiben.

Ist HTMX mit allen Browsern kompatibel?

htmx ist so konzipiert, dass sie mit allen modernen Browsern kompatibel ist. Da es jedoch einige neuere Browserfunktionen verwendet, funktioniert es bei ?lteren oder weniger h?ufigen Browsern m?glicherweise nicht perfekt. Es wird immer empfohlen, Ihre Anwendung in Browsern zu testen, die Benutzer verwenden k?nnen.

Wie verbessert HTMX die Leistung von Webanwendungen?

HTMX kann die Menge an JavaScript, die Sie schreiben müssen, erheblich reduzieren, indem Sie von HTML direkt von HTML zugreifen k?nnen. Dies kann zu schnelleren Ladezeiten und einer h?heren Leistung führen, insbesondere auf mobilen Ger?ten, in denen JavaScript für mobile Ger?te besonders langsam sein kann.

Kann ich HTML und CSS mit meinem vorhandenen HTML und CSS verwenden?

Ja, HTML ist so konzipiert, dass er mit Ihrem vorhandenen HTML und CSS zusammenarbeitet. Sie müssen Ihren Code nicht umschreiben oder eine neue Sprache lernen, um mit HTMX zu beginnen. Dies macht es zu einer hervorragenden Wahl für die Verbesserung bestehender Anwendungen.

Welche Art von Unterstützung bietet HTMX?

htmx ist ein Open -Source -Projekt und verfügt über eine lebendige Entwicklergemeinschaft, die es nutzt und dazu beitr?gt. Auf der HTMX -Website, GitHub und verschiedenen Online -Foren finden Sie Hilfe und Ratschl?ge auf der HTMX -Website.

Wie kann man zu HTMX -Projekten beitragen?

Als Open -Source -Projekt begrü?t HTMX die Beitr?ge der Community. Sie k?nnen auf verschiedene Weise einen Beitrag leisten, von der Meldung von Fehler und dem Vorschlag neuer Funktionen bis hin zum Schreiben von Code und der Verbesserung der Dokumentation. Schauen Sie sich die HTMX Github -Seite an, um zu erfahren, wie Sie sich engagieren.

Das obige ist der detaillierte Inhalt vonEine Einführung in HTMX, die HTML-fokussierte dynamische UI-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!