Moduli JavaScript

V tej vadnici boste s pomočjo primerov spoznali module v JavaScript.

Ko se naš program povečuje, lahko vsebuje veliko vrstic kode. Namesto da vse shranite v eno datoteko, lahko z moduli ločite kode v ločene datoteke glede na njihovo funkcionalnost. Zaradi tega je naša koda organizirana in enostavnejša za vzdrževanje.

Modul je datoteka, ki vsebuje kodo za izvajanje določene naloge. Modul lahko vsebuje spremenljivke, funkcije, razrede itd. Poglejmo primer,

Denimo, da datoteka z imenom greet.js vsebuje naslednjo kodo:

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

Zdaj, če želite uporabiti kodo greet.js v drugi datoteki, lahko uporabite naslednjo kodo:

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

Tukaj,

  • greetPerson()Funkcija v greet.js se izvozi z exportbesedo 
     export function greetPerson(name) (… )
  • Nato smo greetPerson()s importključno besedo uvozili v drugo datoteko . Če želite uvoziti funkcije, predmete itd., Jih morate oviti ( ). 
     import ( greet ) from '/.greet.js';

Opomba : Do modula lahko dostopate samo do izvoženih funkcij, predmetov itd. Za exportnjihovo uporabo in uporabo v drugih datotekah morate uporabiti ključno besedo za določeno funkcijo, predmete itd.

Izvozi več predmetov

Iz modula je mogoče tudi izvoziti več predmetov. Na primer

V datoteki module.js

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

V glavni datoteki

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

Tukaj,

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

To uvozi tako spremenljivko imena kot sum()funkcijo iz datoteke module.js .

Preimenovanje uvoza in izvoza

Če so predmeti (spremenljivke, funkcije itd.), Ki jih želite uvoziti, že prisotni v vaši glavni datoteki, se program morda ne bo obnašal tako, kot želite. V tem primeru program vzame vrednost iz glavne datoteke namesto iz uvožene datoteke.

Da bi se izognili konfliktom pri poimenovanju, lahko te funkcije, predmete itd. Preimenujete med izvozom ali med uvozom.

1. Preimenuj v 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';

Tu so med izvozom funkcije iz datoteke module.js funkciji dana nova imena (tukaj newName1 & newName2). Zato se pri uvozu te funkcije novo ime uporablja za sklicevanje na to funkcijo.

2. Preimenujte v datoteki 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';

Tu se med uvozom funkcije za ime funkcije uporabljajo nova imena (tukaj newName1 & newName2). Zdaj nova imena uporabljate za sklicevanje na te funkcije.

Privzeti izvoz

Izvedete lahko tudi privzeti izvoz modula. Na primer

V datoteki greet.js :

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

Nato pri uvozu lahko uporabite:

 import random_name from './greet.js';

Med izvajanjem privzetega izvoza

  • naključno_ime je uvoženo iz greet.js. Ker random_nameni greet.js, je privzeti izvoz ( greet()v tem primeru) izvožen kot random_name.
  • Privzeti izvoz lahko uporabite neposredno, ne da bi priložili skodrane oklepaje ().

Opomba : Datoteka lahko vsebuje več izvozov. Vendar lahko v datoteki imate samo en privzeti izvoz.

Moduli vedno uporabljajo strogi način

Privzeto so moduli v strogem načinu. Na primer

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

Prednost uporabe modula

  • Osnovo kode je lažje vzdrževati, ker so različne datoteke z različnimi funkcijami v različnih datotekah.
  • Omogoča ponovno uporabo kode. Modul lahko definirate in ga uporabite večkrat glede na vaše potrebe.

Uporaba uvoza / izvoza v nekaterih brskalnikih morda ni podprta. Če želite izvedeti več, obiščite podporo za uvoz / izvoz JavaScript.

Zanimive Članki...