شاید در نگاه اول فکر کنید تنها تفاوت ماژول‌ها با اسکریپت‌های قدیمی در استفاده از import و export است، اما قضیه بسیار عمیق‌تر از این حرف‌هاست! مرورگرها رفتار متفاوتی با ماژول‌ها دارند که اگر آن‌ها را ندانید، احتمالاً ساعت‌ها وقت خود را تلف عیب‌یابی (Debug) کدهایتان خواهید کرد.
در این بخش، ۵ تفاوت حیاتی را که هر متخصص جاوااسکریپت باید بداند، بررسی می‌کنیم.
اگر فایل HTML خود را به صورت محلی (یعنی با دبل‌کلیک کردن روی فایل و باز شدن آدرس با ساختار file://) در مرورگر باز کنید، ماژول‌ها به دلیل مسائل امنیتی اجرا نمی‌شوند و با خطای CORS مواجه می‌شوید!
راه‌حل: برای تست و اجرای ماژول‌ها حتماً باید از یک سرور محلی (Local Server) استفاده کنید. ابزارهایی مثل افزونه Live Server در VS Code یا پکیج
http-serverدر Node.js بهترین گزینه‌ها هستند.
کدهایی که درون یک ماژول می‌نویسید، به صورت خودکار و اجباری در حالت Strict Mode اجرا می‌شوند. این یعنی امنیت و دقت کد بالاتر می‌رود، اما رفتارهایی مثل تعریف متغیر بدون کلمات کلیدی (var, let, const) خطای آنی ایجاد خواهند کرد.
در اسکریپت‌های معمولی، برای اینکه کد جاوااسکریپت مانع لود شدن کدهای HTML (بلاک شدن DOM) نشود، از اتریبیوت defer استفاده می‌کنیم. اما ماژول‌ها هوشمند هستند!
برای بارگذاری یک ماژول هیچ نیازی به نوشتن defer نیست؛ مرورگر به صورت خودکار آن‌ها را به صورت Defer بارگذاری می‌کند تا سرعت لود صفحه حفظ شود.
اگر یک اسکریپت معمولی را در ۳ تگ <script> مختلف صدا بزنید، ۳ بار اجرا می‌شود. اما ماژول‌ها این‌طور نیستند؛ حتی اگر یک ماژول در چندین تگ <script> مختلف یا توسط فایل‌های متعدد import شود، مرورگر آن را فقط و فقط یک‌بار اجرا می‌کند و برای دفعات بعدی از نسخه کش‌شده استفاده می‌کند.
این یکی از مهم‌ترین تفاوت‌هاست! قابلیت‌ها و متغیرهایی که درون یک ماژول وارد یا تعریف می‌شوند، اصلاً در محدوده جهانی (Global Scope) دسترس نیستند.
شما فقط داخل همان فایل به آن‌ها دسترسی دارید.
حتی در بخش کنسول مرورگر (DevTools) هم نمی‌توانید به متغیرهای داخل ماژول دسترسی مستقیم داشته باشید (هرچند ارورهای سینتکسی را کماکان در DevTools خواهید دید).
متغیرهایی که در ماژول تعریف می‌شوند جهانی نیستند، اما متغیرهای جهانی برای ماژول‌ها قابل دسترسی هستند! به این کدها دقت کنید:
کد HTML:
<!doctype html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>مثال ماژول و اسکریپت معمولی</title>
</head>
<body>
<div id="main"></div>
<script>
// این یک اسکریپت معمولی است.
// استفاده از var یک متغیر جهانی (Global) می‌سازد.
var text = "سلام دنیا!";
</script>
<script type="module" src="./render.js"></script>
</body>
</html>
کد فایل render.js:
/* فایل ماژول */
document.getElementById("main").innerText = text;
صفحه وب بدون هیچ مشکلی واژه "سلام دنیا!" را نمایش می‌دهد. چرا؟ چون متغیر جهانی text (که در اسکریپت معمولی ساخته شد) و شیء جهانی document به راحتی در دسترس ماژول قرار دارند.
یک نکته بسیار جالب: همان‌طور که در کد بالا دیدید، یک ماژول لزوماً نیازی به داشتن دستورات
importیاexportندارد! همین که تگ ورودی آن شاملtype="module"باشد، مرورگر آن را به عنوان ماژول می‌شناسد و تمام قوانین بالا را رویش اعمال می‌کند.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://developer.mozilla.org/en-US/docs/Web/JavaScript