فریمورک های جاوا اسکریپت فراوانی وجود دارد، اما سادگی و سهولت استفاده Alpine آن را به یک کاندیدای عالی برای مبتدیان تبدیل کرده است.
دنیای توسعه وب آشفته است – چارچوب‌ها وارد و خارج می‌شوند و همه چیز می‌تواند هم برای توسعه‌دهندگان جدید و هم برای توسعه‌دهندگان باتجربه طاقت‌فرسا باشد.
برخلاف اکثر چارچوب‌های توسعه وب، Alpine.js قصد دارد تا حد امکان ساده باشد، اما به اندازه کافی قدرتمند برای مقابله با مفاهیمی مانند واکنش‌پذیری و عوارض جانبی باشد.
شروع به کار با Alpine.js
نصب Alpine.js بسیار ساده است. شما فقط باید تگ اسکریپت زیر را در HTML خود قرار دهید:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
همچنین، می‌توانید Alpine.js را با استفاده از Node Package Manager در پروژه خود نصب کنید:
npm install alpinejs
واکنش پذیری در Alpine.js
یک فایل index.htm ایجاد کنید و کد boilerplate زیر را اضافه کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
ویژگی defer در تگ اسکریپت به مرورگر می گوید که اسکریپت را تنها پس از پایان تجزیه سند اجرا کند.
Alpine.js چندین دستورالعمل مانند x-data را برای ذخیره داده ها و x-text که برای تنظیم innerText جزء پیوست شده استفاده می کند، ارائه می دهد. برای استفاده از این دستورالعمل ها، کد زیر را به HTML خود اضافه کنید.
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
دستور x-data یک شی را با نام کلید و سازمان ذخیره می کند. سپس می توانید آن کلیدها را به دستور x-text منتقل کنید. وقتی کد را اجرا می کنید، Alpine.js مقادیر زیر را پر می کند:
Alpine.js چگونه با React مقایسه می شود
Alpine.js یک چارچوب سبک وزن است که آن را برای توسعه پروژه های کوچک و نمونه های اولیه مناسب می کند.
در چارچوب‌های بزرگ‌تری مانند React، از قلاب‌هایی مانند useEffect() برای کنترل عوارض جانبی در چرخه عمر کامپوننت استفاده می‌کنید. هر زمان که یکی از عناصر آرایه وابستگی تغییر کند، این هوک یک تابع callback اجرا می کند:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
برای کنترل عوارض جانبی در Alpine.js، می توانید از دستور x-effect استفاده کنید. به عنوان مثال، فرض کنید می خواهید یک متغیر را تماشا کنید و هر زمان که مقدار تغییر کرد، آن را ثبت کنید:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
اولین چیزی که ممکن است متوجه شوید این است که نیازی به تعیین وابستگی ندارید. Alpine به سادگی به تغییرات در تمام متغیرهای ارسال شده به x-effect گوش می دهد. دستور @click متغیر عدد را 1 افزایش می دهد.
رندر شرطی در Alpine.js
رندر کردن عناصر به صورت مشروط کاری است که می توانید در چارچوب هایی مانند React انجام دهید. Alpine.js همچنین به شما امکان می دهد عناصر را به صورت شرطی رندر کنید. این یک دستور x-if و یک عنصر الگوی ویژه را ارائه می دهد که می توانید از آنها برای رندر کردن عناصر به صورت شرطی استفاده کنید.
فایل index.htm دیگری ایجاد کنید و همان کد boilerplate را اضافه کنید. کد زیر را به بدنه HTML اضافه کنید.
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
دستور x-if به عنصر الگو منتقل می شود. این مهم است زیرا به Alpine.js اجازه می دهد تا عنصری را که اضافه یا از صفحه حذف می شود، پیگیری کند. عنصر الگو باید شامل یک عنصر در سطح ریشه باشد. کد زیر این قانون را نقض می کند:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
ساختن یک برنامه کاری با Alpine.js
وقت آن است که همه چیزهایی را که تاکنون یاد گرفته‌اید ترکیب کنید و یک برنامه کاربردی ساده با پشتیبانی ذخیره‌سازی محلی بسازید. ابتدا یک پوشه ایجاد کنید و آن را با یک فایل index.htm و یک فایل style.css پر کنید. کد boilerplate را به فایل index.htm اضافه کنید و یک مرجع به فایل style.css اضافه کنید:
<link rel="stylesheet" href="style.css">
در اینجا نگران CSS نباشید، فقط فایل style.css را از مخزن GitHub این پروژه کپی کنید.
برای تداوم داده ها پس از بارگذاری مجدد صفحه، به افزونه Alpine.js persist نیاز دارید. ساخت CDN این افزونه را به‌عنوان یک تگ اسکریپت، درست بالای بیلد CDN هسته Alpine.js اضافه کنید:
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
در بدنه یک عنصر div را با دستور x-data تعریف کنید. این دستورالعمل باید آرایه ای به نام allTasks را در خود جای دهد. سپس، یک عنصر h1 را با متن “برنامه کاری انجام دهید” اضافه کنید.
<div x-data="{allTasks:$persist([])}">
<h1>To-do Application</h1>
</div>
افزونه $persist پوششی برای جاوا اسکریپت localStorage API است. به مرورگر می‌گوید که آرایه را در حافظه محلی ذخیره کند، به طوری که داده‌ها حتی پس از بارگذاری مجدد صفحه دست نخورده باقی می‌مانند. فرمی با دستورالعمل ارسال اضافه کنید که از اقدام پیش‌فرض ارسال نیز جلوگیری می‌کند.
<form @submit.prevent="
($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('Input value cannot be empty')
: alert('Task added already.');
$refs.task.value=''
">
</form>
بند $refs امکان دسترسی به عنصر DOM با دستور x-ref “task” را می دهد. کد همچنین برخی از اعتبار سنجی را انجام می دهد و تضمین می کند که رشته های خالی یا کارهای تکراری را به لیست اضافه نمی کند. قبل از پایان فرم، یک عنصر ورودی با یک x-ref از “وظیفه” و یک مکان نگهدار اضافه کنید. سپس یک دکمه اضافه کنید و نوع آن را روی «submit» قرار دهید.
<input type="text" x-ref="task">
<button type="submit">Add Task</button>
در مرحله بعد، یک div با کلاس “اقلام” تعریف کنید. این div باید شامل دو div دیگر باشد: یکی با مجموعه داده‌های x روی یک آرایه «تکمیل نشده» و دیگری مجموعه‌ای روی یک آرایه «تکمیل‌شده». هر دو div باید یک دستور x-effect داشته باشند و آرایه باید در عبارت $persist همانطور که قبلا نشان داده شده است پیچیده شود.
<div class="items">
<div x-data="{uncompleted:$persist([])}" x-effect="uncompleted = allTasks.filter(x=>x.done===false)">
</div>
<div x-data="{completed:$persist([])}" x-effect="completed=allTasks.filter(y=>y.done===true).reverse()">
</div>
</div>
در اولین div، یک تگ h3 با متن “Uncompleted” اضافه کنید. سپس برای هر عنصر در آرایه ناتمام، یک div ارائه کنید که “کنترل ها” و خود وظیفه را نگه می دارد.
کنترل ها به کاربر اجازه می دهد یک مورد را حذف کند یا آن را به عنوان تکمیل شده علامت گذاری کند:
<h3>Uncompleted</h3>
<template x-for="element in uncompleted" :key="element.id">
<div x-data="{showControls:false}" @mouseover="showControls = true" @mouseout="showControls = false"
class="task"
>
<div class="controls">
<div x-show="showControls" @click="element.done=true">[M]</div>
<div x-show="showControls" @click="allTasks=allTasks.filter(x=>x.id!==element.id)">[R]</div>
</div>
<div x-text="element.task" ></div>
</div>
</template>
شما می توانید از دستور x-for برای تکرار از طریق یک آرایه و رندر عناصر استفاده کنید. شبیه به v-for در Vue و متد Array.map() در React است. div “controls” شامل دو div با رشته “[M]” و “[R]” است. این رشته ها مخفف “Mark as done” و “Remove” هستند. در صورت تمایل می توانید آنها را با آیکون های مناسب جایگزین کنید.
دستور x-show یک عنصر نمایش عنصر CSS را روی هیچ تنظیم می کند اگر مقداری که به دستورالعمل اشاره دارد نادرست باشد. دومین div در بخش “اقلام” مشابه مورد اول با چند استثناء قابل توجه است: متن h3 روی “تکمیل” تنظیم شده است، اولین فرزند div “کنترل” متن “[U]” را به جای “[ دارد. M]” و در دستورالعمل @click این div، element.done روی false تنظیم شده است.
<div x-show="showControls" @click="element.done=false">[U]</div>
و تمام، شما اصول اولیه Alpine.js را مرور کرده اید و از آنچه یاد گرفته اید برای ایجاد یک برنامه کاربردی اساسی استفاده کرده اید.
آسان‌تر کردن کد Alpine.js برای نوشتن
هنگامی که شروع به نوشتن کد Alpine.js می کنید، پیچیده کردن سرتان در اطراف ممکن است دشوار باشد. خوشبختانه، ویرایشگرهای کد مانند Visual Studio Code طیف گسترده ای از پسوندها را ارائه می دهند که توسعه را آسان تر می کند.
در Extensions Marketplace، می‌توانید پسوند Alpine.js IntelliSense را دریافت کنید که کار با دستورالعمل‌ها را آسان‌تر می‌کند. این می تواند به بهبود بهره وری شما در هنگام استفاده از Alpine.js در پروژه های خود کمک کند.