نحوه انتقال داده ها به یک فایل جاوا اسکریپت استاتیک با استفاده از ویژگی های داده-*

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

از آنجا که پرونده های استاتیک نمی توانند داده ها را از یک پس زمینه واکشی کنند یا از اجزای React استفاده کنند ، باید به آنچه در DOM موجود است اعتماد کنند.

یک راه حل زیبا و گسترده پشتیبانی استفاده از ویژگی های HTML Data-* است.

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

🎯 مشکل

بیایید بگوییم که شما در حال توزیع یک اسکریپت استاتیک هستید-به عنوان مثال ، یک دکمه نظرسنجی ، ویجت راهنما یا یک افزونه شخص ثالث. شما می خواهید سایر توسعه دهندگان (یا کاربران غیر DEV) اسکریپت خود را جاسازی کنند و بتوانند مواردی مانند:

• طرح رنگ
• موقعیت (چپ/راست/پایین)
• نماد

اما پرونده JavaScript شما در CDN میزبان است و نمی تواند به صورت پویا اصلاح شود.

بنابراین ، چگونه می توانید آن را تنظیم کنید؟

✅ الگوی ویژگی Data-*

HTML DATA-* ویژگی ها به شما امکان می دهد تا ابرداده های سفارشی را به عناصر وصل کنید. این مقادیر از طریق JavaScript با استفاده از .dataset API

در اینجا نحوه عملکرد آن آورده شده است:

  id="my-widget"
  data-theme="dark"
  data-position="right"
  data-lang="en"
>
"https://cdn.example.com/widget.js">

درون widget.js:

const el = document.getElementById("my-widget");
const config = {
  theme: el.dataset.theme || "light",
  position: el.dataset.position || "left",
  lang: el.dataset.lang || "en"
};

// Use the config to customize your widget
initializeWidget(config);

این الگوی تمیز ، قابل خواندن است و به متغیرهای جهانی یا ارتباطات خارجی احتیاج ندارد.

🧰 چرا از این الگوی استفاده می کنید؟

✅ جوانب مثبت

• کاملاً جدا شده: JS استاتیک شما به متغیرهای ارائه شده در سمت سرور یا ساخت و ساز متکی نیست.
• اعلانی: درک آسان برای توسعه دهندگان و درک غیر توسعه دهندگان.
• چندین نمونه: می توانید از این الگوی برای چندین ابزارک در همان صفحه استفاده کنید که هر کدام پیکربندی خاص خود را دارند.
• ایمن و انعطاف پذیر: در مرورگرها کار می کند ، به ذخیره سازی احترام می گذارد و در دامنه جهانی دخالت نمی کند.

❌ منفی

• داده ها به مقادیر رشته ای محدود می شوند – در صورت لزوم باید JSON یا Booleans را به صورت دستی تجزیه کنید.
• به ساختار صحیح HTML متکی است (به عنوان مثال ، یک عنصر با شناسه یا کلاس مناسب).
• اگر به درستی مستند نشده باشد ، مصرف کنندگان ممکن است گزینه های موجود را از دست ندهند.

✍ بهترین شیوه ها

• از نامگذاری واضح استفاده کنید: به داده ها- ویژگی هایی مانند data-colorبا data-user-id، و غیره
• پیش فرض های ایمن را تنظیم کنید: در JS خود ، همیشه مقادیر برگشتی را ارائه دهید.
• مقادیر ورودی را تأیید کنید (به عنوان مثال ، مضامین یا موقعیت های مجاز).
• از داده های حساس خودداری کنید: از طریق داده ها اسرار ، نشانه ها یا هر چیز خصوصی را منتقل نکنید.

🤔 اما صبر کنید … این تنها راه نیست

در حالی که ویژگی های داده* عالی هستند ، آنها قطعاً تنها گزینه نیستند. بسته به مورد استفاده شما ، ممکن است یکی از این موارد را نیز در نظر بگیرید:

1. متغیرهای جهانی

"https://cdn.example.com/widget.js">

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

2. پارامترهای پرس و جو در URL اسکریپت

"https://cdn.example.com/widget.js?theme=dark&lang=fa">

سپس می توانید این موارد را با استفاده از اسکریپت تجزیه کنید document.currentScript.srcبشر این برای مقادیر پیکربندی کوچک سریع و آسان است ، اما در صورت رشد پیکربندی شما می تواند سریع کثیف شود.

3. json در داخل "application/json" id="my-widget-config"> { "theme": "dark", "lang": "fa" }