Moduly JavaScript

V tomto výučbe sa pomocou príkladov dozviete o moduloch v JavaScripte.

Ako sa náš program zväčšuje, môže obsahovať veľa riadkov kódu. Namiesto toho, aby ste vložili všetko do jedného súboru, môžete použiť moduly na oddelenie kódov v samostatných súboroch podľa ich funkčnosti. Vďaka tomu je náš kód organizovaný a ľahšie sa udržuje.

Modul je súbor, ktorý obsahuje kód na vykonanie konkrétnej úlohy. Modul môže obsahovať premenné, funkcie, triedy atď. Pozrime sa na príklad,

Predpokladajme, že súbor s názvom greet.js obsahuje nasledujúci kód:

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

Ak chcete teraz použiť kód greet.js v inom súbore, môžete použiť nasledujúci 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

Tu,

• greetPerson()Funkcie v greet.js je exportovaný pomocou exportkľúčového slova

   export function greetPerson(name) (… )

• Potom sme greetPerson()pomocou importkľúčového slova importovali do iného súboru . Ak chcete importovať funkcie, objekty atď., Musíte ich zabaliť ( ).

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

Poznámka : Z modulu máte prístup iba k exportovaným funkciám, objektom atď. Na exportimportovanie a použitie v iných súboroch musíte použiť kľúčové slovo pre konkrétnu funkciu, objekty atď.

Exportujte viac objektov

Z modulu je tiež možné exportovať viac objektov. Napríklad,

V súbore module.js

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

V hlavnom súbore

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

Tu,

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

Týmto sa importuje premenná názvu aj sum()funkcia zo súboru module.js .

Premenovanie dovozu a vývozu

Ak sa objekty (premenné, funkcie atď.), Ktoré chcete importovať, už v hlavnom súbore nachádzajú, program sa nemusí správať tak, ako chcete. V takom prípade program prevezme hodnotu z hlavného súboru namiesto z importovaného súboru.

Aby ste sa vyhli konfliktom názvov, môžete tieto funkcie, objekty atď. Počas exportu alebo počas importu premenovať.

1. Premenovanie v module (exportný súbor)

 // 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';

Počas exportovania funkcie zo súboru module.js sa tejto funkcii dajú nové názvy (tu newName1 a newName2). Preto sa pri importe tejto funkcie používa nový názov ako odkaz na túto funkciu.

2. Premenujte v súbore na import

 // 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';

Pri importovaní funkcie sa tu použijú nové názvy (tu newName1 a newName2) ako názov funkcie. Teraz na označenie týchto funkcií používate nové názvy.

Predvolený export

Môžete tiež vykonať predvolený export modulu. Napríklad,

V súbore greet.js :

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

Pri importovaní potom môžete použiť:

 import random_name from './greet.js';

Pri vykonávaní predvoleného exportu

• random_name sa importuje z greet.js. Pretože random_namenie je v greet.js, predvolený export ( greet()v tomto prípade) sa exportuje ako random_name.
• Môžete priamo použiť predvolený export bez toho, aby ste priložili zložené zátvorky ().

Poznámka : Súbor môže obsahovať viac exportov. V súbore však môžete mať iba jeden predvolený export.

Moduly vždy používajú prísny režim

Moduly sú predvolene v prísnom režime. Napríklad,

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

Výhoda používania modulu

• Údržba kódovej základne je ľahšia, pretože rozdielny kód s rôznymi funkciami sa nachádza v rôznych súboroch.
• Umožňuje opätovné použitie kódu. Môžete definovať modul a použiť ho viackrát podľa svojich potrieb.

V niektorých prehliadačoch nemusí byť použitie importu / exportu podporované. Ak sa chcete dozvedieť viac, navštívte podporu importu a exportu JavaScriptu.