JavaScript dnes zohráva obrovskú úlohu pri vývoji webových stránok. Front-end vývojári používajú JavaScript na vytváranie interaktívnych webových aplikácií. V dôsledku toho sa zvýšil dopyt po vývojároch JavaScriptu.
JavaScript sa samozrejme v priebehu rokov vyvíjal. ES6 priniesol do jazyka mnoho nových funkcií. Jedným z nich je spôsob, ako jednoducho zdieľať kódy medzi súbormi JavaScript.
Import a export funkcií pre JavaScript sú nové funkcie, ktoré z vás urobia lepšieho vývojára. Tu je návod, ako tieto funkcie fungujú.
Čo je modul JavaScript?
Modul JavaScript je súbor JavaScript, ktorý obsahuje kolekciu kódu, ktorý môžete použiť. Moduly sú zvyčajne napísané v samostatných súboroch a importované pomocou importovať kľúčové slovo. Šetrí čas a námahu, pretože ho môžete neskôr znova použiť.
Napríklad, ak máte funkciu tzv vypočítaťSum(), môžete ho zahrnúť do iného súboru a sprístupniť ho kdekoľvek vo svojom projekte pomocou export a importovať JavaScript funguje bez problémov.
Jednou z výhod používania modulov je, že pomáha udržiavať váš kód organizovaný. Vďaka tomu je váš kód lepšie spravovateľný a ľahšie sa ladí.
Ak chcete použiť súbor JavaScript ako modul, musíte vo svojom dokumente HTML vytvoriť skript s a type="modul".
<typ skriptu="modul" src="fileName.js"></script>
Existujú dva typy modulov:
- Moduly ECMAScript: štandardné moduly JavaScript a sú podporované všetkými hlavnými prehliadačmi.
- Moduly CommonJS: sú staršie a nie sú široko podporované.
Tu sa zameriame na moduly ECMAScript. Ak je to potrebné, pozrite si naše úvod do JavaScriptu oprášiť základy.
Ako exportovať funkcie v JavaScripte
V JavaScripte sú funkcie prvotriednymi objektmi, ktoré možno okrem toho, že sa používajú samostatne, odovzdať ako argumenty. Exportovanie funkcií je dobrý spôsob, ako ich preniesť do iných programov. Používa sa aj vtedy, keď chcete vytvoriť znovu použiteľné knižnice.
Export funkcií v JavaScripte sa vykonáva pomocou export funkciu. The export exportuje danú funkciu na použitie iným súborom alebo skriptom. Exportovaním naše vlastné funkcie, môžeme ich voľne použiť v iných súboroch alebo skriptoch bez obáv z problémov s licenciou.
Existujú dva spôsoby použitia export fungovať efektívne. Prejdeme si to s príkladmi kódu.
Predpokladajme, že máte súbor getPersonalDetails.js ktorý má funkciu, ktorá po výzve vráti celé meno používateľa. Funkcia vyzerá takto:
funkciugetFullName(celé meno){
celé meno = prompt('Aké je vaše krstné meno');
konzoly.log (celéMeno);
}
- Túto funkciu môžete exportovať jednoduchým použitím export kľúčové slovo, za ktorým nasleduje názov funkcie v zložených zátvorkách. Vyzerá to takto:
export {getFullName}; - Druhým spôsobom je pridanie export kľúčové slovo tesne pred deklarovaním funkcie.
exportfunkciugetFullName (celé meno){...}
Pomocou prvej metódy môžete exportovať viacero funkcií. To sa dosiahne vložením názvov požadovaných funkcií do zložených zátvoriek. Funkcie sú oddelené čiarkou.
Napríklad: Predpokladajme, že v našom systéme máte tri funkcie getPersonalDetails.js súbor - getFullName(),getEmail(), getDob(). Funkcie môžete exportovať pridaním nasledujúceho riadku kódu:
export {getFullName, getEmail, getDob};
Ako importovať funkcie v JavaScripte
Ak chcete modul použiť, musíte ho najskôr importovať. Akákoľvek funkcia môže byť importovaná pomocou odkazu na celú cestu.
Importovanie funkcií je celkom jednoduché. JavaScript má vstavanú funkciu na importovanie vlastných funkcií z iných súborov. Ak chcete pristupovať k týmto funkciám z iných modulov, je dobré zahrnúť deklaráciu funkcií pre každý z vašich nástrojov.
Funkcia, ktorá sa má importovať, je už exportovaná vo svojom pôvodnom súbore.
Funkcie môžete importovať z iného súboru pomocou importovať funkčnosť kľúčových slov. Importovať umožňuje vybrať, ktorá časť súboru alebo modulu sa má načítať.
Tu je návod, ako importujete naše getFullName funkcia od getPersonalDetails.js:
importovať {getFullName} od './getPersonalDetails.js'Tým sa táto funkcia sprístupní na použitie v našom aktuálnom súbore.
Aby bolo možné importovať viacero funkcií, funkcie, ktoré sa majú importovať, sú zahrnuté v zložených zátvorkách. Každý je oddelený čiarkou (,).
importovať {getFullName, getEmail, getDob} od './getPersonalDetails.js'Existuje ďalší spôsob použitia importovať funkčnosť. To nám umožňuje importovať všetky exporty do konkrétneho súboru. Vykonáva sa pomocou import * ako syntax.
Všetky exporty môžete importovať do nášho getPersonalDetails.js pridaním nasledujúceho riadku kódu:
importovať * ako personalDetailsModule od './getPersonalDetails.js'Vyššie uvedené vytvorí objekt tzv personalDetailsModule.
Toto je len názov premennej, môžete ju pomenovať akokoľvek.
Tento objekt obsahuje všetky exporty v našom getPersonalDetails.js. Funkcie sú uložené v tomto objekte a je možné k nim pristupovať spôsobom, akým pristupujete k akejkoľvek vlastnosti objektu.
Napríklad môžeme získať prístup k getFullName funkciu pridaním nasledujúceho riadku kódu
personalDetailsModule.getFullName();Čo je predvolený export?
Exportovať predvolené je výnimočná exportná funkcia. Používa sa, ak sa zo súboru exportuje iba jedna premenná. Používa sa aj na vytvorenie záložnej hodnoty pre súbor alebo modul.
Nižšie je uvedený príklad, kde sme použili getFullName fungovať ako predvolené:
exportpredvolenáfunkciugetFullName (celé meno){...}V každom module alebo súbore nemôžete mať štandardne viac ako jednu hodnotu.
Funkcia použitá ako predvolená sa importuje inak. Tu je návod, ako importovať naše getFullName funkcia použitá ako predvolená:
importovať celé meno od './getPersonalDetails.js'Tu sú rozdiely:
- Okolo importovanej hodnoty nie sú žiadne zložené zátvorky, celé meno.
- celé meno tu je len názov premennej. Ukladá hodnotu akejkoľvek predvolenej funkcie.
Doplňte svoje funkcie JavaScriptu
Moduly JavaScript sú časti kódu, ktoré možno opätovne použiť v iných častiach kódu pomocou funkcií importu a exportu JavaScriptu. Zvyčajne sa zapisujú do samostatných súborov a importujú sa pomocou kľúčového slova import. Jednou z výhod používania modulov je, že pomáha udržiavať váš kód organizovaný. Vďaka tomu je váš kód lepšie spravovateľný a ľahšie sa ladí.
