Ir daudz JavaScript ietvaru, taču Alpine vienkāršība un lietošanas vienkāršība padara to par lielisku kandidātu iesācējiem.

Tīmekļa izstrādes pasaule ir haotiska — ietvari parādās un izbeidzas, un lietas var būt satriecošas gan jauniem, gan pieredzējušiem izstrādātājiem.

Atšķirībā no vairuma tīmekļa izstrādes ietvaru, Alpine.js mērķis ir būt pēc iespējas vienkāršākam, tomēr pietiekami jaudīgam, lai tiktu galā ar tādiem jēdzieniem kā reaktivitāte un blakusparādības.

Darba sākšana ar Alpine.js

Alpine.js instalēšana ir pavisam vienkārša. Jums jāiekļauj tikai tālāk norādītā informācija skripts tagu savā HTML:

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

Varat arī instalēt Alpine.js savā projektā, izmantojot Node Package Manager:

npm install alpinejs

Reaktivitāte Alpine.js

Izveidojiet an index.htm failu un pievienojiet šādu standarta kodu:

html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8">
<metahttp-ekv="X-UA saderīgs"saturu="IE = mala">
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0">





instagram viewer



<virsraksts>Alpine.jsvirsraksts>
galvu>
<ķermeni>
<skriptsatliktsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">skripts>
ķermeni>
html>

The atlikt atribūts sadaļā skripts tags liek pārlūkprogrammai palaist skriptu tikai pēc tam, kad ir pabeigta dokumenta parsēšana.

Alpine.js nodrošina vairākas direktīvas, piemēram x-dati ko tā izmanto datu glabāšanai un x-teksts ko tā izmanto iestatīšanai iekšējaisTeksts pievienotās sastāvdaļas. Lai izmantotu šīs direktīvas, pievienojiet savam HTML kodam šādu kodu.

<divx-dati="{name:'David Uzondu', organizācija:'Make Use Of'}">
 Mani sauc <stiprsx-teksts="vārds">stiprs>
 un <ix-teksts="organizācija">i> ir lieliski
div>

X-data direktīva saglabā objektu ar atslēgām nosaukums un organizācija. Pēc tam šīs atslēgas varat nodot x-text direktīvā. Kad palaižat kodu, Alpine.js aizpildīs vērtības:

Kā Alpine.js salīdzina ar React

Alpine.js ir viegls ietvars, kas padara to piemērotu nelielu projektu un prototipu izstrādei.

Lielākos ietvaros, piemēram, React, jūs izmantojat āķi kā useEffect() lai novērstu blakusparādības komponenta dzīves ciklā. Šis āķis palaiž atzvanīšanas funkciju ikreiz, kad mainās kāds no atkarības masīva elementiem:

imports {useEffect} no"Reaģēt";
funkcijuMyComponent() {
 useEffect(() => {
/* Atzvanīšanas funkcija iet šeit */
 }, [ /* Atkarības masīvs nav obligāts */ ]);
}

Lai apstrādātu blakusparādības Alpine.js, varat izmantot x-efekts direktīva. Piemēram, pieņemsim, ka vēlaties skatīties mainīgo un reģistrēt vērtību ikreiz, kad tas mainās:

<divx-dati="{number: 1}"x-efekts="console.log (numurs)">
<h1x-teksts="numurs">h1>
<pogu @klikšķis="skaitlis = cipars + 1">Pievienojiet jaunu numurupogu>
div>

Pirmā lieta, ko jūs varētu pamanīt, ir tā, ka jums nav jānorāda atkarība. Alpine vienkārši uzklausīs izmaiņas visos mainīgajos, kas tiek nodoti x-efekts. The @klikšķis direktīva palielina skaitļa mainīgo par 1.

Nosacītā renderēšana programmā Alpine.js

Elementu atveidošana nosacīti ir kaut kas tāds, ko varat darīt tādās sistēmās kā React. Alpine.js ļauj arī nosacīti renderēt elementus. Tas nodrošina an x-ja direktīva un īpaša veidne elements, ko varat izmantot, lai nosacīti renderētu elementus.

Izveidojiet citu index.htm failu un pievienojiet to pašu standarta kodu kā iepriekš. Pievienojiet HTML pamattekstam šādu kodu.

<divx-dati="{shown: true}">
<pogu @klikšķis="parādīts=!parādīts"x-teksts="parādīts? "Slēpt elementu": "Rādīt elementu"">Pārslēgtpogu>
<veidnex-ja="parādīts">
<div>Ātrā brūnā lapsa pārlēca suni.div>
veidne>
div>

The x-ja direktīva tiek nodota veidne elements. Tas ir svarīgi, jo tas ļauj Alpine.js izsekot elementam, kas tiek pievienots vai noņemts no lapas. The veidne elementam jāsatur viens saknes līmeņa elements; šāds kods pārkāptu šo noteikumu:

<veidnex-ja="parādīts">
<div>Šis elements tiks atveidots lieliski.div>
<div>Alpine.js ignorēs šo elementudiv>
veidne>

To-Do lietojumprogrammas izveide, izmantojot Alpine.js

Ir pienācis laiks apvienot visu, ko esat iemācījies līdz šim, un izveidot vienkāršu uzdevumu lietojumprogrammu ar vietējās krātuves atbalstu. Vispirms izveidojiet mapi un aizpildiet to ar index.htm fails un a stils.css failu. Pievienojiet standarta kodu failam index.htm un iekļaujiet atsauci uz stils.css fails:

<saiterel="stila lapa"href="stils.css">

Neuztraucieties par CSS šeit, vienkārši nokopējiet stils.css failu no šī projekta GitHub repozitorijs.

Lai saglabātu datus pēc lapas atkārtotas ielādes, ir nepieciešams Alpine.js pastāvēt iespraust. Pievienojiet šī spraudņa CDN versiju kā a skripts tagu, kas atrodas tieši virs Alpine.js CDN pamata uzbūves:

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

Iekš ķermeni definēt a div elements ar x-dati direktīva. Šai direktīvai vajadzētu saturēt masīvu ar nosaukumu visi uzdevumi. Pēc tam pievienojiet an h1 elements ar tekstu "To-Do Application".

<divx-dati="{allTasks:$persist([])}">
<h1>Lietojumprogrammah1>
div>

The $paturēties spraudnis ir iesaiņojums JavaScript vietējā krātuve API. Tas liek pārlūkprogrammai saglabāt masīvu vietējā krātuvē, lai dati paliktu neskarti pat pēc lapas atkārtotas ielādes. Pievienojiet a formā ar Iesniegt direktīva, kas arī novērš noklusējuma iesniegšanas darbību.

<formā @iesniegt.novērst="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{uzdevums: $refs.task.value.trim(), id: Date.now(), pabeigts: false}].concat (visiuzdevumi)
: $refs.task.value.trim() '' 
? brīdinājums ('Ievades vērtība nevar būt tukša')
: alert('Uzdevums jau ir pievienots.');
 $refs.task.value=''
">
formā>

The $refs klauzula ļauj piekļūt DOM elementam ar "uzdevumu" x-ref direktīva. Kods arī apstrādā noteiktu validāciju un nodrošina, ka tas sarakstam nepievieno tukšas virknes vai nedublē uzdevumus. Pirms veidlapas pabeigšanas pievienojiet an ievade elements ar x-ref no "uzdevuma" un vietturi. Pēc tam pievienojiet pogu un iestatiet tās veidu uz "iesniegt".

<ievadeveids="teksts"x-ref="uzdevums">
<poguveids="Iesniegt">Pievienot uzdevumupogu>

Pēc tam definējiet div ar klasi "vienumi". Šajā div ir jāietver divi citi divi elementi: viens ar x-dati iestatīts uz "nepabeigtu" masīvu un otrs iestatīts uz "pabeigtu" masīvu. Abos divos ir jābūt x-efekts direktīva un masīvs ir jāiesaiņo $paturēties klauzula, kā parādīts iepriekš.

<divklasē="preces">
<divx-dati="{uncompleted:$persist([])}"x-efekts="nepabeigts = allTasks.filter (x=>x.donefalse)">
div>

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

Pirmajā daļā pievienojiet an h3 tagu ar tekstu "Nepabeigts". Pēc tam katram elementam nepabeigts masīvs, renderē a div kas satur "vadību" un pašu uzdevumu.

Vadības ierīces ļauj lietotājam izdzēst vienumu vai atzīmēt to kā pabeigtu:

<h3>Nepabeigtsh3>
<veidnex-par="elements ir nepabeigts":atslēga="element.id">
<divx-dati="{showControls: false}" @kursoru="showControls = patiess" @peles izslēgšana="showControls = false"
 class="task"
 >


<divklasē="kontrole">
<divx-šovs="showControls" @klikšķis="element.done=true">[M]div>
<divx-šovs="showControls" @klikšķis="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-teksts="element.task" >div>
div>
veidne>

Jūs varat izmantot x-par direktīvu, lai iterētu caur masīvu un renderēšanas elementiem. Tas ir līdzīgs v-par Vue un Array.map() masīva metode sadaļā Reakt. "Vadības" div ir divi divi ar virkni "[M]" un "[R]". Šīs virknes apzīmē "Atzīmēt kā pabeigtu" un "Noņemt". Ja vēlaties, varat tās aizstāt ar atbilstošām ikonām.

The x-šovs direktīva nosaka elementu displejs CSS īpašums uz neviens ja vērtība, kas norāda uz direktīvu, ir nepatiesa. Otrais dalījums “preces” ir līdzīgs pirmajam ar dažiem ievērojamiem izņēmumiem: The h3 teksts ir iestatīts uz "Pabeigts", elementa "control" pirmajam atvasinājumam ir teksts "[U]", nevis "[M]", un šajā div daļā @klikšķis direktīva, elements.darīts ir iestatīts uz viltus.

<divx-šovs="showControls" @klikšķis="element.done=false">[U]div>

Un tas arī viss. Jūs esat apguvis Alpine.js pamatus un izmantojis apgūto, lai izveidotu pamata uzdevumu lietojumprogrammu.

Alpine.js koda rakstīšanas atvieglošana

Kad sākat rakstīt Alpine.js kodu, var būt grūti aptīt galvu. Par laimi koda redaktori, piemēram, Visual Studio Code, nodrošina plašu paplašinājumu klāstu, kas atvieglo izstrādi.

Paplašinājumu tirgū varat iegūt Alpine.js IntelliSense paplašinājumu, kas atvieglo darbu ar direktīvām. Tas var palīdzēt uzlabot jūsu produktivitāti, savos projektos izmantojot Alpine.js.