Ce este Alpine.js și cum îl folosiți?

Lumea dezvoltării web este haotică – cadrele apar și ies din existență, iar lucrurile pot fi copleșitoare atât pentru dezvoltatorii noi, cât și pentru cei experimentați.

Spre deosebire de majoritatea cadrelor de dezvoltare web, Alpine.js își propune să fie cât mai simplu posibil, dar suficient de puternic pentru a face față unor concepte precum reactivitate și efecte secundare.

Noțiuni introductive cu Alpine.js

Instalarea Alpine.js este destul de simplă. Trebuie doar să includeți următoarele scenariu eticheta în HTML:

<scenariuamânasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">scenariu>

Alternativ, puteți instala Alpine.js în proiectul dvs. folosind Node Package Manager:

npm instalează alpinejs

Reactivitate în Alpine.js

Creaza un index.htm fișier și adăugați următorul cod standard:

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8”>





instagram viewer


<metahttp-echiv=„Compatibil X-UA”conţinut=„IE=margine”>
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0”>
<titlu>Alpine.jstitlu>
cap>
<corp>
<scenariuamânasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">scenariu>
corp>
html>

The amâna atribut în scenariu eticheta îi spune browserului să ruleze scriptul numai după ce a terminat de analizat documentul.

Alpine.js oferă mai multe directive precum x-date pe care le folosește pentru a stoca date și x-text pe care îl folosește pentru a seta innerText a componentei atașate. Pentru a utiliza aceste directive, adăugați următorul cod la HTML.

<divx-date=„{name:’David Uzondu’, organisation:’Make Use Of’}”>
 Numele meu este <puternicx-text="Nume">puternic>
 și <ix-text="organizare">i> este minunat
div>

Directiva x-data stochează un obiect cu cheile Nume și organizare. Apoi puteți trece acele chei în directiva x-text. Când rulați codul, Alpine.js va popula valorile:

Cum se compară Alpine.js cu React

Alpine.js este un cadru ușor, care îl face potrivit pentru dezvoltarea de proiecte mici și prototipuri.

În cadre mai mari, cum ar fi React, utilizați cârlige ca useEffect() pentru a gestiona efectele secundare din ciclul de viață al componentelor. Acest cârlig rulează o funcție de apel invers ori de câte ori se modifică unul dintre elementele matricei de dependențe:

import {useEffect} din"Reacţiona";
funcţieMyComponent() {
 useEffect(() => {
/* Funcția de apel invers merge aici */
 }, [ /* Matricea de dependențe este opțională */ ]);
}

Pentru a gestiona efectele secundare în Alpine.js, puteți utiliza efect x directivă. De exemplu, să presupunem că doriți să urmăriți o variabilă și să înregistrați valoarea ori de câte ori se modifică:

<divx-date="{Numărul 1}"efect x=„console.log (număr)”>
<h1x-text="număr">h1>
<buton @clic=„număr = număr + 1”>Adăugați un număr noubuton>
div>

Primul lucru pe care îl puteți observa este că nu trebuie să specificați o dependență. Alpine va asculta pur și simplu modificările tuturor variabilelor cărora le-a fost transmis efect x. The @clic directiva incrementează variabila număr cu 1.

Redare condiționată în Alpine.js

Redarea elementelor condiționat este ceva ce poți face în cadre precum React. Alpine.js vă permite, de asemenea, să randați elementele condiționat. Oferă un x-daca directivă și o specială șablon element pe care îl puteți utiliza pentru a reda elementele condiționat.

Creați altul index.htm fișier și adăugați același cod standard ca înainte. Adăugați următorul cod în corpul HTML.

<divx-date=„{afișat: adevărat}”>
<buton @clic="afisat=!afisat"x-text="afișate? „Ascunde elementul”: „Afișează elementul””>Comutarebuton>
<șablonx-daca="afișate">
<div>Vulpea maro iute a sărit peste câine.div>
șablon>
div>

The x-daca directiva este transmisă către șablon element. Acest lucru este important deoarece permite Alpine.js să țină evidența unui element care este adăugat sau eliminat din pagină. The șablon elementul ar trebui să conțină un element la nivel de rădăcină; următorul cod ar încălca această regulă:

<șablonx-daca="afișate">
<div>Acest element va fi redat foarte bine.div>
<div>Acest element va fi ignorat de Alpine.jsdiv>
șablon>

Crearea unei aplicații de făcut cu Alpine.js

Este timpul să combinați tot ce ați învățat până acum și să construiți o aplicație simplă de făcut cu suport pentru stocarea locală. Mai întâi, creați un folder și completați-l cu un index.htm dosar și a stil.css fişier. Adăugați codul standard în fișierul index.htm și includeți o referință la stil.css fişier:

<legăturărel="foaia de stil"href=„style.css”>

Nu vă faceți griji pentru CSS aici, doar copiați stil.css dosar din aceasta depozitul GitHub al proiectului.

Pentru a persista datele după reîncărcarea paginii, aveți nevoie de Alpine.js persista conecteaza. Adăugați versiunea CDN a acestui plugin ca a scenariu eticheta, chiar deasupra versiunii de bază CDN Alpine.js:

<scenariuamânasrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">scenariu>

În corp definiți a div element cu an x-date directivă. Această directivă ar trebui să dețină o matrice numită toate Sarcinile. Apoi, adăugați un h1 element cu textul „To-Do Application”.

<divx-date=„{allTasks:$persist([])}”>
<h1>Aplicație de făcuth1>
div>

The $persist pluginul este un wrapper pentru JavaScript localStorage API. Spune browserului să stocheze matricea în stocarea locală, astfel încât datele să rămână intacte chiar și după reîncărcarea paginii. Adauga o formă cu Trimite directivă care împiedică, de asemenea, acțiunea de trimitere implicită.

<formă @depune.preveni="
 ($refs.task.value.trim().lungime && !allTasks.map (x=>x.task).include($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id: Date.now(), done: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('Valoarea de intrare nu poate fi goală')
: alert('Sarcina adăugată deja.');
 $refs.task.value=''
">
formă>

The $ref clauza permite accesul la elementul DOM cu „sarcina” x-ref directivă. Codul se ocupă, de asemenea, de o anumită validare și se asigură că nu adaugă șiruri goale sau sarcini duplicate în listă. Înainte de a încheia formularul, adăugați un intrare element cu an x-ref de „sarcină” și un substituent. Apoi adăugați un buton și setați tipul acestuia la „trimite”.

<intraretip="text"x-ref="sarcină">
<butontip="Trimite">Adăugați o sarcinăbuton>

Apoi, definiți un div cu clasa „articole”. Acest div ar trebui să conțină alte două div-uri: unul cu x-date setată la o matrice „necompletate”, iar cealaltă setată la o matrice „finalizată”. Ambele div-uri ar trebui să aibă un efect x directiva și matricea ar trebui să fie înfășurate în $persist clauză așa cum a fost arătat mai devreme.

<divclasă="articole">
<divx-date=„{uncompleted:$persist([])}”efect x=„uncompleted = allTasks.filter (x => x.donefalse)”>
div>

<divx-date=„{completed:$persist([])}”efect x=„completed=allTasks.filter (y=>y.donetrue).reverse()”>
div>
div>

În prima div, adăugați un h3 etichetă cu textul „Nefinalizat”. Apoi, pentru fiecare element din nefinalizat matrice, redare a div care deține „controalele” și sarcina în sine.

Controalele permit utilizatorului să șteargă un articol sau să-l marcheze ca finalizat:

<h3>Nefinalizath3>
<șablonx-pentru=„element în nefinalizat”:cheie=„element.id”>
<divx-date=„{showControls: false}” @mouse-ul peste=„showControls = adevărat” @mouseout=„showControls = fals”
 class="sarcină"
 >
<divclasă="controale">
<divx-show=„showControls” @clic=„element.done=true”>[M]div>
<divx-show=„showControls” @clic=„allTasks=allTasks.filter (x=>x.id!==element.id)”>[R]div>
div>
<divx-text=„element.sarcină” >div>
div>
șablon>

Puteți folosi x-pentru directivă pentru a itera printr-o matrice și a reda elemente. Este similar cu v-pentru în Vue și Array.map() metoda matricei în React. Div-ul „controls” conține două div-uri cu șirul „[M]” și „[R]”. Aceste șiruri reprezintă „Marcați ca terminat” și „Eliminați”. Puteți înlocui acestea cu pictograme adecvate dacă doriți.

The x-show directiva stabilește un element afişa Proprietatea CSS către nici unul dacă valoarea care indică directivă este falsă. Al doilea div din div-ul „articole” este similar cu primul, cu câteva excepții notabile: h3 textul este setat la „Terminat”, primul copil al div-ului „control” are textul „[U]” în loc de „[M]” și în acest div. @clic directivă, element.realizat este setat sa fals.

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

Și gata, ați trecut peste elementele de bază ale Alpine.js și ați folosit ceea ce ați învățat pentru a crea o aplicație de bază de lucru.

Codul Alpine.js este mai ușor de scris

Când începeți să scrieți codul Alpine.js, poate fi dificil să vă gândiți. Din fericire, editorii de cod precum Visual Studio Code oferă o gamă largă de extensii care facilitează dezvoltarea.

În Extensions Marketplace, puteți obține extensia Alpine.js IntelliSense, care face mai ușor să lucrați cu directive. Acest lucru vă poate ajuta să vă îmbunătățiți productivitatea atunci când utilizați Alpine.js în proiectele dvs.