Manapság a JavaScript óriási szerepet játszik a webhelyfejlesztésben. A front-end fejlesztők JavaScriptet használnak interaktív webalkalmazások létrehozására. Ennek eredményeként megnőtt a kereslet a JavaScript-fejlesztők iránt.
Természetesen a JavaScript az évek során fejlődött. Az ES6 számos új funkciót vezetett be a nyelven. Ezek egyike a kódok egyszerű megosztása a JavaScript-fájlok között.
A JavaScript funkcióimportálása és -exportálása olyan új funkciók, amelyek jobb fejlesztővé teszik Önt. Az alábbiakban bemutatjuk, hogyan működnek ezek a funkciók.
Mi az a JavaScript modul?
A JavaScript-modul egy JavaScript-fájl, amely használható kódgyűjteményt tartalmaz. A modulokat általában külön fájlokban írják, és a segítségével importálják import kulcsszó. Időt és erőfeszítést takarít meg, mert később újra felhasználhatja.
Például, ha van egy függvénye kiszámítjaSum(), akkor beillesztheti egy másik fájlba, és elérhetővé teheti bárhol a projektben a segítségével export és import A JavaScript minden felhajtás nélkül működik.
A modulok használatának egyik előnye, hogy segít a kód rendszerezésében. Ezenkívül kezelhetőbbé és könnyebben hibakereshetővé teszi a kódot.
Ahhoz, hogy egy JavaScript-fájlt modulként használhasson, létre kell hoznia egy szkriptet a HTML-dokumentumban az a type="modul".
<script type="modul" src="fileName.js"></script>
Kétféle modul létezik:
- ECMAScript modulok: szabványos JavaScript modulok, és minden nagyobb böngésző támogatja.
- CommonJS modulok: régebbiek, és nem támogatottak széles körben.
Itt az ECMAScript modulokra fogunk összpontosítani. Ha szükséges, tekintse meg nálunk bevezetés a JavaScriptbe felfrissíteni az alapokat.
Funkciók exportálása JavaScriptben
A JavaScriptben a függvények első osztályú objektumok, amelyek argumentumként is átadhatók amellett, hogy önmagukban is használhatók. A függvények exportálása jó módja annak, hogy átvigye őket más programokba. Akkor is használatos, ha újrafelhasználható könyvtárakat szeretne létrehozni.
A függvények exportálása JavaScriptben a export funkció. A export függvény egy adott függvényt exportál, hogy egy másik fájl vagy szkript használhassa. Exportálással saját funkcióinkat, szabadon használhatjuk őket más fájlokban vagy szkriptekben anélkül, hogy a licencelési problémák miatt aggódnánk.
Kétféleképpen lehet használni a export hatékonyan működnek. Ezeket kódpéldákkal fogjuk áttekinteni.
Tegyük fel, hogy van egy fájlja getPersonalDetails.js amelynek van egy függvénye, amely a felhasználó teljes nevét adja vissza egy prompt bevitel után. A függvény így néz ki:
funkciógetFullName(teljes név){
fullName = prompt('Mi a keresztneve');
konzol.log (teljes név);
}
- Ezt a függvényt egyszerűen a export kulcsszó után a függvény neve zárójelben. Ez így néz ki:
export {getFullName}; - A második módszer az, hogy hozzáadjuk a export kulcsszót közvetlenül a függvény deklarálása előtt.
exportfunkciógetFullName (teljes név){...}
Az első módszerrel több függvényt is exportálhat. Ez úgy történik, hogy a kívánt függvények neveit a göndör zárójelbe helyezi. A függvények vesszővel vannak elválasztva.
Például: Tegyük fel, hogy három függvényünk van getPersonalDetails.js fájlt - getFullName(),getEmail(), getDob(). A függvényeket a következő kódsor hozzáadásával exportálhatja:
export {getFullName, getEmail, getDob};
Funkciók importálása JavaScriptben
A modul használatához először importálnia kell azt. Bármely függvény importálható teljes elérési út hivatkozással.
A funkciók importálása meglehetősen egyszerű. A JavaScript beépített funkcióval rendelkezik, amellyel saját függvényeket importálhat más fájlokból. Ha más modulokból szeretné elérni ezeket a függvényeket, célszerű minden egyes segédprogramhoz függvénydeklarációt mellékelni.
Az importálandó függvény már exportálva van az eredeti fájljában.
Függvényeket importálhat egy másik fájlból a import kulcsszó funkció. Importálás lehetővé teszi annak kiválasztását, hogy egy fájl vagy modul melyik részét töltse be.
Így importálhatja a mieinket getFullName funkciótól getPersonalDetails.js:
import {getFullName} tól től './getPersonalDetails.js'Ezzel elérhetővé teszi ezt a funkciót az aktuális fájlunkban.
Több függvény importálásához az importálandó függvényeket a kapcsos zárójelek tartalmazzák. Mindegyiket vessző választja el (,).
import {getFullName, getEmail, getDob} tól től './getPersonalDetails.js'Van egy másik módja a import funkcionalitás. Ez lehetővé teszi számunkra, hogy egy adott fájlban lévő összes exportot importáljunk. A segítségével történik import * mint szintaxis.
Az összes exportot importálhatja nálunk getPersonalDetails.js a következő kódsor hozzáadásával:
import * mint PersonalDetailsModule tól től './getPersonalDetails.js'A fentiek létrehoznak egy objektumot, melynek neve PersonalDetailsModule.
Ez csak egy változónév, bármit elnevezhet.
Ez az objektum tartalmazza az összes exportált fájlt getPersonalDetails.js. A függvények ebben az objektumban vannak tárolva, és úgy érhetők el, ahogyan bármely objektumtulajdonsághoz hozzáfér.
Például elérhetjük a getFullName funkciót a következő kódsor hozzáadásával
PersonalDetailsModule.getFullName();Mi az alapértelmezett exportálás?
Alapértelmezett exportálás egy kivételes exportálási funkció. Ez akkor használatos, ha csak egy változót exportálunk egy fájlból. Használható egy fájl vagy modul tartalékértékének létrehozására is.
Az alábbiakban látható egy példa, ahol a getFullName alapértelmezett funkció:
exportalapértelmezettfunkciógetFullName (teljes név){...}Minden modulban vagy fájlban nem lehet több alapértelmezett érték.
Az alapértelmezettként használt függvények importálása eltérően történik. A következőképpen importálhatjuk getFullName alapértelmezettként használt funkció:
import teljes név tól től './getPersonalDetails.js'Íme a különbségek:
- Nincsenek göndör zárójelek az importált érték körül, teljes név.
- teljes név itt csak egy változónév. Az alapértelmezett függvény értékét tárolja.
Töltsd fel JavaScript funkcióidat
A JavaScript-modulok olyan kóddarabok, amelyek a kód más részeiben újra felhasználhatók a JavaScript importálási és exportálási funkcióival. Ezeket általában külön fájlokban írják, és az import kulcsszóval importálják. A modulok használatának egyik előnye, hogy segít a kód rendszerezésében. Ezenkívül kezelhetőbbé és könnyebben hibakereshetővé teszi a kódot.
