Moduulien käsite tulee modulaarisen ohjelmoinnin paradigmasta. Tämä paradigma ehdottaa, että ohjelmiston tulisi koostua erillisistä, vaihdettavista komponenteista, joita kutsutaan nimellä "moduulit" jakamalla ohjelman toiminnot erillisiksi tiedostoiksi, jotka voivat toimia erikseen tai yhdistettynä sovellus.

Moduuli on erillinen tiedosto, joka kapseloi koodia tiettyjen toimintojen toteuttamiseksi ja uudelleenkäytettävyyden ja organisoinnin edistämiseksi.

Tässä käsitellään JavaScript-sovelluksissa käytetyt moduulijärjestelmät, mukaan lukien moduulimalli, useimmissa Node.js-sovelluksissa käytetty CommonJS-moduulijärjestelmä ja ES6-moduulijärjestelmä.

Moduulimalli

Ennen alkuperäisten JavaScript-moduulien käyttöönottoa moduulien suunnittelumallia käytettiin moduulijärjestelmänä muuttujien ja funktioiden laajentamiseksi yhteen tiedostoon.

Tämä toteutettiin käyttämällä välittömästi kutsuttuja funktiolausekkeita, jotka tunnetaan yleisesti nimellä IIFE. IIFE on toiminto, jota ei voi käyttää uudelleen, ja se käynnistyy heti, kun se on luotu.

instagram viewer

Tässä on IIFE: n perusrakenne:

(toiminto () {
//koodi täällä
})();
(() => {
//koodi täällä
})();
(asynk () => {
//koodi täällä
})();

Yllä oleva koodilohko kuvaa IIFE: itä, joita käytetään kolmessa eri kontekstissa.

IIFE: itä käytettiin, koska funktion sisällä ilmoitetut muuttujat kuuluvat funktioon, joten ne ovat vain käytettävissä funktion sisällä, ja koska funktioiden avulla voit palauttaa tietoja (joka tekee niistä julkisia saatavilla).

Esimerkiksi:

konst foo = (toiminto () {
konst sayName = (nimi) => {
konsoli.Hirsi(`Hei, minun nimeni on ${name}`);
 };
//Muuttujien paljastaminen
palata {
 callSayName: (nimi) => sano nimi (nimi),
 };
})();
//Näiden menetelmien käyttäminen
foo.callSayName("Baari");

Yllä oleva koodilohko on esimerkki moduulien luomisesta ennen alkuperäisten JavaScript-moduulien käyttöönottoa.

Yllä oleva koodilohko sisältää IIFE: n. IIFE sisältää toiminnon, jonka se tekee käytettävissä palauttamalla sen. Kaikki IIFE: ssä ilmoitetut muuttujat on suojattu globaalilta laajuudelta. Näin ollen menetelmä (sano Nimi) on käytettävissä vain julkisen toiminnon kautta, callSayName.

Huomaa, että IIFE on tallennettu muuttujaan, foo. Tämä johtuu siitä, että ilman muuttujaa, joka osoittaa sen sijaintiin muistissa, muuttujat eivät ole käytettävissä komentosarjan suorittamisen jälkeen. Tämä kuvio on mahdollista johtuen JavaScriptin sulkemiset.

CommonJS-moduulijärjestelmä

CommonJS-moduulijärjestelmä on CommonJS-ryhmän määrittelemä moduulimuoto, joka ratkaisee JavaScriptin laajuusongelmia suorittamalla kunkin moduulin sen nimiavaruudessa.

CommonJS-moduulijärjestelmä pakottaa moduulit eksplisiittisesti viemään muuttujia, jotka ne haluavat paljastaa muille moduuleille.

Tämä moduulijärjestelmä on luotu palvelinpuolen JavaScript (Node.js) ja sellaisenaan sitä ei tueta oletuksena selaimissa.

Jos haluat ottaa CommonJS-moduuleja projektiisi, sinun on ensin alustettava NPM sovelluksessasi suorittamalla:

npm init -y

CommonJS-moduulijärjestelmän mukaan viedyt muuttujat voidaan tuoda seuraavasti:

//randomModule.js
//asennettu paketti
konst asennettuTuonti = vaatia("paketin nimi");
//paikallinen moduuli
konst localImport = vaatia("/path-to-module");

Moduulit tuodaan CommonJS: ään käyttämällä vaatia lauseke, joka lukee JavaScript-tiedoston, suorittaa lukutiedoston ja palauttaa vientiä esine. The vientiä Objekti sisältää kaikki moduulissa saatavilla olevat vientitiedostot.

Voit viedä CommonJS-moduulijärjestelmää noudattavan muuttujan käyttämällä joko nimettyjä tai oletusvientejä.

nimeltä Vienti

Nimetyt viennit ovat vientiä, jotka tunnistetaan niille määritetyillä nimillä. Nimetyt viennit mahdollistavat useita vientiä moduulia kohden, toisin kuin oletusviennissä.

Esimerkiksi:

//main.js
exports.myExport = toiminto () {
konsoli.log("Tämä on esimerkki / nimetty viedä");
};
exports.anotherExport = toiminto () {
konsoli.log("Tämä on toinen esimerkki / nimetty viedä");
};

Yllä olevassa koodilohkossa viet kaksi nimettyä funktiota (myExport ja otherExport) kiinnittämällä ne vientiä esine.

Samalla tavalla voit viedä funktioita seuraavasti:

konst myExport = toiminto () {
konsoli.log("Tämä on esimerkki / nimetty viedä");
};
konst otherExport = toiminto () {
konsoli.log("Tämä on toinen esimerkki / nimetty viedä");
};
moduuli.vientiä = {
 myExport,
 otherExport,
};

Yllä olevassa koodilohkossa määrität vientiä vastustaa nimettyjä funktioita. Voit määrittää vain vientiä vastustaa uutta objektia kautta moduuli esine.

Koodisi antaisi virheen, jos yrität tehdä sen tällä tavalla:

//väärällä tavalla
vientiä = {
 myExport,
 otherExport,
};

Voit tuoda nimettyjä vientituotteita kahdella tavalla:

1. Tuo kaikki viennit yhtenä objektina ja käytä niitä erikseen käyttämällä pistemerkintä.

Esimerkiksi:

//otherModule.js
konst foo = vaatia(./main");
foo.myExport();
foo.otherExport();

2. Pura viennin rakenne vientiä esine.

Esimerkiksi:

//otherModule.js
konst { myExport, otherExport } = vaatia(./main");
myExport();
otherExport();

Yksi asia on yhteinen kaikissa tuontitavoissa, ne on tuotava samoilla nimillä, joilla ne vietiin.

Oletusvientit

Oletusvienti on vienti, joka on merkitty millä tahansa valitsemallasi nimellä. Sinulla voi olla vain yksi oletusvienti per moduuli.

Esimerkiksi:

//main.js
luokkaaFoo{
 bar() {
konsoli.log("Tämä on esimerkki / a oletuksenaviedä");
 }
}
moduuli.vientiä = Foo;

Yllä olevassa koodilohkossa olet viemässä luokkaa (Foo) määrittämällä uudelleen vientiä vastustaa sitä.

Oletusvientien tuonti on samanlaista kuin nimettyjen vientien tuonti, paitsi että voit käyttää mitä tahansa valitsemaasi nimeä niiden tuomiseen.

Esimerkiksi:

//otherModule.js
konst Baari = vaatia(./main");
konst objekti = Uusi Baari();
esine.baari();

Yllä olevassa koodilohkossa oletusvienti oli nimetty Baari, vaikka voit käyttää mitä tahansa valitsemaasi nimeä.

ES6-moduulijärjestelmä

ECMAScript Harmony -moduulijärjestelmä, joka tunnetaan yleisesti nimellä ES6-moduulit, on virallinen JavaScript-moduulijärjestelmä.

Selaimet ja palvelimet tukevat ES6-moduuleja, mutta sinun on määritettävä hieman ennen niiden käyttöä.

Selaimissa sinun on määritettävä tyyppi kuten moduuli komentosarjan tuontitunnisteessa.

Niin kuin:

//index.html
<komentosarja src="./app.js" tyyppi="moduuli"></script>

Node.js: ssä sinun on määritettävä tyyppi to moduuli sinun package.json tiedosto.

Niin kuin:

//package.json
"tyyppi":"moduuli"

Voit myös viedä muuttujia käyttämällä ES6-moduulijärjestelmää käyttämällä joko nimettyjä tai oletusvientejä.

nimeltä Vienti

Samoin kuin nimetyt tuonnit CommonJS-moduuleissa, ne tunnistetaan niille määritetyillä nimillä, ja ne sallivat useita vientiä moduulia kohden.

Esimerkiksi:

//main.js
viedäkonst myExport = toiminto () {
konsoli.log("Tämä on esimerkki / nimetty viedä");
};
viedäkonst otherExport = toiminto () {
konsoli.log("Tämä on toinen esimerkki / nimetty viedä");
};

ES6-moduulijärjestelmässä nimetyt viennit viedään lisäämällä muuttujan eteen viedä avainsana.

Nimetyt viennit voidaan tuoda toiseen moduuliin ES6:ssa samalla tavalla kuin CommonJS:

  • Vaaditun viennin rakenteen purkaminen vientiä esine.
  • Kaikkien vientien tuonti yhtenä kohteena ja niihin pääsy erikseen käyttämällä pistemerkintää.

Tässä on esimerkki rakenteen purkamisesta:

//otherModule.js
tuonti { myExport, otherExport } alkaen "./main.js";
myExport()
otherExport()

Tässä on esimerkki koko objektin tuomisesta:

tuonti * kuten foo alkaen './main.js'
foo.myExport()
foo.otherExport()

Yllä olevassa koodilohkossa tähti (*) tarkoittaa "kaikki". The kuten avainsana määrittää vientiä vastusta sitä seuraavaa merkkijonoa, tässä tapauksessa foo.

Oletusvientit

CommonJS: n oletusvientien tapaan ne tunnistetaan millä tahansa valitsemallasi nimellä, ja sinulla voi olla vain yksi oletusvienti per moduuli.

Esimerkiksi:

//main.js
luokkaaFoo{
 bar() {
konsoli.log("Tämä on esimerkki / a oletuksenaviedä");
 }
}
viedäoletuksena Foo;

Oletusvientit luodaan lisäämällä oletuksena avainsanan jälkeen viedä avainsana, jota seuraa viennin nimi.

Oletusvientien tuonti on samanlaista kuin nimettyjen vientien tuonti, paitsi että voit käyttää mitä tahansa valitsemaasi nimeä niiden tuomiseen.

Esimerkiksi:

//otherModule.js
tuonti Baari alkaen "./main.js";

Sekavienti

ES6-moduulistandardi mahdollistaa sekä oletusviennin että nimetyn viennin yhdessä moduulissa, toisin kuin CommonJS.

Esimerkiksi:

//main.js
viedäkonst myExport = toiminto () {
konsoli.log("Tämä on toinen esimerkki / nimetty viedä");
};
luokkaaFoo{
 bar() {
konsoli.log("Tämä on esimerkki / a oletuksenaviedä");
 }
}
viedäoletuksena Foo;

Moduulien merkitys

Koodin jakaminen moduuleiksi tekee niistä helpommin luettavia, mutta myös helpommin uudelleenkäytettäviä ja huollettavia. JavaScriptin moduulit tekevät koodistasi myös vähemmän virhealttiita, koska kaikki moduulit suoritetaan oletuksena tiukassa tilassa.