From 59e03b6b665d20335d794e193b42ca3137d643c1 Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Thu, 6 Mar 2025 22:28:36 +0100 Subject: [PATCH] 1.13.3 --- .../03-modules-dynamic-imports/article.md | 80 +++++++++---------- .../say.view/index.html | 12 +-- .../say.view/say.js | 10 +-- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index e48144a3e..b13dcfaf8 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,98 +1,98 @@ -# Dynamic imports +# Dynamické importy -Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict. +Příkazy exportu a importu, které jsme uvedli v předchozích kapitolách, se nazývají „statické“. Jejich syntaxe je velmi jednoduchá a striktní. -First, we can't dynamically generate any parameters of `import`. +Za prvé, žádné parametry příkazu `import` nemůžeme dynamicky generovat. -The module path must be a primitive string, can't be a function call. This won't work: +Cesta k modulu musí být primitivní řetězec, ne volání funkce. Tohle nebude fungovat: ```js -import ... from *!*getModuleName()*/!*; // Error, only from "string" is allowed +import ... from *!*vraťNázevModulu()*/!*; // Chyba, povoleno je jen from "řetězec" ``` -Second, we can't import conditionally or at run-time: +Za druhé, nemůžeme importovat podmíněně nebo za běhu skriptu: ```js if(...) { - import ...; // Error, not allowed! + import ...; // Chyba, tohle není dovoleno! } { - import ...; // Error, we can't put import in any block + import ...; // Chyba, nemůžeme umístit import do bloku } ``` -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. +Je to proto, že záměrem příkazů `import`/`export` je poskytnout páteř struktury kódu. To je dobrá věc, protože strukturu kódu můžeme analyzovat, moduly můžeme speciálními nástroji shromažďovat a spojovat do jednoho souboru, nepoužité exporty můžeme odstraňovat („třesení stromem“). To je možné jen proto, že struktura importů a exportů je jednoduchá a pevná. -But how can we import a module dynamically, on-demand? +Jak ale můžeme importovat modul dynamicky, na požádání? -## The import() expression +## Výraz 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. +Výraz `import(modul)` načte modul a vrátí příslib, který se splní do objektu modulu obsahujícího všechny jeho exporty. Může být volán z kteréhokoli místa v kódu. -We can use it dynamically in any place of the code, for instance: +Můžeme jej používat dynamicky na kterémkoli místě kódu, například: ```js -let modulePath = prompt("Which module to load?"); +let cestaModulu = prompt("Který modul načíst?"); -import(modulePath) - .then(obj => ) - .catch(err => ) +import(cestaModulu) + .then(obj => ) + .catch(chyba => ) ``` -Or, we could use `let module = await import(modulePath)` if inside an async function. +Nebo můžeme použít `let modul = await import(cestaModulu)`, jsme-li uvnitř asynchronní funkce. -For instance, if we have the following module `say.js`: +Například jestliže máme následující modul `řekni.js`: ```js -// 📁 say.js -export function hi() { - alert(`Hello`); +// 📁 řekni.js +export function ahoj() { + alert(`Ahoj`); } -export function bye() { - alert(`Bye`); +export function nashle() { + alert(`Nashle`); } ``` -...Then dynamic import can be like this: +...Pak dynamický import může vypadat takto: ```js -let {hi, bye} = await import('./say.js'); +let {ahoj, nashle} = await import('./řekni.js'); -hi(); -bye(); +ahoj(); +nashle(); ``` -Or, if `say.js` has the default export: +Nebo jestliže `řekni.js` obsahuje výchozí export: ```js -// 📁 say.js +// 📁 řekni.js export default function() { - alert("Module loaded (export default)!"); + alert("Modul načten (výchozí export)!"); } ``` -...Then, in order to access it, we can use `default` property of the module object: +...Pak můžeme pro přístup k němu použít vlastnost `default` objektu modulu: ```js -let obj = await import('./say.js'); -let say = obj.default; -// or, in one line: let {default: say} = await import('./say.js'); +let obj = await import('./řekni.js'); +let řekni = obj.default; +// nebo na jednom řádku: let {default: řekni} = await import('./řekni.js'); -say(); +řekni(); ``` -Here's the full example: +Zde je celý příklad: [codetabs src="say" current="index.html"] ```smart -Dynamic imports work in regular scripts, they don't require `script type="module"`. +Dynamické importy fungují i v běžných skriptech, nevyžadují `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()`). +Ačkoli `import()` vypadá jako volání funkce, je to speciální syntaxe, která prostě jen používá závorky (podobně jako `super()`). -So we can't copy `import` to a variable or use `call/apply` with it. It's not a function. +Nemůžeme tedy kopírovat `import` do proměnné nebo s ním používat `call/apply`. Není to funkce. ``` diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html index 80909cf94..4d13ed7a3 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html +++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html @@ -1,10 +1,10 @@ - + diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js index cff234b7c..5e3d9a769 100644 --- a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js +++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js @@ -1,11 +1,11 @@ -export function hi() { - alert(`Hello`); +export function ahoj() { + alert(`Ahoj`); } -export function bye() { - alert(`Bye`); +export function nashle() { + alert(`Nashle`); } export default function() { - alert("Module loaded (export default)!"); + alert("Modul načten (výchozí export)!"); }