Moduły, import i eksport w JavaScript | Wyjaśniono przykładami

Moduły są używane w JavaScript do wdrożenia koncepcji modułowości, która w jego rdzeniu jest procesem dzielenia rozwiązania na mniejsze, kompaktowe i bardziej znaczące komponenty. W JavaScript modułowość osiąga się przy użyciu eksportu i importu słów kluczowych. Gdy JavaScript jest używany jako skrypt modułowy z stroną internetową HTML, słowo kluczowe „moduł”Jest dodawany jako typ znacznika skryptu

Dlaczego warto używać modułów

Unikaj powtarzania słów. „Wraz z upływem czasu aplikacji internetowych zmieniło się z bardzo małych programów na duże i złożone programy w celu wykonania skomplikowanych zadań. Aby stworzyć większe/złożone aplikacje internetowe, ES6 JavaScript został wyposażony w możliwość podzielenia skryptów na mniejsze i możliwe do zarządzania komponenty za pomocą Funkcja eksportu i Funkcja importu.

Konfigurowanie strony HTML

Wejdź do preferowanego edytora tekstu i utwórz stronę HTML, po prostu umieść następujące wiersze kodu wewnątrz znacznika ciała:

Wyjaśniono moduły JS

Zamiast manipulować elementami HTML na stronie internetowej, wyświetlimy i weryfikujemy wyjście za pomocą konsoli. Dlatego nie wymagamy fantazyjnych elementów na naszej stronie internetowej HTML.

Uruchom plik, a zobaczysz następujące dane wyjściowe:

Konfigurowanie plików skryptów

Teraz, pozostając w tym samym katalogu, w którym znajduje się twój plik HTML, utwórz dwa „.JS”Pliki jako:

• Mainscript.JS: Ten plik zostanie połączony z stroną internetową HTML.
• CompScript.JS: Ten plik będzie zawierał niektóre funkcje komponentów.

Takie jak to:

Teraz, w swoim HTML, połącz Mainscript.JS za pomocą następującego polecenia:

Jak widać, w przeciwieństwie do normalnych tagów skryptów, nie tylko przekazujemy link źródłowy, ale także typ, który jest ustawiony na „moduł”, Aby powiadomić przeglądarkę, że ten skrypt jest w formie modułowej.

Dodawanie funkcji w pliku komponentu

Teraz, aby wyświetlić modułowość, utworzysz niektóre zmienne/funkcje w pliku skryptu komponentu „CompScript.JS”I eksportuj je w środku Mainscript.JS.

W środku CompScript.JS Utwórz następującą funkcję, która wydrukuje 5 liczb:

funkcja printnumbers (num)
dla (niech i = num; i <= num+5 ; i++)
konsola.log (i);

Twój plik skryptu komponentu będzie wyglądał tak:

Eksportowanie i importowanie funkcji

Teraz, aby uzyskać dostęp do tej funkcji w Mainscript.JS Plik musisz wyeksportować tę funkcję z Compscript.plik JS. Możesz to zrobić, umieszczając eksport słowa kluczowego za funkcją tak:

Teraz, aby użyć go w MainScript.JS, musimy to złapać eksport używając import funkcjonować. Możesz to zrobić za pomocą następującej składni:

import funkcja-nazwa z „ScriptSoruce.JS;

W naszym przypadku ta linia zmieni się w:

import printnumbers z "./Compscript.js ";

Teraz, używając tej funkcji w naszym głównym pliku skryptu, możesz po prostu wywołać funkcję, gdy wywołujemy dowolną inną funkcję w JavaScript:

Printnumbers (5);

Mainscript.JS będzie wyglądać tak:

Zapisz plik i odśwież HTML i przejdź do konsoli dewelopera, a zobaczysz następujące dane wyjściowe:

A jeśli zwrócisz szczególną uwagę na wyjście wewnątrz konsoli, zobaczysz:

Nawet jeśli tylko połączyłeś mianscript.JS Na stronie HTML nasz komponent został pomyślnie wykonany. Dlatego możesz powiedzieć, że pomyślnie wdrożyłeś koncepcję modułowości składowej.

Ale poczekaj, jest więcej!

Wyobraź sobie, że eksportujesz wiele funkcji, takich jak:

funkcja eksportu printnumbers (num)
dla (niech i = num; i <= num + 5; i++)
konsola.log (i);


Funkcja Eksportuj namePrinter ()
konsola.Log („John Doe”)

Eksport stał wiek = 22;
Funkcja eksportu printjob ()
konsola.log („audytor”);

Pisanie słowa kluczowego eksport Z każdym elementem, który chcesz wyeksportować, nie jest dobrym podejściem, to, co możesz zrobić, jest na końcu pliku, napisz jeden polecenie linii, który wyeksportuje funkcje i zmienne, które chcesz.

Robisz to, pisząc następujący wiersz:

Export printnumbers, namePrinter, wiek, printjob;

Twój CompScript.JS będzie wyglądać tak:

Podobnie, aby zaimportować wszystkie funkcje i zmienne ze słowem kluczowym eksportu z pliku, możesz użyć symbolu gwiazdki „*”, jak pokazano poniżej:

importować * jako comp z "./Compscript.js ";

Symbol gwiazdki „ *” oznacza, że ​​chcesz zaimportować wszystkie eksport pliku pod nazwą „komp",

Aby użyć funkcji i zmiennych, które właśnie zaimportowaliśmy, użyj Operator DOT wraz z nazwą funkcji/zmiennej:

komp.NamePrinter ();

Jeśli miałbyś użyć wszystkich eksportu z CompScript.JS Plik, wtedy użyjesz następującego kodu:

importować * jako comp z "./Compscript.js ";
komp.NamePrinter ();
konsola.Log („Wiek to:” + Comp.wiek);
komp.printjob ();
komp.Printnumbers (2);

Wtedy twój Mainscript.JS będzie wyglądać tak:

Zapisz pliki i odśwież stronę internetową, a zobaczysz wyjście w konsoli

Jak widać, z powodzeniem wykorzystaliśmy każdy eksport z CompScript.JS wewnątrz naszego Mainscript.JS plik.

Wniosek

Moduły pomagają nam podzielić nasze aplikacje internetowe na mniejsze, zwięzłe i możliwe do zarządzania części; Modułowość w JavaScript osiąga się poprzez podzielenie skryptu na różne komponenty i używając import I eksport cechy Opcja wprowadzona w ES6. Aby to zademonstrować, skonfigurowaliśmy podstawową stronę HTML, utworzyliśmy dwa różne pliki skryptów i podaliśmy niektóre funkcje w pliku komponentu. Następnie użyliśmy ich w naszym głównym pliku skryptu. Nauczyliśmy się również różnych sposobów eksportowania wielu funkcji i importowania wszystkich funkcji jednocześnie.