Kas yra Alpine.js ir kaip juo naudotis?

Žiniatinklio kūrimo pasaulis yra chaotiškas – sistemos atsiranda ir nebeegzistuoja, o tiek naujiems, tiek patyrusiems kūrėjams viskas gali būti didžiulė.

Skirtingai nuo daugelio žiniatinklio kūrimo sistemų, Alpine.js siekia būti kuo paprastesnis, tačiau pakankamai galingas, kad galėtų susidoroti su tokiomis sąvokomis kaip reaktyvumas ir šalutinis poveikis.

Darbo su Alpine.js pradžia

Įdiegti Alpine.js yra gana paprasta. Jums tereikia įtraukti šiuos dalykus scenarijus žyma savo HTML:

<scenarijusatidėtisrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">scenarijus>

Arba galite įdiegti Alpine.js savo projekte naudodami Node Package Manager:

npm įdiegti alpinejs

Reaktyvumas Alpine.js

Sukurti an index.htm failą ir pridėkite šį pagrindinį kodą:

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8">
<metahttp-equiv=„Suderinamas su X-UA“turinys="IE = kraštas">





instagram viewer


<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<titulą>Alpine.jstitulą>
galva>
<kūnas>
<scenarijusatidėtisrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">scenarijus>
kūnas>
html>

The atidėti atributas scenarijus žyma nurodo naršyklei paleisti scenarijų tik baigus analizuoti dokumentą.

Alpine.js pateikia keletą direktyvų, tokių kaip x-duomenys kurią naudoja duomenims saugoti ir x-tekstas kurį jis naudoja nustatydamas vidinisTekstas prijungto komponento. Norėdami naudoti šias direktyvas, pridėkite šį kodą prie savo HTML.

<divx-duomenys="{name:'David Uzondu', organizacija:'Make Use Of'}">
 Mano vardas yra <stiprusx-tekstas="vardas">stiprus>
 ir <ix-tekstas="organizacija">i> yra nuostabus
div>

X-data direktyva saugo objektą su raktais vardas ir organizacija. Tada galite perduoti tuos raktus į x-teksto direktyvą. Kai paleisite kodą, Alpine.js įves reikšmes:

Kaip Alpine.js lyginamas su React

Alpine.js yra lengvas pagrindas, todėl jis tinka mažiems projektams ir prototipams kurti.

Didesnėse sistemose, tokiose kaip „React“, jūs naudojate kabliukai kaip useEffect() pašalinti šalutinį poveikį komponento gyvavimo ciklo metu. Šis kabliukas vykdo atgalinio skambučio funkciją, kai pasikeičia vienas iš priklausomybės masyvo elementų:

importuoti {useEffect} iš"Reaguoti";
funkcijaMano komponentas() {
 useEffect (() => {
/* Atgalinio skambinimo funkcija veikia čia */
 }, [ /* Priklausomybės masyvas yra neprivalomas */ ]);
}

Norėdami valdyti Alpine.js šalutinį poveikį, galite naudoti x efektas direktyva. Pavyzdžiui, tarkime, kad norite žiūrėti kintamąjį ir įrašyti reikšmę, kai tik jis pasikeičia:

<divx-duomenys="{numeris 1}"x efektas="console.log (numeris)">
<h1x-tekstas="skaičius">h1>
<mygtuką @spustelėkite="skaičius = skaičius + 1">Pridėti naują numerįmygtuką>
div>

Pirmas dalykas, kurį galite pastebėti, yra tai, kad jums nereikia nurodyti priklausomybės. Alpine tiesiog klausys visų perduotų kintamųjų pokyčių x efektas. The @spustelėkite direktyva padidina skaičiaus kintamąjį 1.

Sąlyginis atvaizdavimas Alpine.js

Elementų atvaizdavimas sąlygiškai yra kažkas, ką galite padaryti tokiose sistemose kaip „React“. Alpine.js taip pat leidžia sąlygiškai pateikti elementus. Tai suteikia an x-jei direktyvą ir specialųjį šabloną elementas, kurį galite naudoti sąlyginiam elementų atvaizdavimui.

Sukurkite kitą index.htm failą ir pridėkite tą patį pagrindinį kodą kaip ir anksčiau. Pridėkite šį kodą prie HTML turinio.

<divx-duomenys="{shown: true}">
<mygtuką @spustelėkite="parodyta=!parodyta"x-tekstas=“ parodyta? „Slėpti elementą“: „Rodyti elementą“>Perjungtimygtuką>
<šablonąx-jei="parodyta">
<div>Greita ruda lapė peršoko per šunį.div>
šabloną>
div>

The x-jei direktyva perduodama šabloną elementas. Tai svarbu, nes leidžia Alpine.js sekti elementą, kuris pridedamas arba pašalinamas iš puslapio. The šabloną elemente turi būti vienas šakninio lygio elementas; šis kodas pažeistų šią taisyklę:

<šablonąx-jei="parodyta">
<div>Šis elementas bus pateiktas puikiai.div>
<div>Alpine.js nepaisys šio elementodiv>
šabloną>

„To-Do“ programos kūrimas naudojant Alpine.js

Atėjo laikas sujungti viską, ko iki šiol išmokote, ir sukurti paprastą užduočių programą su vietinės saugyklos palaikymu. Pirmiausia sukurkite aplanką ir užpildykite jį a index.htm failas ir a stilius.css failą. Įtraukite pagrindinį kodą į index.htm failą ir įtraukite nuorodą į stilius.css failas:

<nuorodarel="stiliaus lapas"href="stilius.css">

Nesijaudinkite dėl CSS čia, tiesiog nukopijuokite stilius.css failą iš šio projekto GitHub saugykla.

Kad duomenys išliktų po puslapio įkėlimo iš naujo, jums reikia Alpine.js išsilaikyti Prijunkite. Pridėkite šio papildinio CDN versiją kaip a scenarijus žyma, tiesiai virš pagrindinės Alpine.js CDN versijos:

<scenarijusatidėtisrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">scenarijus>

Viduje kūnas apibrėžti a div elementas su an x-duomenys direktyva. Ši direktyva turėtų turėti masyvą, vadinamą visos užduotys. Tada pridėkite an h1 elementas su tekstu „To-Do Application“.

<divx-duomenys="{allTasks:$persist([])}">
<h1>Užduočių programah1>
div>

The $persist įskiepis yra įvynioklis, skirtas „JavaScript“ vietinė saugykla API. Tai nurodo naršyklei saugoti masyvą vietinėje saugykloje, kad duomenys išliktų nepažeisti net įkėlus puslapį iš naujo. Pridėti forma su Pateikti direktyvą, kuri taip pat neleidžia atlikti numatytojo pateikimo veiksmo.

<forma @pateikti.neleisti="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{užduotis: $refs.task.value.trim(), id: Date.now(), atlikta: false}].concat (visos užduotys)
: $refs.task.value.trim() '' 
? alert('Įvesties reikšmė negali būti tuščia')
: alert('Užduotis jau pridėta.');
 $refs.task.value=''
">
forma>

The $refs sąlyga leidžia pasiekti DOM elementą su užduotimi x-ref direktyva. Kodas taip pat tvarko tam tikrą patvirtinimą ir užtikrina, kad į sąrašą nebūtų įtraukta tuščių eilučių ar pasikartojančių užduočių. Prieš baigdami formą, pridėkite an įvestis elementas su an x-ref „užduotis“ ir vietos rezervavimo ženklas. Tada pridėkite mygtuką ir nustatykite jo tipą į „pateikti“.

<įvestistipo="tekstas"x-ref="užduotis">
<mygtukątipo="Pateikti">Pridėti užduotįmygtuką>

Tada apibrėžkite div su klase "elementai". Šiame div turi būti du kiti div elementai: vienas su x-duomenys nustatytas į „neužbaigtą“ masyvą, o kitas – į „užbaigtą“ masyvą. Abiejuose skyriuose turi būti x efektas direktyva, o masyvas turėtų būti suvyniotas į $persist sąlyga, kaip parodyta anksčiau.

<divklasė="daiktai">
<divx-duomenys="{uncompleted:$persist([])}"x efektas="neužbaigta = visosTasks.filter (x=>x.donefalse)">
div>

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

Pirmajame skyrelyje pridėkite an h3 žyma su tekstu „Neužbaigta“. Tada kiekvienam elementui nebaigtas masyvas, pateikti a div kuriame yra „valdikliai“ ir pati užduotis.

Valdikliai leidžia vartotojui ištrinti elementą arba pažymėti jį kaip užbaigtą:

<h3>Nebaigtash3>
<šablonąx-už=„elementas neužbaigtas“:Raktas="element.id">
<divx-duomenys=„{showControls: false}“ @užveskite pelės žymeklį="showControls = tiesa" @pele="showControls = false"
 class="užduotis"
 >
<divklasė="valdikliai">
<divx šou="showControls" @spustelėkite="element.done=true">[M]div>
<divx šou="showControls" @spustelėkite="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-tekstas="elementas.task" >div>
div>
šabloną>

Galite naudoti x-už direktyvą kartoti per masyvą ir pateikti elementus. Jis panašus į v-už Vue ir Array.map() masyvo metodas Reakcijoje. Dalyje „Controls“ yra du skyriai su eilute „[M]“ ir „[R]“. Šios eilutės reiškia „Pažymėti kaip atliktą“ ir „Pašalinti“. Jei norite, galite jas pakeisti tinkamomis piktogramomis.

The x šou direktyva nustato elementą ekranas CSS nuosavybė į nė vienas jei reikšmė, nurodanti direktyvą, yra klaidinga. Antrasis div skirsnyje „elementai“ yra panašus į pirmąjį, su keliomis pastebimomis išimtimis: The h3 tekstas nustatytas į „Užbaigtas“, „Control“ div pirmame antryje yra tekstas „[U]“, o ne „[M]“, o šio div @spustelėkite direktyva, elementas.atlikta yra nustatytas klaidinga.

<divx šou="showControls" @spustelėkite="element.done=false">[U]div>

Ir viskas, jūs peržvelgėte Alpine.js pagrindus ir panaudojote tai, ką išmokote kurdami pagrindinę užduočių programą.

Kaip palengvinti Alpine.js kodo rašymą

Kai pradedate rašyti Alpine.js kodą, gali būti sunku susigaudyti. Laimei, kodo rengyklės, tokios kaip „Visual Studio Code“, teikia daugybę plėtinių, kurie palengvina kūrimą.

Plėtinių prekyvietėje galite gauti Alpine.js IntelliSense plėtinį, kuris palengvina darbą su direktyvomis. Tai gali padėti pagerinti produktyvumą, kai projektuose naudojate Alpine.js.