From 4b375ab4e023fd28839726e17c61ee5961372b3b Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Wed, 5 Mar 2025 22:41:09 +0100 Subject: [PATCH 1/2] 1.13.1 --- 1-js/13-modules/01-modules-intro/article.md | 362 +++++++++--------- .../01-modules-intro/say.view/index.html | 4 +- .../01-modules-intro/say.view/say.js | 4 +- .../scopes-working.view/hello.js | 4 +- .../scopes-working.view/user.js | 2 +- .../01-modules-intro/scopes.view/hello.js | 2 +- .../01-modules-intro/scopes.view/user.js | 2 +- 7 files changed, 190 insertions(+), 190 deletions(-) diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index 5ad70d151..b5f1af26e 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -1,251 +1,251 @@ -# Modules, introduction +# Úvod do modulů -As our application grows bigger, we want to split it into multiple files, so called "modules". A module may contain a class or a library of functions for a specific purpose. +Když se naše aplikace rozrůstá, chceme ji rozdělit do více souborů, tzv. „modulů“. Modul může obsahovat třídu nebo knihovnu funkcí sloužící specifickému účelu. -For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need. +Dlouhou dobu JavaScript existoval bez modulové syntaxe na jazykové úrovni. To nebyl problém, protože skripty byly původně malé a jednoduché, takže to nebylo zapotřebí. -But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand. +Časem se však skripty stávaly stále složitějšími a složitějšími, takže komunita vynalezla rozličné způsoby, jak zorganizovat kód do modulů, a speciální knihovny, které načtou moduly na požádání. -To name some (for historical reasons): +Abychom vyjmenovali některé z nich (z historických důvodů): -- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](https://requirejs.org/). -- [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server. -- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS. +- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- jeden z nejstarších modulových systémů, původně implementován knihovnou [require.js](https://requirejs.org/). +- [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) -- modulový systém vytvořený pro server Node.js. +- [UMD](https://github.com/umdjs/umd) -- další modulový systém, navržený jako univerzální, kompatibilní s AMD a CommonJS. -Now these all slowly became a part of history, but we still can find them in old scripts. +Nyní se všechny pomalu odebírají do dějin, ale ve starých skriptech je pořád můžeme najít. -The language-level module system appeared in the standard in 2015, gradually evolved since then, and is now supported by all major browsers and in Node.js. So we'll study the modern JavaScript modules from now on. +Modulový systém na jazykové úrovni se ve standardu objevil v roce 2015, od té doby se postupně vyvíjel a nyní je podporován všemi významnými prohlížeči a v Node.js. Od nynějška tedy budeme studovat moderní JavaScriptové moduly. -## What is a module? +## Co je modul? -A module is just a file. One script is one module. As simple as that. +Modul je prostě soubor. Jeden skript je jeden modul. Tak jednoduché to je. -Modules can load each other and use special directives `export` and `import` to interchange functionality, call functions of one module from another one: +Moduly se mohou navzájem načítat a používat speciální direktivy `export` a `import`, aby si vzájemně vyměňovaly funkcionalitu a jeden modul mohl volat funkce druhého: -- `export` keyword labels variables and functions that should be accessible from outside the current module. -- `import` allows the import of functionality from other modules. +- Klíčové slovo `export` označuje proměnné a funkce, které by měly být dostupné zvenčí aktuálního modulu. +- Klíčové slovo `import` umožňuje import funkcionality z jiných modulů. -For instance, if we have a file `sayHi.js` exporting a function: +Například máme-li soubor `řekniAhoj.js`, který exportuje funkci: ```js -// 📁 sayHi.js -export function sayHi(user) { - alert(`Hello, ${user}!`); +// 📁 řekniAhoj.js +export function řekniAhoj(uživatel) { + alert(`Ahoj, ${uživatel}!`); } ``` -...Then another file may import and use it: +...Pak ji jiný soubor může importovat a používat: ```js // 📁 main.js -import {sayHi} from './sayHi.js'; +import {řekniAhoj} from './řekniAhoj.js'; -alert(sayHi); // function... -sayHi('John'); // Hello, John! +alert(řekniAhoj); // function... +řekniAhoj('Jan'); // Ahoj, Jan! ``` -The `import` directive loads the module by path `./sayHi.js` relative to the current file, and assigns exported function `sayHi` to the corresponding variable. +Direktiva `import` nahrává modul z cesty `./řekniAhoj.js`, která je relativní vůči aktuálnímu souboru, a přiřadí exportovanou funkci `řekniAhoj` do odpovídající proměnné. -Let's run the example in-browser. +Spusťme si tento příklad v prohlížeči. -As modules support special keywords and features, we must tell the browser that a script should be treated as a module, by using the attribute ` ``` -### Module-level scope +### Rozsah platnosti na úrovni modulu -Each module has its own top-level scope. In other words, top-level variables and functions from a module are not seen in other scripts. +Každý modul má na nejvyšší úrovni svůj vlastní rozsah platnosti. Jinými slovy, proměnné a funkce na nejvyšší úrovni modulu nejsou vidět v jiných skriptech. -In the example below, two scripts are imported, and `hello.js` tries to use `user` variable declared in `user.js`. It fails, because it's a separate module (you'll see the error in the console): +V následujícím příkladu jsou importovány dva skripty a `hello.js` se pokusí použít proměnnou `uživatel`, deklarovanou v `user.js`. Selže to, protože to je oddělený modul (chybu uvidíte v konzoli): [codetabs src="scopes" height="140" current="index.html"] -Modules should `export` what they want to be accessible from outside and `import` what they need. +Moduly by měly exportovat direktivou `export` to, co chtějí zpřístupnit zvenčí, a importovat direktivou `import` to, co potřebují. -- `user.js` should export the `user` variable. -- `hello.js` should import it from `user.js` module. +- `user.js` by měl exportovat proměnnou `uživatel`. +- `hello.js` by ji měl importovat z modulu `user.js`. -In other words, with modules we use import/export instead of relying on global variables. +Jinými slovy, s moduly používáme import a export místo závislosti na globálních proměnných. -This is the correct variant: +Toto je správná varianta: [codetabs src="scopes-working" height="140" current="hello.js"] -In the browser, if we talk about HTML pages, independent top-level scope also exists for each ` ``` ```smart -In the browser, we can make a variable window-level global by explicitly assigning it to a `window` property, e.g. `window.user = "John"`. +V prohlížeči můžeme učinit proměnnou globální na úrovni okna tak, že ji výslovně přiřadíme do vlastnosti objektu `window`, např. `window.uživatel = "Jan"`. -Then all scripts will see it, both with `type="module"` and without it. +Pak ji uvidí všechny skripty, s `type="module"` i bez něj. -That said, making such global variables is frowned upon. Please try to avoid them. +Přesto je však vytváření takových globálních proměnných nehezké. Prosíme, snažte se tomu vyhnout. ``` -### A module code is evaluated only the first time when imported +### Modulový kód je vyhodnocen jen poprvé, když je importován -If the same module is imported into multiple other modules, its code is executed only once, upon the first import. Then its exports are given to all further importers. +Je-li tentýž modul importován do několika jiných modulů, jeho kód se spustí pouze jednou, při prvním importu. Pak jsou jeho exporty předány všem budoucím importérům. -The one-time evaluation has important consequences, that we should be aware of. +Jednorázové vyhodnocení má důležité důsledky, kterých bychom si měli být vědomi. -Let's see a couple of examples. +Podívejme se na několik příkladů. -First, if executing a module code brings side-effects, like showing a message, then importing it multiple times will trigger it only once -- the first time: +Především jestliže spuštění kódu modulu způsobí vedlejší efekty, např. zobrazení zprávy, pak se při vícenásobném importu spustí pouze jednou -- poprvé: ```js // 📁 alert.js -alert("Module is evaluated!"); +alert("Modul je vyhodnocen!"); ``` ```js -// Import the same module from different files +// Importujeme stejný modul v různých souborech // 📁 1.js -import `./alert.js`; // Module is evaluated! +import `./alert.js`; // Modul je vyhodnocen! // 📁 2.js -import `./alert.js`; // (shows nothing) +import `./alert.js`; // (nezobrazí nic) ``` -The second import shows nothing, because the module has already been evaluated. +Druhý import nic nezobrazí, protože modul již byl vyhodnocen. -There's a rule: top-level module code should be used for initialization, creation of module-specific internal data structures. If we need to make something callable multiple times - we should export it as a function, like we did with `sayHi` above. +Existuje pravidlo, že kód na nejvyšší úrovni modulu by měl být použit pro inicializaci, vytvoření vnitřních datových struktur specifických pro modul. Jestliže potřebujeme umožnit něco volat vícekrát, měli bychom to exportovat jako funkci, tak jak jsme to udělali s výše uvedenou funkcí `řekniAhoj`. -Now, let's consider a deeper example. +Nyní uvažujme hlubší příklad. -Let's say, a module exports an object: +Řekněme, že modul exportuje objekt: ```js // 📁 admin.js export let admin = { - name: "John" + jméno: "Jan" }; ``` -If this module is imported from multiple files, the module is only evaluated the first time, `admin` object is created, and then passed to all further importers. +Je-li tento modul importován z více souborů, je vyhodnocen pouze poprvé, vytvoří se objekt `admin` a ten je pak předán všem dalším importérům. -All importers get exactly the one and only `admin` object: +Všichni importéři dostanou přesně jeden a tentýž objekt `admin`: ```js // 📁 1.js import {admin} from './admin.js'; -admin.name = "Pete"; +admin.jméno = "Petr"; // 📁 2.js import {admin} from './admin.js'; -alert(admin.name); // Pete +alert(admin.jméno); // Petr *!* -// Both 1.js and 2.js reference the same admin object -// Changes made in 1.js are visible in 2.js +// Jak 1.js, tak 2.js se odkazují na tentýž objekt admin +// Změny učiněné v 1.js jsou viditelné ve 2.js */!* ``` -As you can see, when `1.js` changes the `name` property in the imported `admin`, then `2.js` can see the new `admin.name`. +Jak vidíte, když `1.js` v importovaném objektu `admin` změní vlastnost `jméno`, pak `2.js` uvidí nové `admin.jméno`. -That's exactly because the module is executed only once. Exports are generated, and then they are shared between importers, so if something changes the `admin` object, other importers will see that. +To je právě proto, že modul je spuštěn pouze jednou. Vygenerují se exporty a ty jsou pak sdíleny mezi importéry, takže jestliže něco změní objekt `admin`, ostatní importéři to uvidí. -**Such behavior is actually very convenient, because it allows us to *configure* modules.** +**Takové chování je ve skutečnosti velmi užitečné, protože nám umožňuje *konfigurovat* moduly.** -In other words, a module can provide a generic functionality that needs a setup. E.g. authentication needs credentials. Then it can export a configuration object expecting the outer code to assign to it. +Jinými slovy, modul může poskytovat obecnou funkcionalitu, která potřebuje nějaké nastavení. Například autentifikace potřebuje osobní údaje. Pak modul může exportovat konfigurační objekt a očekávat, že do něj vnější kód něco vloží. -Here's the classical pattern: -1. A module exports some means of configuration, e.g. a configuration object. -2. On the first import we initialize it, write to its properties. The top-level application script may do that. -3. Further imports use the module. +Zde je klasický vzor: +1. Modul exportuje konfiguraci nějakého druhu, např. konfigurační objekt. +2. Při prvním importu jej inicializujeme, zapíšeme do jeho vlastností. To může udělat skript na nejvyšší úrovni aplikace. +3. Další importy budou tento modul využívat. -For instance, the `admin.js` module may provide certain functionality (e.g. authentication), but expect the credentials to come into the `config` object from outside: +Například modul `admin.js` může poskytovat určitou funkcionalitu (např. autentifikaci), ale očekává, že osobní údaje přijdou do objektu `konfigurace` zvenčí: ```js // 📁 admin.js -export let config = { }; +export let konfigurace = { }; -export function sayHi() { - alert(`Ready to serve, ${config.user}!`); +export function řekniAhoj() { + alert(`Jsem připraven posloužit, ${konfigurace.uživatel}!`); } ``` -Here, `admin.js` exports the `config` object (initially empty, but may have default properties too). +Zde modul `admin.js` exportuje objekt `konfigurace` (na začátku je prázdný, ale může mít i nějaké standardní vlastnosti). -Then in `init.js`, the first script of our app, we import `config` from it and set `config.user`: +Pak z něj v `init.js`, prvním skriptu naší aplikace, objekt `konfigurace` importujeme a nastavíme `konfigurace.uživatel`: ```js // 📁 init.js -import {config} from './admin.js'; -config.user = "Pete"; +import {konfigurace} from './admin.js'; +konfigurace.uživatel = "Petr"; ``` -...Now the module `admin.js` is configured. +...Nyní je modul `admin.js` nakonfigurován. -Further importers can call it, and it correctly shows the current user: +Další importéři jej mohou volat a modul správně zobrazí aktuálního uživatele: ```js -// 📁 another.js -import {sayHi} from './admin.js'; +// 📁 jiný.js +import {řekniAhoj} from './admin.js'; -sayHi(); // Ready to serve, *!*Pete*/!*! +řekniAhoj(); // Jsem připraven posloužit, *!*Petr*/!*! ``` ### import.meta -The object `import.meta` contains the information about the current module. +Informace o aktuálním modulu obsahuje objekt `import.meta`. -Its content depends on the environment. In the browser, it contains the URL of the script, or a current webpage URL if inside HTML: +Jeho obsah závisí na prostředí. V prohlížeči obsahuje URL skriptu nebo URL aktuální webové stránky, je-li uvnitř HTML: ```html run height=0 ``` -### In a module, "this" is undefined +### V modulu není definováno „this“ -That's kind of a minor feature, but for completeness we should mention it. +Není to významná vlastnost, ale pro úplnost bychom ji měli uvést. -In a module, top-level `this` is undefined. +V modulu je `this` na nejvyšší úrovni nedefinované. -Compare it to non-module scripts, where `this` is a global object: +Porovnejme si to s nemodulovými skripty, v nichž je `this` globální objekt: ```html run height=0 ``` -## Browser-specific features +## Vlastnosti specifické pro prohlížeče -There are also several browser-specific differences of scripts with `type="module"` compared to regular ones. +Mezi skripty s `type="module"` a běžnými skripty existuje také několik rozdílů, které jsou specifické pro prohlížeče. -You may want to skip this section for now if you're reading for the first time, or if you don't use JavaScript in a browser. +Jestliže tento článek čtete poprvé nebo jestliže nepoužíváte JavaScript v prohlížeči, můžete tuto podkapitolu prozatím přeskočit. -### Module scripts are deferred +### Modulové skripty jsou deferované -Module scripts are *always* deferred, same effect as `defer` attribute (described in the chapter [](info:script-async-defer)), for both external and inline scripts. +Modulové skripty jsou *vždy* deferované. Je to stejný efekt jako u atributu `defer` (popsaného v kapitole [](info:script-async-defer)), a to pro externí i vložené skripty. -In other words: -- downloading external module scripts ` -Compare to regular script below: +Porovnejme si to s běžným skriptem: - + ``` -Please note: the second script actually runs before the first! So we'll see `undefined` first, and then `object`. +Prosíme všimněte si, že druhý skript se ve skutečnosti spustí před prvním! Nejprve tedy uvidíme `undefined`, až pak `object`. -That's because modules are deferred, so we wait for the document to be processed. The regular script runs immediately, so we see its output first. +Je to proto, že moduly jsou deferované, takže čekají, až se zpracuje celý dokument. Běžný skript se spustí okamžitě, proto jeho výstup uvidíme jako první. -When using modules, we should be aware that the HTML page shows up as it loads, and JavaScript modules run after that, so the user may see the page before the JavaScript application is ready. Some functionality may not work yet. We should put "loading indicators", or otherwise ensure that the visitor won't be confused by that. +Při používání modulů bychom si měli být vědomi toho, že HTML stránka se zobrazuje průběžně, když se načítá, ale JavaScriptové moduly se spustí až potom. Uživatel tedy může vidět stránku ještě předtím, než je JavaScriptová aplikace připravena. Některá funkcionalita tedy ještě nemusí fungovat. Měli bychom tedy na stránku umístit „ukazatele načítání“ nebo nějak jinak zajistit, aby to návštěvníka nezmátlo. -### Async works on inline scripts +### Na vložených skriptech funguje async -For non-module scripts, the `async` attribute only works on external scripts. Async scripts run immediately when ready, independently of other scripts or the HTML document. +Pro nemodulové skripty funguje atribut `async` pouze na externích skriptech. Asynchronní skripty se spustí okamžitě, když jsou připraveny, nezávisle na ostatních skriptech nebo HTML dokumentu. -For module scripts, it works on inline scripts as well. +Pro modulové skripty funguje i na vložených skriptech. -For example, the inline script below has `async`, so it doesn't wait for anything. +Například následující vložený skript má `async`, takže nebude na nic čekat. -It performs the import (fetches `./analytics.js`) and runs when ready, even if the HTML document is not finished yet, or if other scripts are still pending. +Provede import (stáhne si `./analytics.js`) a spustí se, jakmile bude připraven, i když HTML dokument ještě nebude dokončen nebo jiné skripty budou stále čekat na vyřízení. -That's good for functionality that doesn't depend on anything, like counters, ads, document-level event listeners. +To je dobré pro funkcionalitu, která na ničem nezávisí, např. čítače, reklamy, posluchače událostí na dokumentové úrovni. ```html - - + + ``` -### External scripts +### Externí skripty -External scripts that have `type="module"` are different in two aspects: +Externí skripty, které mají `type="module"`, se liší ve dvou aspektech: -1. External scripts with the same `src` run only once: +1. Externí skripty se stejným `src` se spustí pouze jednou: ```html - - - + + + ``` -2. External scripts that are fetched from another origin (e.g. another site) require [CORS](mdn:Web/HTTP/CORS) headers, as described in the chapter . In other words, if a module script is fetched from another origin, the remote server must supply a header `Access-Control-Allow-Origin` allowing the fetch. +2. Externí skripty, které jsou staženy z jiného zdroje (např. z jiné stránky), vyžadují hlavičku [CORS](mdn:Web/HTTP/CORS), jak je popsáno v kapitole . Jinými slovy, je-li modulový skript stažen z jiného zdroje, vzdálený server musí poskytnout hlavičku `Access-Control-Allow-Origin`, která stažení umožní. ```html - - - + + + ``` - That ensures better security by default. + To standardně zajišťuje větší bezpečnost. -### No "bare" modules allowed +### „Holé“ moduly nejsou povoleny -In the browser, `import` must get either a relative or absolute URL. Modules without any path are called "bare" modules. Such modules are not allowed in `import`. +V prohlížeči musí `import` obdržet relativní nebo absolutní URL. Moduly bez cesty se nazývají „holé“ moduly. Takové moduly nejsou v `import` povoleny. -For instance, this `import` is invalid: +Například tento `import` je chybný: ```js -import {sayHi} from 'sayHi'; // Error, "bare" module -// the module must have a path, e.g. './sayHi.js' or wherever the module is +import {řekniAhoj} from 'řekniAhoj'; // Chyba, „holý“ modul +// modul musí obsahovat cestu, např. './řekniAhoj.js' nebo jinou, kde tento modul je ``` -Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet. +Určitá prostředí, např. Node.js nebo spojovací nástroje, holé moduly bez uvedené cesty dovolují, protože mají své vlastní způsoby nalezení modulů a páky, jak je vyladit. Prohlížeče však holé moduly zatím nepodporují. -### Compatibility, "nomodule" +### Kompatibilita, „nomodule“ -Old browsers do not understand `type="module"`. Scripts of an unknown type are just ignored. For them, it's possible to provide a fallback using the `nomodule` attribute: +Staré prohlížeče nerozumějí `type="module"`. Skripty neznámého typu prostě ignorují. Je možné jim poskytnout nouzové řešení pomocí atributu `nomodule`: ```html run ``` -## Build tools +## Sestavovací nástroje -In real-life, browser modules are rarely used in their "raw" form. Usually, we bundle them together with a special tool such as [Webpack](https://webpack.js.org/) and deploy to the production server. +V reálném životě se prohlížečové moduly jen zřídka používají ve své „surové“ podobě. Obvykle je spojujeme dohromady (anglicky „bundle“) pomocí speciálního nástroje zvaného *bundler*, např. [Webpack](https://webpack.js.org/), a nahráváme na produkční server. -One of the benefits of using bundlers -- they give more control over how modules are resolved, allowing bare modules and much more, like CSS/HTML modules. +Jednou z výhod používání bundlerů je, že nám poskytují více kontroly nad tím, jak jsou moduly vyhodnocovány, umožňují holé moduly a mnoho dalších, např. CSS/HTML moduly. -Build tools do the following: +Sestavovací nástroje provádějí následující: -1. Take a "main" module, the one intended to be put in ` ``` -That said, native modules are also usable. So we won't be using Webpack here: you can configure it later. +I přesto jsou ovšem použitelné i nativní moduly. Zde tedy Webpack používat nebudeme: můžete si jej nakonfigurovat později. -## Summary +## Shrnutí -To summarize, the core concepts are: +Abychom to shrnuli, základní koncepty jsou: -1. A module is a file. To make `import/export` work, browsers need ` diff --git a/1-js/13-modules/01-modules-intro/say.view/say.js b/1-js/13-modules/01-modules-intro/say.view/say.js index 198a3be6d..b80003776 100644 --- a/1-js/13-modules/01-modules-intro/say.view/say.js +++ b/1-js/13-modules/01-modules-intro/say.view/say.js @@ -1,3 +1,3 @@ -export function sayHi(user) { - return `Hello, ${user}!`; +export function řekniAhoj(uživatel) { + return `Ahoj, ${uživatel}!`; } diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js index 6c087ea81..d8ca02d1d 100644 --- a/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js +++ b/1-js/13-modules/01-modules-intro/scopes-working.view/hello.js @@ -1,3 +1,3 @@ -import {user} from './user.js'; +import {uživatel} from './user.js'; -document.body.innerHTML = user; // John +document.body.innerHTML = uživatel; // Jan diff --git a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js index d289329c6..ef37f5ca3 100644 --- a/1-js/13-modules/01-modules-intro/scopes-working.view/user.js +++ b/1-js/13-modules/01-modules-intro/scopes-working.view/user.js @@ -1 +1 @@ -export let user = "John"; +export let uživatel = "Jan"; diff --git a/1-js/13-modules/01-modules-intro/scopes.view/hello.js b/1-js/13-modules/01-modules-intro/scopes.view/hello.js index 714aafa1f..feee28491 100644 --- a/1-js/13-modules/01-modules-intro/scopes.view/hello.js +++ b/1-js/13-modules/01-modules-intro/scopes.view/hello.js @@ -1 +1 @@ -alert(user); // no such variable (each module has independent variables) +alert(uživatel); // taková proměnná neexistuje (každý modul má nezávislé proměnné) diff --git a/1-js/13-modules/01-modules-intro/scopes.view/user.js b/1-js/13-modules/01-modules-intro/scopes.view/user.js index 12ec850d9..406901cc0 100644 --- a/1-js/13-modules/01-modules-intro/scopes.view/user.js +++ b/1-js/13-modules/01-modules-intro/scopes.view/user.js @@ -1 +1 @@ -let user = "John"; +let uživatel = "Jan"; From 6680dc7762c06d45248ba1c71f6aefc525fbb21d Mon Sep 17 00:00:00 2001 From: Otmar Onderek Date: Wed, 19 Mar 2025 21:08:24 +0100 Subject: [PATCH 2/2] 1.13.1 --- 1-js/13-modules/01-modules-intro/article.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index b5f1af26e..1685de8c5 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -156,33 +156,33 @@ Nyní uvažujme hlubší příklad. ```js // 📁 admin.js -export let admin = { +export let správce = { jméno: "Jan" }; ``` -Je-li tento modul importován z více souborů, je vyhodnocen pouze poprvé, vytvoří se objekt `admin` a ten je pak předán všem dalším importérům. +Je-li tento modul importován z více souborů, je vyhodnocen pouze poprvé, vytvoří se objekt `správce` a ten je pak předán všem dalším importérům. -Všichni importéři dostanou přesně jeden a tentýž objekt `admin`: +Všichni importéři dostanou přesně jeden a tentýž objekt `správce`: ```js // 📁 1.js -import {admin} from './admin.js'; -admin.jméno = "Petr"; +import {správce} from './admin.js'; +správce.jméno = "Petr"; // 📁 2.js -import {admin} from './admin.js'; -alert(admin.jméno); // Petr +import {správce} from './admin.js'; +alert(správce.jméno); // Petr *!* -// Jak 1.js, tak 2.js se odkazují na tentýž objekt admin +// Jak 1.js, tak 2.js se odkazují na tentýž objekt správce // Změny učiněné v 1.js jsou viditelné ve 2.js */!* ``` -Jak vidíte, když `1.js` v importovaném objektu `admin` změní vlastnost `jméno`, pak `2.js` uvidí nové `admin.jméno`. +Jak vidíte, když `1.js` v importovaném objektu `správce` změní vlastnost `jméno`, pak `2.js` uvidí nové `správce.jméno`. -To je právě proto, že modul je spuštěn pouze jednou. Vygenerují se exporty a ty jsou pak sdíleny mezi importéry, takže jestliže něco změní objekt `admin`, ostatní importéři to uvidí. +To je právě proto, že modul je spuštěn pouze jednou. Vygenerují se exporty a ty jsou pak sdíleny mezi importéry, takže jestliže něco změní objekt `správce`, ostatní importéři to uvidí. **Takové chování je ve skutečnosti velmi užitečné, protože nám umožňuje *konfigurovat* moduly.**