Има изобилие от рамки на JavaScript, но простотата и лекотата на използване на Alpine го правят отличен кандидат за начинаещи.

Светът на уеб разработката е хаотичен – рамки се появяват и изчезват и нещата могат да бъдат непосилни както за новите, така и за опитните разработчици.

За разлика от повечето рамки за уеб разработка, Alpine.js има за цел да бъде възможно най-опростен, но достатъчно мощен, за да се справи с концепции като реактивност и странични ефекти.

Първи стъпки с Alpine.js

Инсталирането на Alpine.js е доста лесно. Трябва само да включите следното сценарий етикет във вашия HTML:

<сценарийотлагамsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">сценарий>

Като алтернатива можете да инсталирате Alpine.js във вашия проект с помощта на Node Package Manager:

npm инсталирайте alpinejs

Реактивност в Alpine.js

Създайте index.htm файл и добавете следния шаблонен код:

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8">
<метаhttp-еквив=„X-UA-съвместим“съдържание="IE=ръб">
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0">





instagram viewer



<заглавие>Alpine.jsзаглавие>
глава>
<тяло>
<сценарийотлагамsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">сценарий>
тяло>
html>

The отлагам атрибут в сценарий указва на браузъра да изпълни скрипта само след като приключи анализирането на документа.

Alpine.js предоставя няколко директиви като x-данни които използва за съхраняване на данни и x-текст които използва за настройка innerText на прикрепения компонент. За да използвате тези директиви, добавете следния код към вашия HTML.

<дивx-данни=„{име:„Дейвид Узонду“, организация:„Make Use Of“}“>
 Моето име е <силенx-текст="име">силен>
 и <азx-текст="организация">аз> е страхотно
див>

Директивата x-data съхранява обект с ключовете име и организация. След това можете да прехвърлите тези ключове в директивата x-text. Когато стартирате кода, Alpine.js ще попълни стойностите:

Как Alpine.js се сравнява с React

Alpine.js е лека рамка, която я прави подходяща за разработване на малки проекти и прототипи.

В по-големи рамки като React, вие използвате куки като useEffect() за справяне със страничните ефекти в жизнения цикъл на компонента. Тази кука изпълнява функция за обратно извикване всеки път, когато един от елементите на масива на зависимостите се промени:

импортиране {useEffect} от"реагирай";
функцияMyComponent() {
 useEffect(() => {
/* Функцията за обратно извикване е тук */
 }, [ /* Масивът на зависимостите не е задължителен */ ]);
}

За да се справите със страничните ефекти в Alpine.js, можете да използвате х-ефект директива. Например, да кажем, че искате да наблюдавате променлива и да регистрирате стойността при всяка промяна:

<дивx-данни="{номер 1}"х-ефект="console.log (номер)">
<h1x-текст="номер">h1>
<бутон @щракнете="число = число + 1">Добавете нов номербутон>
див>

Първото нещо, което може да забележите е, че не е необходимо да указвате зависимост. Alpine просто ще слуша за промени във всички предадени променливи х-ефект. The @щракване директива увеличава числовата променлива с 1.

Условно изобразяване в Alpine.js

Условно изобразяване на елементи е нещо, което можете да правите в рамки като React. Alpine.js също ви позволява да изобразявате елементи условно. Той осигурява х-ако директива и спец шаблон елемент, който можете да използвате за условно изобразяване на елементи.

Създайте друг index.htm файл и добавете същия шаблонен код, както преди. Добавете следния код към тялото на HTML.

<дивx-данни=„{показано: вярно}“>
<бутон @щракнете="показано=!показано"x-текст="показан? 'Hide Element': 'Покажи елемента'">Превключванебутон>
<шаблонх-ако="показан">
<див>Бързата кафява лисица прескочи кучето.див>
шаблон>
див>

The х-ако директивата се предава на шаблон елемент. Това е важно, защото позволява на Alpine.js да следи елемент, който се добавя или премахва от страницата. The шаблон елементът трябва да съдържа един елемент на коренно ниво; следният код би нарушил това правило:

<шаблонх-ако="показан">
<див>Този елемент ще бъде изобразен добре.див>
<див>Този елемент ще бъде игнориран от Alpine.jsдив>
шаблон>

Създаване на приложение за задачи с Alpine.js

Време е да комбинирате всичко, което сте научили досега, и да създадете просто приложение за задачи с поддръжка за локално съхранение. Първо създайте папка и я попълнете с index.htm файл и a style.css файл. Добавете шаблонния код във файла index.htm и включете препратка към style.css файл:

<връзкаотн="стилов лист"href="style.css">

Не се притеснявайте за CSS тук, просто копирайте style.css файл от това GitHub хранилище на проекта.

За да запазите данните след презареждане на страницата, имате нужда от Alpine.js упорствам плъгин. Добавете компилацията на CDN на този плъгин като a сценарий етикет, точно над основната компилация на Alpine.js CDN:

<сценарийотлагамsrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">сценарий>

В тяло дефинирам а див елемент с ан x-данни директива. Тази директива трябва да съдържа масив, извикан всички задачи. След това добавете h1 елемент с текст „Приложение за задачи“.

<дивx-данни="{allTasks:$persist([])}">
<h1>Приложение за задачиh1>
див>

The $persist плъгинът е обвивка за JavaScript localStorage API. Той казва на браузъра да съхранява масива в локално хранилище, така че данните да останат непокътнати дори след презареждане на страницата. Добави форма с Изпращане директива, която също предотвратява действието за изпращане по подразбиране.

<форма @подавам.предотвратявам="
 ($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('Въведената стойност не може да бъде празна')
: alert('Вече е добавена задача.');
 $refs.task.value=''
">
форма>

The $refs клаузата позволява достъп до DOM елемента със "задача" x-ref директива. Кодът също обработва известно валидиране и гарантира, че не добавя празни низове или дублиращи се задачи към списъка. Преди да завършите формуляра, добавете вход елемент с ан x-ref на "задача" и заместител. След това добавете бутон и задайте неговия тип на „изпращане“.

<входТип="текст"x-ref="задача">
<бутонТип="Изпращане">Добавяне на задачабутон>

След това дефинирайте div с класа "items". Този div трябва да съдържа два други div: единият с x-данни зададен на "незавършен" масив, а другият - на "завършен" масив. И двата div трябва да имат х-ефект директива и масивът трябва да бъде обвит в $persist клауза, както е показано по-рано.

<дивклас="артикули">
<дивx-данни="{незавършено:$persist([])}"х-ефект="незавършено = allTasks.filter (x=>x.donefalse)">
див>

<дивx-данни="{завършено:$persist([])}"х-ефект="завършено=allTasks.filter (y=>y.donetrue).reverse()">
див>
див>

В първия div добавете an h3 етикет с текст „Незавършено“. След това за всеки елемент в незавършени масив, изобразяване на a див който държи "контролите" и самата задача.

Контролите позволяват на потребителя да изтрие елемент или да го маркира като завършен:

<h3>Незавършенh3>
<шаблонх-за="елемент в незавършен": ключ="element.id">
<дивx-данни=„{showControls: false}“ @преминаване на мишката="showControls = true" @mouseout="showControls = false"
 клас="задача"
 >


<дивклас="контроли">
<дивx-шоу="покажи контроли" @щракнете="element.done=true">[М]див>
<дивx-шоу="покажи контроли" @щракнете="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]див>
див>
<дивx-текст="element.task" >див>
див>
шаблон>

Можете да използвате х-за директива за итерация през масив и изобразяване на елементи. То е подобно на v-за във Vue и Array.map() метод масив в React. Div "controls" съдържа два div с низа "[M]" и "[R]". Тези низове означават „Маркиране като готово“ и „Премахване“. Можете да ги замените с подходящи икони, ако желаете.

The x-шоу директива задава елемент дисплей CSS свойство към нито един ако стойността, сочеща към директивата, е фалшива. Вторият div в div "items" е подобен на първия с няколко забележителни изключения: The h3 текстът е зададен на „Завършен“, първият дъщерен елемент на „control“ има текста „[U]“ вместо „[M]“ и в този div @щракване директива, елемент.готово е настроен на невярно.

<дивx-шоу="покажи контроли" @щракнете="element.done=false">[U]див>

И това е всичко, прегледахте основите на Alpine.js и използвахте наученото, за да създадете основно приложение за задачи.

Улесняване на писането на Alpine.js код

Когато започнете да пишете Alpine.js код, може да ви е трудно да се замислите. За щастие редакторите на код като Visual Studio Code предоставят широк набор от разширения, които улесняват разработката.

В Extensions Marketplace можете да получите разширението Alpine.js IntelliSense, което улеснява работата с директиви. Това може да ви помогне да подобрите производителността си, когато използвате Alpine.js във вашите проекти.