Co je Alpine.js a jak jej používáte?

Svět vývoje webu je chaotický – rámce se objevují a zanikají a věci mohou být ohromující pro nové i zkušené vývojáře.

Na rozdíl od většiny frameworků pro vývoj webu se Alpine.js snaží být co nejjednodušší, ale zároveň dostatečně výkonný, aby se vypořádal s koncepty, jako je reaktivita a vedlejší účinky.

Začínáme s Alpine.js

Instalace Alpine.js je docela jednoduchá. Stačí uvést následující skript tag ve vašem HTML:

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

Alternativně můžete Alpine.js nainstalovat do svého projektu pomocí Node Package Manager:

npm nainstalovat alpinejs

Reaktivita v Alpine.js

Vytvořit index.htm soubor a přidejte následující standardní kód:

html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8">
<metahttp-ekviv="X-UA-kompatibilní"obsah="IE=hrana">
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0">





instagram viewer


<titul>Alpine.jstitul>
hlava>
<tělo>
<skriptodložitsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">skript>
tělo>
html>

The odložit atribut v skript tag říká prohlížeči, aby spustil skript až po dokončení analýzy dokumentu.

Alpine.js poskytuje několik direktiv, jako je x-data které používá k ukládání dat a x-text které používá k nastavení vnitřníText připojené součásti. Chcete-li použít tyto direktivy, přidejte do kódu HTML následující kód.

<divx-data="{name:'David Uzondu', organizace:'Make Use Of'}">
 Jmenuji se <silnýx-text="název">silný>
 a <ix-text="organizace">i> je úžasný
div>

Direktiva x-data ukládá objekt s klíči název a organizace. Tyto klíče pak můžete předat do direktivy x-text. Když spustíte kód, Alpine.js naplní hodnoty:

Jak se Alpine.js srovnává s React

Alpine.js je odlehčený framework, díky kterému je vhodný pro vývoj malých projektů a prototypů.

Ve větších rámcích, jako je React, používáte háčky jako useEffect() ke zvládnutí vedlejších účinků v životním cyklu součásti. Tento hák spustí funkci zpětného volání, kdykoli se změní jeden z prvků pole závislostí:

import {useEffect} z"Reagovat";
funkceMyComponent() {
 useEffect(() => {
/* Sem jde funkce zpětného volání */
 }, [ /* Pole závislostí je volitelné */ ]);
}

Chcete-li zvládnout vedlejší účinky v Alpine.js, můžete použít x-efekt směrnice. Řekněme například, že chcete sledovat proměnnou a zaznamenávat hodnotu, kdykoli se změní:

<divx-data="{číslo 1}"x-efekt="console.log (číslo)">
<h1x-text="číslo">h1>
<knoflík @klikněte="číslo = číslo + 1">Přidat nové čísloknoflík>
div>

První věc, které si můžete všimnout, je, že nemusíte specifikovat závislost. Alpine bude jednoduše poslouchat změny ve všech předávaných proměnných x-efekt. The @klikněte směrnice zvýší proměnnou číslo o 1.

Podmíněné vykreslování v Alpine.js

Vykreslování prvků podmíněně je něco, co můžete dělat ve frameworkech jako React. Alpine.js také umožňuje podmíněné vykreslování prvků. Poskytuje x-jestliže směrnice a zvláštní šablona prvek, který můžete použít k podmíněnému vykreslení prvků.

Vytvořte další index.htm soubor a přidejte stejný standardní kód jako dříve. Přidejte následující kód do těla HTML.

<divx-data="{show: true">
<knoflík @klikněte="zobrazeno=!zobrazeno"x-text="zobrazeno? 'Hide Element': 'Show Element'">Přepnoutknoflík>
<šablonax-jestliže="zobrazeno">
<div>Rychlá hnědá liška přeskočila psa.div>
šablona>
div>

The x-jestliže směrnice je předána do šablona živel. To je důležité, protože to umožňuje Alpine.js sledovat prvek, který se přidává nebo odebírá ze stránky. The šablona prvek by měl obsahovat jeden prvek na kořenové úrovni; následující kód by toto pravidlo porušil:

<šablonax-jestliže="zobrazeno">
<div>Tento prvek bude vykreslen v pořádku.div>
<div>Tento prvek bude Alpine.js ignorovatdiv>
šablona>

Vytváření To-Do aplikace pomocí Alpine.js

Je čas zkombinovat vše, co jste se dosud naučili, a vytvořit jednoduchou úkolovou aplikaci s podporou místního úložiště. Nejprve vytvořte složku a naplňte ji příponou index.htm soubor a styl.css soubor. Přidejte standardní kód do souboru index.htm a zahrňte odkaz na styl.css soubor:

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

Nedělejte si starosti s CSS zde, pouze zkopírujte styl.css soubor z tohoto úložiště GitHub projektu.

Chcete-li zachovat data po opětovném načtení stránky, potřebujete soubor Alpine.js vytrvat zapojit. Přidejte sestavení CDN tohoto pluginu jako a skript značka těsně nad základní sestavou CDN Alpine.js:

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

V tělo definovat a div prvek s an x-data směrnice. Tato direktiva by měla obsahovat pole nazvané všechny úkoly. Poté přidejte h1 prvek s textem "To-Do Application".

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

The $perist plugin je obal pro JavaScript localStorage API. Řekne prohlížeči, aby uložil pole do místního úložiště, takže data zůstanou nedotčená i po opětovném načtení stránky. Přidat formulář s Předložit direktiva, která také zabraňuje výchozí akci odeslání.

<formulář @předložit.zabránit="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id: Date.now(), hotovo: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('Vstupní hodnota nemůže být prázdná')
: alert('Úkol již přidán.');
 $refs.task.value=''
">
formulář>

The $refs klauzule umožňuje přístup k prvku DOM s "úkolem" x-ref směrnice. Kód také zpracovává určité ověření a zajišťuje, že do seznamu nepřidá prázdné řetězce nebo duplicitní úkoly. Před ukončením formuláře přidejte an vstup prvek s an x-ref "úkol" a zástupný symbol. Poté přidejte tlačítko a nastavte jeho typ na „odeslat“.

<vstuptyp="text"x-ref="úkol">
<knoflíktyp="Předložit">Přidat úkolknoflík>

Dále definujte div s třídou "items". Tento div by měl obsahovat dva další divy: jeden s x-data nastaveno na pole "nedokončené" a druhé na pole "dokončeno". Oba divy by měly mít x-efekt direktiva a pole by mělo být zabaleno do $perist doložka, jak je uvedeno výše.

<divtřída="položky">
<divx-data="{uncompleted:$persist([])}"x-efekt="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

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

V prvním divu přidejte an h3 tag s textem "Nedokončeno". Pak pro každý prvek v nedokončené pole, render a div která drží „ovládání“ a samotný úkol.

Ovládací prvky umožňují uživateli odstranit položku nebo ji označit jako dokončenou:

<h3>Nedokončenoh3>
<šablonax-pro="prvek v nedokončeném":klíč="element.id">
<divx-data="{showControls: false}" @přejet myší="showControls = true" @mouseout="showControls = false"
 class="úloha"
 >
<divtřída="řízení">
<divx-show="showControls" @klikněte="element.done=true">[M]div>
<divx-show="showControls" @klikněte="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-text="element.task" >div>
div>
šablona>

Můžete použít x-pro direktiva pro iteraci přes pole a prvky vykreslení. Je to podobné jako v-pro ve Vue a Array.map() metoda pole v Reactu. Div "controls" obsahuje dva divy s řetězcem "[M]" a "[R]". Tyto řetězce znamenají „Označit jako hotové“ a „Odstranit“. Pokud chcete, můžete je nahradit správnými ikonami.

The x-show směrnice nastavuje prvek Zobrazit CSS vlastnost to žádný pokud je hodnota ukazující na směrnici nepravdivá. Druhý div v divu "items" je podobný tomu prvnímu s několika významnými výjimkami: The h3 text je nastaven na "Dokončeno", první potomek prvku "control" má text "[U]" místo "[M]" a v tomto prvku div @klikněte směrnice, prvek.hotovo je nastaveno na Nepravdivé.

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

A je to, prošli jste základy Alpine.js a použili jste to, co jste se naučili, k vytvoření základní aplikace pro úkoly.

Usnadnění psaní kódu Alpine.js

Když začnete psát kód Alpine.js, může být obtížné zamotat hlavu. Naštěstí editory kódu, jako je Visual Studio Code, poskytují širokou škálu rozšíření, která usnadňují vývoj.

Na Extensions Marketplace můžete získat rozšíření Alpine.js IntelliSense, které usnadňuje práci s direktivami. To může pomoci zlepšit vaši produktivitu při používání Alpine.js ve vašich projektech.