Was ist Alpine.js und wie verwenden Sie es?

Die Welt der Webentwicklung ist chaotisch – Frameworks tauchen auf und verschwinden und die Dinge können sowohl für neue als auch für erfahrene Entwickler überwältigend sein.

Im Gegensatz zu den meisten Webentwicklungs-Frameworks zielt Alpine.js darauf ab, so einfach wie möglich und dennoch leistungsstark genug zu sein, um mit Konzepten wie Reaktivität und Nebenwirkungen umzugehen.

Erste Schritte mit Alpine.js

Die Installation von Alpine.js ist recht einfach. Sie müssen lediglich Folgendes angeben Skript Tag in Ihrem HTML:

<Skriptverschiebensrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">Skript>

Alternativ können Sie Alpine.js mit dem Node Package Manager in Ihrem Projekt installieren:

npm install alpinejs

Reaktivität in Alpine.js

Erstelle ein index.htm Datei und fügen Sie den folgenden Boilerplate-Code hinzu:

html





instagram viewer
>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“>
<Metahttp-äquiv=„X-UA-kompatibel“Inhalt=„IE=Kante“>
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“>
<Titel>Alpine.jsTitel>
Kopf>
<Körper>
<Skriptverschiebensrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">Skript>
Körper>
html>

Der verschieben Attribut in der Skript Tag weist den Browser an, das Skript erst auszuführen, nachdem die Analyse des Dokuments abgeschlossen ist.

Alpine.js bietet mehrere Anweisungen wie x-Daten die es zum Speichern von Daten verwendet und x-Text mit dem es eingestellt wird innerText der angeschlossenen Komponente. Um diese Anweisungen zu verwenden, fügen Sie den folgenden Code zu Ihrem HTML hinzu.

<divx-Daten=„{Name:‘David Uzondu‘, Organisation:‘Make Use Of‘}“>
 Ich heiße <starkx-Text="Name">stark>
 Und <ichx-Text="Organisation">ich> ist großartig
div>

Die x-data-Direktive speichert ein Objekt mit den Schlüsseln Name Und Organisation. Sie können diese Schlüssel dann an die x-text-Direktive übergeben. Wenn Sie den Code ausführen, füllt Alpine.js die Werte aus:

Wie Alpine.js im Vergleich zu React abschneidet

Alpine.js ist ein leichtes Framework, das sich für die Entwicklung kleiner Projekte und Prototypen eignet.

In größeren Frameworks wie React verwenden Sie Haken wie useEffect() um Nebenwirkungen im Komponentenlebenszyklus zu bewältigen. Dieser Hook führt eine Rückruffunktion aus, wenn sich eines der Elemente des Abhängigkeitsarrays ändert:

importieren {useEffect} aus"Reagieren";
FunktionMeineKomponente() {
 useEffect(() => {
/* Callback-Funktion geht hierher */
 }, [ /* Das Abhängigkeitsarray ist optional */ ]);
}

Um Nebenwirkungen in Alpine.js zu behandeln, können Sie Folgendes verwenden x-Effekt Richtlinie. Angenommen, Sie möchten eine Variable überwachen und den Wert protokollieren, wenn er sich ändert:

<divx-Daten="{Nummer 1}"x-Effekt=„console.log (Nummer)“>
<h1x-Text="Nummer">h1>
<Taste @klicken=„Zahl = Zahl + 1“>Neue Nummer hinzufügenTaste>
div>

Das erste, was Ihnen vielleicht auffällt, ist, dass Sie keine Abhängigkeit angeben müssen. Alpine wartet einfach auf Änderungen in allen übergebenen Variablen x-Effekt. Der @klicken Die Direktive erhöht die Zahlvariable um 1.

Bedingtes Rendering in Alpine.js

Elemente bedingt rendern ist etwas, was Sie in Frameworks wie React tun können. Mit Alpine.js können Sie auch Elemente bedingt rendern. Es bietet eine x-wenn Richtlinie und eine besondere Vorlage Element, das Sie zum bedingten Rendern von Elementen verwenden können.

Ein anderes erstellen index.htm Datei und fügen Sie den gleichen Boilerplate-Code wie zuvor hinzu. Fügen Sie den folgenden Code zum Textkörper des HTML hinzu.

<divx-Daten=„{angezeigt: wahr}“>
<Taste @klicken=„gezeigt=!gezeigt“x-Text="gezeigt? 'Element ausblenden': 'Element anzeigen'">UmschaltenTaste>
<Vorlagex-wenn="gezeigt">
<div>Der schnelle Braunfuchs sprang über den Hund.div>
Vorlage>
div>

Der x-wenn Die Direktive wird an die übergeben Vorlage Element. Dies ist wichtig, da Alpine.js so den Überblick über ein Element behalten kann, das der Seite hinzugefügt oder daraus entfernt wird. Der Vorlage Das Element sollte ein Element auf Stammebene enthalten. Der folgende Code würde gegen diese Regel verstoßen:

<Vorlagex-wenn="gezeigt">
<div>Dieses Element wird einwandfrei gerendert.div>
<div>Dieses Element wird von Alpine.js ignoriertdiv>
Vorlage>

Erstellen einer To-Do-Anwendung mit Alpine.js

Es ist an der Zeit, alles, was Sie bisher gelernt haben, zu kombinieren und eine einfache Anwendung mit lokaler Speicherunterstützung zu erstellen. Erstellen Sie zunächst einen Ordner und füllen Sie ihn mit einem index.htm Datei und a style.css Datei. Fügen Sie den Boilerplate-Code in die Datei index.htm ein und fügen Sie einen Verweis darauf hinzu style.css Datei:

<Verknüpfungrel=„Stylesheet“href=„style.css“>

Machen Sie sich hier keine Sorgen um das CSS, kopieren Sie es einfach style.css Datei daraus GitHub-Repository des Projekts.

Um Daten nach dem Neuladen der Seite beizubehalten, benötigen Sie Alpine.js fortdauern Plugin. Fügen Sie den CDN-Build dieses Plugins als hinzu Skript Tag, direkt über dem Kern-CDN-Build von Alpine.js:

<Skriptverschiebensrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">Skript>

Im Körper Definiere a div Element mit einem x-Daten Richtlinie. Diese Direktive sollte ein Array mit dem Namen enthalten alle Aufgaben. Fügen Sie dann eine hinzu h1 Element mit dem Text „To-Do-Antrag“.

<divx-Daten=„{allTasks:$persist([])}“>
<h1>To-Do-Anwendungh1>
div>

Der $bleiben Plugin ist ein Wrapper für das JavaScript localStorage API. Es weist den Browser an, das Array im lokalen Speicher zu speichern, sodass die Daten auch nach dem Neuladen der Seite intakt bleiben. Füge hinzu ein form mit einem einreichen Direktive, die auch die standardmäßige Übermittlungsaktion verhindert.

<form @einreichen.verhindern="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id: Date.now(), done: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? Alert('Eingabewert darf nicht leer sein')
: alarm('Aufgabe bereits hinzugefügt.');
 $refs.task.value=''
">
form>

Der $refs -Klausel ermöglicht den Zugriff auf das DOM-Element mit der „task“ x-ref Richtlinie. Der Code übernimmt auch einige Validierungen und stellt sicher, dass der Liste keine leeren Zeichenfolgen oder doppelten Aufgaben hinzugefügt werden. Fügen Sie vor dem Beenden des Formulars eine hinzu Eingang Element mit einem x-ref aus „Aufgabe“ und einem Platzhalter. Fügen Sie dann eine Schaltfläche hinzu und legen Sie deren Typ auf „Senden“ fest.

<EingangTyp="Text"x-ref="Aufgabe">
<TasteTyp="einreichen">Aufgabe hinzufügenTaste>

Als nächstes definieren Sie ein Div mit der Klasse „items“. Dieses Div sollte zwei weitere Divs enthalten: eines mit dem x-Daten auf ein „unvollendetes“ Array und das andere auf ein „abgeschlossenes“ Array gesetzt. Beide Divs sollten eine haben x-Effekt Direktive und das Array sollten in die eingeschlossen werden $bleiben Klausel wie zuvor gezeigt.

<divKlasse="Artikel">
<divx-Daten=„{uncompleted:$persist([])}“x-Effekt=„uncompleted = allTasks.filter (x=>x.donefalse)“>
div>

<divx-Daten=„{abgeschlossen:$persist([])}“x-Effekt=„completed=allTasks.filter (y=>y.donetrue).reverse()“>
div>
div>

Fügen Sie im ersten Div ein hinzu h3 Tag mit dem Text „Unvollständig“. Dann für jedes Element in der unvollendet Array, rendern a div das die „Kontrollen“ und die Aufgabe selbst enthält.

Mit den Steuerelementen kann der Benutzer ein Element löschen oder als erledigt markieren:

<h3>Unvollendeth3>
<Vorlagex-für=„Element in unvollständig“:Taste=„element.id“>
<divx-Daten=„{showControls: false}“ @Mouseover=„showControls = true“ @Mouseout=„showControls = false“
 class="Aufgabe"
 >
<divKlasse=„Kontrollen“>
<divx-show=„showControls“ @klicken=„element.done=true“>[M]div>
<divx-show=„showControls“ @klicken=„allTasks=allTasks.filter (x=>x.id!==element.id)“>[R]div>
div>
<divx-Text=„element.task“ >div>
div>
Vorlage>

Du kannst den... benutzen x-für Direktive zum Durchlaufen eines Arrays und zum Rendern von Elementen. Das ist vergleichbar mit v-für in Vue und dem Array.map() Array-Methode in Reagieren. Das Div „controls“ enthält zwei Divs mit der Zeichenfolge „[M]“ und „[R]“. Diese Zeichenfolgen stehen für „Als erledigt markieren“ und „Entfernen“. Sie können diese bei Bedarf durch geeignete Symbole ersetzen.

Der x-show Direktive legt ein Element fest Anzeige CSS-Eigenschaft zu keiner wenn der Wert, der auf die Direktive verweist, falsch ist. Das zweite Div im Div „items“ ähnelt dem ersten mit einigen bemerkenswerten Ausnahmen: Das h3 Text auf „Completed“ gesetzt ist, hat das erste untergeordnete Element des „Control“-Divs den Text „[U]“ anstelle von „[M]“ und in diesem Div @klicken Richtlinie, element.done ist eingestellt auf FALSCH.

<divx-show=„showControls“ @klicken=„element.done=false“>[U]div>

Und das war‘s, Sie haben die Grundlagen von Alpine.js durchgegangen und das Gelernte genutzt, um eine einfache To-Do-Anwendung zu erstellen.

Vereinfachen Sie das Schreiben von Alpine.js-Code

Wenn Sie anfangen, Alpine.js-Code zu schreiben, kann es schwierig sein, den Überblick zu behalten. Glücklicherweise bieten Code-Editoren wie Visual Studio Code eine Vielzahl von Erweiterungen, die die Entwicklung erleichtern.

Im Extensions Marketplace erhalten Sie die IntelliSense-Erweiterung Alpine.js, die die Arbeit mit Direktiven erleichtert. Dies kann dazu beitragen, Ihre Produktivität bei der Verwendung von Alpine.js in Ihren Projekten zu verbessern.