Skip to content

Commit a10bbd5

Browse files
committed
/done
1 parent 552a59e commit a10bbd5

File tree

1 file changed

+25
-26
lines changed
  • 1-js/13-modules/03-modules-dynamic-imports

1 file changed

+25
-26
lines changed
Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,48 @@
11
# Dynamic imports
22

3-
আগের অধ্যায়ে আমরা ইমপোর্ট এবং এক্সপোর্ট নিয়ে আলোচনা করেছি যাদের "static" বলা হয়। যার সিনট্যাক্স খুবই সাধারন।
3+
Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict.
44

5-
প্রথমত, `import` এর কোন প্যারামিটার ডাইনামিক ভাবে আমরা জেনারেট করতে পারি না।
5+
First, we can't dynamically generate any parameters of `import`.
66

7-
মডিউলের পাথ অবশ্যই প্রিমিটিভ স্ট্রিং হতে হবে, ফাংশন কল হওয়া যাবে না। এটি কাজ করবে নাঃ
7+
The module path must be a primitive string, can't be a function call. This won't work:
88

99
```js
10-
import ... from *!*getModuleName()*/!*; // এরর, শুধুমাত্র "string" প্রযোজ্য
10+
import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed
1111
```
1212

13-
দ্বিতীয়ত, আমরা কন্ডিশনালি অথবা রান-টাইমে ইমপোর্ট করতে পারবো না।
13+
Second, we can't import conditionally or at run-time:
1414

1515
```js
1616
if(...) {
17-
import ...; // এরর, এটি প্রযোজ্য নয়।
17+
import ...; // Error, not allowed!
1818
}
1919

2020
{
21-
import ...; // এরর, আমারা কোন ব্লকের মধ্যে ইমপোর্ট রাখতে পারি না।
21+
import ...; // Error, we can't put import in any block
2222
}
2323
```
2424

25-
তার কারন `import`/`export` এর উদ্দেশ্য হচ্ছে কোডের গঠনে মেরুদন্ডের ন্যায় কাজ করা। এটি একটি ভালো দিক, কোডের গঠন বিশ্লেষণ করে দেখা যায়, একটি বিশেষ টুলের দ্বারা মডিউল গুলোকে ফাইলে একসাথে রাখা যায়, অব্যবহৃত এক্সপোর্ট গুলো রিমুভ("tree-shaken") করা যায়. `imports/exports` এর সাধারন গঠনের কারনেই এটি সম্ভব হয়।
25+
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.
2626

27-
কিন্তু, প্রয়োজনে একটি মডিউলকে কিভাবে আমরা ডাইনামিকালি ইমপোর্ট করতে পারি?
27+
But how can we import a module dynamically, on-demand?
2828

29-
## import() এক্সপ্রেশন
29+
## The import() expression
3030

31-
`import(module)` এক্সপ্রেশনটি মডিউলকে লোড করে এবং একটি প্রমিস রিটার্ন করে যা একটি মডিউল অবজেক্টের মধ্যে রিসল্ভ হয়ে থাকে এবং এতে সমস্ত এক্সপোর্ট গুলো থাকে।
32-
33-
আমরা কোডের যে কোন জায়গায় এটি ডাইনামিকালি ব্যবহার করতে পারি, যেমনঃ
31+
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.
3432

33+
We can use it dynamically in any place of the code, for instance:
3534

3635
```js
37-
let modulePath = prompt("কোন মডিউলটি লোড করতে চান?");
36+
let modulePath = prompt("Which module to load?");
3837

3938
import(modulePath)
4039
.then(obj => <module object>)
41-
.catch(err => <loading এরর, যদি কোন মডিউল না থাকে>)
40+
.catch(err => <loading error, e.g. if no such module>)
4241
```
4342

44-
অথবা, যদি এটি একটি `async` ফাংশনের ভিতর হয়ে থাকে তবে `let module = await import(modulePath)` ব্যবহার করতে পারি।
43+
Or, we could use `let module = await import(modulePath)` if inside an async function.
4544

46-
যেমন, আমাদের যদি নিম্নলিখিত মডিউল থাকে `say.js`:
45+
For instance, if we have the following module `say.js`:
4746

4847
```js
4948
// 📁 say.js
@@ -56,7 +55,7 @@ export function bye() {
5655
}
5756
```
5857

59-
...তবে ডাইনামিক ইমপোর্টটি হতে পারেঃ
58+
...Then dynamic import can be like this:
6059

6160
```js
6261
let {hi, bye} = await import('./say.js');
@@ -65,35 +64,35 @@ hi();
6564
bye();
6665
```
6766

68-
অথবা, যদি `say.js` এর ডিফল্ট এক্সপোর্ট থাকেঃ
67+
Or, if `say.js` has the default export:
6968

7069
```js
7170
// 📁 say.js
7271
export default function() {
73-
alert("মডিউল লোড হয়েছে (export default)!");
72+
alert("Module loaded (export default)!");
7473
}
7574
```
7675

77-
...তারপর এটাকে এক্সেস করার জন্য আমরা মডিউল অব্জেক্টের `default` প্রপার্টি ব্যাবহার করতে পারি।
76+
...Then, in order to access it, we can use `default` property of the module object:
7877

7978
```js
8079
let obj = await import('./say.js');
8180
let say = obj.default;
82-
// অথাবা, এক লাইনে: let {default: say} = await import('./say.js');
81+
// or, in one line: let {default: say} = await import('./say.js');
8382

8483
say();
8584
```
8685

87-
এখানে সম্পূর্ণ উদাহারনটি রয়েছেঃ
86+
Here's the full example:
8887

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

9190
```smart
92-
রেগুলার স্ক্রিপ্টে ডাইনামিক ইমপোর্ট কাজ করে, তার জন্য `script type="module" প্রয়োজন হয় না।
91+
Dynamic imports work in regular scripts, they don't require `script type="module"`.
9392
```
9493

9594
```smart
96-
যদিও `import()` দেখতে ফাংশন কলের মতো, কিন্তু এটি একটি (`super()` মতো) বিশেষ সিন্টেক্স যার জন্য "parentheses" ব্যবহার করতে হয়।
95+
Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`).
9796
98-
তাই আমারা `import` কে কোন ভেরিয়েবলে কপি অথবা `call/apply` করা যায় না।
97+
So we can't copy `import` to a variable or use `call/apply` with it. That's not a function.
9998
```

0 commit comments

Comments
 (0)