Skip to content

Dynamic imports #299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 5, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions 1-js/13-modules/03-modules-dynamic-imports/article.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
# Dynamic imports
# Import پویا

Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict.
عبارات Export و Import که در بخش‌های قبلی بررسی کردیم "ایستا (static)" نامیده می‌شوند. ساختار آنها بسیار ساده و سخت‌گیرانه است.

First, we can't dynamically generate any parameters of `import`.
اول اینکه، نمی‌توانیم پارامترهای `import` را به صورت پویا تولید کنیم.

The module path must be a primitive string, can't be a function call. This won't work:
مسیر ماژول باید یک رشته ابتدایی باشد، نمی تواند یک فراخوانی تابع باشد. این کار نمی‌کند:

```js
import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed
```

Second, we can't import conditionally or at run-time:
دوم اینکه، نمی‌توانیم به صورت شرطی یا در زمان اجرا آن را import کنیم:

```js
if(...) {
import ...; // Error, not allowed!
import ...; // !خطا، مجاز نیست
}

{
import ...; // Error, we can't put import in any block
import ...; // را در هر بلوکی قرار دهیم import خطا، نمی‌توانیم
}
```

That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed.
زیرا `import`/`export` قصد دارد ستون فقراتی برای ساختار کد فراهم کنند. این یک چیز خوب است، زیرا ساختار کد قابل تجزیه و تحلیل است، ماژول ها را می‌توان با ابزارهای ویژه در یک قالب یک فایل جمع آوری کرد، export های استفاده نشده می‌توانند حذف شوند ("tree-shaken"). این‌ها فقط به این خاطر امکان‌پذیر است که ساختار imports/exports ساده و ثابت است.

But how can we import a module dynamically, on-demand?
اما چگونه می‌توان یک ماژول را به صورت پویا، بنا به نیازمان import کنیم؟

## The import() expression
## عبارت import()

The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code.
عبارت `import(module)` ماژول را بارگذاری می‌کند و یک promise برمی‌گرداند که به یک شی حاوی همه export های ماژول تبدیل می‌شود. می‌توان آن را در هر جایی از کد صدا زد. (به تفاوت ظاهری آن با import های ایستا دقت کنید)

We can use it dynamically in any place of the code, for instance:
می‌توانیم آن را به صورت پویا در هر جای کد استفاده کنیم، به عنوان مثال:

```js
let modulePath = prompt("Which module to load?");
Expand All @@ -40,9 +40,9 @@ import(modulePath)
.catch(err => <loading error, e.g. if no such module>)
```

Or, we could use `let module = await import(modulePath)` if inside an async function.
یا، می‌توانیم `let module = await import(modulePath)` را درون یک تابع هنگام (async) استفاده کنیم.

For instance, if we have the following module `say.js`:
به عنوان مثال، اگر ماژول `say.js` را به شرح زیر داشته باشیم:

```js
// 📁 say.js
Expand All @@ -55,7 +55,7 @@ export function bye() {
}
```

...Then dynamic import can be like this:
آنگاه import پویا می‌تواند مانند این باشد:

```js
let {hi, bye} = await import('./say.js');
Expand All @@ -64,7 +64,7 @@ hi();
bye();
```

Or, if `say.js` has the default export:
یا اگر `say.js` دارای export پیش‌فرض باشد:

```js
// 📁 say.js
Expand All @@ -73,7 +73,7 @@ export default function() {
}
```

...Then, in order to access it, we can use `default` property of the module object:
آنگاه برای دسترسی به آن، می‌توانیم از خاصیت `default` شیء ماژول استفاده کنیم:

```js
let obj = await import('./say.js');
Expand All @@ -83,16 +83,16 @@ let say = obj.default;
say();
```

Here's the full example:
مثال کامل:

[codetabs src="say" current="index.html"]

```smart
Dynamic imports work in regular scripts, they don't require `script type="module"`.
import پویا در اسکریپت‌های معمولی هم کار می‌کنند، نیازی به `script type="module"‎` ندارند.
```

```smart
Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`).
اگرچه import()‎ شبیه یک تابع به نظر می‌رسد، ولی ساختار ویژه‌ای است که تصادفاً از پرانتز استفاده می‌کند (مشابه `super()`).

So we can't copy `import` to a variable or use `call/apply` with it. It's not a function.
پس نمی‌توانیم آن را به یک متغیر اختصاص دهیم یا از `call/apply` در رفتار با آن استفاده کنیم. تابع نیست.
```