Moduly JavaScript

V tomto kurzu se na příkladech dozvíte o modulech v JavaScriptu.

Jak se náš program zvětšuje, může obsahovat mnoho řádků kódu. Místo toho, abyste vložili vše do jednoho souboru, můžete pomocí modulů oddělit kódy v samostatných souborech podle jejich funkčnosti. Díky tomu je náš kód organizovaný a snadněji se udržuje.

Modul je soubor, který obsahuje kód pro provedení konkrétního úkolu. Modul může obsahovat proměnné, funkce, třídy atd. Podívejme se na příklad,

Předpokládejme, že soubor s názvem greet.js obsahuje následující kód:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Nyní, chcete-li použít kód greet.js v jiném souboru, můžete použít následující kód:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Tady,

• greetPerson()Funkce v greet.js je exportován pomocí exportklíčového slova

   export function greetPerson(name) (… )

• Poté jsme greetPerson()pomocí importklíčového slova importovali do jiného souboru . Chcete-li importovat funkce, objekty atd., Musíte je zabalit ( ).

   import ( greet ) from '/.greet.js';

Poznámka : Z modulu máte přístup pouze k exportovaným funkcím, objektům atd. Chcete-li je exportimportovat a použít v jiných souborech, musíte použít klíčové slovo pro konkrétní funkci, objekty atd.

Exportujte více objektů

Z modulu je také možné exportovat více objektů. Například,

V souboru module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

V hlavním souboru

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Tady,

 import ( name, sum ) from './module.js';

Tím se importuje jak proměnná názvu, tak sum()funkce ze souboru module.js .

Přejmenování importu a exportu

Pokud jsou objekty (proměnné, funkce atd.), Které chcete importovat, již v hlavním souboru přítomny, program se nemusí chovat tak, jak chcete. V tomto případě program převezme hodnotu z hlavního souboru namísto importovaného souboru.

Abyste se vyhnuli konfliktům při pojmenovávání, můžete tyto funkce, objekty atd. Během exportu nebo během importu přejmenovat.

1. Přejmenujte v modulu (exportní soubor)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Zde se při exportu funkce ze souboru module.js dají funkci nové názvy (zde newName1 & newName2). Proto se při importu této funkce používá nový název pro odkaz na tuto funkci.

2. Přejmenujte v importovaném souboru

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Zde se při importu funkce použijí nové názvy (zde newName1 & newName2) pro název funkce. Nyní k odkazování na tyto funkce používáte nové názvy.

Výchozí export

Můžete také provést výchozí export modulu. Například,

V souboru greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Při importu pak můžete použít:

 import random_name from './greet.js';

Při provádění výchozího exportu

• random_name je importováno z greet.js. Protože random_namenení v greet.js, výchozí export ( greet()v tomto případě) je exportován jako random_name.
• Můžete přímo použít výchozí export bez uzavření složených závorek ().

Poznámka : Soubor může obsahovat více exportů. V souboru však můžete mít pouze jeden výchozí export.

Moduly vždy používají přísný režim

Ve výchozím nastavení jsou moduly v přísném režimu. Například,

 // in greet.js function greet() ( // strict by default ) export greet();

Výhoda používání modulu

• Údržba kódové základny je snazší, protože odlišný kód s různými funkcemi je v různých souborech.
• Umožňuje opětovné použití kódu. Můžete definovat modul a použít jej několikrát podle svých potřeb.

V některých prohlížečích nemusí být použití importu / exportu podporováno. Další informace najdete v podpoře importu a exportu JavaScriptu.