اول از همه یه عذرخواهی بکنم از کسایی که روی پست قبلی کامنت گذاشتن و جواب شون رو ندادم، زندگی بعضی وقتها یه جوری پیش میره که وبلاگ نویسی که هیچی، غذا خوردن هم از یاد آدم میره! ولی به هر شکل من شرمندم...
و حالا میرسیم به پست دوم:
به عنوان اولین پست آموزشیم، تصمیم گرفتم بیام سراغ قسمتی از دنیای برنامه نویسی که اصلا دوستش ندارم، نه به خاطر اینکه خودش بد باشه ولی خب سلیقه من نیست و به خاطر جبر روزگار مجبوریم باهم بسازیم! کدوم قسمت؟ توسعه فرانت اند! اونم نه قسمتی که پر از رنگ و طرح و چیزهای گوگولیه، بلکه قسمتیش که منطق داره...
این روزها همه پروژههای وب، نیاز به فرانت اند های پر از قابلیت دارن و برای این کار، شما چند تا آپشن بیشتر ندارین
1. کتابخونههایی مثل ریاکت و ویو که قدرتشون بر کسی پیچیده نیست ولی خب خیلی سنگین هستن و روی هر پروژهای کارآمد نیستن.
2.کتابخونه قدیمی جی کوئری که ... ولش کن پشت سر مرده حرف نزنیم، خوبیت نداره!
و در نهایت راه سوم که آلپاین هستش.
آلپاین یه کتابخونه کوچیک و جمع و جور جاوااسکریپتی هستش برای زمان هایی که نیاز ما به اندازه یک فریمورک بزرگ نیست. خیلی وقتها فقط میخواهیم چند تعامل ساده بسازیم:
باز و بسته شدن منو، تغییر متن با کلیک، فرمهایی که بدون رفرش شدن صفحه بهروزرسانی میشن و مواردی از این دست.
سازندهاش، Caleb Porzio (همون کسی که Livewire را ساخته)، Alpine رو با هدف «سبکی و سادگی Vue در قالب HTML» ایجاد کرد.
شعارش هم خیلی گویاست:
“Think of it like Tailwind for JavaScript.”
«بهش مثل Tailwind در دنیای جاوااسکریپت نگاه کن.»
یعنی دقیقاً همون فلسفه: حداقلگرایی، سرعت بالا و نوشتن کد در خود HTML.
خب دیگه توضیحات اولیه و جیپیتی نوشت کافیه! بریم سراغ قسمت اصلی ماجرا
خب بریم سراغ آشنایی اولیه با بخش های مختلف آلپاین، برای اطلاعات تکمیلی هم داکیومنتیشنش رو سرچ کنید و ببینید.
همه چیز از x-data شروع میشه، قسمتی که ما متغیرها و استیت هامون رو توش ذخیره میکنیم.
همونجوری که توی عکس معلومه، متغیرها، استیتها و چیزهای دیگهای که نیاز داریم، به شکل key-value توی این قسمت تعریف میشن و هرچیزی که اینجا تعریف کنیم، توی خود این div و تموم فرزند هاش قابل دسترسی هستن.
یه نکته هم بگم که منطق اینجا، همون منطق جاوا اسکریپته یعنی شما میتونید تابع هم اینجا تعریف کنید و توی یه متغیر بریزید.
حالا که متغیرمون رو تعریف کردیم، وقتشه یه نتیجه ازش ببینیم که لاقل دلمون خوش باشه. پس میایم کدمون رو آپدیت میکنیم
با نوشتن x-text میتونیم متنی که میخوایم رو توی بخشی که میخوایم بنویسیم. متغیرهایی که توی x-data درست کردیم، توی فرزند ها هم قابل دسترسی هستن. پس یه div داخل قبلی درست میکنیم و متغیر قبلی رو صدا میزنیم. نتیجه کار هم میشه این شکلی:
قسمت بعدی x-on هستش که زمانی ازش استفاده میکنیم که بخوایم ایونت های مختلف جاوااسکریپت رو صدا بزنیم. مثلا بخوایم روی یه دکمه کلیک کنیم.
اینجا من اول با x-data یه متغیر درست کردم و بهش مقدار اولیه دادم، و با x-text مقدارش رو نشون میدم. قسمت اصلی از x-on شروع میشه که من با استفاده از اون، ایونت click شدن رو کنترل میکنم و بهش گفتم که با هر بار اتفاق افتادنش، مقدار متغیر رو زیاد کن. اینم قبل و بعد از سه بار کلیک کردن:
البته برای کلیک کردن،اکثرا از شکل خاص خودش استفاده میکنن و به جای x-on:click از click@ استفاده میکنن.
اینجوری خوانا تر و قابل فهم تره اما از لحاظ منطقی، هیچ فرقی با قبلی نداره
تا اینجا ما یادگرفتیم که یه متغیر رو با x-data تعریف کنیم، با click@ یه اتفاقی رو رقم بزنیم و با x-text متنمون رو نشون بدیم. حالا فرض کنید که میخوایم کاربرمون یه کاری رو انجام بده، مثلا یه اطلاعاتی رو پر کنه، یا یه چیزی رو انتخاب کنه؛ اینجاست که x-model خودنمایی میکنه.
توی عکس بالا من اول یه متغیر خالی تعریف کردم و بعدش یه input گذاشتم که کاربر بتونه اسمش رو وارد کنه، و با x-model، باکس رو به متغیرمون متصل کردم. تهش هم یه x-text گذاشتم که نتیجه رو ببینیم. حالا اگه کاربر چیزی داخل باکس وارد کنه، آلپاین در لحظه متغیر رو آپدیت میکنه و مقدار جدید رو جایگزین میکنه!
البته x-model فقط به یه input ساده خلاصه نمیشه و جاهای زیادی میشه ازش استفاده کرد؛ مثلا زمانی که کاربر میخواد بین چند تا گزینه انتخاب کنه:
نوبتی هم باشه نوبت شرط هاست. x-if مثل یه if عادی عمل میکنه و اگه شرط داخلش برقرار باشه، اون قسمت رو از صفحه حذف میکنه یا اضافه میکنه. x-show هم کارش پنهان کردن و نشون دادن اجزای مختلفه. دقت کنید به کلماتی که استفاده کردم، x-if کلا از DOM المنت ها رو حذف میکنه یا دوباره میسازتشون اما x-show فقط یه display:none روش میذاره.
الان باید بتونید قسمت های مختلف این کد رو متوجه بشید. با x-data دوتا متغیر مختلف تعریف شده، یکی چیزیه که کاربر از طریق input وارد میکنه و اون یکی هم پسورد واقعی هستش. هر وقت کاربر mohammad1234 رو وارد بکنه، اول شرط if درست میشه و متن درست بودن پسورد نشون داده میشه و بعد از اون شرط x-show برقرار میشه و اون بخش از کد هم نشون داده میشه.
نکته: دقت کنید که x-if رو فقط میشه توی template استفاده کرد که خب منطقی هم هست. اگه نمیدونید چرا؟ سرچ کنید یا از جیپیتی بپرسید.
بقیه مطالب رو توی پست بعدی میگم که نه زیاد طولانی بشه و نه خسته کننده. اگه نظر یا پیشنهادی دارین خوشحال میشم توی کامنت ها بهم بگید تا دفعههای بعد، پستهای بهتری بذارم. لایک هم یادتون نره!
تا پست بعدی، مراقب خودتون و خوبیهاتون باشید.❤️
