Alpine js (آلپاین جی اس ) چیست؟

 آلپاین ( Alpine js ) یک فریمورک کوچک برای  توسعه فرانت‌اند  است که  با افزودن اسکریپت ها به فایل  HTML دستورات جاوااسکریپت را اجرا می کند. (شبیه فریمورک tailwind ) این به شما امکان را می دهد تا به سرعت و بدون دردسر از ماهیت واکنشی و اعلانی کتابخانه ها و فریم ورک های محبوب frontend مانند Angular، React و Vue استفاده کنید.

 

در این کتابخانه مرحله build   نداریم و اندازه فایل کتابخانه حدود 4 کیلوبایت gzip شده است. Alpine قرار نیست جایگزین فریمورک هایی مانند Vue و React شود. اگر یک برنامه تک صفحه ای بسیار تعاملی دارید، بهتر است از ابزارهای قدرتمندتر استفاده کنید.

زمانی که پروژه شما فقط به حداقل جاوا اسکریپت نیاز دارد، بهتر است از آن استفاده کنید، مانند زمانی که فقط به یک یا دو مؤلفه نیاز دارید، مانند کرکره ها، نوارهای کناری، برگه ها و انتخاب تصویر.

Alpine همچنین برای برنامه های رندر شده در سمت سرور، مانند Laravel، Rails و AdonisJS، که نیاز به تغییر برخی اجزای جاوا اسکریپت دارند، عالی است. و از آنجایی که DOM مجازی ندارد، راه اندازی آن آسان تر است.

 

اساسا، Alpine مانند Tailwind  می باشد که برای جاوا اسکریپت توسعه داده شده است. DOM و رفتار از هم جدا نیستند. شما به راحتی می توانید کد را به صورت اعلانی برخلاف کد رویه ای بنویسید. در نهایت، Alpine ردپای بسیار کمی در برنامه شما دارد.

حالا بیایید به مراحل نصب alpine js  برویم

 

نصب و استفاده اولیه

 

افزودن Alpine به یک پروژه آسان است. شما می توانید آن را با یک تگ اسکریپت از طریق CDN وارد کنید یا آن را به عنوان یک ماژول وارد کنید.

با استفاده از تگ اسکریپت

استفاده از تگ اسکریپت ساده ترین و ساده ترین راه برای افزودن Alpine به پروژه شماست. شما فقط باید قطعه زیر را در انتهای بخش <head> فایل HTML خود اضافه کنید:

 

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

 

به عنوان یک ماژول

با این روش ابتدا باید Alpine را از طریق npm نصب کنید:

 

npm install alpinejs

 

سپس، Alpine را به باندل خود وارد کرده و مقداردهی اولیه کنید:

 

import Alpine from 'alpinejs'

// optional
window.Alpine = Alpine

// initialize Alpine
Alpine.start()


 

یک مثال ساده از کامپونت alpine js

 

<html>
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="{ isOpen: true }">
        <button x-on:click=" isOpen = !isOpen">Toggle</button>
        <h1 x-show="isOpen">Alpinjs</h1>
    </div>
</body>
</html>

 

اولین قدم برای استفاده از Alpine تعریف یک محدوده است. محدوده تا هر جایی که نیاز باشد می رود و دارای همان محدوده انتخابگر HTML است که شما در آن قرار داده اید.

 

در کد بالا، ما یک محدوده را با استفاده از دستور x-data با ارسال یک آبجکت به عنوان مقدار حالت فعال و غیرفعال تعریف کردیم. دستور x-on به رویدادها گوش می دهد. برای عنصر دکمه، ما به رویداد کلیک گوش می دهیم که مقدار isOpen را به true یا false تغییر می دهد. با دستور x-show بر اساس مقدار آبجکت isOpen المان را نشان می دهیم یا مخفی می کنیم.

دستورالعمل های alpine js

در هسته فریمورک Alpine دستوراتی وجود دارد که با افزودن و حذف عناصر DOM، طرح DOM را تغییر می‌دهد و رفتار و ظاهر عناصر را در DOM تغییر می‌دهد. دستورالعمل های آلپاین با علامت x و به دنبال آن نام دستورالعمل شروع می شود.

 

بیایید به سرعت برخی از دستورالعمل ها را مرور کنیم و ببینیم چگونه می توان از آنها استفاده کرد.

 

x-data

 

x-data یک محدوده کامپونت جدید را با یک شی در یک عنصر HTML مقداردهی اولیه می کند. همه عناصر HTML فرزند به شی داده ای که در عنصر والد آن وجود دارد دسترسی دارند:

 

<div x-data="{ isOpen: false }">...</div>

 

x-init

 

x-init زمانی که کامپوننت اجرا شد به طور مثال یک شی مقدار دهی می شود ، می توان از آن برای تنظیم مقدار اولیه وضعیت کامپوننت استفاده کرد:

 

<div x-data="{ title: 'foo' }" x-init="title = 'bar'"></div>

 

همچنین، x-init را می توان برای اجرای کد پس از مقداردهی اولیه کامپوننت با ارسال یک تابع callback استفاده کرد:

 

<div x-data="{ images: [] }" x-init="$nextTick(() => {
    fetch('https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=yellow+flowers&image_type=photo')
      .then(response => response.json())
      .then(response => { images = response.hits })
  })"></div>

 

x-bind

 

Alpine x-bind را به عنوان مکانیزمی برای بایندینگ value ، boolean  و ویژگی های class  ارائه می کند.

 

بایندینگ ویژگی مقدار :

 

<img x-bind:src="imgSrc">

 

نکته: ما می توانیم دستور بالا را بدون x-bind هم استفاده کنیم

 

اتصال ویژگی کلاس:

 

<div :class="{ 'hidden': isClosed }"></div>

 

در این اتصال، یک object ارسال می شود. کلیدهای شیء نام کلاس ها و مقادیر عبارت های بولی هستند. اگر عبارت بولی به درستی ارزیابی شود، نام کلاس برای آن عنصر اعمال می شود. در دستور بالا اگر شی isClosed برابر با true باشد کلاس hidden اعمال شده و المان مخفی می شود.

 

<input type="text" x-bind:hidden="true">

 

اتصال بولی مانند اتصال ویژگی عمل می کند، اما عبارت ارسال شده باید به درست یا نادرست ارزیابی شود.

 

x-on

 

x-on شنونده رویداد یا event listener  را به عنصری که در آن اعلام شده است اضافه می کند. هنگامی که عنصر آن رویداد را منتشر می کند (به عنوان مثال، یک کلیک یا رویداد ورودی)، یک عبارت (یا تابع) اجرا می شود:

 

<button x-on:click="foo = 'bar'">Click me</button>

 

x-show

 

x-show ویژگی display عنصر را بسته به اینکه عبارت به درست یا نادرست ارزیابی شود تغییر می دهد. اگر عبارت نادرست ارزیابی شود، ویژگی display عنصر روی none تنظیم می شود. اگر به true تبدیل شود، ویژگی display روی block تنظیم می شود:

 

<div x-show="isOpen"></div>

 

x-if

 

در حالی که x-show می تواند برای تغییر ویژگی نمایش یک عنصر استفاده شود، عنصر در واقع از DOM حذف نمی شود. دستور x-if عناصر را با CSS پنهان نمی کند. آنها را به طور کامل از DOM اضافه و حذف می کند.

 

مقدار x-if یک عبارت بولی است که می تواند درست یا نادرست ارزیابی شود. اگر عبارت نادرست ارزیابی شود، x-if عنصر میزبان خود را از DOM حذف می کند. x-if فقط در عنصر template کار می کند و باید یک ریشه عنصر در داخل تگ template  داشته باشد:

 

<template x-if="true">
  <div>...</div>
</template>

 

x-for

 

x-for زمانی کمک می کند که می خواهید گره های DOM جدید برای هر مورد در یک مجموعه ایجاد کنید. درست مانند دستور x-if، دستور x-for باید روی یک تگ الگو وجود داشته باشد، نه یک عنصر DOM معمولی:

 

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

 

x-model

 

x-model یک قابلیت اتصال داده دو طرفه را به یک عنصر اضافه می کند و مقدار یک عنصر ورودی و داده های کامپوننت را همگام می کند. به اندازه کافی هوشمند است که تغییرات را در ورودی‌های متن، چک باکس‌ها، دکمه‌های رادیویی، نواحی متن و انتخاب‌های متعدد تشخیص دهد و مقدار آن‌ها را به داده‌های مؤلفه متصل کند:

 

<input type="search" x-model="search">

 

x-text

 

در حالی که x-bind برای اتصال ویژگی است، x-text برای تنظیم مقدار innerText یک عنصر استفاده می شود:

 

<span x-text="title"></span>

 

x-html

 

x-html مشابه x-text کار می کند، اما به جای تنظیم innerText، مقدار innerHTML یک عنصر را تعیین می کند:

 

<span x-html="title"></span>

 

برای کسب اطلاعات بیشتر در مورد دستورالعمل های alpine js، حتماً داکیومنت آن را بررسی کنید.

 

ساخت گالری تصاویر با Alpine

 

برای نشان دادن اینکه چگونه می توان از این دستورالعمل ها با هم استفاده کرد، اجازه دهید یک گالری تصویر ساده بسازیم، در توضیحات بالا گفتیم  آلپاین شبیه tailwind است، در پروژه زیر استایل را با tailwind طراحی کردیم.

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - alpine js-Photo Gallery</title>
  

</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html dir="rtl" 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" />
  <script defer src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>

  <title>Document</title>
</head>

<body x-data="images()" x-init="fetch('https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=yellow+flowers&image_type=photo')
.then(response => response.json())
.then(response => { images = response.hits })">
  <header class="absolute top-0 left-0 right-0 h-16 w-full">
    <nav class="container mx-auto flex items-center justify-between px-12 py-4 lg:px-36">
      <a class="w-24 lg:w-full" href="">
        <img src="https://i.postimg.cc/fTgpm23K/sitenema3-341x83-2-e1617898910767.png" alt="" />
      </a>

      <!-- hamberger -->
      <button class="lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </nav>
  </header>
  <div>
    <!-- hero start -->
    <section class="bg-[url('https://i.postimg.cc/zvXL1Kt5/2.jpg')] bg-cover bg-center pt-40 pb-28">
      <div class="container mx-auto px-16 lg:px-36">
        <div class="flex flex-col items-center justify-center space-y-3">
          <h1 class="text-2xl font-semibold text-white/80">جستجوی عکس</h1>
          <h2 class="text-xl font-normal text-white/70">می توانید عکس های با کیفیت را اینجا پیدا کنید</h2>
          <!-- search box -->
          <div x-model="q" dir="rtl" class="flex w-full items-stretch justify-center rounded lg:flex-wrap">
            <input class="flex-1 border-2 py-2 px-2 outline-none focus:border-sky-600" type="text" placeholder="جستجوی تصاویر" />
            <select x-model="image_type" class="ouline-none flex-1 border border-white py-2 text-gray-600 focus:border-sky-600" name="" id="" aria-placeholder="">
              <option selected>نوع تصویر را انتخاب کنید</option>
              <option value="all">همه</option>
              <option value="photo">عکس</option>
              <option value="illustration">تصاویر</option>
              <option value="vector">وکتور</option>
            </select>
            <div class="flex items-center rounded-l bg-sky-600 px-4 text-center text-white">
              <button @click="getImages()" class="inline-block align-text-top">جستجو</button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- hero end -->
    <!-- content start -->
    <section class=" grid grid-cols-5 gap-4 mt-4">
      <template x-for="image in images" :key="image.id">
        <div class=" border rounded shadow">
          <img class="h-auto  " :src="image.webformatURL" alt="image.tags[0]" />
        </div>
      </template>
    </section>
    <!-- content end -->
  </div>
  <script>
    function images() {
      return {
        images: [],
        q: "",
        image_type: "",
        getImages: async function() {
          console.log("params", this.q, this.image_type);
          const response = await fetch(
            `https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=${
                this.q
              }&image_type=${this.image_type}`
          );
          const data = await response.json();
          this.images = data.hits;
        }
      };
    }
  </script>
</body>

</html>
<!-- partial -->
  
</body>
</html>

 

برنامه گالری ما لیستی از تصاویر را از Pixabay دریافت می کند و آنها را نمایش می دهد. حالت برنامه بر روی تگ body  توسط دستور x-data با استفاده از تابعی به نام images تنظیم می شود. تابع یک شی را برمی گرداند که حاوی image، q، image-type و getImages است.

مقدار اولیه یک تصویر با استفاده از دستور x-init تنظیم می شود. x-init لیستی از تصاویر را از Pixabay دریافت می کند و آن را به عنوان فیلد مقدار تصاویر تنظیم می کند. q مقدار <input> را می گیرد و با استفاده از دستور x-model تنظیم می شود. از سوی دیگر، image_type مقدار <select></select> را می گیرد و همچنین با استفاده از دستور x-model تنظیم می شود.

 

ما یک event listener  کلیک را به <button> پیوست کردیم. هنگامی که دکمه کلیک می شود، متد getImages() در حالت فراخوانی می شود. متد getImages() تصاویر جدید را بر اساس مقدار q و image_type واکشی می کند.

 

See the Pen Untitled by mousa aghahoseini (@mousair-the-scripter) on CodePen.

 

نتیجه

 

در این آموزش نحوه استفاده از Alpine را توضیح دادیم و یک نمونه گالری تصویر را با فریمورک ساختیم. اگرچه ممکن است به طور کامل جایگزین سایر فریم ورک ها نشود، اما می توان آن را در ترکیب با React یا Vue برای نمونه سازی سریع component ها  بدون نوشتن جاوا اسکریپت با تعداد کد زیاد استفاده کرد. برای کسب اطلاعات بیشتر در مورد Alpine، حتماً وب سایت فریمورک را بررسی کنید.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *