A modulok fogalma a moduláris programozási paradigmából származik. Ez a paradigma azt javasolja, hogy a szoftverek különálló, cserélhető komponensekből, úgynevezett „modulokat” úgy, hogy a programfunkciókat önálló fájlokká bontják, amelyek külön-külön vagy összekapcsolva működhetnek Alkalmazás.

A modul egy önálló fájl, amely bizonyos funkciók megvalósítása, valamint az újrafelhasználhatóság és rendszerezés elősegítése érdekében kódot tartalmaz.

Itt ismertetjük a JavaScript alkalmazásokban használt modulrendszereket, beleértve a modulmintát, a legtöbb Node.js alkalmazásban használt CommonJS modulrendszert és az ES6 Module rendszert.

A modul minta

A natív JavaScript-modulok bevezetése előtt a modultervezési mintát modulrendszerként használták a változók és funkciók egyetlen fájlba való hatóköréhez.

Ezt azonnal meghívott függvénykifejezésekkel, közismertebb nevén IIFE-kkel valósították meg. Az IIFE egy újrafelhasználhatatlan funkció, amely létrehozása után azonnal elindul.

Íme az IIFE alapvető felépítése:

instagram viewer 
(funkció () {
//kód itt
})();
(() => {
//kód itt
})();
(async () => {
//kód itt
})();

A fenti kódblokk három különböző környezetben használt IIFE-ket ír le.

Az IIFE-ket azért használták, mert a függvényen belül deklarált változók a függvényre vonatkoznak, így csak azokat elérhető a függvényen belül, és mivel a függvények lehetővé teszik az adatok visszaküldését (nyilvánossá tételét). hozzáférhető).

Például:

const foo = (funkció () {
const sayName = (név) => {
konzol.log(`Hé, a nevem ${name}`);
 };
//A változók feltárása
Visszatérés {
 callSayName: (név) => monddName (név),
 };
})();
//A kitett metódusok elérése
foo.callSayName("Rúd");

A fenti kódblokk egy példa arra, hogyan hozták létre a modulokat a natív JavaScript modulok bevezetése előtt.

A fenti kódblokk egy IIFE-t tartalmaz. Az IIFE tartalmaz egy funkciót, amelyet a visszaküldésével elérhetővé tesz. Az IIFE-ben deklarált összes változó védett a globális hatókörrel szemben. Így a módszer (mondd Name) csak a nyilvános funkción keresztül érhető el, callSayName.

Figyeljük meg, hogy az IIFE egy változóba van mentve, foo. Ennek az az oka, hogy a memóriabeli helyére mutató változó nélkül a változók elérhetetlenek lesznek a szkript futása után. Ez a minta miatt lehetséges JavaScript bezárások.

A CommonJS modulrendszer

A CommonJS modulrendszer a CommonJS csoport által meghatározott modulformátum a JavaScript hatókörével kapcsolatos problémák megoldására az egyes modulok névterében történő végrehajtásával.

A CommonJS modulrendszer úgy működik, hogy arra kényszeríti a modulokat, hogy kifejezetten exportálják azokat a változókat, amelyeket más moduloknak szeretnének megjeleníteni.

Ezt a modulrendszert ehhez hozták létre szerveroldali JavaScript (Node.js) és mint ilyen, alapértelmezés szerint nem támogatott a böngészőkben.

A CommonJS modulok projektben való megvalósításához először inicializálnia kell az NPM-et az alkalmazásban a következő futtatással:

npm init -y

A CommonJS modulrendszer alapján exportált változók a következőképpen importálhatók:

//randomModule.js
//telepített csomag
const installImport = igényelnek("csomag név");
//helyi modul
const localImport = igényelnek("/path-to-module");

A modulok a CommonJS-be importálhatók a igényelnek utasítás, amely beolvas egy JavaScript fájlt, végrehajtja az olvasott fájlt, és visszaadja a export tárgy. A export Az objektum tartalmazza a modulban elérhető összes exportot.

Exportálhat egy változót a CommonJS modulrendszert követve elnevezett exportok vagy alapértelmezett exportok használatával.

Export néven

A megnevezett exportok a hozzájuk rendelt nevek alapján azonosított exportok. Az elnevezett exportálások modulonként több exportálást tesznek lehetővé, ellentétben az alapértelmezett exportálásokkal.

Például:

//main.js
exports.myExport = funkció () {
konzol.log("Ez egy példa nak,-nek egy nevű export");
};
exports.antherExport = funkció () {
konzol.log("Ez egy másik példa nak,-nek egy nevű export");
};

A fenti kódblokkban két elnevezett függvényt exportál (myExport és másik Export) rögzítésével a export tárgy.

Hasonlóképpen exportálhatja a függvényeket, így:

const myExport = funkció () {
konzol.log("Ez egy példa nak,-nek egy nevű export");
};
const otherExport = funkció () {
konzol.log("Ez egy másik példa nak,-nek egy nevű export");
};
modul.export = {
 myExport,
 másik export,
};

A fenti kódblokkban beállítja a export objektumot a megnevezett függvényekre. Csak a export objektumot egy új objektumra a modul tárgy.

A kód hibát jelez, ha így próbálná megtenni:

//rossz irány
export = {
 myExport,
 másik export,
};

Kétféleképpen importálhat elnevezett exportokat:

1. Importálja az összes exportot egyetlen objektumként, és külön-külön érje el őket a használatával a pont jelölés.

Például:

//otherModule.js
const foo = igényelnek("./fő");
foo.myExport();
foo.másik Export();

2. Deformálja az exportot a export tárgy.

Például:

//otherModule.js
const { myExport, otherExport } = igényelnek("./fő");
myExport();
otherExport();

Egy dolog közös az összes importálási módban, ugyanazon a néven kell importálni, amivel exportálták.

Alapértelmezett exportálás

Az alapértelmezett exportálás egy tetszőleges névvel azonosított export. Modulonként csak egy alapértelmezett exportálása lehet.

Például:

//main.js
osztályFoo{
 rúd() {
konzol.log("Ez egy példa nak,-nek a alapértelmezettexport");
 }
}
modul.export = Foo;

A fenti kódblokkban egy osztályt exportál (Foo) a export tiltakozik ellene.

Az alapértelmezett exportálások importálása hasonló a megnevezett exportok importálásához, azzal a különbséggel, hogy tetszőleges nevet használhat az importálásukhoz.

Például:

//otherModule.js
const Bár = igényelnek("./fő");
const tárgy = új Rúd();
tárgy.rúd();

A fenti kódblokkban az alapértelmezett export neve volt Rúd, bár tetszőleges nevet használhat.

Az ES6 modulrendszer

Az ECMAScript Harmony modulrendszer, közismertebb nevén ES6 modulok, a hivatalos JavaScript modulrendszer.

Az ES6 modulokat a böngészők és a szerverek támogatják, bár használatuk előtt szükség van egy kis konfigurációra.

A böngészőkben meg kell adni a típus mint modul a script import címkében.

Például így:

//index.html
<script src="./app.js" típus="modul"></script>

A Node.js-ben be kell állítani típus nak nek modul a tiédben package.json fájlt.

Például így:

//package.json
"típus":"modul"

Változókat exportálhat az ES6 modulrendszer használatával is, elnevezett exportok vagy alapértelmezett exportok használatával.

Export néven

Hasonlóan a CommonJS-modulok elnevezett importjaihoz, a hozzájuk rendelt nevek alapján azonosíthatók, és modulonként több exportálást is lehetővé tesznek.

Például:

//main.js
exportconst myExport = funkció () {
konzol.log("Ez egy példa nak,-nek egy nevű export");
};
exportconst otherExport = funkció () {
konzol.log("Ez egy másik példa nak,-nek egy nevű export");
};

Az ES6 modulrendszerben a nevesített exportok exportálása úgy történik, hogy a változó előtagjaként a export kulcsszó.

A megnevezett exportok importálhatók egy másik ES6 modulba a CommonJS-hez hasonlóan:

  • A szükséges export destrukturálása a export tárgy.
  • Az összes exportált adat importálása egyetlen objektumként, és külön elérése a pontjelöléssel.

Íme egy példa a szerkezetbontásra:

//otherModule.js
import { myExport, otherExport } tól től "./main.js";
myExport()
otherExport()

Íme egy példa a teljes objektum importálására:

import * mint foo tól től './main.js'
foo.myExport()
foo.másik Export()

A fenti kódblokkban a csillag (*) jelentése „minden”. A mint kulcsszó hozzárendeli a export objektumot az őt követő karakterláncra, ebben az esetben foo.

Alapértelmezett exportálás

Hasonlóan a CommonJS alapértelmezett exportjaihoz, tetszőleges névvel azonosíthatók, és modulonként csak egy alapértelmezett exportálás lehet.

Például:

//main.js
osztályFoo{
 rúd() {
konzol.log("Ez egy példa nak,-nek a alapértelmezettexport");
 }
}
exportalapértelmezett Foo;

Az alapértelmezett exportálások a következő hozzáadásával jönnek létre alapértelmezett kulcsszó után export kulcsszó, majd az exportálás neve.

Az alapértelmezett exportálások importálása hasonló a megnevezett exportok importálásához, azzal a különbséggel, hogy tetszőleges nevet használhat az importálásukhoz.

Például:

//otherModule.js
import Rúd tól től "./main.js";

Vegyes export

Az ES6 modulszabvány lehetővé teszi az alapértelmezett exportálást és a névvel ellátott exportálást is egy modulban, ellentétben a CommonJS-szel.

Például:

//main.js
exportconst myExport = funkció () {
konzol.log("Ez egy másik példa nak,-nek egy nevű export");
};
osztályFoo{
 rúd() {
konzol.log("Ez egy példa nak,-nek a alapértelmezettexport");
 }
}
exportalapértelmezett Foo;

A modulok jelentősége

A kód modulokra osztása nemcsak könnyebben olvashatóvá teszi őket, hanem újrafelhasználhatóbbá és karbantarthatóbbá is teszi. A JavaScript moduljai emellett kevésbé hibázzák a kódot, mivel alapértelmezés szerint minden modul szigorú módban fut.