اشتراک داده ها بین لاراول و جاوااسکریپت

اشتراک داده ها بین بک‌ اند و فرانت اند جز مواردی هست که در اکثر اپلیکیشن های تحت وب مورد نیازه... مثلا زمانی رو در نظر بگیرید که شما در حین کار کردن با یک فریم‌ورک جاوااسکریپتی و یا حتی حین کارکردن با کتابخونه jQuery ، برای رندر کردن پروفایل کاربر نیاز به آبجکت user دارید. و طبیعتا این گونه اطلاعات در یه بانک داده ذخیره شدند که بک اند شما باهاش در تعامل هست.

در واقع چندین روش برای رد و بدل کرد اطلاعات بین PHP و Javascript وجود داره. برخی از این روش‌ها کمی پیچیده ترند و برخی دیگه ساده تر و بهینه تر. در این نوشته به بررسی این روشها می پردازیم و جوانب مثبت (مزایا) و منفی (معایب) هر یک و همچنین نحوه پیاده سازی آنها را می بینیم. و در نهایت پکیج لاراولی رو معرفی میکنیم که به راحتی این کار رو برای ما انجام میده:

• ارسال درخواست AJAX برای دریافت داده
• اکو کردن داده در جایی از صفحه و استفاده از جاوااسکریپت برای دریافت از DOM
• اکو کردن داده به طور مستقیم در جاوا اسکریپت

ارسال درخواست AJAX برای دریافت داده

این گزینه بهترین روش حساب میشه، چونکه اسکریپت های سمت سرور و کلاینت شما کاملاً مجزا هستند.

مزایا:

• جداسازی بهتر بین لایه ها: اگر قرار شد در آینده دیگه از PHP استفاده نکنید، نیازی نیست مقدار زیادی از کد جاواسکریپت رو تغییر بدید.
• خوانایی بیشتر: با ترکیب نکردن کدهای PHP و جاواسکریپت، خوانایی بیشتری در هر دو قسمت وجود داره.
• امکان انتقال داده های غیر همزمان: بعضی مواقع دریافت اطلاعات از سمت PHP میتونه زمان بر باشه، مسلما ما نمیخواهیم که همه چیز رو متوقف کنیم تا ابتدا داده ها رو دریافت کنیم و بعد صفحه رو رندر کنیم; پس در عوض صفحه رو رندر می‌کنیم و زمانی که اطلاعات دریافت شد، اطلاعات رو هم به صفحه ضمیمه می‌کنیم.
• حظور نداشتن داده ها در مارک‌آپ: مارک‌آپ (HTML) رو تمیز نگه می‌داریم و تنها جاوااسکریپت هست که به این داده ها دسترسی داره.

معایب:

• تأخیر: درخواست AJAX در واقع یک درخواست HTTP هست ، و درخواست های HTTP از طریق شبکه انجام می شوند و این امر باعث میشه یه تأخیر جزئی رو احساس کنیم.

نحوه پیاده سازی:

برای درخواست AJAX به ۲ قسمت نیاز دارید: قسمتی در بک اند که اطلاعات رو فراهم میکنه. (معمول ترین جایی که ما اطلاعات رو ازش واکشی می‌کنیم دیتابیس هست) ما در اینجا برای سادگی بیشتر یه آبجکت ساده رو در نظر میگیریم که حاوی اطلاعات کاربر هست.. و قسمت بعد هم جایی هست که جاوااسکریپت از اطلاعات سمت بک اند استفاده میکنه:

فرض کنید ما یه کوئری به سمت سرور می‌زنیم و آرایه زیر رو دریافت میکنیم:

حال با استفاده از تابع json_enocde این آرایه رو به jSon تبدیل میکنیم و هنگامی کاربر endpoint مورد نظر رو درخواست کرد اطلاعات زیر رو بهش بر‌ میگردونیم:

حالا برای ارسال درخواست AJAX از axios استفاده میکنیم و براحتی میتونیم در جاوااسکریپت، هر عملیاتی که دوست داشتیم روی داده های برگشتی انجام بدیم:

اکو کردن داده در جایی از صفحه و استفاده از جاوااسکریپت برای دریافت از DOM

این روش نسبت به AJAX کمتر ارجحیت دارد اما مزایای خودش رو داره. در این روش میشه گفت نسبتا PHP و Javascript از هم جدا هستند. یا به عبارت دیگه کدهای PHP به صورت مستقیم در جاوااسکریپت حظور ندارند

مزایا:

• سرعت: عملیات های مربوط به DOM تقریبا سریع انجام میشند و میتونید نسبتا سریع داده ها رو مقدار دهی و یا بازیابی کنید

معایب:

• داشتن مارک‌آپ غیر معمول: معمولاً اتفاقی که می افته اینه که شما برای ذخیره اطلاعات از نوعی فیلد پنهان استفاده می کنید، چون گرفتن اطلاعات از inputNode.value ساده تره، اما انجام این کار به این معنی است که شما یک عنصر بی معنی در ساختار DOM به وجود آوردید.
• به هم ریختگی سورس: داده هایی که PHP تولید می کند مستقیماً به کدهای HTML منتقل می شود ، بدین معنی که شما یک منبع HTML بزرگتر و کمتر متمرکز دریافت می کنید.
• به دست آوردن داده های ساختار یافته سخت تر است: داده های ساختار یافته باید تگ‌های معتبر HTML باشند وگرنه باید خودتون عملیات تغییر و یا escaping رو روی رشته ها انجام بدید.
• ارتباط تنگاتنگ PHP با ساختار داده ها: جدا سازی PHP و ساختار داده ها از هم مشکل تر خواهد بود.

نحوه پیاده سازی:

در این روش یک المان بوجود میاریم که برای کاربر قابل مشاهده نباشه و با جاوااسکریپت بهش دسترسی پیدا می‌کنیم:

اکو کردن داده به طور مستقیم در جاوا اسکریپت

درک و استفاده از این روش بسیار ساده تر از گزینه های قبلی هست.

مزایا:

• پیاده سازی آسان: درک و پیاده سازی این روش بسیار سادست.
• عدم به هم ریختگی سورس: متغیرها مستقیماً به جاوااسکریپت منتقل می شوند ، بنابراین DOM تحت تأثیر قرار نمی گیرد.

معایب:

• ارتباط تنگاتنگ PHP با ساختار داده ها: جدا سازی PHP و ساختار داده ها از هم مشکل تر خواهد بود.

نحوه پیاده سازی:

پکیج Laravel Shared Data

در بالا روش های انتقال داده ها رو بین PHP و جاوااسکریپت بررسی کردیم. تمام این روش ها در لاراول هم قابل استفاده هستند. اما به تازگی پکیجی منتشر شده که تمام این مراحل رو برای ما انجام میده و داده های ارسالی از سمت لاراول رو به شئ window جاوااسکریپت اضافه میکنه.

برای نصب این پکیج:

و سپس به راحتی در کنترلر ها و یا هر جای دیگه که خواستید میتونید به شکل زیر داده ها رو به اشتراک بگذارید; میتونید از فساد و یا هلپری که این پکیج در اختیارمون قرار میده، استفاده کنید:

انجام عملیات بالا باعث میشه داده ها به اشتراک گذاشته بشند و به شکل زیر به راحتی در جاوااسکریپت در دسترس باشند:

تنها کاری که باید انجام بدید، اضافه کردن دایرکتیو shared@ به فایل های ویو هست:

چنانچه خواستید نام آبجکت مربوطه در شئ window رو هم تغییر بدید، میتونید به تنظیمات پکیج مراجعه و به شکل زیر عمل کنید:

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