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.
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.
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.
Betrachten Sie Folgendes:
<button hx-get="/api/resource">Load Data</button>
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
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:
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.
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.
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>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.
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.
In Bezug auf unser vorheriges Beispiel können wir auch hx-target = "nächstes P" schreiben, um die Angabe der ID zu vermeiden.
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 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.
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:
Ü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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
So lernen Sie die Python-Programmierung von Grund auf
So richten Sie Textfelder in HTML aus
Welche Software ist cdr
in Auswahl einfügen
Nutzung von Alibaba Cloud-Computern
Die Rolle des Linux-Betriebssystems
So beheben Sie den Fehler bei der Website-Wiederherstellung
So starten Sie den Dienst im Swoole-Framework neu
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
