Mis on Alpine.js ja kuidas seda kasutada?

Veebiarenduse maailm on kaootiline – raamistikud hüppavad sisse ja välja ning asjad võivad olla nii uutele kui ka kogenud arendajatele üle jõu käivad.

Erinevalt enamikust veebiarendusraamistikest on Alpine.js eesmärk olla võimalikult lihtne, kuid samas piisavalt võimas, et tulla toime selliste mõistetega nagu reaktsioonivõime ja kõrvalmõjud.

Alpine.js-iga alustamine

Alpine.js'i installimine on üsna lihtne. Peate lisama ainult järgmise stsenaarium HTML-i märgend:

<stsenaariumedasi lükatasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">stsenaarium>

Teise võimalusena saate installida Alpine.js oma projekti, kasutades Node Package Manageri:

npm install alpinejs

Reaktiivsus Alpine.js-s

Loo an index.htm fail ja lisage järgmine kood:

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8">
<metahttp-ekv="X-UA-ühilduv"sisu="IE = serv">
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0">





instagram viewer


<pealkiri>Alpine.jspealkiri>
pea>
<keha>
<stsenaariumedasi lükatasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">stsenaarium>
keha>
html>

The edasi lükata atribuut stsenaarium silt käsib brauseril skripti käivitada alles pärast dokumendi sõelumise lõpetamist.

Alpine.js pakub mitmeid direktiive nagu x-andmed mida ta kasutab andmete salvestamiseks ja x-tekst mida ta kasutab seadistamiseks sisemine Tekst lisatud komponendist. Nende juhiste kasutamiseks lisage oma HTML-i järgmine kood.

<divx-andmed="{name:'David Uzondu', organisatsioon:'Make Use Of'}">
 Minu nimi on <tugevx-tekst="nimi">tugev>
 ja <ix-tekst="organisatsioon">i> on lahe
div>

X-data direktiiv salvestab võtmetega objekti nimi ja organisatsioon. Seejärel saate need võtmed edastada x-teksti direktiivi. Kui käivitate koodi, sisestab Alpine.js väärtused:

Kuidas Alpine.js ja React võrreldavad

Alpine.js on kerge raamistik, mis muudab selle sobivaks väikeste projektide ja prototüüpide arendamiseks.

Suuremates raamistikes, nagu React, kasutate konksud nagu useEffect() komponendi elutsükli kõrvalmõjude käsitlemiseks. See konks käivitab tagasihelistamisfunktsiooni, kui üks sõltuvusmassiivi elementidest muutub:

importida {useEffect} alates"Reageeri";
funktsiooniMinu komponent() {
 useEffect(() => {
/* Tagasihelistamise funktsioon läheb siia */
 }, [ /* Sõltuvuste massiiv on valikuline */ ]);
}

Kõrvaltoimete käsitlemiseks rakenduses Alpine.js saate kasutada x-efekt direktiiv. Oletame näiteks, et soovite vaadata muutujat ja registreerida väärtuse, kui see muutub:

<divx-andmed="{number: 1}"x-efekt="console.log (number)">
<h1x-tekst="number">h1>
<nuppu @klõpsa="number = number + 1">Lisa uus numbernuppu>
div>

Esimene asi, mida võite märgata, on see, et te ei pea määrama sõltuvust. Alpine lihtsalt kuulab muutusi kõigis muutujates, kellele edastatakse x-efekt. The @klõps direktiiv suurendab arvu muutujat 1 võrra.

Tingimuslik renderdamine rakenduses Alpine.js

Elementide renderdamine tingimuslikult on midagi, mida saate teha sellistes raamistikes nagu React. Alpine.js võimaldab ka elemente tingimuslikult renderdada. See annab an x-if direktiiv ja eri malli element, mida saate kasutada elementide tingimuslikuks renderdamiseks.

Loo teine index.htm faili ja lisage sama kood nagu varem. Lisage HTML-i kehasse järgmine kood.

<divx-andmed="{shown: true}">
<nuppu @klõpsa="näidatud=!näidatud"x-tekst="näidatud? "Peida element": "Näita elementi"">Lülitanuppu>
<mallix-if="näidatud">
<div>Kiire pruun rebane hüppas üle koera.div>
malli>
div>

The x-if direktiiv antakse üle malli element. See on oluline, kuna võimaldab Alpine.js-il jälgida lehele lisatavat või sealt eemaldatavat elementi. The malli element peaks sisaldama ühte juurtaseme elementi; järgmine kood rikuks seda reeglit:

<mallix-if="näidatud">
<div>See element renderdatakse suurepäraselt.div>
<div>Alpine.js ignoreerib seda elementidiv>
malli>

Ülesannete rakenduse loomine rakendusega Alpine.js

On aeg ühendada kõik, mida olete seni õppinud, ja luua kohaliku salvestustoega lihtne ülesannete rakendus. Esiteks looge kaust ja sisestage see tähega an index.htm fail ja a stiil.css faili. Lisage standardkood faili index.htm ja lisage viide failile stiil.css fail:

<linkrel="laadileht"href="stiil.css">

Ärge muretsege CSS-i pärast, vaid kopeerige see stiil.css fail sellest projekti GitHubi hoidlasse.

Andmete säilitamiseks pärast lehe uuesti laadimist vajate faili Alpine.js püsima sisse panema. Lisage selle pistikprogrammi CDN-i järg kui a stsenaarium märgend, vahetult Alpine.js CDN-i põhijärgu kohal:

<stsenaariumedasi lükatasrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">stsenaarium>

Aastal keha määratle a div element koos an x-andmed direktiiv. See direktiiv peaks sisaldama massiivi nimega kõik ülesanded. Seejärel lisage an h1 element tekstiga "To-Do Application".

<divx-andmed="{allTasks:$persist([])}">
<h1>Ülesannete rakendush1>
div>

The $püsivad plugin on ümbris JavaScripti kohalik salvestusruum API. See käsib brauseril massiivi kohalikku salvestusruumi salvestada, nii et andmed jäävad puutumatuks ka pärast lehe uuesti laadimist. Lisa vormi koos Esita käsk, mis takistab ka vaikimisi esitamise toimingut.

<vormi @esitama.vältida="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{ülesanne: $refs.task.value.trim(), id: Date.now(), tehtud: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert ('Sisendväärtus ei saa olla tühi')
: alert('Ülesanne on juba lisatud.');
 $refs.task.value=''
">
vormi>

The $refs klausel võimaldab juurdepääsu DOM-i elemendile "ülesandega" x-ref direktiiv. Kood tegeleb ka teatud kontrolliga ja tagab, et see ei lisa loendisse tühje stringe ega dubleerivaid ülesandeid. Enne vormi lõpetamist lisage an sisend element koos an x-ref ülesandest ja kohahoidjast. Seejärel lisage nupp ja määrake selle tüübiks "esita".

<sisendtüüp="tekst"x-ref="ülesanne">
<nupputüüp="Esita">Lisa ülesannenuppu>

Järgmisena määratlege div klassiga "üksused". See div peaks sisaldama veel kahte div: üks koos x-andmed seatud massiivile "lõpetamata" ja teiseks "lõpetamata" massiiviks. Mõlemal divisil peaks olema x-efekt direktiiv ja massiiv peaks olema mähitud $püsivad klausel nagu varem näidatud.

<divklass="esemed">
<divx-andmed="{uncompleted:$persist([])}"x-efekt="lõpetamata = kõikTasks.filter (x=>x.donefalse)">
div>

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

Esimeses osas lisage an h3 sildi tekstiga "Lõpetamata". Seejärel iga elemendi jaoks lõpetamata massiiv, renderda a div mis hoiab "juhtelemente" ja ülesannet ennast.

Juhtnupud võimaldavad kasutajal üksuse kustutada või lõpetatuks märkida:

<h3>Lõpetamatah3>
<mallix-for="element on lõpetamata":võti="element.id">
<divx-andmed="{showControls: false}" @kursor üle="showControls = tõsi" @hiire väljas="showControls = vale"
 class="ülesanne"
 >
<divklass="kontrollid">
<divx-show="showControls" @klõpsa="element.done=true">[M]div>
<divx-show="showControls" @klõpsa="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-tekst="element.task" >div>
div>
malli>

Võite kasutada x-for käsk itereerida läbi massiivi ja renderdada elemente. See on sarnane v-eest aastal Vue ja Array.map() massiivi meetod in React. Jaotis "Controls" sisaldab kahte divisi stringiga "[M]" ja "[R]". Need stringid tähistavad "Märgi tehtuks" ja "Eemalda". Soovi korral saate need asendada sobivate ikoonidega.

The x-show direktiiv määrab elemendi kuva CSS-i atribuut mitte ühtegi kui direktiivile viitav väärtus on vale. Jaotises "Kirjed" olev teine ​​div on sarnane esimesega, välja arvatud mõned märkimisväärsed erandid: The h3 tekst on seatud väärtusele "Lõpetatud", "control" divisjoni esimesel alamjärgul on "[M]" asemel tekst "[U]" ja selles div @klõps direktiiv, element.tehtud on seatud vale.

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

Ja ongi kõik, olete Alpine.js'i põhitõed üle käinud ja kasutanud õpitut lihtsa ülesanderakenduse loomiseks.

Alpine.js koodi kirjutamise hõlbustamine

Kui hakkate Alpine.js koodi kirjutama, võib olla raske oma pead ümber keerata. Õnneks pakuvad koodiredaktorid, nagu Visual Studio Code, laia valikut laiendusi, mis muudavad arenduse lihtsamaks.

Extensions Marketplace'is saate hankida Alpine.js IntelliSense'i laienduse, mis muudab direktiividega töötamise lihtsamaks. See võib aidata teie projektides Alpine.js-i kasutamisel tootlikkust parandada.