Koncepcja modułów wywodzi się z paradygmatu programowania modułowego. Paradygmat ten proponuje, aby oprogramowanie składało się z oddzielnych, wymiennych komponentów, tzw „moduły” poprzez rozbicie funkcji programu na samodzielne pliki, które mogą działać osobno lub w połączeniu aplikacja.

Moduł to samodzielny plik, który hermetyzuje kod w celu zaimplementowania określonej funkcjonalności i promowania ponownego wykorzystania i organizacji.

Tutaj omówisz systemy modułów używane w aplikacjach JavaScript, w tym wzorzec modułu, system modułów CommonJS używany w większości aplikacji Node.js oraz system modułów ES6.

Wzór modułu

Przed wprowadzeniem natywnych modułów JavaScript wzorzec projektowy modułów był używany jako system modułów do określania zakresu zmiennych i funkcji w pojedynczym pliku.

Zostało to zaimplementowane przy użyciu natychmiast wywoływanych wyrażeń funkcyjnych, popularnie zwanych IIFE. IIFE to funkcja, której nie można ponownie użyć, która jest uruchamiana natychmiast po utworzeniu.

instagram viewer

Oto podstawowa struktura IIFE:

(funkcjonować () {
//kod tutaj
})();
(() => {
//kod tutaj
})();
(asynchroniczny () => {
//kod tutaj
})();

Powyższy blok kodu opisuje IIFE używane w trzech różnych kontekstach.

Zastosowano IIFE, ponieważ zmienne zadeklarowane wewnątrz funkcji są ograniczone do funkcji, czyniąc je tylko dostępne wewnątrz funkcji i ponieważ funkcje umożliwiają zwracanie danych (upublicznianie ich dostępny).

Na przykład:

konst foo = (funkcjonować () {
konst powiedzImię = (imię) => {
konsola.dziennik('Hej, mam na imię ${nazwa}`);
 };
//Wyświetlanie zmiennych
powrót {
 callSayName: (imię) => powiedzImię (imię),
 };
})();
//Dostęp do ujawnionych metod
foo.callSayName("Bar");

Powyższy blok kodu jest przykładem tworzenia modułów przed wprowadzeniem natywnych modułów JavaScript.

Powyższy blok kodu zawiera IIFE. IIFE zawiera funkcję, którą udostępnia, zwracając ją. Wszystkie zmienne zadeklarowane w IIFE są chronione przed zasięgiem globalnym. Zatem metoda (Powiedz Imię) jest dostępny tylko poprzez funkcję publiczną, ZadzwońPowiedz imię.

Zauważ, że IIFE jest zapisany w zmiennej, bla. Dzieje się tak, ponieważ bez zmiennej wskazującej jej lokalizację w pamięci zmienne będą niedostępne po uruchomieniu skryptu. Ten wzór jest możliwy dzięki Zamknięcia JavaScript.

System modułów CommonJS

System modułów CommonJS to format modułów zdefiniowany przez grupę CommonJS w celu rozwiązywania problemów z zakresem JavaScript poprzez wykonywanie każdego modułu w jego przestrzeni nazw.

System modułów CommonJS działa poprzez zmuszanie modułów do jawnego eksportowania zmiennych, które chcą udostępnić innym modułom.

Ten system modułowy został stworzony dla JavaScript po stronie serwera (Node.js) i jako taki nie jest domyślnie obsługiwany w przeglądarkach.

Aby zaimplementować moduły CommonJS w swoim projekcie, musisz najpierw zainicjować NPM w swojej aplikacji, uruchamiając:

npm init -y

Zmienne eksportowane zgodnie z systemem modułów CommonJS można importować w następujący sposób:

//randomModule.js
//zainstalowany pakiet
konst zainstalowanyImport = wymagać("nazwa-pakietu");
//moduł lokalny
konst import lokalny = wymagać("/path-to-module");

Moduły są importowane w CommonJS przy użyciu wymagać instrukcja, która odczytuje plik JavaScript, wykonuje odczytany plik i zwraca eksport obiekt. The eksport obiekt zawiera wszystkie dostępne eksporty w module.

Możesz wyeksportować zmienną zgodnie z systemem modułów CommonJS, używając nazwanych eksportów lub eksportów domyślnych.

Nazwane eksporty

Eksporty nazwane to eksporty identyfikowane przez przypisane im nazwy. Nazwane eksporty umożliwiają wiele eksportów na moduł, w przeciwieństwie do eksportów domyślnych.

Na przykład:

//main.js
exports.myExport = funkcjonować () {
konsola.log("To jest przykład z nazwany eksport");
};
exports.innyExport = funkcjonować () {
konsola.log("To jest kolejny przykład z nazwany eksport");
};

W powyższym bloku kodu eksportujesz dwie nazwane funkcje (mój Eksport I inny Eksportuj) poprzez dołączenie ich do eksport obiekt.

Podobnie możesz wyeksportować funkcje w następujący sposób:

konst mój Eksport = funkcjonować () {
konsola.log("To jest przykład z nazwany eksport");
};
konst inny Eksportuj = funkcjonować () {
konsola.log("To jest kolejny przykład z nazwany eksport");
};
moduł.eksport = {
 mój Eksport,
 innyEksportuj,
};

W powyższym bloku kodu ustawiasz eksport obiekt do nazwanych funkcji. Możesz przypisać tylko tzw eksport obiekt do nowego obiektu przez moduł obiekt.

Twój kod spowodowałby błąd, gdybyś spróbował to zrobić w ten sposób:

//zła droga
eksport = {
 mój Eksport,
 innyEksportuj,
};

Istnieją dwa sposoby importowania nazwanych eksportów:

1. Zaimportuj wszystkie eksporty jako pojedynczy obiekt i uzyskaj do nich dostęp oddzielnie za pomocą notacja kropkowa.

Na przykład:

//otherModule.js
konst foo = wymagać("./główny");
bla.myEksportuj();
bla.inny Eksportuj();

2. Zdestrukturyzuj eksport z eksport obiekt.

Na przykład:

//otherModule.js
konst { mój Eksport, inny Eksport } = wymagać("./główny");
mójEksport();
inny Eksport();

Jedna rzecz jest wspólna dla wszystkich metod importowania, muszą być importowane przy użyciu tych samych nazw, z którymi zostały wyeksportowane.

Eksporty domyślne

Domyślny eksport to eksport identyfikowany przez wybraną nazwę. Możesz mieć tylko jeden eksport domyślny na moduł.

Na przykład:

//main.js
klasabla{
 bar() {
konsola.log("To jest przykład z A domyślnyeksport");
 }
}
moduł.eksport = Foo;

W powyższym bloku kodu eksportujesz klasę (bla) poprzez ponowne przypisanie eksport sprzeciwić się temu.

Importowanie domyślnych eksportów jest podobne do importowania nazwanych eksportów, z tą różnicą, że można użyć dowolnej nazwy do ich zaimportowania.

Na przykład:

//otherModule.js
konst Pasek = wymagać("./główny");
konst obiekt = nowy Bar();
obiekt.bar();

W powyższym bloku kodu nazwano domyślny eksport Bar, chociaż możesz użyć dowolnej wybranej nazwy.

System modułów ES6

System modułów ECMAScript Harmony, popularnie znany jako moduły ES6, jest oficjalnym systemem modułów JavaScript.

Moduły ES6 są obsługiwane przez przeglądarki i serwery, chociaż przed użyciem wymagają trochę konfiguracji.

W przeglądarkach musisz określić typ Jak moduł w tagu importu skryptu.

jak tak:

//index.html
<źródło skryptu="./app.js" typ="moduł"></script>

W Node.js musisz ustawić typ Do moduł w Twoim pakiet.json plik.

jak tak:

//package.json
"typ":"moduł"

Możesz także eksportować zmienne za pomocą systemu modułów ES6, korzystając z nazwanych eksportów lub eksportów domyślnych.

Nazwane eksporty

Podobnie jak nazwane importy w modułach CommonJS, są one identyfikowane przez przypisane im nazwy i umożliwiają wielokrotny eksport na moduł.

Na przykład:

//main.js
eksportkonst mój Eksport = funkcjonować () {
konsola.log("To jest przykład z nazwany eksport");
};
eksportkonst inny Eksportuj = funkcjonować () {
konsola.log("To jest kolejny przykład z nazwany eksport");
};

W systemie modułowym ES6 nazwane eksporty są eksportowane przez poprzedzenie zmiennej przedrostkiem eksport słowo kluczowe.

Nazwane eksporty mogą być importowane do innego modułu w ES6 w taki sam sposób jak CommonJS:

  • Destrukturyzacja wymaganego eksportu z eksport obiekt.
  • Importowanie wszystkich eksportów jako pojedynczego obiektu i uzyskiwanie do nich oddzielnego dostępu przy użyciu notacji kropkowej.

Oto przykład destrukturyzacji:

//otherModule.js
import { mój Eksport, inny Eksport } z "./main.js";
mój Eksport()
inny Eksportuj()

Oto przykład importu całego obiektu:

import * Jak bla z './main.js'
bla.myEksportuj()
bla.inny Eksportuj()

W powyższym bloku kodu gwiazdka (*) oznacza „wszystko”. The Jak słowo kluczowe przypisuje eksport sprzeciw wobec ciągu, który następuje po nim, w tym przypadku bla.

Eksporty domyślne

Podobnie jak w przypadku domyślnych eksportów w CommonJS, są one identyfikowane przez dowolną wybraną przez Ciebie nazwę i możesz mieć tylko jeden eksport domyślny na moduł.

Na przykład:

//main.js
klasabla{
 bar() {
konsola.log("To jest przykład z A domyślnyeksport");
 }
}
eksportdomyślny Bla;

Domyślne eksporty są tworzone przez dodanie pliku domyślny słowo kluczowe po eksport słowo kluczowe, po którym następuje nazwa eksportu.

Importowanie domyślnych eksportów jest podobne do importowania nazwanych eksportów, z tą różnicą, że można użyć dowolnej nazwy do ich zaimportowania.

Na przykład:

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

Eksport mieszany

Standard modułu ES6 umożliwia posiadanie zarówno domyślnych, jak i nazwanych eksportów w jednym module, w przeciwieństwie do CommonJS.

Na przykład:

//main.js
eksportkonst mój Eksport = funkcjonować () {
konsola.log("To jest kolejny przykład z nazwany eksport");
};
klasabla{
 bar() {
konsola.log("To jest przykład z A domyślnyeksport");
 }
}
eksportdomyślny Bla;

Znaczenie modułów

Podział kodu na moduły nie tylko ułatwia ich czytanie, ale także sprawia, że ​​jest on łatwiejszy do ponownego użycia i utrzymania. Moduły w JavaScript sprawiają również, że Twój kod jest mniej podatny na błędy, ponieważ wszystkie moduły są domyślnie wykonywane w trybie ścisłym.