Мы собираемся обсудить alpine, который потенциально может заменить библиотеки, такие как jQuery или даже Angular, React или Vue, которые вы обычно используете при разработке веб-сайта.
Если вы регулярно создаете сайты, требующие добавления JavaScript в пользовательский интерфейс, чтобы улучшить взаимодействие с пользователем, эта статья для вас !!
Проведя много исследований и даже многократно используя его, я понял, что Alpine.js действительно может что-то найти.
Alpine.js против других
Если вы посмотрите на эту таблицу, вы действительно увидите разницу в размерах файлов между alpine и другими часто используемыми библиотеками / фреймворками.
Как и многие другие разработчики, мы обычно слишком усложняем свой рабочий процесс.
Мы всегда выбираем самые свежие и популярные библиотеки. Мы обращаемся к лучшим библиотекам, которые только можем найти в Интернете. Мы видим, что React, Angular и Vue имеют самые высокие ранги поиска, и вслепую начали их использовать.
Я думаю, что это неправильный подход, потому что во многих случаях этих библиотек слишком много, и ничего больше.
Я не пытаюсь ничего убрать из таких фреймворков, как Angular и React. На самом деле я использую их изо дня в день, и на самом деле у меня есть все мои кодовые базы в нескольких проектах angular. Я пытаюсь сказать, что есть некоторые веб-сайты, которым не нужны эти сложные и продвинутые фреймворки, потому что они действительно увеличивают размер, и вы можете увидеть это в таблице выше.
Когда (а когда нельзя) использовать Alpine
Если вы подумываете использовать Alpine в своем следующем проекте, позвольте мне кое-что прояснить.
Когда лучше избегать Alpine = ›
Вы НЕ должны обращаться к библиотекам, таким как alpine, когда ваш сайт:
- Много манипуляций с данными
- Требуются огромные проверки.
- Приходится выполнять многочисленные вызовы API для получения и обработки данных.
Для этих сценариев я действительно рекомендую вам использовать Vue, React, Angular или любой другой фреймворк, который вам нравится.
Когда использовать Alpine = ›
Вам следует обращаться к таким библиотекам, как alpine, только если ваш веб-сайт:
- Придется проделать базовые манипуляции с DOM.
- При некоторых условиях вам необходимо добавлять классы при взаимодействии с пользователем.
- Прослушайте некоторые события и измените пользовательский интерфейс.
Я думаю, что в этих сценариях Alpine.js - ваш лучший друг.
Установка
CDN:
Для начала вам просто нужно добавить этот тег скрипта в <head>:
Вот и все. Он инициализируется сам!
NPM:
Если вы предпочитаете устанавливать пакет из npm:
npm i alpinejsСоздание базового раскрывающегося списка
Начнем с реального примера.
Если мы нажмем на эту кнопку, выпадающий список станет видимым / открытым. Если щелкнуть еще раз, он исчезнет.
Давайте теперь разберемся с кодом = ›
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>Как вы можете видеть в коде, есть некоторые вещи, исходящие от Alpine, но не являющиеся родным HTML. Например, x-data, @click, x-show и т. Д.
- x-data - это в основном данные, которые мы передаем компоненту (или в данном случае div). У него есть объект, который может иметь некоторые атрибуты и даже иметь функции. В данном случае это
{open: false}. - При щелчке и использовании свойства @click этой кнопки переменная open должна быть равна true. Что тогда происходит? На заднем плане у нас есть неупорядоченный список, который в основном представляет собой раскрывающееся тело, и он становится видимым в зависимости от значения переменной open. Таким образом, если open истинно, мы фактически увидим ul или список, и всякий раз, когда мы нажимаем вне раскрывающегося списка, переменной open присваивается значение для принимает значение false, при этом раскрывающийся список скрывается.
- С помощью @ click.away, если мы щелкнем где-нибудь еще на экране, срабатывает open = false, снова скрывая раскрывающийся список!
Это было довольно просто, и вы уже можете увидеть всю мощь этой библиотеки.
Создание счетчика символов в стиле Twitter
Давайте рассмотрим более сложный пример: давайте создадим счетчик персонажей с помощью alpine.
В основном у нас есть текстовая область, а под ней - количество символов, которые можно ввести. Мы позволим пользователям вводить 180 символов, и мы будем обновлять счетчик при каждом вводе под текстовой областью.
Рекомендуется: установите Alpine IntelliSense для VsCode, чтобы он давал вам соответствующие автозаполнения.
Шаг 1. Начнем с основного скелета.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div class="header">
<h2>Character counter with Alpine</h2>
</div>
</body>
</html>Шаг 2: посыпьте альпийским
<body>
<div class="header">
<h2>Character counter with Alpine</h2>
</div>
<div x-data="{
content: '',
limit: 180
}">
<textarea></textarea>
<p></p>
</div>
</body>Давайте передадим объект в формате x-data для div. Допустим, у нас есть некоторый контент (string), который сейчас пуст, и у нас есть ограничение, равное 180.
Кроме того, есть textarea, а ниже у нас есть абзац, в котором, наконец, будет отображаться количество символов.
Примечание. Я заранее добавил немного стиля, но вам не о чем беспокоиться.
Полный код находится в конце этого руководства!
Шаг 3: логика
Функция remaining() ниже должна в основном возвращать разницу между длиной содержимого и пределом.
<div x-data="{
content: '',
limit: 180,
remaining() {
return this.limit - this.content.length
}
}">
<textarea x-model="content"></textarea>
<p>
You have <span x-html="remaining()"></span> character left!
</p>
</div>- span, потому что мы действительно хотим вычислить разницу между пределом и содержанием.
- Самый простой способ - создать функцию
remaining(), которая в основном будет возвращать разницу между пределом и длиной содержимого. - Давайте использовать и называть это внутри диапазона. Это обновит внутреннее HTML-содержимое диапазона с возвратом функции
remaining(). - На данный момент Alpine не знает, что у нас внутри
textarea, поскольку не знает, что это за контент. Как связать эту переменную содержимого с моей текстовой областью? Для этого мы можем использоватьx-model.
ВОЙЛА!
У нас есть довольно хорошее рабочее приложение, которое в основном сообщает нам, сколько символов вы ввели или сколько символов вы можете ввести в данный момент.
Полный код
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<style>
textarea {
width: 95%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
margin-top: 20px;
margin-left: 2.5%;
}
p {
margin-left: 2.5%;
}
.header {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
background: #1abc9c;
color: white;
width: 95%;
margin-left: 2.5%;
}
</style>
</head>
<body>
<div class="header">
<h2>Character counter with Alpine</h2>
</div>
<div x-data="{
content: '',
limit: 180,
remaining() {
return this.limit - this.content.length
}
}">
<textarea x-model="content"></textarea>
<p>
You have <span x-html="remaining()"></span> character left!
</p>
</div>
</body>
</html>Надеюсь, эта статья помогла вам понять основы Alpine.js.
Спасибо за прочтение. Если у вас есть вопросы, не стесняйтесь оставлять ответ.
Ресурсы
- Https://github.com/alpinejs/alpine
- Https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/
- Https://www.alpinetoolbox.com/
Первоначально опубликовано на https://www.theimmigrantprogrammers.com.
