Čo je Alpine.js a ako ho používate?

Svet vývoja webu je chaotický – rámce sa objavujú a zanikajú a veci môžu byť ohromujúce pre nových aj skúsených vývojárov.

Na rozdiel od väčšiny rámcov pre vývoj webových aplikácií sa Alpine.js snaží byť čo najjednoduchší, no zároveň dostatočne výkonný na to, aby si poradil s konceptmi ako reaktivita a vedľajšie účinky.

Začíname s Alpine.js

Inštalácia Alpine.js je celkom jednoduchá. Stačí uviesť nasledujúce skript tag vo vašom HTML:

<skriptodložiťsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">skript>

Alternatívne môžete do svojho projektu nainštalovať súbor Alpine.js pomocou správcu balíkov uzlov:

npm nainštalovať alpinejs

Reaktivita v Alpine.js

Vytvorte index.htm súbor a pridajte nasledujúci štandardný kód:

html>
<htmllang="sk">
<hlavu>
<metaznakovú sadu="UTF-8">
<metahttp-ekviv="X-UA-kompatibilné"obsahu="IE=okraj">
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0">





instagram viewer


<titul>Alpine.jstitul>
hlavu>
<telo>
<skriptodložiťsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">skript>
telo>
html>

The odložiť atribút v skript tag hovorí prehliadaču, aby spustil skript až po dokončení analýzy dokumentu.

Alpine.js poskytuje niekoľko smerníc, ako napr x-údaje ktoré používa na ukladanie údajov a x-text ktoré používa na nastavenie vnútornýText pripojeného komponentu. Ak chcete použiť tieto smernice, pridajte do svojho kódu HTML nasledujúci kód.

<divx-údaje="{name:'David Uzondu', organizácia:'Make Use Of'}">
 Moje meno je <silnýx-text="názov">silný>
 a <ix-text="Organizácia">i> to je úžasné
div>

Direktíva x-data ukladá objekt s kľúčmi názov a Organizácia. Tieto kľúče potom môžete odovzdať do direktívy x-text. Keď spustíte kód, Alpine.js vyplní hodnoty:

Ako sa Alpine.js porovnáva s React

Alpine.js je ľahký rámec, vďaka ktorému je vhodný na vývoj malých projektov a prototypov.

Vo väčších rámcoch, ako je React, používate háčiky ako useEffect() zvládnuť vedľajšie účinky v životnom cykle komponentov. Tento hák spustí funkciu spätného volania vždy, keď sa zmení jeden z prvkov poľa závislostí:

importovať {useEffect} od"Reagovať";
funkciuMyComponent() {
 useEffect(() => {
/* Tu je funkcia spätného volania */
 }, [ /* Pole závislostí je voliteľné */ ]);
}

Na zvládnutie vedľajších účinkov v Alpine.js môžete použiť x-efekt smernice. Povedzme napríklad, že chcete sledovať premennú a zaznamenať hodnotu vždy, keď sa zmení:

<divx-údaje="{číslo 1}"x-efekt="console.log (číslo)">
<h1x-text="číslo">h1>
<tlačidlo @kliknite="číslo = číslo + 1">Pridajte nové číslotlačidlo>
div>

Prvá vec, ktorú si môžete všimnúť, je, že nemusíte špecifikovať závislosť. Alpine bude jednoducho počúvať zmeny vo všetkých premenných x-efekt. The @klikni Direktíva zvyšuje premennú čísla o 1.

Podmienené vykresľovanie v Alpine.js

Podmienečné vykresľovanie prvkov je niečo, čo môžete robiť v rámcoch ako React. Alpine.js umožňuje aj podmienené vykresľovanie prvkov. Poskytuje x-ak smernicu a osobitnú šablóna prvok, ktorý môžete použiť na podmienené vykreslenie prvkov.

Vytvorte ďalší index.htm súbor a pridajte rovnaký štandardný kód ako predtým. Pridajte nasledujúci kód do tela HTML.

<divx-údaje="{show: true">
<tlačidlo @kliknite="zobrazené=!zobrazené"x-text="zobrazené? 'Hide Element': 'Show Element'“>Prepnúťtlačidlo>
<šablónax-ak="zobrazené">
<div>Rýchla hnedá líška preskočila psa.div>
šablóna>
div>

The x-ak smernica je odovzdaná do šablóna element. Je to dôležité, pretože to umožňuje Alpine.js sledovať prvok, ktorý sa pridáva alebo odstraňuje zo stránky. The šablóna prvok by mal obsahovať jeden prvok na koreňovej úrovni; nasledujúci kód by porušil toto pravidlo:

<šablónax-ak="zobrazené">
<div>Tento prvok bude vykreslený v pohode.div>
<div>Tento prvok bude Alpine.js ignorovaťdiv>
šablóna>

Vytváranie To-Do aplikácie pomocou Alpine.js

Je čas spojiť všetko, čo ste sa doteraz naučili, a vytvoriť jednoduchú aplikáciu s podporou lokálneho úložiska. Najprv vytvorte priečinok a vyplňte ho index.htm súbor a a style.css súbor. Pridajte štandardný kód do súboru index.htm a uveďte odkaz na súbor style.css súbor:

<odkazrel="štýlov"href="style.css">

Nerobte si starosti s CSS tu, len skopírujte style.css súbor z tohto úložisko GitHub projektu.

Ak chcete zachovať údaje po opätovnom načítaní stránky, potrebujete súbor Alpine.js pretrvávať zapojiť. Pridajte zostavu CDN tohto doplnku ako a skript tag tesne nad základnou zostavou CDN Alpine.js:

<skriptodložiťsrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">skript>

V telo definovať a div prvok s an x-údaje smernice. Táto direktíva by mala obsahovať pole tzv všetky úlohy. Potom pridajte h1 prvok s textom „To-Do Application“.

<divx-údaje="{allTasks:$persist([])}">
<h1>Aplikácia úlohh1>
div>

The $pretrvávať plugin je obal pre JavaScript localStorage API. Informuje prehliadač, aby uložil pole do lokálneho úložiska, takže údaje zostanú nedotknuté aj po opätovnom načítaní stránky. Pridaj formulár s Predložiť direktíva, ktorá tiež zabraňuje predvolenej akcii odoslania.

<formulár @predložiť.zabrániť="
 ($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('Vstupná hodnota nemôže byť prázdna')
: alert('Úloha už bola pridaná.');
 $refs.task.value=''
">
formulár>

The $refs klauzula umožňuje prístup k prvku DOM s "úlohou" x-ref smernice. Kód tiež spracováva určitú validáciu a zabezpečuje, že do zoznamu nepridáva prázdne reťazce ani duplicitné úlohy. Pred ukončením formulára pridajte vstup prvok s an x-ref "úloha" a zástupný symbol. Potom pridajte tlačidlo a nastavte jeho typ na „odoslať“.

<vstuptypu="text"x-ref="úloha">
<tlačidlotypu="Predložiť">Pridať úlohutlačidlo>

Ďalej definujte div s triedou "items". Tento div by mal obsahovať dva ďalšie divy: jeden s x-údaje nastavený na "nedokončené" pole a druhý nastavený na "dokončené" pole. Obidve divy by mali mať príponu x-efekt a pole by malo byť zabalené do $pretrvávať doložka, ako je uvedené vyššie.

<divtrieda="položky">
<divx-údaje="{uncompleted:$persist([])}"x-efekt="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

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

V prvom div, pridajte an h3 tag s textom „Nedokončené“. Potom pre každý prvok v nedokončené pole, render a div ktorá má „ovládacie prvky“ a samotnú úlohu.

Ovládacie prvky umožňujú používateľovi odstrániť položku alebo ju označiť ako dokončenú:

<h3>Nedokončenéh3>
<šablónax-pre="prvok je nedokončený":kľúč="element.id">
<divx-údaje="{showControls: false}" @prejdenie myšou="showControls = true" @mouseout="showControls = false"
 class="úloha"
 >
<divtrieda="ovládače">
<divx-show="showControls" @kliknite="element.done=true">[M]div>
<divx-show="showControls" @kliknite="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-text="element.task" >div>
div>
šablóna>

Môžete použiť x-pre direktíva na iteráciu cez pole a vykreslenie prvkov. Je to podobné ako v-pre vo Vue a Array.map() metóda poľa v React. Div "controls" obsahuje dve divs s reťazcom "[M]" a "[R]". Tieto reťazce znamenajú „Označiť ako hotové“ a „Odstrániť“. Ak chcete, môžete ich nahradiť správnymi ikonami.

The x-show smernica nastavuje prvok displej Vlastnosť CSS na žiadny ak je hodnota smerujúca k smernici nepravdivá. Druhý div v divi „položky“ je podobný prvému s niekoľkými významnými výnimkami: The h3 text je nastavený na "Dokončené", prvé potomstvo prvku "control" má namiesto "[M]" text "[U]" a v tomto prvku div @klikni smernica, prvok.hotový je nastavený na falošný.

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

A to je všetko, prešli ste si základy Alpine.js a to, čo ste sa naučili, ste použili na vytvorenie základnej aplikácie na úlohy.

Uľahčenie písania kódu Alpine.js

Keď začnete písať kód Alpine.js, môže byť ťažké zabaliť si hlavu. Našťastie editory kódu, ako je Visual Studio Code, poskytujú širokú škálu rozšírení, ktoré uľahčujú vývoj.

Na Extensions Marketplace môžete získať rozšírenie Alpine.js IntelliSense, ktoré uľahčuje prácu s direktívami. To môže pomôcť zlepšiť vašu produktivitu pri používaní Alpine.js vo vašich projektoch.