Che cos'è Alpine.js e come si usa?

Il mondo dello sviluppo web è caotico: i framework entrano ed escono dall'esistenza e le cose possono essere travolgenti sia per gli sviluppatori nuovi che per quelli esperti.

A differenza della maggior parte dei framework di sviluppo Web, Alpine.js mira ad essere il più semplice possibile, ma abbastanza potente da gestire concetti come reattività ed effetti collaterali.

Iniziare con Alpine.js

Installare Alpine.js è abbastanza semplice. Devi solo includere quanto segue copione tag nel codice HTML:

<copionedifferiresrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">copione>

In alternativa, puoi installare Alpine.js nel tuo progetto utilizzando Node Package Manager:

npm installa alpinejs

Reattività in Alpine.js

Creare un indice.htm file e aggiungere il seguente codice boilerplate:

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8">
<metahttp-equiv="Compatibile con X-UA"contenuto="IE=bordo">





instagram viewer


<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0">
<titolo>Alpine.jstitolo>
Testa>
<corpo>
<copionedifferiresrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">copione>
corpo>
html>

IL differire attributo nel copione tag dice al browser di eseguire lo script solo dopo che ha finito di analizzare il documento.

Alpine.js fornisce diverse direttive come dati x che utilizza per memorizzare i dati e x-testo che usa per impostare innerText del componente annesso. Per utilizzare queste direttive, aggiungi il seguente codice al codice HTML.

<divdati x="{nome:'David Uzondu', organizzazione:'Fai uso di'}">
 Mi chiamo <fortex-testo="nome">forte>
 E <iox-testo="organizzazione">io> è fantastico
div>

La direttiva x-data memorizza un oggetto con le chiavi nome E organizzazione. È quindi possibile passare tali chiavi nella direttiva x-text. Quando esegui il codice, Alpine.js popolerà i valori:

Come Alpine.js confronta con React

Alpine.js è un framework leggero che lo rende adatto allo sviluppo di piccoli progetti e prototipi.

In framework più grandi come React, usi ganci come usaEffetto() per gestire gli effetti collaterali nel ciclo di vita del componente. Questo hook esegue una funzione di callback ogni volta che uno degli elementi dell'array di dipendenza cambia:

importare {useEffect} da"Reagire";
funzioneIl mio componente() {
 usaEffetto(() => {
/* La funzione di richiamata va qui */
 }, [ /* L'array di dipendenza è facoltativo */ ]);
}

Per gestire gli effetti collaterali in Alpine.js, puoi utilizzare il file effetto x direttiva. Ad esempio, supponiamo che tu voglia guardare una variabile e registrare il valore ogni volta che cambia:

<divdati x="{numero 1}"effetto x="console.log (numero)">
<h1x-testo="numero">h1>
<pulsante @clic="numero = numero + 1">Aggiungi nuovo numeropulsante>
div>

La prima cosa che potresti notare è che non è necessario specificare una dipendenza. Alpine ascolterà semplicemente i cambiamenti in tutte le variabili passate effetto x. IL @clic La direttiva incrementa la variabile numero di 1.

Rendering condizionale in Alpine.js

Rendering condizionale degli elementi è qualcosa che puoi fare in framework come React. Alpine.js consente inoltre di eseguire il rendering condizionale degli elementi. Fornisce un x-se direttiva e uno speciale modello elemento che è possibile utilizzare per il rendering condizionale degli elementi.

Creane un altro indice.htm file e aggiungere lo stesso codice boilerplate di prima. Aggiungere il codice seguente al corpo dell'HTML.

<divdati x="{mostrato: vero}">
<pulsante @clic="mostrato=!mostrato"x-testo="mostrato? 'Nascondi elemento': 'Mostra elemento'">Alternapulsante>
<modellox-se="mostrato">
<div>La veloce volpe bruna saltò sopra il cane.div>
modello>
div>

IL x-se la direttiva è passata al modello elemento. Questo è importante perché consente ad Alpine.js di tenere traccia di un elemento che viene aggiunto o rimosso dalla pagina. IL modello element dovrebbe contenere un elemento a livello di root; il seguente codice violerebbe tale regola:

<modellox-se="mostrato">
<div>Questo elemento sarà reso correttamente.div>
<div>Questo elemento verrà ignorato da Alpine.jsdiv>
modello>

Creazione di un'applicazione To-Do con Alpine.js

È giunto il momento di combinare tutto ciò che hai imparato finora e creare una semplice applicazione da fare con il supporto dell'archiviazione locale. Innanzitutto, crea una cartella e popolala con un file indice.htm file e un style.css file. Aggiungi il codice boilerplate nel file index.htm e includi un riferimento a style.css file:

<collegamentorel="foglio di stile"href="stile.css">

Non preoccuparti del CSS qui, basta copiare il file style.css file da questo repository GitHub del progetto.

Per rendere persistenti i dati dopo il ricaricamento della pagina, è necessario Alpine.js persistere collegare. Aggiungi la build CDN di questo plugin come a copione tag, appena sopra la build principale del CDN di Alpine.js:

<copionedifferiresrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">copione>

Nel corpo definire un div elemento con un dati x direttiva. Questa direttiva dovrebbe contenere un array chiamato allTask. Quindi, aggiungi un h1 elemento con il testo "Applicazione da fare".

<divdati x="{allTasks:$persist([])}">
<h1>Applicazione da fareh1>
div>

IL $ persistere plugin è un wrapper per il file Archiviazione locale JavaScript API. Indica al browser di archiviare l'array nella memoria locale, in modo che i dati rimangano intatti anche dopo il ricaricamento della pagina. Aggiungere un modulo con un invia direttiva che impedisce anche l'azione di invio predefinita.

<modulo @presentare.prevenire="
 ($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('Il valore inserito non può essere vuoto')
: alert('Attività già aggiunta.');
 $refs.task.value=''
">
modulo>

IL $rif la clausola consente l'accesso all'elemento DOM con il "task" x-rif direttiva. Il codice gestisce anche alcune convalide e garantisce che non aggiunga stringhe vuote o attività duplicate all'elenco. Prima di terminare il modulo, aggiungi un ingresso elemento con un x-rif di "attività" e un segnaposto. Quindi aggiungi un pulsante e imposta il suo tipo su "invia".

<ingressotipo="testo"x-rif="compito">
<pulsantetipo="invia">Aggiungi attivitàpulsante>

Successivamente, definisci un div con la classe "items". Questo div dovrebbe contenere altri due div: uno con il dati x impostato su un array "incompleto" e l'altro impostato su un array "completato". Entrambi i div dovrebbero avere un'estensione effetto x direttiva e l'array deve essere racchiuso nel file $ persistere clausola come mostrato in precedenza.

<divclasse="elementi">
<divdati x="{non completato:$persist([])}"effetto x="non completato = allTasks.filter (x=>x.donefalse)">
div>

<divdati x="{completato:$persist([])}"effetto x="completed=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

Nel primo div, aggiungi un h3 tag con il testo "Uncompleted". Quindi per ogni elemento in incompleto matrice, rendere a div che detiene i "controlli" e il compito stesso.

I controlli consentono all'utente di eliminare un elemento o contrassegnarlo come completato:

<h3>Incompletoh3>
<modellox-per="elemento incompleto":chiave="elemento.id">
<divdati x="{showControls: falso}" @passaggio del mouse="showControls = vero" @mouseout="showControls = falso"
 classe="attività"
 >
<divclasse="controlli">
<divx-show="mostraControlli" @clic="elemento.done=true">[M]div>
<divx-show="mostraControlli" @clic="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-testo="elemento.task" >div>
div>
modello>

Puoi usare il x-per direttiva per scorrere un array e rendere gli elementi. È simile a v-per in Vue e il Array.map() metodo di matrice in Reagire. Il div "controls" contiene due div con la stringa "[M]" e "[R]". Queste stringhe stanno per "Segna come completato" e "Rimuovi". Puoi sostituirli con icone appropriate se lo desideri.

IL x-show direttiva imposta un elemento Schermo Proprietà CSS a nessuno se il valore che punta alla direttiva è falso. Il secondo div nel div "items" è simile al primo con alcune notevoli eccezioni: The h3 text è impostato su "Completato", il primo figlio del div "controllo" ha il testo "[U]" invece di "[M]" e in questo div @clic direttiva, elemento.fatto è impostato per falso.

<divx-show="mostraControlli" @clic="elemento.done=falso">[U]div>

Ed è tutto, hai ripassato le basi di Alpine.js e utilizzato ciò che hai imparato per creare un'applicazione da fare di base.

Semplificare la scrittura del codice Alpine.js

Quando inizi a scrivere il codice Alpine.js, può essere difficile capire. Fortunatamente, gli editor di codice come Visual Studio Code forniscono un'ampia gamma di estensioni che semplificano lo sviluppo.

Nell'Extensions Marketplace, puoi ottenere l'estensione Alpine.js IntelliSense che semplifica il lavoro con le direttive. Questo può aiutarti a migliorare la tua produttività quando usi Alpine.js nei tuoi progetti.