Koncept modulů vychází z paradigmatu modulárního programování. Toto paradigma navrhuje, aby se software skládal ze samostatných, zaměnitelných komponent tzv „moduly“ rozdělením funkcí programu do samostatných souborů, které mohou pracovat samostatně nebo ve spojení aplikace.

Modul je samostatný soubor, který zapouzdřuje kód za účelem implementace určitých funkcí a podpory opětovné použitelnosti a organizace.

Zde pokryjete modulové systémy používané v aplikacích JavaScript, včetně vzoru modulů, systému modulů CommonJS používaného ve většině aplikací Node.js a systému modulů ES6.

Vzor modulu

Před zavedením nativních modulů JavaScriptu se vzor návrhu modulu používal jako modulový systém pro rozsah proměnných a funkcí do jednoho souboru.

To bylo implementováno pomocí okamžitě vyvolaných funkčních výrazů, populárně známých jako IIFE. IIFE je neopakovatelně použitelná funkce, která se spustí, jakmile je vytvořena.

Zde je základní struktura IIFE:

(funkce () {
//kód zde
})();
(() => {
//kód zde
})();
(asynchronní () => {
//kód zde
})();
instagram viewer

Blok kódu výše popisuje IIFE používané ve třech různých kontextech.

IIFE byly použity, protože proměnné deklarované uvnitř funkce jsou omezeny na funkci, takže jsou pouze přístupné uvnitř funkce a protože funkce umožňují vracet data (zveřejňovat je přístupný).

Například:

konst foo = (funkce () {
konst sayName = (jméno) => {
řídicí panel.log('Hej, jmenuji se ${name}`);
 };
//Odhalení proměnných
vrátit se {
 callSayName: (jméno) => sayName (jméno),
 };
})();
//Přístup k exponovaným metodám
foo.callSayName("Bar");

Výše uvedený blok kódu je příkladem toho, jak byly moduly vytvořeny před zavedením nativních modulů JavaScriptu.

Blok kódu výše obsahuje IIFE. IIFE obsahuje funkci, kterou zpřístupňuje jejím vrácením. Všechny proměnné deklarované v IIFE jsou chráněny před globálním rozsahem. Tedy metoda (řekni jméno) je přístupný pouze prostřednictvím veřejné funkce, callSayName.

Všimněte si, že IIFE se uloží do proměnné, foo. Je to proto, že bez proměnné ukazující na její umístění v paměti budou proměnné po spuštění skriptu nepřístupné. Tento vzor je možný díky Uzávěry JavaScriptu.

Modulový systém CommonJS

Systém modulů CommonJS je formát modulu definovaný skupinou CommonJS pro řešení problémů s rozsahem JavaScriptu spuštěním každého modulu v jeho jmenném prostoru.

Systém modulů CommonJS funguje tak, že moduly nutí explicitně exportovat proměnné, které chtějí vystavit jiným modulům.

Tento modulový systém byl vytvořen pro JavaScript na straně serveru (Node.js) a jako takový není standardně podporován v prohlížečích.

Chcete-li do svého projektu implementovat moduly CommonJS, musíte nejprve inicializovat NPM ve své aplikaci spuštěním:

npm init -y

Proměnné exportované podle systému modulů CommonJS lze importovat takto:

//randomModule.js
//nainstalovaný balíček
konst installImport = vyžadovat("název-balíčku");
//místní modul
konst localImport = vyžadovat("/path-to-module");

Moduly se importují do CommonJS pomocí vyžadovat příkaz, který načte soubor JavaScript, provede načtený soubor a vrátí soubor exportů objekt. The exportů objekt obsahuje všechny dostupné exporty v modulu.

Proměnnou můžete exportovat podle systému modulů CommonJS pomocí pojmenovaných exportů nebo výchozích exportů.

Pojmenované exporty

Pojmenované exporty jsou exporty identifikované názvy, kterým byly přiřazeny. Pojmenované exporty umožňují více exportů na modul, na rozdíl od výchozích exportů.

Například:

//main.js
exports.myExport = funkce () {
řídicí panel.log("Toto je příklad z jmenovaný vývozní");
};
exports.anotherExport = funkce () {
řídicí panel.log("Toto je další příklad z jmenovaný vývozní");
};

Ve výše uvedeném bloku kódu exportujete dvě pojmenované funkce (myExport a jinýExport) jejich připojením k exportů objekt.

Podobně můžete exportovat funkce takto:

konst myExport = funkce () {
řídicí panel.log("Toto je příklad z jmenovaný vývozní");
};
konst jinýExport = funkce () {
řídicí panel.log("Toto je další příklad z jmenovaný vývozní");
};
modul.exportů = {
 myExport,
 další Export,
};

Ve výše uvedeném bloku kódu nastavíte exportů objekt k pojmenovaným funkcím. Můžete přiřadit pouze exportů objekt k novému objektu prostřednictvím modul objekt.

Váš kód by vyvolal chybu, pokud byste se to pokusili udělat tímto způsobem:

//špatným směrem
exportů = {
 myExport,
 další Export,
};

Pojmenované exporty můžete importovat dvěma způsoby:

1. Importujte všechny exporty jako jeden objekt a přistupujte k nim samostatně pomocí tečkovou notaci.

Například:

//otherModule.js
konst foo = vyžadovat("./hlavní");
foo.myExport();
foo.jinýExport();

2. De-strukturovat exporty z exportů objekt.

Například:

//otherModule.js
konst { myExport, otherExport } = vyžadovat("./hlavní");
myExport();
dalsiExport();

Jedna věc je společná pro všechny způsoby importu, musí být importovány se stejnými názvy, se kterými byly exportovány.

Výchozí exporty

Výchozí export je export označený libovolným názvem podle vašeho výběru. Pro každý modul můžete mít pouze jeden výchozí export.

Například:

//main.js
třídaFoo{
 bar() {
řídicí panel.log("Toto je příklad z A výchozívývozní");
 }
}
modul.exportů = Foo;

Ve výše uvedeném bloku kódu exportujete třídu (Foo) přeřazením exportů namítat proti tomu.

Import výchozích exportů je podobný importu pojmenovaných exportů, s tím rozdílem, že k importu můžete použít libovolný název podle svého výběru.

Například:

//otherModule.js
konst Bar = vyžadovat("./hlavní");
konst objekt = Nový Bar();
objekt.bar();

Ve výše uvedeném bloku kódu byl pojmenován výchozí export Bar, i když můžete použít libovolný název podle svého výběru.

Modulový systém ES6

Modulový systém ECMAScript Harmony, populárně známý jako moduly ES6, je oficiální modulový systém JavaScriptu.

Moduly ES6 jsou podporovány prohlížeči a servery, i když před jejich použitím potřebujete trochu konfigurace.

V prohlížečích musíte zadat typ tak jako modul ve značce pro import skriptu.

Jako tak:

//index.html
<skript src="./app.js" typ="modul"></script>

V Node.js musíte nastavit typ na modul ve vašem package.json soubor.

Jako tak:

//package.json
"typ":"modul"

Proměnné můžete také exportovat pomocí modulového systému ES6 pomocí pojmenovaných exportů nebo výchozích exportů.

Pojmenované exporty

Podobně jako pojmenované importy v modulech CommonJS jsou identifikovány podle jmen, kterým byly přiřazeny, a umožňují více exportů na modul.

Například:

//main.js
vývozníkonst myExport = funkce () {
řídicí panel.log("Toto je příklad z jmenovaný vývozní");
};
vývozníkonst jinýExport = funkce () {
řídicí panel.log("Toto je další příklad z jmenovaný vývozní");
};

V modulovém systému ES6 se pojmenované exporty exportují tak, že se před proměnnou připojí předpona vývozní klíčové slovo.

Pojmenované exporty lze importovat do jiného modulu v ES6 stejným způsobem jako CommonJS:

  • Destrukturalizace požadovaných exportů z exportů objekt.
  • Importovat všechny exporty jako jeden objekt a přistupovat k nim samostatně pomocí tečkové notace.

Zde je příklad destrukturalizace:

//otherModule.js
import { myExport, otherExport } z "./main.js";
myExport()
jinýExport()

Zde je příklad importu celého objektu:

import * tak jako foo z './main.js'
foo.myExport()
foo.jinýExport()

Ve výše uvedeném bloku kódu je hvězdička (*) znamená „všechny“. The tak jako klíčové slovo přiřadí exportů vznést námitku proti řetězci, který za ním následuje, v tomto případě foo.

Výchozí exporty

Podobně jako výchozí exporty v CommonJS jsou identifikovány libovolným názvem podle vašeho výběru a můžete mít pouze jeden výchozí export na modul.

Například:

//main.js
třídaFoo{
 bar() {
řídicí panel.log("Toto je příklad z A výchozívývozní");
 }
}
vývoznívýchozí Foo;

Výchozí exporty se vytvoří přidáním výchozí klíčové slovo po vývozní klíčové slovo a za ním název exportu.

Import výchozích exportů je podobný importu pojmenovaných exportů, s tím rozdílem, že k importu můžete použít libovolný název podle svého výběru.

Například:

//otherModule.js
import Bar z "./main.js";

Smíšený export

Standard modulu ES6 umožňuje mít výchozí exporty i pojmenované exporty v jednom modulu, na rozdíl od CommonJS.

Například:

//main.js
vývozníkonst myExport = funkce () {
řídicí panel.log("Toto je další příklad z jmenovaný vývozní");
};
třídaFoo{
 bar() {
řídicí panel.log("Toto je příklad z A výchozívývozní");
 }
}
vývoznívýchozí Foo;

Význam modulů

Rozdělením kódu do modulů je nejen snazší číst, ale je také více znovupoužitelný a také udržovatelný. Moduly v JavaScriptu také snižují náchylnost vašeho kódu k chybám, protože všechny moduly jsou ve výchozím nastavení spouštěny v přísném režimu.