JavaScript moduli

U ovom ćete tutorijalu uz primjere naučiti o modulima u JavaScript-u.

Kako naš program raste, može sadržavati mnogo redaka koda. Umjesto da sve stavite u jednu datoteku, možete koristiti module za odvajanje kodova u zasebne datoteke prema njihovoj funkcionalnosti. To čini naš kôd organiziranim i lakšim za održavanje.

Modul je datoteka koja sadrži kôd za izvršavanje određenog zadatka. Modul može sadržavati varijable, funkcije, klase itd. Pogledajmo primjer,

Pretpostavimo da datoteka s imenom greet.js sadrži sljedeći kôd:

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

Sada, da biste koristili kod greet.js u drugoj datoteci, možete koristiti sljedeći 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

Ovdje,

  • greetPerson()Funkcija u greet.js izvozi pomoću exportključne riječi 
     export function greetPerson(name) (… )
  • Zatim smo uvezli greetPerson()drugu datoteku pomoću importključne riječi. Da biste uvezli funkcije, objekte itd., Morate ih omotati ( ). 
     import ( greet ) from '/.greet.js';

Napomena : Izvoženim funkcijama, objektima itd. Možete pristupiti samo s modula. Morate upotrijebiti exportključnu riječ za određenu funkciju, objekte itd. Da biste ih uvezli i koristili u drugim datotekama.

Izvoz više objekata

Također je moguće izvesti više objekata iz modula. Na primjer,

U datoteci module.js

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

U glavnoj datoteci,

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

Ovdje,

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

Ovo uvozi i varijablu imena i sum()funkciju iz datoteke module.js .

Preimenovanje uvoza i izvoza

Ako su objekti (varijable, funkcije itd.) Koje želite uvesti već prisutni u vašoj glavnoj datoteci, program se možda neće ponašati kako želite. U ovom slučaju, program uzima vrijednost iz glavne datoteke umjesto iz uvezene datoteke.

Da biste izbjegli sukobe u imenovanju, možete preimenovati ove funkcije, objekte itd. Tijekom izvoza ili tijekom uvoza.

1. Preimenuj u modulu (izvozna datoteka)

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

Ovdje, tijekom izvoza funkcije iz datoteke module.js , funkciji se daju nova imena (ovdje newName1 & newName2). Stoga se pri uvozu te funkcije novi naziv koristi za referenciju na tu funkciju.

2. Preimenujte u datoteci za uvoz

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

Ovdje se tijekom uvoza funkcije za naziv funkcije koriste nova imena (ovdje newName1 & newName2). Sada koristite nova imena za referencu na ove funkcije.

Zadani izvoz

Također možete izvršiti zadani izvoz modula. Na primjer,

U datoteci greet.js :

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

Tada prilikom uvoza možete koristiti:

 import random_name from './greet.js';

Tijekom izvođenja zadanog izvoza,

  • random_name se uvozi iz greet.js. Budući da random_namenije u greet.js, zadani izvoz ( greet()u ovom slučaju) izvozi se kao random_name.
  • Možete izravno koristiti zadani izvoz bez zatvaranja kovrčavih zagrada ().

Napomena : Datoteka može sadržavati višestruki izvoz. Međutim, u datoteci možete imati samo jedan zadani izvoz.

Moduli se uvijek koriste strogim načinom rada

Prema zadanim postavkama, moduli su u strogom načinu rada. Na primjer,

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

Prednost korištenja modula

  • Osnovu koda lakše je održavati jer se različiti kod koji ima različite funkcionalnosti nalazi u različitim datotekama.
  • Kôd čini ponovnom upotrebom. Možete definirati modul i koristiti ga više puta prema vašim potrebama.

Korištenje uvoza / izvoza možda nije podržano u nekim preglednicima. Da biste saznali više, posjetite podršku za uvoz / izvoz JavaScript-a.

Zanimljivi članci...