Alpine.js یک چارچوب جاوا اسکریپت جلویی است که شبیه یک کوله پشتی سبک وزن است، با API مینیمالیستی و ویژگی‌های متفکرانه. بیایید آن را امتحان کنیم.
- API مینیمالیستی Alpine
- عناصر x-data و x-text
- واکنشی در Alpine.js
- توابع در داده
- در حال واکشی داده های راه دور
- تکرار با Alpine.js
- نمایش/پنهان کردن و روی کلیک
- اتصال به ورودی‌ها
- نتیجه‌گیری
نوآوری در چارچوب‌های جاوا اسکریپت جلویی یکی از پدیده‌های بزرگ فناوری-فرهنگی زمان ماست. اکنون بیش از ۲۰ سال است که شاهد آشکار شدن دم بلندی از خلاقیت تکاملی بوده ایم. هر ایده جدید وارد گلدان مشترک می شود و باعث بهبود در فرآیند توسعه نرم افزار و محصولات نهایی که توسعه دهندگان می سازند، می شود.
یکی از فریم‌ورک‌هایی که این روزها نامی برای خود پیدا کرده Alpine.js است. Alpine یک چارچوب مینیمالیستی است که همانطور که از نامش پیداست برای جابجایی سبک در زمین های ناهموار طراحی شده است. قدرت زیادی را در یک بسته نازک و به راحتی تسلط می دهد. این مقاله طعم Alpine.js را به شما می دهد، بنابراین می توانید بفهمید که چه چیزی ارائه می دهد و چه زمانی ممکن است برای شما مفید باشد.
API مینیمالیستی Alpine
همانطور که مستندات Alpine.js توضیح می‌دهد، API Alpine مجموعه‌ای از ۱۵ ویژگی، شش ویژگی و دو روش است. . این یک نمایه API بسیار کوچک است. هدف مینیمالیستی آن ارائه واکنش پذیری در قالبی تمیز است که با برخی از زیبایی های اطراف مانند مراسم و فروشگاه مرکزی تقویت شده است.
صفحه وب بسیار ساده را در فهرست ۱ در نظر بگیرید.
<html>
<head>
<script src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js" defer></script>
</head>
<body>
<div x-data="">
<span x-text="'Text literal'"></span>
</div>
</body>
</html>
علاوه بر گنجاندن بسته Alpine از طریق CDN (شما می توانید در مورد معناشناسی defer اینجا)، تنها دو مورد مرتبط با آلپاین در اینجا دستورالعمل‌های x-data و x-text هستند.
اگر این را در یک صفحه HTML در سیستم خود قرار دهید و آن را در مرورگر مشاهده کنید، پیام خروجی “Text Literal” را خواهید دید. اگرچه این برنامه خیلی چشمگیر نیست، اما دو جنبه جالب آلپ را نشان می دهد.
ابتدا، برای اینکه واکنش پذیری درگیر شود، باید نشانه گذاری را در یک دستورالعمل x-data محصور کنید. اگر دستورالعمل را حذف کنید، x-text اعمال نخواهد شد. در اصل، دستور x-data یک جزء Alpine ایجاد می کند. در این مثال، دستور x-data خالی است. در استفاده واقعی، تقریباً همیشه داده‌هایی در آنجا دارید. پس از همه، شما در حال نوشتن مؤلفه هایی هستید که هدف آنها واکنش نشان دادن به داده ها است.
دومین موردی که در فهرست ۱ باید به آن توجه کنید این است که می توانید هر جاوا اسکریپت معتبری را در x-text قرار دهید. این در مورد همه دستورالعمل های آلپاین صدق می کند.
عناصر x-data و x-text
محتوای x-data برای همه عناصر موجود ارائه شده است. برای درک منظورم، نگاهی به فهرست ۲ بیاندازید.
<div x-data="{ message: 'When in the course of human events...' }">
<span x-text="message"></span>
</div>
اکنون صفحه خروجی آغاز اعلامیه استقلال خواهد بود. می‌توانید ببینید که x-data یک شیء قدیمی جاوا اسکریپت را با یک فیلد واحد، 'message' تعریف می‌کند که حاوی مقدمه اعلامیه است. x-text به این فیلد شی اشاره دارد.
واکنشی در Alpine.js
در مرحله بعد، از واکنش پذیری برای رفع یک خطا در Declaration استفاده می کنیم. به فهرست ۳ نگاهی بیندازید.
<div x-data="{ pronoun: 'men' }">
<button x-on:click="pronoun = 'people'">Fix It</button>
<span x-text="`all ${pronoun} are created equal`"></span>
</div>
دستورالعمل x-text اکنون باید بدیهی باشد. به متغیر ضمیر اشاره دارد که توسط دستورالعمل x-data در معرض دید قرار گرفته است. قطعه جدید اینجا دکمه است که دارای دستورالعمل x-on:click است. کنترل‌کننده این رویداد کلیک، ضمیر پیش‌فرض قدیمی را با یک ضمیر خنثی جایگزین می‌کند و واکنش‌پذیری به‌روزرسانی مرجع در x-text
را بر عهده می‌گیرد.
توابع در داده
ویژگی های داده در Alpine اشیاء جاوا اسکریپت با امکانات کامل هستند. بیایید روش دیگری را برای رسیدگی به نیاز بالا، که در فهرست ۴ نشان داده شده است، در نظر بگیریم.
<div x-data="{
pronoun: 'men',
fixIt: function(){
this.pronoun = 'people';
}
}">
<button x-on:click="fixIt()">Fix It</button>
<span x-text="`all ${pronoun} are created equal`"></span>
</div>
در فهرست ۴ می توانید ببینید که شی داده اکنون میزبان یک روش fixIt است که توسط کنترل کننده کلیک فراخوانی می شود.
به‌علاوه، توجه داشته باشید که گاهی اوقات کد برنامه‌ای را می‌بینید که از دستور x-data به یک تابع تعریف‌شده در تگ اسکریپت فراخوانی می‌کند—این یک اولویت شخصی است و دقیقاً به همان صورت عمل می‌کند. به عنوان x-data:
درون خطی
<div x-data="myDataFunction()">...</div>
...
<script>
function myDataFunction() {
return {
foo: "bar"
}
}
</script>
در حال واکشی داده های راه دور
حالا بیایید دنده‌ها را عوض کنیم و به یک نیاز پیچیده‌تر فکر کنیم. فرض کنید می‌خواهیم یک فهرست با قالب JSON از روسای جمهور آمریکا را از یک API خارجی بارگیری کنیم. اولین کاری که می‌خواهیم انجام دهیم این است که هنگام بارگیری صفحه، آن را بارگذاری کنیم. برای آن، همانطور که در فهرست ۵ نشان داده شده است، از دستورالعمل x-init استفاده خواهیم کرد.
<div x-data="{
presidents: []
}"
x-init="(
async () => {
const response = await fetch('https://raw.githubusercontent.com/hitch17/sample-data/master/presidents.json');
presidents = await response.json();
}
)">
<span x-text="presidents"></span>
</div>
اینجا چه خبر است؟ خوب، اول از همه، دستور x-data باید واضح باشد: این فقط یک فیلد presidents با یک آرایه خالی دارد. x-text در عنصر span محتوای این فیلد را خروجی می‌دهد.
کد x-init کمی بیشتر درگیر است. ابتدا توجه کنید که در یک تابع خود اجرا کننده پیچیده شده است. این به این دلیل است که Alpine انتظار یک تابع دارد، نه یک تعریف تابع. (اگر می خواهید از فرم پاسخ تماس غیرهمزمان fetch استفاده کنید، نیازی نیست تابع را به این شکل بپیچید.)
هنگامی که لیستی از رئیس‌ها را از نقطه پایانی به دست آوردیم، آن را به متغیر presidents می‌چسبانیم، که Alpine آن را به عنوان بخشی از شی x-data در معرض نمایش قرار داده است. .
برای تکرار: Alpine.js داده‌های a-data را برای سایر توابع دستورالعمل (مانند x-init) در همان زمینه در دسترس قرار می‌دهد.
تکرار با Alpine.js
در این مرحله، برنامه ما داده‌ها را از نقطه پایانی راه دور می‌کشد و آن را در حالت ذخیره می‌کند. البته توجه داشته باشید که چیزی مانند [Object]،[Object]... را خروجی می‌دهد. این چیزی نیست که ما می خواهیم. بیایید نگاهی به تکرار روی داده ها بیاندازیم، همانطور که در فهرست ۶ نشان داده شده است.
<div x-data=...>
<ul>
<template x-for="pres in presidents">
<li><div x-text="pres.president"></div>
From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</template>
</ul>
</div>
فهرست ۶ حاوی یک لیست معمولی نامرتب و به دنبال آن یک الگوی HTML است. عنصر، که حاوی یک دستورالعمل x-for است. این دستورالعمل مشابه آنچه ممکن است در سایر چارچوب های واکنشی دیده باشید عمل می کند. در این مورد، به ما امکان می‌دهد یک مجموعه، presidents، و یک شناسه را مشخص کنیم که به نشانه‌گذاری بسته ارائه می‌شود که هر نمونه از آن مجموعه را نشان می‌دهد، در این مورد، pres.
بقیه نشانه‌گذاری از متغیر pres برای خروجی داده‌ها از اشیاء از طریق x-text استفاده می‌کند.
این برنامه اکنون چیزی شبیه آنچه در شکل ۱ نشان داده شده است.
است
شکل ۱. فهرستی از روسای جمهور ایالات متحده.
نمایش/پنهان کردن و روی کلیک
اکنون می‌خواهیم برنامه را طوری تنظیم کنیم که داده‌های رئیس جمهور با کلیک کردن روی نام رئیس جمهور تغییر کند. برای شروع، ما نشانه گذاری را به آنچه در لیست ۷ نشان داده شده است تغییر می دهیم.
<template x-for="pres in presidents">
<li><div x-text="pres.president" x-on:click="pres.show = ! pres.show"></div>
<div x-show="pres.show">
From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</div>
</template>
اکنون، در فهرست ۷، می‌توانیم از دستورالعمل x-show در div حاوی جزئیات ریاست‌جمهوری استفاده کنیم. درستی مقدار x-show مشخص می کند که آیا محتوا قابل مشاهده است. در مورد ما، این با فیلد pres.show تعیین می‌شود. (توجه داشته باشید که در یک برنامه واقعی، ممکن است نخواهید از داده های کسب و کار واقعی برای میزبانی متغیر show/hide استفاده کنید.)
برای تغییر مقدار pres.show، یک کنترل کننده x-on:click به سربرگ اضافه می کنیم. این کنترل کننده به سادگی مقدار true/false pres.show را تعویض می کند: pres.show = ! pres.show.
افزودن انیمیشن انتقال
Alpine شامل انتقال‌های داخلی است که می‌توانید آنها را برای ویژگی نمایش/پنهان کردن اعمال کنید. فهرست ۸ نحوه افزودن انیمیشن پیش فرض را نشان می دهد.
<div x-show="pres.show" x-transition>
From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</div>
تنها چیزی که تغییر کرد این است که عنصر حامل دستور x-show اکنون دارای یک دستورالعمل x-transition نیز می باشد. به طور پیش فرض، Alpine انتقال های معقول را اعمال می کند. در این مورد، انتقال یک افکت اسلاید و محو است. شما می توانید انتقال را به طور گسترده سفارشی کنید، از جمله با استفاده از کلاس های CSS خود در مراحل مختلف انیمیشن. برای اطلاعات بیشتر درباره این ویژگی به اسناد انتقال Alpine.js مراجعه کنید.
اتصال به ورودی‌ها
اکنون، یک قابلیت فیلتر ساده اضافه می کنیم. این کار مستلزم افزودن ورودی است که به داده‌های خود متصل می‌کنید و سپس مجموعه داده بازگشتی را بر اساس آن مقدار فیلتر کنید. می توانید تغییرات را در لیست ۹ مشاهده کنید.
<div x-data="{
filter: '',
presidents: [],
getPresidents: function(){
return this.presidents.filter(pres => pres.president.includes(this.filter) )
}
}"
...
<input x-model="filter" />
...
<ul>
<template x-for="pres in getPresidents">
توجه کنید که شی x-data اکنون یک فیلد “فیلتر” روی آن دارد. این از طریق دستور x-model که به “filter” اشاره می کند، به عنصر ورودی متصل می شود.
ما دستورالعمل x-for را برای ارجاع به روش جدید getPresidents() تغییر دادیم که در x-data شی. این روش از نحو استاندارد جاوا اسکریپت برای فیلتر کردن رئیس‌ها بر اساس اینکه آیا متن را در قسمت فیلتر قرار می‌دهند، استفاده می‌کند.
کد را دریافت کنید
می‌توانید کد کامل این نمایش را اینجا پیدا کنید.
نتیجه گیری
Alpine.js مانند همنام خود، یک کوله پشتی سبک وزن است که با وسایل اولیه برای عبور شما از کوه ها پر شده است. حداقل است، اما کافی است.
این چارچوب شامل برخی از ویژگی‌های سطح بالاتر، به ویژه یک فروشگاه مرکزی و یک سیستم رویداد، و همچنین معماری و اکوسیستم افزونه است.
در کل، Alpine.js برای کار با آن ارگونومیک است. اگر تجربه ای با سایر فریم ورک های واکنشی دارید، Alpine باید آنقدر آشنا باشد که به سرعت آن را انتخاب کنید. سادگی اعلان یک جزء و داده های آن در دستورالعمل x-data بوی نابغه می دهد.
ممکن است در مورد ارتباط بین اجزایی تعجب کنید. Alpine.js از سیم‌کشی صریح بین مؤلفه‌ها اجتناب می‌کند (مثلاً بدون ابزار والدین به فرزند). در عوض، از محیط مرورگر (یعنی پنجره) به عنوان گذرگاه رویداد از طریق دستورالعمل $dispatch. این با فلسفه Alpine برای افزودن عملکرد کافی برای تقویت آنچه قبلاً وجود دارد مطابقت دارد. به خوبی کار می کند.
همه این عناصر با افزایش اندازه و پیچیدگی برنامه مورد آزمایش قرار می گیرند. بنابراین با هر پشته ای که انتخاب می کنید مطابقت دارد. Alpine.js یک گزینه وسوسه انگیز برای دفعه بعدی است که به سراغ کدنویسی می روید.
پست های مرتبط
معرفی Alpine.js: یک چارچوب جاوا اسکریپت برای مینیمالیست ها
معرفی Alpine.js: یک چارچوب جاوا اسکریپت برای مینیمالیست ها
معرفی Alpine.js: یک چارچوب جاوا اسکریپت برای مینیمالیست ها