Moduły JavaScript

W tym samouczku dowiesz się o modułach w JavaScript na podstawie przykładów.

W miarę jak nasz program się rozrasta, może zawierać wiele wierszy kodu. Zamiast umieszczać wszystko w jednym pliku, możesz użyć modułów do oddzielenia kodów w oddzielnych plikach zgodnie z ich funkcjonalnością. To sprawia, że ​​nasz kod jest uporządkowany i łatwiejszy w utrzymaniu.

Moduł to plik zawierający kod do wykonania określonego zadania. Moduł może zawierać zmienne, funkcje, klasy itp. Zobaczmy przykład,

Załóżmy, że plik o nazwie greet.js zawiera następujący kod:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Teraz, aby użyć kodu greet.js w innym pliku, możesz użyć następującego kodu:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Tutaj,

• greetPerson()Funkcja w greet.js jest eksportowana za pomocą exportsłowa kluczowego

   export function greetPerson(name) (… )

• Następnie zaimportowaliśmy greetPerson()inny plik za pomocą importsłowa kluczowego. Aby zaimportować funkcje, obiekty itp., Musisz je opakować ( ).

   import ( greet ) from '/.greet.js';

Uwaga : Dostęp do wyeksportowanych funkcji, obiektów itp. Można uzyskać tylko z modułu. Musisz użyć exportsłowa kluczowego dla określonej funkcji, obiektów itp., Aby je zaimportować i użyć w innych plikach.

Eksportuj wiele obiektów

Możliwe jest również wyeksportowanie wielu obiektów z modułu. Na przykład,

W pliku module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

W pliku głównym

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Tutaj,

 import ( name, sum ) from './module.js';

Spowoduje to zaimportowanie zarówno zmiennej name, jak i sum()funkcji z pliku module.js .

Zmiana nazwy importu i eksportu

Jeśli obiekty (zmienne, funkcje itp.), Które chcesz zaimportować, znajdują się już w pliku głównym, program może nie zachowywać się tak, jak chcesz. W takim przypadku program pobiera wartość z pliku głównego zamiast z pliku importowanego.

Aby uniknąć konfliktów nazw, możesz zmienić nazwy tych funkcji, obiektów itp. Podczas eksportu lub importu.

1. Zmień nazwę w module (plik eksportu)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Tutaj, podczas eksportowania funkcji z pliku module.js , nowe nazwy (tutaj nowaNazwa1 i nowaNazwa2) są nadawane funkcji. Dlatego podczas importowania tej funkcji nowa nazwa jest używana do odniesienia do tej funkcji.

2. Zmień nazwę w pliku importu

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Tutaj, podczas importowania funkcji, nowe nazwy (tutaj newName1 i newName2) są używane jako nazwa funkcji. Teraz używasz nowych nazw do odwoływania się do tych funkcji.

Domyślny eksport

Możesz także wykonać domyślny eksport modułu. Na przykład,

W pliku greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Następnie podczas importowania możesz użyć:

 import random_name from './greet.js';

Podczas wykonywania domyślnego eksportu,

• random_name jest importowany z greet.js. Ponieważ random_namenie ma w greet.js, domyślny eksport ( greet()w tym przypadku) jest eksportowany jako random_name.
• Możesz bezpośrednio użyć domyślnego eksportu bez zamykania nawiasów klamrowych ().

Uwaga : plik może zawierać wiele eksportów. Możesz jednak mieć tylko jeden domyślny eksport w pliku.

Moduły zawsze używają trybu ścisłego

Domyślnie moduły działają w trybie ścisłym. Na przykład,

 // in greet.js function greet() ( // strict by default ) export greet();

Korzyści z używania modułu

• Baza kodu jest łatwiejsza w utrzymaniu, ponieważ różne pliki o różnych funkcjach znajdują się w różnych plikach.
• Umożliwia wielokrotne użycie kodu. Możesz zdefiniować moduł i używać go wiele razy zgodnie ze swoimi potrzebami.

Niektóre przeglądarki mogą nie obsługiwać importu / eksportu. Aby dowiedzieć się więcej, odwiedź stronę Wsparcie importu / eksportu JavaScript.