Hvad er Alpine.js, og hvordan bruger du det?

Verden af ​​webudvikling er kaotisk – rammer dukker ind og ud af eksistensen, og tingene kan være overvældende for både nye og erfarne udviklere.

I modsætning til de fleste webudviklingsrammer sigter Alpine.js efter at være så simpelt som muligt, men alligevel kraftfuldt nok til at håndtere begreber som reaktivitet og bivirkninger.

Kom godt i gang med Alpine.js

Installation af Alpine.js er ret simpelt. Du behøver kun at inkludere følgende manuskript tag i din HTML:

<manuskriptudsættesrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">manuskript>

Alternativt kan du installere Alpine.js i dit projekt ved hjælp af Node Package Manager:

npm installere alpinejs

Reaktivitet i Alpine.js

Opret en index.htm fil og tilføj følgende kedelkode:

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8">
<metahttp-ækvivalent="X-UA-kompatibel"indhold="IE=kant">
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0">





instagram viewer


<titel>Alpine.jstitel>
hoved>
<legeme>
<manuskriptudsættesrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">manuskript>
legeme>
html>

Det udsætte attribut i manuskript tag fortæller browseren, at den først skal køre scriptet, når det er færdig med at parse dokumentet.

Alpine.js giver flere direktiver som x-data som den bruger til at gemme data og x-tekst som den bruger til at indstille indreTekst af den vedhæftede komponent. For at bruge disse direktiver skal du tilføje følgende kode til din HTML.

<divx-data="{navn:'David Uzondu', organisation:'Gør brug af'}">
 Mit navn er <stærkx-tekst="navn">stærk>
 og <jegx-tekst="organisation">jeg> er sej
div>

x-data-direktivet gemmer et objekt med tasterne navn og organisation. Du kan derefter overføre disse nøgler til x-text-direktivet. Når du kører koden, vil Alpine.js udfylde værdierne:

Hvordan Alpine.js sammenligner med React

Alpine.js er en letvægtsramme, som gør den velegnet til udvikling af små projekter og prototyper.

I større rammer som React bruger du kroge som useEffect() at håndtere bivirkninger i komponentens livscyklus. Denne hook kører en tilbagekaldsfunktion, når et af elementerne i afhængighedsarrayet ændres:

importere {useEffect} fra"Reagere";
fungereMyComponent() {
 useEffect(() => {
/* Tilbagekaldsfunktionen går her */
 }, [ /* Afhængighedsmatrixen er valgfri */ ]);
}

For at håndtere bivirkninger i Alpine.js kan du bruge x-effekt direktiv. Lad os f.eks. sige, at du vil se en variabel og logge værdien, når den ændres:

<divx-data="{nummer 1}"x-effekt="console.log (nummer)">
<h1x-tekst="nummer">h1>
<knap @klik="tal = tal + 1">Tilføj nyt nummerknap>
div>

Det første, du måske bemærker, er, at du ikke behøver at angive en afhængighed. Alpine vil blot lytte efter ændringer i alle de variabler, der sendes til x-effekt. Det @klik direktiv øger talvariablen med 1.

Betinget gengivelse i Alpine.js

Gengivelse af elementer betinget er noget du kan gøre i rammer som React. Alpine.js giver dig også mulighed for betinget gengivelse af elementer. Det giver en x-hvis direktiv og et særligt skabelon element, som du kan bruge til betinget gengivelse af elementer.

Opret en anden index.htm fil og tilføj den samme boilerplate-kode som før. Tilføj følgende kode til HTML-teksten.

<divx-data="{vist: sand}">
<knap @klik="vist=!vist"x-tekst="vist? 'Skjul element': 'Vis element'">Skiftknap>
<skabelonx-hvis="vist">
<div>Den hurtige brune ræv sprang over hunden.div>
skabelon>
div>

Det x-hvis direktiv videregives til skabelon element. Dette er vigtigt, fordi det giver Alpine.js mulighed for at holde styr på et element, der tilføjes eller fjernes fra siden. Det skabelon element skal indeholde et element på rodniveau; følgende kode ville overtræde denne regel:

<skabelonx-hvis="vist">
<div>Dette element vil blive gengivet fint.div>
<div>Dette element vil blive ignoreret af Alpine.jsdiv>
skabelon>

Opbygning af en To-Do-applikation med Alpine.js

Det er tid til at kombinere alt det, du har lært indtil nu, og bygge en enkel opgave-applikation med lokal lagerunderstøttelse. Først skal du oprette en mappe og udfylde den med en index.htm fil og en style.css fil. Tilføj boilerplate-koden til index.htm-filen og medtag en reference til style.css fil:

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

Du skal ikke bekymre dig om CSS her, bare kopiere style.css fil fra denne projektets GitHub-depot.

For at bevare data efter genindlæsning af siden skal du bruge Alpine.js blive ved plugin. Tilføj CDN build af dette plugin som en manuskript tag, lige over Alpine.js CDN-kernebygningen:

<manuskriptudsættesrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">manuskript>

I den legeme definere en div element med en x-data direktiv. Dette direktiv bør indeholde et array kaldet alle opgaver. Tilføj derefter en h1 element med teksten "To-Do Application".

<divx-data="{allTasks:$persist([])}">
<h1>To-do-applikationh1>
div>

Det $vedvare plugin er en indpakning til JavaScript localStorage API. Den fortæller browseren, at den skal gemme arrayet i lokalt lager, så data forbliver intakte selv efter genindlæsning af siden. Tilføj en form med en Indsend direktiv, der også forhindrer standardindsendelseshandlingen.

<form @indsende.forhindre="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{opgave: $refs.task.value.trim(), id: Date.now(), udført: falsk}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('Inputværdi kan ikke være tom')
: alert('Opgaven er allerede tilføjet.');
 $refs.task.value=''
">
form>

Det $refs klausul giver adgang til DOM-elementet med "opgaven" x-ref direktiv. Koden håndterer også en vis validering og sikrer, at den ikke tilføjer tomme strenge eller dublerede opgaver til listen. Inden du afslutter formularen, skal du tilføje en input element med en x-ref af "opgave" og en pladsholder. Tilføj derefter en knap og indstil dens type til "send".

<inputtype="tekst"x-ref="opgave">
<knaptype="Indsend">Tilføj opgaveknap>

Dernæst skal du definere en div med klassen "genstande". Denne div skal indeholde to andre divs: en med x-data sat til et "ufuldført" array og det andet indstillet til et "fuldført" array. Begge div'er skal have en x-effekt direktivet, og arrayet skal pakkes ind i $vedvare klausul som vist tidligere.

<divklasse="genstande">
<divx-data="{uncompleted:$persist([])}"x-effekt="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

<divx-data="{completed:$persist([])}"x-effekt="completed=all Tasks.filter (y=>y.donetrue).reverse()">
div>
div>

I den første div tilføjes en h3 tag med teksten "Ufuldført". Derefter for hvert element i ufuldendt matrix, gengive en div der rummer "kontrollerne" og selve opgaven.

Kontrolelementerne giver brugeren mulighed for at slette et element eller markere det som afsluttet:

<h3>Ikke fuldførth3>
<skabelonx-for="element i ufuldendt":nøgle="element.id">
<divx-data="{showControls: false}" @mus over="showControls = sand" @museud="showControls = falsk"
 class="opgave"
 >
<divklasse="kontroller">
<divx-show="showControls" @klik="element.done=true">[M]div>
<divx-show="showControls" @klik="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-tekst="element.task" >div>
div>
skabelon>

Du kan bruge x-for direktiv om at iterere gennem et array og gengive elementer. Det ligner v-for i Vue og den Array.map() array metode i React. "Control" div'en indeholder to div'er med strengen "[M]" og "[R]". Disse strenge står for "Mark as done" og "Remove". Du kan erstatte disse med de rigtige ikoner, hvis du ønsker det.

Det x-show direktiv sætter et element Skærm CSS ejendom til ingen hvis værdien, der peger på direktivet, er falsk. Den anden div i "varer" div ligner den første med nogle få bemærkelsesværdige undtagelser: Den h3 tekst er sat til "Completed", "kontrol" div'ens første barn har teksten "[U]" i stedet for "[M]" og i denne div's @klik direktiv, element.færdig er indstillet til falsk.

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

Og det er det, du har gennemgået det grundlæggende i Alpine.js og brugt det, du har lært, til at oprette en grundlæggende to-do-applikation.

Gør Alpine.js-koden nemmere at skrive

Når du begynder at skrive Alpine.js-kode, kan det være svært at pakke hovedet rundt. Heldigvis giver kodeeditorer som Visual Studio Code en bred vifte af udvidelser, der gør udvikling lettere.

I Extensions Marketplace kan du få Alpine.js IntelliSense-udvidelsen, som gør det nemmere at arbejde med direktiver. Dette kan hjælpe med at forbedre din produktivitet, når du bruger Alpine.js i dine projekter.