ماژول ها: داینامیک (Modules Dynamic)
اینجا درباره ایمپورت داینامیک حرف می زنیم. ایمپورت داینامیک یعنی ماژول را زمانِ نیاز لود کنیم. این کار شبیه دانلود فصلِ لازم از کتاب است؛ نه کل کتاب.
ایمپورت داینامیک (Dynamic Import)
ایمپورت داینامیک در ES2020 معرفی شد. برعکس ایمپورت استاتیک، هرجا می آید: داخل تابع، شرط، یا رویداد.
import("./module.js");
نکته: آرگومان باید مسیرِ ماژول شود. همچنین اسکریپت باید type="module" باشد.
کار با async/await
ایمپورت داینامیک یک Promise برمی گرداند. با await صبر می کنیم و سپس خروجی ها را می گیریم.
async function run() {
const module = await import("./math.js");
let result = module.add(2, 3);
}
run();
// math.js
export function add(a, b) {
return a + b;
}
نمونه دیگر
اینجا ماژول دما را فقط وقتی لازم است می آوریم. سپس خروجی را نمایش می دهیم.
async function run(x) {
const module = await import("./temperatures.js");
let celsius = module.toCelsius(x);
document.getElementById("demo").textContent = celsius + " Celcius";
}
run(50);
// temperatures.js
export function toCelsius(farenheit) {
return (farenheit - 32) * 5 / 9;
}
export function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
لود شرطی و تنبل
می توانیم فقط برای کاربران خاص ماژول بیاوریم. این کار سرعت شروع را بهتر می کند.
if (user.isAdmin) {
const adminTools = await import("./admin-tools.js");
adminTools.init();
}
گام های عملی
- کد اصلی را با
type="module"اجرا کن. - داخل تابع،
await import()را صدا بزن. - از خروجی ماژول استفاده کن و نتیجه را نشان بده.
پیشنهاد مطالعه: ماژول ها: استاتیک، Async/Await، و ایمپورت داینامیک.
جمع بندی سریع
- ایمپورت داینامیک وقتِ نیاز لود می کند.
- با
awaitنتیجه ماژول را می گیری. - شروع صفحه سریع تر می شود.
- حتماً اسکریپت ماژول باشد.