JavaScript-moduulit

Tässä opetusohjelmassa opit JavaScript-moduuleista esimerkkien avulla.

Kun ohjelmamme kasvaa, se voi sisältää useita koodirivejä. Sen sijaan, että asetat kaiken yhteen tiedostoon, voit käyttää moduuleja erottamaan koodit erillisissä tiedostoissa niiden toiminnallisuuden mukaan. Tämä tekee koodistamme järjestetyn ja helpomman ylläpidettävän.

Moduuli on tiedosto, joka sisältää koodin tietyn tehtävän suorittamiseksi. Moduuli voi sisältää muuttujia, funktioita, luokkia jne. Katsotaanpa esimerkki,

Oletetaan, että tiedosto nimeltä greet.js sisältää seuraavan koodin:

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

Nyt voit käyttää greet.js- koodia toisessa tiedostossa seuraavalla koodilla:

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

Tässä,

• greetPerson()Toiminto greet.js viedään käyttämällä exportavainsanaa

   export function greetPerson(name) (… )

• Sitten tuotiin greetPerson()toiseen tiedostoon importavainsanalla. Voit tuoda toimintoja, objekteja jne. Käärimällä ne ympärille ( ).

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

Huomaa : Voit käyttää moduulista vain vietyjä toimintoja, objekteja jne. Sinun on käytettävä exportavainsanaa tiettyyn toimintoon, esineisiin jne., Jotta voit tuoda ne ja käyttää niitä muissa tiedostoissa.

Vie useita objekteja

On myös mahdollista viedä useita objekteja moduulista. Esimerkiksi,

Tiedostossa module.js

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

Päätiedostossa

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

Tässä,

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

Tämä tuo sekä nimimuuttujan että sum()toiminnon module.js- tiedostosta.

Tuonnin ja viennin uudelleennimeäminen

Jos tuotavat objektit (muuttujat, toiminnot jne.) Ovat jo päätiedostossasi, ohjelma ei välttämättä toimi haluamallasi tavalla. Tässä tapauksessa ohjelma ottaa arvon päätiedostosta tuodun tiedoston sijaan.

Nimien ristiriitojen välttämiseksi voit nimetä nämä toiminnot, objektit jne. Viennin tai tuonnin aikana.

1. Nimeä uudelleen moduulissa (vie tiedosto)

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

Kun viet funktiota module.js- tiedostosta, funktiolle annetaan uudet nimet (tässä newName1 & newName2). Näin ollen tuotaessa tätä toimintoa uutta nimeä käytetään viittaamaan siihen toimintoon.

2. Nimeä uudelleen tuontitiedostossa

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

Täällä funktion tuonnin aikana funktion nimeksi käytetään uusia nimiä (täällä, uusiNimi1 ja uusiNimi2). Viitat nyt näihin toimintoihin uusilla nimillä.

Oletusvienti

Voit myös suorittaa moduulin oletusviennin. Esimerkiksi,

Tiedostossa greet.js :

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

Sitten tuotaessasi voit käyttää:

 import random_name from './greet.js';

Oletusviennin aikana

• satunnaisnimi tuodaan greet.js. Koska, random_nameei ole greet.js, oletusvienti ( greet()tässä tapauksessa) viedään muodossa random_name.
• Voit käyttää oletusvientiä suoraan sulkematta sulkeja ().

Huomaa : Tiedosto voi sisältää useita vienti. Tiedostossa voi kuitenkin olla vain yksi oletusvienti.

Moduulit käyttävät aina tiukkaa tilaa

Oletuksena moduulit ovat tiukassa tilassa. Esimerkiksi,

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

Moduulin käytön edut

• Koodipohjaa on helpompi ylläpitää, koska eri tiedostoilla on eri koodi, jolla on erilaiset toiminnot.
• Tekee koodin uudelleenkäytettäväksi. Voit määrittää moduulin ja käyttää sitä useita kertoja tarpeidesi mukaan.

Tuonnin / viennin käyttöä ei ehkä tueta joissakin selaimissa. Saat lisätietoja käymällä JavaScriptien tuonti- ja vientitukessa.