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
) در همان زمینه در دسترس قرار میدهد. p>
تکرار با 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: یک چارچوب جاوا اسکریپت برای مینیمالیست ها