Mi az Alpine.js és hogyan kell használni?

A webfejlesztés világa kaotikus – a keretrendszerek megjelennek és megszűnnek, és a dolgok elsöprőek lehetnek az új és a tapasztalt fejlesztők számára egyaránt.

A legtöbb webfejlesztési keretrendszerrel ellentétben az Alpine.js célja, hogy a lehető legegyszerűbb legyen, ugyanakkor elég erős ahhoz, hogy kezelje az olyan fogalmakat, mint a reakciókészség és a mellékhatások.

Az Alpine.js első lépései

Az Alpine.js telepítése meglehetősen egyszerű. Csak a következőket kell megadnia forgatókönyv címkét a HTML-ben:

<forgatókönyvelhalasztjasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">forgatókönyv>

Alternatív megoldásként telepítheti az Alpine.js-t projektjébe a Node Package Manager segítségével:

npm install alpinejs

Reaktivitás az Alpine.js-ben

Hozzon létre egy index.htm fájlt, és adja hozzá a következő általános kódot:

html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8">





instagram viewer


<metahttp-equiv="X-UA-kompatibilis"tartalom="IE=él">
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0">
<cím>Alpine.jscím>
fej>
<test>
<forgatókönyvelhalasztjasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">forgatókönyv>
test>
html>

A elhalasztja attribútum a forgatókönyv címke azt mondja a böngészőnek, hogy csak a dokumentum elemzése után futtassa le a szkriptet.

Az Alpine.js számos direktívát biztosít, mint pl x-adat amelyet az adatok tárolására és x-szöveg amelyet a beállítására használ innerText a csatolt alkatrészről. Ezen direktívák használatához adja hozzá a következő kódot a HTML-kódjához.

<divx-adat="{name:'David Uzondu', szervezet:'Make Use Of'}">
 A nevem <erősx-szöveg="név">erős>
 és <énx-szöveg="szervezet">én> az Awesome
div>

Az x-data direktíva egy objektumot tárol a kulcsokkal név és szervezet. Ezután ezeket a kulcsokat átadhatja az x-text direktívának. A kód futtatásakor az Alpine.js feltölti a következő értékeket:

Hogyan viszonyul az Alpine.js a Reacthoz

Az Alpine.js egy könnyű keretrendszer, amely alkalmassá teszi kis projektek és prototípusok fejlesztésére.

A nagyobb keretrendszerekben, mint például a React, használja horgok, mint useEffect() a mellékhatások kezelésére az alkatrész életciklusában. Ez a hook visszahívási függvényt futtat, amikor a függőségi tömb egyik eleme megváltozik:

import {useEffect} tól től"Reagál";
funkcióMyComponent() {
 useEffect(() => {
/* Ide kerül visszahívási funkció */
 }, [ /* A függőségi tömb nem kötelező */ ]);
}

Az Alpine.js mellékhatásainak kezelésére használhatja a x-effektus irányelv. Tegyük fel például, hogy meg szeretne nézni egy változót, és naplózni szeretné az értéket, amikor megváltozik:

<divx-adat="{szám: 1}"x-effektus="console.log (szám)">
<h1x-szöveg="szám">h1>
<gomb @kattintson="szám = szám + 1">Új szám hozzáadásagomb>
div>

Az első dolog, amit észrevehet, az az, hogy nem kell függőséget megadnia. Az Alpine egyszerűen figyelni fogja az összes átadott változó változásait x-effektus. A @kattintás direktíva 1-gyel növeli a számváltozót.

Feltételes renderelés az Alpine.js-ben

Elemek feltételes megjelenítése olyasmi, amit megtehetsz olyan keretrendszerekben, mint a React. Az Alpine.js lehetővé teszi az elemek feltételes megjelenítését is. Biztosít egy x-if irányelv és egy speciális sablon elemet, amellyel elemeket feltételesen renderelhet.

Hozzon létre egy másikat index.htm fájlt, és adja hozzá ugyanazt a rendszerkódot, mint korábban. Adja hozzá a következő kódot a HTML törzséhez.

<divx-adat="{megjelenítve: igaz}">
<gomb @kattintson="shown=!shown"x-szöveg="Látható? "Elem elrejtése": "Elem megjelenítése">Váltásgomb>
<sablonx-if="Látható">
<div>A gyors barna róka átugrott a kutyán.div>
sablon>
div>

A x-if az irányelvet átadják a sablon elem. Ez azért fontos, mert lehetővé teszi az Alpine.js számára, hogy nyomon kövesse az oldalhoz hozzáadott vagy eltávolított elemeket. A sablon elemnek tartalmaznia kell egy gyökérszintű elemet; a következő kód sértené ezt a szabályt:

<sablonx-if="Látható">
<div>Ez az elem jól lesz renderelve.div>
<div>Ezt az elemet az Alpine.js figyelmen kívül hagyjadiv>
sablon>

To-Do alkalmazás készítése az Alpine.js segítségével

Itt az ideje, hogy kombinálja mindazt, amit eddig tanult, és készítsen egy egyszerű teendő alkalmazást helyi tárolási támogatással. Először hozzon létre egy mappát, és töltse fel egy index.htm fájl és a stílus.css fájlt. Adja hozzá az alapkódot az index.htm fájlhoz, és csatoljon hivatkozást a stílus.css fájl:

<linkrel="stíluslap"href="stílus.css">

Ne aggódj a CSS miatt, csak másold ki a stílus.css fájl ebből projekt GitHub tárháza.

Az adatok megőrzéséhez az oldal újratöltése után is szüksége van az Alpine.js fájlra kitartani csatlakoztat. Adja hozzá a bővítmény CDN-összeállítását a forgatókönyv címke, közvetlenül az Alpine.js CDN alapfelépítése felett:

<forgatókönyvelhalasztjasrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">forgatókönyv>

Ban,-ben test határozza meg a div elem egy x-adat irányelv. Ennek a direktívának egy elnevezésű tömböt kell tartalmaznia allTasks. Ezután adjon hozzá egy h1 elem a „Teendők alkalmazás” szöveggel.

<divx-adat="{allTasks:$persist([])}">
<h1>Teendők alkalmazásh1>
div>

A $persist plugin egy burkoló a JavaScript localStorage API. Azt mondja a böngészőnek, hogy a tömböt a helyi tárhelyen tárolja, így az adatok az oldal újratöltése után is érintetlenek maradnak. Add hozzá a forma val,-vel Beküldés direktíva, amely az alapértelmezett elküldési műveletet is megakadályozza.

<forma @benyújtani.megakadályozni="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{feladat: $refs.task.value.trim(), id: Date.now(), kész: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('A bemeneti érték nem lehet üres')
: alert('A feladat már hozzáadva.');
 $refs.task.value=''
">
forma>

A $refs záradék lehetővé teszi a hozzáférést a DOM elemhez a "feladat" segítségével x-ref irányelv. A kód bizonyos ellenőrzéseket is kezel, és biztosítja, hogy ne adjon hozzá üres karakterláncokat vagy ismétlődő feladatokat a listához. Az űrlap befejezése előtt adjon hozzá egy bemenet elem egy x-ref a "feladat" és egy helyőrző. Ezután adjon hozzá egy gombot, és állítsa be a "beküldés" típusát.

<bemenettípus="szöveg"x-ref="feladat">
<gombtípus="Beküldés">Feladat hozzáadásagomb>

Ezután definiáljon egy div elemet az "elemek" osztállyal. Ennek a divnek két másik divet kell tartalmaznia: az egyikben a x-adat állítsa be egy "befejezetlen" tömbre, a másik pedig egy "befejezett" tömbre. Mindkét divnek rendelkeznie kell egy x-effektus direktívát és a tömböt a $persist záradék, amint azt korábban bemutattuk.

<divosztály="elemek">
<divx-adat="{uncompleted:$persist([])}"x-effektus="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

<divx-adat="{completed:$persist([])}"x-effektus="completed=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

Az első divben adjon hozzá egy h3 címkét a "Befejezetlen" szöveggel. Ezután minden egyes elemhez a befejezetlen tömb, renderel a div amely tartalmazza a „vezérlőket” és magát a feladatot.

A vezérlőelemek lehetővé teszik a felhasználó számára egy elem törlését vagy befejezettként való megjelölését:

<h3>Befejezetlenh3>
<sablonx-for="elem befejezetlen":kulcs="elem.id">
<divx-adat="{showControls: false}" @egérmutatót="showControls = igaz" @egérkihúzás="showControls = hamis"
 class="task"
 >
<divosztály="vezérlők">
<divx-show="showControls" @kattintson="element.done=true">[M]div>
<divx-show="showControls" @kattintson="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-szöveg="elem.task" >div>
div>
sablon>

Használhatja a x-for direktíva a tömbön keresztüli iterációhoz és az elemek megjelenítéséhez. Ez hasonló v-for a Vue-ban és a Array.map() tömb módszer a Reactban. A „controls” div két div elemet tartalmaz „[M]” és „[R]” karakterlánccal. Ezek a karakterláncok a „Megjelölés készként” és az „Eltávolítás” rövidítése. Ha kívánja, ezeket megfelelő ikonokkal helyettesítheti.

A x-show direktíva beállít egy elemet kijelző CSS tulajdonság egyik sem ha az irányelvre mutató érték hamis. A második div az "elemek" divben hasonló az elsőhöz, néhány figyelemre méltó kivétellel: The h3 a szöveg "Befejezve" értékre van állítva, a "control" div első gyermeke "[M]" helyett "[U]" szöveggel rendelkezik, és ebben a divben @kattintás irányelv, elem.kész be van állítva hamis.

<divx-show="showControls" @kattintson="element.done=false">[U]div>

És ennyi: átnézte az Alpine.js alapjait, és a tanultakat felhasználta egy alapvető teendő alkalmazás létrehozásához.

Az Alpine.js kód megírásának megkönnyítése

Amikor elkezdi írni az Alpine.js kódot, nehéz lehet körülölelni a fejét. Szerencsére az olyan kódszerkesztők, mint a Visual Studio Code, a kiterjesztések széles skáláját kínálják, amelyek megkönnyítik a fejlesztést.

Az Extensions Marketplace-en beszerezheti az Alpine.js IntelliSense kiterjesztést, amely megkönnyíti az utasításokkal való munkát. Ez javíthatja a termelékenységet, amikor az Alpine.js fájlt használja projektjeiben.