منابع غیر جاوااسکریپتی و اتصال به HTML

ماژول‌ها در جاوااسکریپت مدرن فراتر از جابه‌جا کردن چند تابع ساده رفته‌اند! در این بخش یاد می‌گیریم چطور فایل‌های سون (JSON) و سی‌اس‌اس (CSS) را مستقیماً مانند یک ماژول وارد کنیم و در نهایت ببینیم چطور باید این ماژول‌ها را به فایل HTML متصل کرد تا مرورگر بدون مشکل آن‌ها را اجرا کند.

۱. بارگذاری منابع غیر جاوااسکریپتی (Loading non-JavaScript resources)

یکی از جذاب‌ترین ویژگی‌های معماری یکپارچه ماژول‌ها، امکان بارگذاری منابعی غیر از جاوااسکریپت است. برای مثال، شما می‌توانید یک فایل JSON را به صورت یک شیء (Object) جاوااسکریپتی، یا یک فایل CSS را به صورت یک شیء از نوع CSSStyleSheet وارد پروژه کنید.

ویژگی ویژگی‌های واردات (Import Attributes)

از آنجا که مرورگرها به صورت پیش‌فرض فکر می‌کنند هر چیزی که وارد می‌کنید جاوااسکریپت است، اگر نوع فایل متفاوت باشد خطا می‌دهند. بنابراین، باید با استفاده از کلمه کلیدی with، نوع منبع را کاملاً مشخص کنید:

// وارد کردن یک فایل JSON
import colors from "./colors.json" with { type: "json" };

// وارد کردن یک فایل CSS
import styles from "./styles.css" with { type: "css" };

یک تدبیر امنیتی مهم: مرورگرها نوع فایل (MIME type) را بررسی و تایید می‌کنند. یعنی اگر آدرس ./data.json واقعاً به یک فایل JSON ختم نشود، عملیات با خطا مواجه می‌شود. این کار باعث می‌شود تا شما به اشتباه کدهای مخربی را به جای داده‌های معمولی اجرا نکنید.

نحوه استفاده در کد

بعد از وارد کردن موفقیت‌آمیز، می‌توانید به راحتی از آن‌ها استفاده کنید:

// استفاده از داده‌های JSON مثل یک شیء معمولی
console.log(colors.map((color) => color.value));

// اعمال استایل‌های CSS به سند HTML
document.adoptedStyleSheets = [styles];

۲. اتصال ماژول به فایل HTML (Applying the module to your HTML)

حالا وقت آن است که فایل اصلی جاوااسکریپت (مثلاً main.js) را به صفحه HTML خود متصل کنیم. ظاهر این کار شبیه به افزودن اسکریپت‌های معمولی است، اما یک تفاوت بسیار مهم دارد!

شما حتماً باید ویژگی type="module" را به تگ <script> اضافه کنید تا مرورگر بفهمد این فایل یک ماژول است:

<script type="module" src="main.js"></script>

همچنین می‌توانید کدهای ماژول را به صورت درون‌برنامه (Inline) مستقیماً داخل خود تگ بنویسید:

<script type="module">
  /* کدهای جاوااسکریپت ماژول شما در اینجا قرار می‌گیرد */
</script>

خطاهای رایج که باید مراقب آن‌ها باشید!

شما کلمات کلیدی import و export را فقط و فقط داخل ماژول‌ها می‌توانید استفاده کنید. اگر فراموش کنید type="module" را بنویسید و بخواهید چیزی را import کنید، با خطای جاوااسکریپتی مواجه می‌شوید:

<script>
  import _ from "lodash"; // SyntaxError: import declarations may only appear at top level of a module
</script>

<script src="a-module-using-import-statements.js"></script>

یک توصیه حرفه‌ای برای معماری ساختار پروژه

بهتر است همیشه ماژول‌های خود را در فایل‌های مجزا بنویسید. ماژول‌هایی که به صورت درون‌برنامه (Inline) در HTML نوشته می‌شوند، فقط می‌توانند فایل‌های دیگر را وارد (Import) کنند؛ اما اگر چیزی را صادر (Export) کنند، بقیه فایل‌ها به آن دسترسی نخواهند داشت چون این کدها آدرس (URL) مشخصی ندارند.

نکته طلایی برای افزایش سرعت سایت: شما می‌توانید ماژول‌ها و وابستگی‌های آن‌ها را با استفاده از تگ <link> و ویژگی rel="modulepreload" پیش‌بارگذاری کنید. این کار زمان لود شدن صفحات وب‌سایت شما را به شدت کاهش می‌دهد:

<link rel="modulepreload" href="main.js">

کپی