Kaj je Alpine.js in kako ga uporabljate?

Svet spletnega razvoja je kaotičen – ogrodja se pojavljajo in izginjajo in stvari so lahko izjemne tako za nove kot za izkušene razvijalce.

Za razliko od večine ogrodij za spletni razvoj želi Alpine.js biti čim preprostejši, a dovolj zmogljiv za obravnavo konceptov, kot so odzivnost in stranski učinki.

Kako začeti z Alpine.js

Namestitev Alpine.js je zelo preprosta. Vključiti morate le naslednje scenarij oznako v vašem HTML-ju:

<scenarijodložitisrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">scenarij>

Druga možnost je, da namestite Alpine.js v svoj projekt z uporabo Node Package Manager:

npm namestite alpinejs

Reaktivnost v Alpine.js

Ustvarite index.htm datoteko in dodajte naslednjo kodo:

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8">
<metahttp-ekviv="Združljivo z X-UA"vsebino="IE=rob">
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0">





instagram viewer


<naslov>Alpine.jsnaslov>
glavo>
<telo>
<scenarijodložitisrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">scenarij>
telo>
html>

The odložiti atribut v scenarij pove brskalniku, naj zažene skript šele, ko konča z razčlenjevanjem dokumenta.

Alpine.js ponuja več direktiv, kot je x-podatki ki jih uporablja za shranjevanje podatkov in x-besedilo ki jih uporablja za nastavitev innerText priložene komponente. Če želite uporabiti te direktive, dodajte naslednjo kodo v svoj HTML.

<divx-podatki="{name:'David Uzondu', organizacija:'Make Use Of'}">
 Ime mi je <močanx-besedilo="ime">močan>
 in <jazx-besedilo="organizacija">jaz> je super
div>

Direktiva x-data shrani objekt s ključi ime in organizacija. Nato lahko te ključe posredujete v direktivo x-text. Ko zaženete kodo, bo Alpine.js zapolnil vrednosti:

Kako se Alpine.js primerja z React

Alpine.js je lahek okvir, zaradi česar je primeren za razvoj majhnih projektov in prototipov.

V večjih okvirih, kot je React, uporabljate kavlji kot useEffect() za obvladovanje stranskih učinkov v življenjskem ciklu komponente. Ta kavelj zažene funkcijo povratnega klica vsakič, ko se spremeni eden od elementov niza odvisnosti:

uvoz {useEffect} od"Reagiraj";
funkcijoMyComponent() {
 useEffect(() => {
/* Tukaj je funkcija povratnega klica */
 }, [ /* Matrika odvisnosti ni obvezna */ ]);
}

Za obvladovanje stranskih učinkov v Alpine.js lahko uporabite x-učinek direktiva. Na primer, recimo, da želite opazovati spremenljivko in zabeležiti vrednost vsakič, ko se spremeni:

<divx-podatki="{številka 1}"x-učinek="console.log (število)">
<h1x-besedilo="številka">h1>
<gumb @kliknite="število = število + 1">Dodajte novo številkogumb>
div>

Prva stvar, ki jo boste morda opazili, je, da vam ni treba določiti odvisnosti. Alpine bo preprosto poslušal spremembe v vseh spremenljivkah, ki so bile posredovane x-učinek. The @klik direktiva poveča spremenljivko števila za 1.

Pogojno upodabljanje v Alpine.js

Pogojno upodabljanje elementov je nekaj, kar lahko počnete v okvirih, kot je React. Alpine.js omogoča tudi pogojno upodabljanje elementov. Zagotavlja x-če direktivo in posebno predlogo element, ki ga lahko uporabite za pogojno upodabljanje elementov.

Ustvari drugo index.htm datoteko in dodajte isto kodo kot prej. V telo HTML dodajte naslednjo kodo.

<divx-podatki="{prikazano: res}">
<gumb @kliknite="prikazano=!prikazano"x-besedilo="prikazano? 'Skrij element': 'Pokaži element'">Preklopigumb>
<predlogox-če="prikazano">
<div>Hitra rjava lisica je skočila čez psa.div>
predlogo>
div>

The x-če direktiva se prenese na predlogo element. To je pomembno, ker omogoča Alpine.js, da spremlja element, ki je bil dodan ali odstranjen s strani. The predlogo element mora vsebovati en element korenske ravni; naslednja koda bi kršila to pravilo:

<predlogox-če="prikazano">
<div>Ta element bo dobro upodobljen.div>
<div>Ta element bo Alpine.js prezrldiv>
predlogo>

Izdelava aplikacije To-Do z Alpine.js

Čas je, da združite vse, kar ste se do zdaj naučili, in zgradite preprosto aplikacijo za opravila s podporo za lokalno shranjevanje. Najprej ustvarite mapo in jo napolnite z index.htm datoteka in a style.css mapa. Dodajte okvirno kodo v datoteko index.htm in vključite sklic na style.css mapa:

<povezavarel="stylesheet"href="style.css">

Ne skrbite za CSS tukaj, samo kopirajte style.css datoteka iz tega repozitorij projekta GitHub.

Za ohranitev podatkov po ponovnem nalaganju strani potrebujete Alpine.js vztrajati vključiti. Dodajte gradnjo CDN tega vtičnika kot a scenarij oznaka, tik nad jedrom Alpine.js CDN build:

<scenarijodložitisrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">scenarij>

V telo opredeliti a div element z an x-podatki direktiva. Ta direktiva mora vsebovati imenovano matriko vsa opravila. Nato dodajte h1 element z besedilom "To-Do Application".

<divx-podatki="{allTasks:$persist([])}">
<h1>Aplikacija To-doh1>
div>

The $vztrajati plugin je ovoj za JavaScript localStorage API. Brskalniku pove, naj shrani matriko v lokalno shrambo, tako da podatki ostanejo nedotaknjeni tudi po ponovnem nalaganju strani. Dodaj a oblika z predložiti direktivo, ki prav tako preprečuje privzeto dejanje predložitve.

<oblika @predložiti.preprečiti="
 ($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('Vhodna vrednost ne sme biti prazna')
: alert('Opravilo je že dodano.');
 $refs.task.value=''
">
oblika>

The $refs klavzula omogoča dostop do elementa DOM z "nalogo" x-ref direktiva. Koda obravnava tudi nekaj preverjanja in zagotavlja, da na seznam ne doda praznih nizov ali podvojenih opravil. Pred zaključkom obrazca dodajte vnos element z an x-ref "opravila" in ogrado. Nato dodajte gumb in nastavite njegovo vrsto na "pošlji".

<vnosvrsta="besedilo"x-ref="naloga">
<gumbvrsta="oddaj">Dodaj opravilogumb>

Nato definirajte div z razredom "items". Ta div mora vsebovati dva druga diva: enega z x-podatki nastavite na "nedokončano" matriko, drugo pa na "dokončano" matriko. Oba diva bi morala imeti x-učinek in matrika mora biti ovita v $vztrajati klavzulo, kot je prikazano prej.

<divrazred="predmeti">
<divx-podatki="{nedokončano:$persist([])}"x-učinek="nedokončano = allTasks.filter (x=>x.donefalse)">
div>

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

V prvi div dodajte an h3 oznako z besedilom "Nedokončano". Nato za vsak element v nedokončano array, render a div ki drži "kontrole" in samo nalogo.

Kontrolniki omogočajo uporabniku, da izbriše element ali ga označi kot dokončanega:

<h3>Nedokončanoh3>
<predlogox-za="element v nedokončanem":ključ="element.id">
<divx-podatki="{showControls: false}" @miška="showControls = true" @mouseout="showControls = false"
 razred="naloga"
 >
<divrazred="kontrole">
<divx-show="showControls" @kliknite="element.done=true">[M]div>
<divx-show="showControls" @kliknite="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-besedilo="element.naloga" >div>
div>
predlogo>

Lahko uporabite x-za direktivo za ponavljanje skozi matriko in upodabljanje elementov. Podobno je v-za v Vue in Array.map() matrična metoda v Reactu. Div "controls" vsebuje dva diva z nizoma "[M]" in "[R]". Ti nizi pomenijo "Označi kot dokončano" in "Odstrani". Če želite, jih lahko zamenjate z ustreznimi ikonami.

The x-show direktiva nastavi element zaslon Lastnost CSS za nič če je vrednost, ki kaže na direktivo, lažna. Drugi div v divu "items" je podoben prvemu z nekaj opaznimi izjemami: The h3 besedilo je nastavljeno na "Dokončano", ima prvi podrejeni element "control" besedilo "[U]" namesto "[M]" in v tem divu @klik direktiva, element.končano je nastavljeno na lažno.

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

In to je to, pregledali ste osnove Alpine.js in uporabili tisto, kar ste se naučili, da ustvarite osnovno aplikacijo za opravila.

Poenostavitev pisanja kode Alpine.js

Ko začnete pisati kodo Alpine.js, je težko vzeti glavo. Na srečo urejevalniki kode, kot je Visual Studio Code, ponujajo široko paleto razširitev, ki olajšajo razvoj.

V Extensions Marketplace lahko dobite razširitev Alpine.js IntelliSense, ki olajša delo z direktivami. To lahko pomaga izboljšati vašo produktivnost pri uporabi Alpine.js v vaših projektih.