JavaScript modulok

Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript moduljait.

Ahogy a programunk egyre nagyobb lesz, sok kódsort tartalmazhat. Ahelyett, hogy mindent egyetlen fájlba helyezne, használhatja a modulokat a kódok elkülönítéséhez külön fájlokban, azok funkcióinak megfelelően. Ez rendszerezetté és könnyebben karbantarthatóvá teszi kódunkat.

A modul egy fájl, amely kódot tartalmaz egy adott feladat végrehajtásához. Egy modul változókat, függvényeket, osztályokat stb. Tartalmazhat. Lássunk egy példát,

Tegyük fel, hogy a greet.js nevű fájl a következő kódot tartalmazza:

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

Most, hogy a greet.js kódját egy másik fájlban használja, a következő kódot használhatja:

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

Itt,

• A greet.js-ben található greetPerson()függvényt a kulcsszóval exportáljákexport

   export function greetPerson(name) (… )

• Ezután greetPerson()egy másik fájlba importáltuk a importkulcsszót. Funkciók, objektumok stb. Importálásához át kell tekerni őket ( ).

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

Megjegyzés : A modulból csak az exportált funkciókat, objektumokat stb. Érheti el. A exportkulcsszót az adott függvényhez, objektumokhoz stb. Kell használnia az importáláshoz és más fájlokban történő felhasználáshoz.

Több objektum exportálása

Több objektum exportálása is lehetséges egy modulból. Például,

A module.js fájlban

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

A fő fájlban

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

Itt,

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

Ez a névváltozót és a sum()függvényt is importálja a module.js fájlból.

Az import és az export átnevezése

Ha az importálni kívánt objektumok (változók, függvények stb.) Már megtalálhatók a fő fájlban, akkor előfordulhat, hogy a program nem úgy viselkedik, ahogy szeretné. Ebben az esetben a program az importált fájl helyett a fő fájlból vesz értéket.

Az elnevezési ütközések elkerülése érdekében átnevezheti ezeket a függvényeket, objektumokat stb. Az exportálás vagy az importálás során.

1. Átnevezés a modulban (fájl exportálása)

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

Itt a függvény modul.js fájlból történő exportálása közben új neveket (itt: newName1 & newName2) kap a függvény. Ezért a függvény importálásakor az új név a függvény hivatkozására szolgál.

2. Nevezze át az import fájlban

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

Itt a függvény importálása közben az új neveket (itt, újNév1 és újNév2) használják a függvény nevéhez. Most az új neveket használja e funkciók hivatkozására.

Alapértelmezett exportálás

Végezheti a modul alapértelmezett exportálását is. Például,

A greet.js fájlban :

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

Ezután importáláskor a következőket használhatja:

 import random_name from './greet.js';

Alapértelmezett exportálás közben

• A véletlen_nevet innen importálják greet.js. Mivel a (z random_name) nincs benne greet.js, az alapértelmezett export ( greet()ebben az esetben) az exportálás módja random_name.
• Az alapértelmezett exportálást közvetlenül használhatja göndör zárójelek bezárása nélkül ().

Megjegyzés : Egy fájl több exportálást is tartalmazhat. Egy fájlban azonban csak egy alapértelmezett export lehet.

A modulok mindig szigorú módot használnak

Alapértelmezés szerint a modulok szigorú módban vannak. Például,

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

A modul használatának előnyei

• A kódalapot könnyebb fenntartani, mert a különböző fájlokban különböző funkciókkal rendelkező kódok találhatók.
• Újrafelhasználhatóvá teszi a kódot. Definiálhat egy modult, és az igényeinek megfelelően többször használhatja.

Előfordulhat, hogy egyes böngészőkben az import / export használata nem támogatott. További információért látogasson el a JavaScript import / export támogatására.