Moduly JavaScriptu

Obsah

    Zobrazit obsah

Moduly

Moduly JavaScriptu umožňují rozdělit kód do samostatných souborů.

To usnadňuje udržování základny kódu.

Moduly se importují z externích souborů pomocí příkazu import.

Moduly také spoléhají na type="module" ve značce <script>.

Příklad

<script type="module">
import message from "./message.js";
</script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Vývozní

Moduly s funkcemi nebo proměnnými lze uložit do libovolného externího souboru.

Existují dva typy exportů: Pojmenované exporty a Výchozí exporty.

Pojmenované exporty

Vytvořme soubor s názvem person.js a naplňte ji věcmi, které chceme exportovat.

Pojmenované exporty můžete vytvořit dvěma způsoby. In-line jednotlivě, nebo všechny najednou dole.

In-line jednotlivě:

person.js

export const name = "Jesse";
export const age = 40;

Vše najednou dole:

person.js

const name = "Jesse";
const age = 40;

export {name, age};

Výchozí exporty

Vytvořme další soubor s názvem message.js a použijte jej pro demonstraci výchozího exportu.

V souboru můžete mít pouze jeden výchozí export.

Příklad

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Import

Moduly můžete importovat do souboru dvěma způsoby, podle toho, zda jsou pojmenovány exporty nebo výchozí exporty.

Pojmenované exporty jsou konstruovány pomocí složených závorek. Výchozí exporty nejsou.

Import z pojmenovaných exportů

Importujte pojmenované exporty ze souboru person.js:

import { name, age } from "./person.js";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Import z výchozích exportů

Importujte výchozí export ze souboru message.js:

import message from "./message.js";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Poznámka

Moduly pracují pouze s protokolem HTTP(s).

Webová stránka otevřená přes protokol file:// nemůže používat import/export.