Существует множество фреймворков JavaScript, но простота и удобство использования Alpine делают его отличным кандидатом для начинающих.

Мир веб-разработки хаотичен — фреймворки появляются и исчезают, и вещи могут быть ошеломляющими как для новичков, так и для опытных разработчиков.

В отличие от большинства фреймворков для веб-разработки, Alpine.js стремится быть как можно более простым, но при этом достаточно мощным, чтобы справляться с такими понятиями, как реактивность и побочные эффекты.

Начало работы с Alpine.js

Установить Alpine.js довольно просто. Вам нужно только включить следующее сценарий тег в вашем HTML:

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

Кроме того, вы можете установить Alpine.js в свой проект с помощью Node Package Manager:

npm установить alpinejs

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

Создать index.htm файл и добавьте следующий шаблонный код:

HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8">
<метаhttp-эквивалент="X-UA-совместимый"содержание="IE=край">





instagram viewer



<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0">
<заголовок>Alpine.jsзаголовок>
голова>
<тело>
<сценарийотложитьисточник=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">сценарий>
тело>
HTML>

отложить атрибут в сценарий Тег указывает браузеру запускать скрипт только после того, как он закончит синтаксический анализ документа.

Alpine.js предоставляет несколько директив, таких как x-данные который он использует для хранения данных и x-текст который он использует для установки внутренний текст присоединяемого компонента. Чтобы использовать эти директивы, добавьте следующий код в свой HTML.

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

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

Чем Alpine.js отличается от React

Alpine.js — это легкий фреймворк, который подходит для разработки небольших проектов и прототипов.

В более крупных фреймворках, таких как React, вы используете крючки, как использоватьЭффект() для обработки побочных эффектов в жизненном цикле компонента. Этот хук запускает функцию обратного вызова всякий раз, когда изменяется один из элементов массива зависимостей:

Импортировать {useEffect} от"Реагировать";
функцияМой Компонент() {
 использоватьЭффект(() => {
/* Здесь находится функция обратного вызова */
 }, [ /* Массив зависимостей необязателен */ ]);
}

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

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

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

Условный рендеринг в Alpine.js

Отрисовка элементов условно это то, что вы можете делать в таких фреймворках, как React. Alpine.js также позволяет условно отображать элементы. Он обеспечивает х-если директива и спец. шаблон элемент, который можно использовать для условного рендеринга элементов.

Создать еще index.htm файл и добавьте тот же шаблонный код, что и раньше. Добавьте следующий код в тело HTML.

<дивx-данные="{показано: правда}">
<кнопка @нажмите="показано =! показано"x-текст="показано? «Скрыть элемент»: «Показать элемент»>Переключатькнопка>
<шаблонх-если="показано">
<див>Быстрая коричневая лиса перепрыгнула через собаку.див>
шаблон>
див>

х-если директива передается в шаблон элемент. Это важно, поскольку позволяет Alpine.js отслеживать элементы, которые добавляются или удаляются со страницы. шаблон element должен содержать один корневой элемент; следующий код нарушил бы это правило:

<шаблонх-если="показано">
<див>Этот элемент будет отображаться просто отлично.див>
<див>Этот элемент будет игнорироваться Alpine.js.див>
шаблон>

Создание приложения To-Do с помощью Alpine.js

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

<связьотн.="таблица стилей"href="стиль.css">

Не беспокойтесь о CSS здесь, просто скопируйте стиль.css файл из этого репозиторий проекта на GitHub.

Чтобы сохранить данные после перезагрузки страницы, вам понадобится Alpine.js сопротивляться плагин. Добавьте сборку CDN этого плагина в качестве сценарий тег, чуть выше основной сборки Alpine.js CDN:

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

в тело определить див элемент с x-данные директива. Эта директива должна содержать массив с именем всеЗадачи. Затем добавьте h1 элемент с текстом «To-Do Application».

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

$ сохранятся плагин представляет собой оболочку для Локальное хранилище JavaScript 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('Задание уже добавлено.');
 $refs.task.value=''
">
форма>

$refs предложение разрешает доступ к элементу DOM с помощью «задачи» x-ref директива. Код также выполняет некоторую проверку и гарантирует, что в список не будут добавлены пустые строки или повторяющиеся задачи. Перед тем, как закрыть форму, добавьте вход элемент с x-ref «задачи» и заполнителя. Затем добавьте кнопку и установите ее тип на «отправить».

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

Затем определите div с классом «items». Этот div должен содержать два других div: один с x-данные установлен в «незавершенный» массив, а другой — в «завершенный» массив. Оба div должны иметь х-эффект директива и массив должен быть обернут в $ сохранятся предложение, как показано ранее.

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

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

В первый div добавьте h3 тег с текстом «Незавершенный». Тогда для каждого элемента в незавершенный массив, визуализировать див который содержит «элементы управления» и саму задачу.

Элементы управления позволяют пользователю удалить элемент или пометить его как завершенный:

<h3>незавершенныйh3>
<шаблонх-для="элемент в незавершенном состоянии":ключ="элемент.id">
<дивx-данные="{showControls: ложь}" @наведение мыши="showControls = истина" @мышь="showControls = ложь"
 класс = "задача"
 >


<дивсорт="управляет">
<дивх-шоу="показать элементы управления" @нажмите="элемент.done=истина">[М]див>
<дивх-шоу="показать элементы управления" @нажмите="allTasks=allTasks.filter (x=>x.id!==element.id)">[Р]див>
див>
<дивx-текст="элемент.задача" >див>
див>
шаблон>

Вы можете использовать х-для директива для перебора массива и рендеринга элементов. Это похоже на v-для в Vue и Массив.карта() метод массива в Реакте. Раздел «controls» содержит два элемента div со строками «[M]» и «[R]». Эти строки означают «Отметить как выполненное» и «Удалить». Вы можете заменить их соответствующими значками, если хотите.

х-шоу директива устанавливает элемент отображать Свойство CSS для никто если значение, указывающее на директиву, ложно. Второй div в div «items» похож на первый с несколькими заметными исключениями: h3 text установлен на «Completed», первый дочерний элемент div «control» имеет текст «[U]» вместо «[M]», и в этом div @щелчок директива, элемент.сделано установлен на ЛОЖЬ.

<дивх-шоу="показать элементы управления" @нажмите="элемент.done=ложь">[У]див>

Вот и все, вы изучили основы Alpine.js и использовали полученные знания для создания базового приложения для работы со списком дел.

Упрощение написания кода Alpine.js

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

В магазине расширений вы можете приобрести расширение Alpine.js IntelliSense, которое упрощает работу с директивами. Это может помочь повысить вашу продуктивность при использовании Alpine.js в ваших проектах.