درک اقدامات در Svelte

اقدامات Svelte یک ویژگی بسیار قدرتمند و ضروری است. با کمک این راهنما، مفاهیم را یاد بگیرید.

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

این راهنما به شما کمک می کند تا درک کنید که اقدامات Svelte چگونه کار می کنند و چگونه از آنها استفاده کنید. درک نحوه عملکرد اقدامات Svelte یک مهارت ضروری برای هر کسی است که به دنبال استفاده از پتانسیل کامل این چارچوب قابل توجه است.

اقدامات Svelte چیست؟

در ابتدایی ترین سطح، یک عمل در Svelte به سادگی یک تابع جاوا اسکریپت است که هر زمان که یک عنصر نصب شود اجرا می شود. اقدامات Svelte می توانند یک شی جاوا اسکریپت را با یک روش تخریب که مرورگر هر زمان که عنصری را از Document Object Model (DOM) حذف کند، فراخوانی می کند. برای مثال، اگر می‌خواهید متن داخلی یک عنصر DOM را هر زمان که مرورگر آن را روی DOM نصب می‌کند، ثبت کنید، یکی از روش‌های زیر انجام این کار است:

<script>
  let messageShown;
  let message;
  $: messageShown ? console.log("Mounted:", message?.innerText) : "";
</script>

{#if messageShown}
  <div bind:this={message}>This is a message...</div>
{/if}

<button on:click={() => (messageShown = !messageShown)}>Toggle Message</button>

در بلوک کد بالا، دو متغیر در تگ اسکریپت وجود دارد که عبارتند از messageShown و message. مرورگر عنصر div را فقط در صورتی نصب می کند که messageShown درست باشد و عنصر دکمه مسئول کنترل وضعیت متغیر messageShown است.

در عنصر div، یک دستورالعمل bind وجود دارد که عنصر میزبان (در این مورد div) را به متغیر messageShown متصل می کند. نماد $ عبارت بعدی را به‌عنوان واکنش‌گرا علامت‌گذاری می‌کند – به این معنی که هر توابع در دستور هر زمان که هر یک از وابستگی‌ها تغییر کند دوباره اجرا می‌شوند.

در این حالت، نماد $ به مرورگر می‌گوید که به هرگونه تغییر در عبارت بعدی گوش دهد و innerText پیوند پیام را ثبت کند. به یاد بیاورید که پیام به عنصر div محدود شده است.

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

چگونه یک اکشن Svelte ایجاد کنیم

در اینجا نحوه ایجاد عملکردی که در بالا نشان داده شده است با یک عمل به جای آن آمده است. Svelte یک دستورالعمل کاربردی ارائه می دهد که می توانید به هر عنصری در جزء خود متصل کنید. دستورالعمل use: باید به عملی که می‌خواهید اجرا کنید، به محض اینکه مرورگر عنصر را روی DOM نصب کرد، اشاره کند.

<script>
let messageShown = false;
const notify = (node) => {
    console.log("Mounted", node.innerText);
}
</script>

{#if messageShown}
<div use:notify>
    This is a message...
</div>
{/if}

<button on:click={()=>messageShown=!messageShown}>Toggle Message</button>

در بلوک کد بالا، تگ اسکریپت دارای یک تابع اطلاع رسانی است که یک پیام را در کنسول مرورگر ثبت می کند. در بخش نشانه گذاری، عنصر div یک استفاده دارد: دستورالعمل که به تابع notify ارجاع می دهد.

این به مرورگر می‌گوید که هر زمان که مرورگر عنصر div را روی DOM نصب می‌کند، عملکرد notify را اجرا کند. به پارامتر گره در تابع notify توجه کنید. این پارامتر به عنصری اشاره دارد که عمل به آن متصل است.

از طریق GIPHY

توجه داشته باشید که این رویکرد در مقایسه با روش قبلی چقدر تمیزتر به نظر می رسد. رویکرد قبلی به خوبی کار می کند، اما اگر بخواهید این عملکرد را در چندین عنصر در اجزای مختلف تکرار کنید، چه؟ این باعث تکرار کد می شود.

از آنجایی که یک اکشن Svelte به سادگی یک تابع است، به این معنی است که می توانید یک فایل .js معمولی ایجاد کنید و اقدام خود را به عنوان یک ماژول صادر کنید که عناصر مختلف در برنامه شما می توانند از آن استفاده کنند. شما می توانید چندین عمل را به یک عنصر متصل کنید که هر کدام برای انجام یک کار خاص طراحی شده اند. یک رویکرد رایج ایجاد یک فهرست lib با یک فایل actions.js است که اقدامات مختلف را صادر می کند.

export function action1(node) {
    // Some code to run...
}

export function action2(node) {
    // Some code to run...
}

اکنون می توانید اقدامات مناسب را در هر کجا که نیاز دارید وارد کنید:

<script>
    import { action1 } from "./lib/actions" 
</script>

<div use:action1>

</div>

استفاده از روش تخریب در یک اکشن

بنابراین، شما در مورد گوش دادن به تغییرات زمانی که مرورگر یک عنصر را روی DOM نصب می کند، یاد گرفته اید، اما چگونه می توانید حذف یک عنصر از DOM را نظارت کنید؟ همانطور که قبلا ذکر شد، در Svelte، هر اکشنی این قابلیت را دارد که یک شی را با یک متد تخریب ارائه دهد، که به شما امکان می دهد هر زمان که مرورگر عنصر میزبان را از DOM حذف کرد، اقداماتی را انجام دهید.

می‌توانید تابع notify را از مثال قبلی تغییر دهید تا یک شی را با روش تخریب مانند زیر برگردانید:

const notify = (node) => {
  console.log("Mounted", node.innerText);
  return {
      destroy: ()=>console.log('Unmounted!')
  }
}

تابع یک شی را با متد تخریب برمی گرداند. هنگامی که مرورگر عنصر را حذف می کند، متد تخریب را که وظیفه نمایش متن را Unmounted است فرا می خواند! در کنسول

از طریق GIPHY

انتقال پارامترها به یک اکشن

هنگامی که یک اکشن را با استفاده از: دستور به عنصری متصل می کنید، Svelte به طور خودکار آن عنصر را به پارامتری (که معمولاً گره نامیده می شود) متصل می کند، که می توانید از اکشن خود به آن ارجاع دهید. اما شما می توانید پارامترهای دیگر را به یک عمل مانند این منتقل کنید:

<div use:action={param}></div>

اگر می خواهید به متغیر param در اکشن خود ارجاع دهید، عمل باید چیزی شبیه به این باشد:

function action(node, param){
    // Some code here...
}

انتقال چندین پارامتر به یک عمل نیز امکان پذیر است. برای انجام این کار، شما باید پارامترها را به عنوان یک شی ارسال کنید.

<div use:action={{param1, param2}}>

</div>

اکنون می توانید از پارامتر در عمل خود به این صورت استفاده کنید:

function action(node, {param1, param2}) {
    // Some code here...
}

استفاده از روش به روز رسانی در یک اقدام

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

<script>
let number = null;
let randomSign = Math.random() < 0.5 ? -1 : 1;
let guess = Math.floor(Math.random()*10) * 5 * randomSign;
console.log(guess);
let message = `Guess the number the computer is thinking...
It is a multiple of 5 :-)`

function evaluate(node, {number, guess}){ 
  return {
    update:({number, guess}) =>{
      number > guess ? message='Lower!' : message = "Higher!"
      number === guess ? message="You guessed it!" : "";
    }
  }
}
</script>

{message}
<h1 use:evaluate={{number, guess}}>
  {number}
</h1>
<button on:click={()=>number=number+5}>Increase by 5</button>
<button on:click={()=>number=number-5}>Reduce by 5</button>

در بلوک کد بالا، تابع ارزیابی عملی است که یک شی را با روش به روز رسانی برمی گرداند. این روش به تغییرات در پارامترهای ارسال شده گوش می دهد و رشته ای را بر اساس نزدیکی کاربر به حدس دقیق برمی گرداند. دو دکمه با دستورالعمل های on:click وجود دارد که مسئول افزایش و کاهش تعداد هستند.

از طریق GIPHY

Svelte توسعه وب را آسان تر می کند

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

نحو زیبا و شهودی آن به توسعه دهندگان این امکان را می دهد که به راحتی تجارب وب پویا ایجاد کنند، در حالی که سیستم واکنش پذیری آن مدیریت حالت را ساده می کند. SvelteKit یک متا فریم ورک است که Svelte را از یک کتابخانه کامپوننت/UI به یک چارچوب کامل با پشتیبانی از مسیریابی، رندر سمت سرور و موارد دیگر تبدیل می کند.

منبع مقاله