javascriptScript loadingاتصال فایل و اجرای جاوااسکریپت
فایل جاوااسکریپت چگونه به HTML وصل می‌شود؟ مسیر src و تفاوت اجرای معمولی، defer، async و ماژول را با یک نمونهٔ دو فایل و خروجی کنسول بشناسید.
مفهوم به زبان ساده
نوشتن فایل app.js به‌تنهایی باعث اجرای آن در صفحه نمی‌شود. در HTML، عنصر script مشخص می‌کند کدام کد باید اجرا شود. ویژگی src نشانی فایل بیرونی را می‌گیرد؛ این نشانی نسبت به نشانی سند تفسیر می‌شود. اگر نام یا مسیر فایل اشتباه باشد، مرورگر ممکن است خطای دریافت بدهد و هیچ پیام برنامه دیده نشود. ابتدا بخش Network و Console ابزار توسعه را بررسی کنید.
برای یک فایل معمولی که به عناصر صفحه نیاز دارد، defer انتخاب ساده‌ای است: مرورگر دریافت فایل را هنگام بررسی HTML شروع می‌کند و اجرای آن را تا پایان تجزیهٔ سند به تعویق می‌اندازد. اسکریپت‌های بیرونی معمولی دارای defer به ترتیب سند اجرا می‌شوند. async برای اسکریپت‌های مستقل است و ترتیب اجرای چند فایل را تضمین نمی‌کند. defer برای کد درون‌خطی معمولی همین اثر را ندارد.
در نمونه، خط HTML فقط به‌صورت توضیح آمده است؛ آن را در فایل index.html قرار دهید و دستورهای بعدی را در app.js ذخیره کنید. ماژول با type="module" قواعد جداگانه‌ای دارد و به‌طور پیش‌فرض پس از تجزیهٔ سند اجرا می‌شود. ویژگی async می‌تواند رفتار زمان‌بندی ماژول را تغییر دهد.
کجا به کار می‌آید؟
- اتصال فایل مستقل به صفحه بدون کپی‌کردن کد در HTML
- انتخاب زمان اجرای مناسب برای کدی که به DOM نیاز دارد
از تعریف تا یک مثال واقعی
// index.html: <script src="app.js" defer></script>
// app.js: دستورهای اجرایی این فایل
const topics = ['متغیر', 'شرط'];
console.log('شروع آموزش');
console.log(topics.length);
شروع آموزش 2
این مثال چطور کار می‌کند؟
خط توضیح HTML را در سند HTML و دستورهای بعدی را در فایل app.js قرار دهید.
مرورگر فایل معرفی‌شده در src را دریافت می‌کند.
بعد از تجزیهٔ سند، دو پیام نمونه در کنسول دیده می‌شود.
اشتباه رایج
async ترتیب وابستگی چند فایل را حفظ نمی‌کند. همچنین نوشتن مسیر فایل در src با قرار دادن کل کد جاوااسکریپت در آن متفاوت است.
این را به خاطر بسپارید
زبان، فایل و زمان بارگذاری سه موضوع جدا هستند؛ مسیر فایل و شیوهٔ اجرای آن را صریح تنظیم کنید.