Svelte Framework چیست و چگونه از آن استفاده می کنید؟

با چارچوب Svelte آشنا شوید و یاد بگیرید که چگونه برنامه های وب هوشمند را با این راهنما توسعه دهید.

Svelte یکی از داغ ترین فریم ورک های جاوا اسکریپت است. در نظرسنجی توسعه دهندگان StackOverflow در سال ۲۰۲۲، به عنوان دومین فریم ورک محبوب جاوا اسکریپت در میان توسعه دهندگان وب ظاهر شد. در این راهنما، اصول و نحوه ساخت یک برنامه کاربردی ساده با استفاده از Svelte را یاد خواهید گرفت.

شروع با Svelte

با ابزار Vite build همه چیز را تنظیم خواهید کرد. ترمینال را باز کنید و دستورات زیر را به ترتیب اجرا کنید. نام پروژه را “svelte-app” (یا به انتخاب خود) بگذارید، Svelte را به عنوان چارچوب انتخاب کنید و جاوا اسکریپت را به عنوان نوع آن تنظیم کنید.

yarn create vite cd svelte-app yarn yarn dev

پروژه را در یک ویرایشگر کد باز کنید، پوشه lib را حذف کنید و محتویات فایل app.css و فایل App.svelte را پاک کنید.

چگونه Svelte با واکنش مقایسه می شود

DOM یک ساختار درخت مانند است که از HTML یک سایت تولید می شود و روابط بین عناصر مختلف تشکیل دهنده صفحه را نشان می دهد.

برخلاف React که از DOM مجازی استفاده می‌کند، Svelte یک کامپایلر است که در زمان ساخت متوجه می‌شود که چگونه چیزها در برنامه شما می‌توانند تغییر کنند. از آنجایی که Svelte در زمان ساخت کار می کند، جاوا اسکریپت وانیلی را بسیار کارآمد و بهینه می کند.

واکنش پذیری و انیمیشن در Svelte

ساختار اکثر برنامه های کاربردی Svelte در زیر نشان داده شده است. شما می توانید انتخاب کنید که تگ های سبک درج نشود و فقط اسکریپت و نشانه گذاری باقی بماند:

<script>
// Scripting Logic
</script>

<!-- Markup -->

<style>
/* Scoped Styling */
</style>

در Svelte، واکنش پذیری بر اساس تکالیف است. به کد زیر دقت کنید:

<script>
    let count = 0;
    const handleClick = () => {
        count += 2;
    }
</script>

<main>
You have clicked: 
<button on:click={handleClick}>
     {count} {count === 1 ? 'time' : 'times'}
</button>
</main>

تگ اسکریپت متغیر count و تابع handleClick را تعریف می‌کند که افزایش‌ها ۲ عدد می‌شوند. عنصر اصلی دارای دکمه‌ای با دستورالعمل on:click برای اجرای تابع handleClick است. هنگامی که تعداد تغییر می کند، دکمه به روز می شود.

Svelte انیمیشن عناصر را آسان می کند. فرض کنید تصویری دارید که عرض آن را می توان با فشار دادن یک دکمه تنظیم کرد، از ابزار svelte/motion ماژول tweened می توان برای دستیابی به این جلوه استفاده کرد.

<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
let src="https://images.pexels.com/photos/718752/pexels-photo-718752.jpeg";
    
    let size=tweened(30, {
        duration: 900,
        easing: cubicOut
    })
</script>

<button on:click={()=>size.set($size+30)}>
    Increase Photo Size
</button>
<button on:click={()=>size.set($size-30)}>
    Decrease Photo Size
</button>
<br />
<img src={src} width={$size} />

این کد از tweened برای ارتباط اجزا و انیمیشن و یک cubicOut easing برای ایجاد یک انیمیشن روان استفاده می کند. size.set(…) پس از تکمیل tween وعده حل شده را برمی گرداند.

مطلب مرتبط: نحوه پیاده سازی احراز هویت کاربر در فلاسک با استفاده از JWT

ساخت یک برنامه ساده برای انجام با Svelte

بیایید عملکردی را برای تأیید اعتبار موارد قبل از افزودن آنها به فهرست کارها اضافه کنیم، موارد را حذف کنیم، در صورت نامعتبر بودن ورودی به کاربر هشدار دهیم، و لیست کارها را در حافظه محلی ذخیره کنیم.

نگران CSS نباشید، محتویات آن را کپی کنید
app.css
فایل از این
مخزن GitHub پروژه
و آنها را در پروژه خود قرار دهید
app.css
. شما همچنین می توانید
نسخه ی نمایشی را اینجا ببینید
.

یک فایل src/components/Item.svelte ایجاد کنید و در فایل App.svelte عنصر

<script>
  import Item from "./components/Item.svelte";
</script>

یک آرایه به نام todo و چهار متغیر به نام های: alertMessage، errorMessage، duplicateMessage و successMessage را تعریف کنید.

  import Item from "./components/Item.svelte";
  let todo = [];
  let errorMessage = "Item cannot be empty!";
  let duplicateMessage = "Item already added!";
  let successMessage = "Item has been added and list updated!";
  let alertMessage;

در قسمت نشانه گذاری، در زیر اسکریپت، یک عنصر اصلی به عنوان نقطه ورودی ایجاد کنید. در داخل آن، یک div با کلاس "app" ایجاد کنید. در داخل این، یک div دیگری با عنصر h6 با کلاس "alert hidden" ایجاد کنید. این عنصر پیام های موفقیت آمیز را بر اساس متغیر alertMessage نمایش می دهد.

<main>
<div class="app">
<h6 class="alert hidden">{alertMessage}</h6>
</div>
</main>

یک عنوان h1 "Svelte To-Do List" ایجاد کنید، سپس یک عنصر فرم با نوع ورودی "text" اضافه کنید، این باید دارای یک مکان نگهدار و حداکثر طول ۳۲ کاراکتر باشد، و یک دکمه ارسال با دستور on:submit در فرم به تابع addTodo را با مقدار ورودی به عنوان پارامتر فعال کنید.


      <form on:submit|preventDefault={() =>
          addTodo(document.querySelector("input").value)}>
        <div>
          <input type="text" placeholder="Enter Something" maxlength="39" />
          <button type="submit">Add</button>
        </div>
      </form>

یک div "todo-container" در داخل "app" div ایجاد کنید. اگر آرایه todo خالی نیست، div "todo" را رندر کنید، در غیر این صورت یک div را با متن "[Empty]" ارائه دهید.

روی آرایه todo در "todo" div تکرار کنید، مولفه Item را ارائه می‌کند که عناصر را دریافت می‌کند: "item"، "done"، "removeTodoHandler" و "updateTodoHandler".

<div class="todo-container">
      {#if todo.length}
        <div class="todo">
          {#each todo as { item, done } (item)}
            <Item
              {item}
              {done}
              removeTodoHandler={removeTodo}
              updateTodoHandler={updateTodo}
            />
          {/each}
        </div>
      {:else}
        <div>[Empty]</div>
      {/if}
    </div>
  </div>

قبل از اینکه منطق برنامه را تعریف کنیم، بیایید یک ظاهر طراحی شده را برای پیام هشدار تنظیم کنیم. برای انجام این کار، یک عنصر سبک در زیر نشانه گذاری تعریف کنید و موارد زیر را اضافه کنید:

  :global(.alert) {
    padding: 10px;
    color: white;
    position: absolute;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    width: max-content;
  }
  :global(.error) {
    background-color: rgba(255, 0, 0, 0.6);
  }
  :global(.success) {
    background-color: rgba(0, 128, 0, 0.6);
  }
  :global(.hidden) {
    display: none;
  }

کد، استایل جعبه هشدار را بر اساس نوع هشدار با استفاده از اصلاح کننده :global() تعریف می کند. در تگ اسکریپت، پنج تابع وجود دارد: validate()، displayAlert()، addTodo()، removeTodo() و updateTodo().

مطلب مرتبط: چگونه با استفاده از HTML، CSS و جاوا اسکریپت یک کتاب دستور تهیه کنیم

هر تابع، به جز displayAlert، یک پارامتر مورد را می گیرد. تابع اعتبارسنجی یک رشته خالی یا موارد تکراری را در لیست کارهای موجود (ذخیره شده در آرایه allItems) بررسی می کند.

  function validate(item) {
    let allItems = todo.map((x) => x.item);
    if (item.length === 0) {
      return "error";
    } else if (allItems.includes(item.trimEnd().trimStart())) {
      return "duplicate";
    } else {
      return "success";
    }
  }

تابع displayAlert() یک پیام هشدار با یک نوع (خطا، تکراری یا موفقیت) نمایش می دهد. پیام و سبک های مناسب را بر اساس نوع تنظیم می کند و بعد از ۲ ثانیه هشدار را مخفی می کند.

  function displayAlert(type) {
    let alert = document.querySelector(".alert");
    alert.classList.remove("hidden");
    if (type === "error") {
      alertMessage = errorMessage;
      alert.classList.add("error");
    } else if (type === "duplicate") {
      alert.classList.add("error");
      alertMessage = duplicateMessage;
    } else {
      alert.classList.add("success");
      alertMessage = successMessage;
    }
    setTimeout(() => {
      alert.className = "alert hidden";
    }, 2000);
  }

()updateTodo یک آیتم جدید را به آرایه todo پس از اعتبار سنجی اضافه می کند. اگر مورد معتبر باشد، به آرایه todo اضافه می شود، قسمت ورودی پاک می شود و یک هشدار موفقیت نمایش داده می شود.

  function addTodo(item) {
    let response = validate(item);
    if (response === "error") {
      displayAlert("error");
    } else if (response === "duplicate") {
      displayAlert("duplicate");
    } else {
      todo = [{ item: item.trimEnd().trimStart(), done: false }, ...todo];
      console.log(todo);
      localStorage.setItem("todo", JSON.stringify(todo));
      document.querySelector("input").value = "";
      displayAlert("success");
    }
  }

updateTodo() وضعیت "انجام شد" آرایه todo را تغییر می دهد در حالی که تابع removeTodo() یک آیتم خاص را از آرایه todo حذف می کند.

  function updateTodo(item) {
    let target = todo.findIndex((x) => x.item === item);
    todo[target].done = !todo[target].done;
  }
  
  function removeTodo(item) {
    todo = todo.filter((x) => x.item !== item);
  }

اکنون، به فایل Item.svelte بروید و یک عنصر اسکریپت را تعریف کنید که آیتم را صادر می کند، TodoHandler را حذف می کند، انجام می شود و پشتیبانی TodoHandler را به روز می کند. متغیری به نام hover تعریف کنید که مقدار بولی، false را ذخیره می کند.

<script>
    export let item;
    export let removeTodoHandler;
    export let done;
    export let updateTodoHandler;
    let hover = false;
</script>

در بخش نشانه گذاری، یک div با یک کلاس به صورت پویا بر اساس مقدار متغیر "انجام شد" تعریف می شود. اگر «انجام شد» درست باشد، کلاس «اعتصاب» اضافه می‌شود، که یک تزئین متنی CSS را برای نشان دادن تکمیل اعمال می‌کند. دو دستورالعمل مؤلفه، "on:mouseenter" و "on:mouseleave" برای تغییر وضعیت شناور گنجانده شده است.

<div class="item {done ? 'strike' : ''}"
    on:mouseenter={() => (hover = true)}
    on:mouseleave={() => (hover = false)}>

</div>

div والد از دو عنصر تشکیل شده است: یک div (که یک چک باکس و یک مورد todo را نشان می دهد)، و یک دکمه که به صورت مشروط زمانی که حالت شناور درست است، ارائه می شود. چک باکس به متغیر "انجام شد" مرتبط است و هنگام تغییر، عملکرد "updateTodoHandler" را فعال می کند.

    <div>
        <input
            class="done"
            type="checkbox"
            bind:checked={done}
            on:change={() => updateTodoHandler(item)}/>
        <span>{item}</span>
    </div>

    {#if hover}
        <button class="delete" on:click={() => removeTodoHandler(item)}
            >Remove
        </button>
    {/if}
</div>

و بس! شما موفق به ایجاد یک برنامه کاربردی لیست کارها شده اید.

مطلب مرتبط: مهارت های جاوا اسکریپت خود را با این 9 فیلم آموزشی پروژه بازی سرگرم کننده تقویت کنید

برنامه todo موارد را به‌عنوان انجام شده ایجاد، حذف و علامت‌گذاری می‌کند، اما وقتی صفحه به‌روزرسانی می‌شود، همه آن داده‌ها از بین می‌روند.

بیایید با افزودن فضای ذخیره‌سازی آن را برطرف کنیم. برای حفظ داده ها در بازخوانی صفحه، آرایه todo را به صورت زیر تغییر دهید:

let todo=JSON.parse(localStorage.getItem("todo")) || [];

کد کلید "todo" را از حافظه محلی مرورگر بازیابی و تجزیه می کند. اگر مقدار درست نباشد، به صورت پیش‌فرض روی یک آرایه خالی تنظیم می‌شود.

سپس خط زیر را به توابع addTodo()، updateTodo() و removeTodo() اضافه کنید.

localStorage.setItem("todo", JSON.stringify(todo));

این آرایه todo را در حافظه محلی ذخیره می کند و از ماندگاری داده ها اطمینان می دهد.

با Svelte همه چیز را ساده نگه دارید

توسعه دهندگان Svelte را دوست دارند زیرا نوشتن آسان تر است، به خصوص اگر در زمینه توسعه وب مبتدی باشید.

Svelte یک جایگزین عالی برای React است، اما برای کسانی که بیشتر می خواهند، درست مانند React Developers از NextJS (فریم ورکی که بر روی React ساخته شده است)، توسعه دهندگان Svelte نیز SvelteKit را دارند که مشابه NextJS است.

Tags: جاوا اسکریپت