Obecnie JavaScript odgrywa ogromną rolę w tworzeniu stron internetowych. Programiści front-end używają JavaScript do tworzenia interaktywnych aplikacji internetowych. W rezultacie wzrosło zapotrzebowanie na programistów JavaScript.

Z pewnością JavaScript ewoluował przez lata. ES6 wprowadził wiele nowych funkcji do języka. Jednym z nich jest sposób na łatwe udostępnianie kodów między plikami JavaScript.

Import i eksport funkcji dla JavaScript to nowe funkcje, dzięki którym staniesz się lepszym programistą. Oto jak działają te funkcje.

Co to jest moduł JavaScript?

Moduł JavaScript to plik JavaScript zawierający zbiór kodu do użycia. Moduły są zwykle zapisywane w oddzielnych plikach i importowane przy użyciu import słowo kluczowe. Oszczędza to czas i wysiłek, ponieważ można go później ponownie wykorzystać.

Na przykład, jeśli masz funkcję o nazwie oblicz sumę(), możesz dołączyć go do innego pliku i udostępnić w dowolnym miejscu w projekcie, używając rozszerzenia eksport I import Funkcje JavaScript bez żadnych problemów.

instagram viewer

Jedną z zalet korzystania z modułów jest to, że pomaga to utrzymać porządek w kodzie. Sprawia również, że Twój kod jest łatwiejszy w zarządzaniu i łatwiejszy do debugowania.

Aby użyć pliku JavaScript jako modułu, musisz utworzyć skrypt w swoim dokumencie HTML z rozszerzeniem type="moduł".

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

Istnieją dwa rodzaje modułów:

  1. Moduły ECMAScript: standardowe moduły JavaScript, obsługiwane przez wszystkie główne przeglądarki.
  2. Moduły CommonJS: są starsze i nie są powszechnie obsługiwane.

Tutaj skupimy się na modułach ECMAScript. W razie potrzeby zobacz nasze wprowadzenie do JavaScriptu aby odświeżyć podstawy.

Jak eksportować funkcje w JavaScript

W języku JavaScript funkcje są obiektami pierwszej klasy, które oprócz tego, że mogą być używane samodzielnie, mogą być przekazywane jako argumenty. Eksportowanie funkcji to dobry sposób na przeniesienie ich do innych programów. Jest również używany, gdy chcesz utworzyć biblioteki wielokrotnego użytku.

Eksportowanie funkcji w JavaScript odbywa się za pomocą eksport funkcjonować. The eksport funkcja eksportuje daną funkcję do użycia przez inny plik lub skrypt. Eksportując nasze własne funkcje, możemy swobodnie wykorzystywać je w innych plikach lub skryptach, nie martwiąc się o kwestie licencyjne.

Istnieją dwa sposoby korzystania z eksport sprawnie funkcjonować. Omówimy je z przykładami kodu.

Załóżmy, że masz plik pobierz dane osobowe.js który ma funkcję, która zwraca pełną nazwę użytkownika po wprowadzeniu monitu. Funkcja wygląda następująco:

funkcjonowaćpobierzPełneNazwisko(pełna nazwa){
 pełna nazwa = zachęta ('Jakie jest Twoje pierwsze imię');
konsola.log (pełna nazwa);
 }
  1. Możesz wyeksportować tę funkcję, po prostu używając pliku eksport słowo kluczowe, po którym następuje nazwa funkcji w nawiasach klamrowych. To wygląda tak:
    eksport {getFullName};
  2. Druga metoda polega na dodaniu eksport słowo kluczowe tuż przed zadeklarowaniem funkcji.
    eksportfunkcjonowaćpobierzPełneNazwisko (pełna nazwa){...}

Korzystając z pierwszej metody, można wyeksportować wiele funkcji. Odbywa się to poprzez umieszczenie nazw żądanych funkcji w nawiasach klamrowych. Funkcje są oddzielone przecinkiem.

Na przykład: Załóżmy, że masz trzy funkcje w pliku our pobierz dane osobowe.js plik - pobierzPełneNazwisko(),pobierz e-mail(), getDob(). Możesz wyeksportować funkcje, dodając następujący wiersz kodu:

wyeksportuj {getFullName, getEmail, getDob};

Jak importować funkcje w JavaScript

Aby skorzystać z modułu, należy go najpierw zaimportować. Dowolną funkcję można zaimportować przy użyciu pełnej ścieżki odniesienia.

Importowanie funkcji jest dość proste. JavaScript ma wbudowaną funkcję importowania własnych funkcji z innych plików. Jeśli chcesz uzyskać dostęp do tych funkcji z innych modułów, dobrym pomysłem jest dołączenie deklaracji funkcji dla każdego z narzędzi.

Funkcja do zaimportowania jest już wyeksportowana w oryginalnym pliku.

Możesz importować funkcje z innego pliku za pomocą import funkcjonalność słowa kluczowego. Import pozwala wybrać, która część pliku lub modułu ma zostać załadowana.

Oto jak importujesz nasz pobierzPełneNazwisko funkcja od pobierz dane osobowe.js:

import {getFullName} z „./getPersonalDetails.js”

Spowoduje to udostępnienie tej funkcji do użycia w naszym bieżącym pliku.

Aby zaimportować wiele funkcji, funkcje do zaimportowania są ujęte w nawiasy klamrowe. Każda z nich jest oddzielona przecinkiem (,).

import {getFullName, getEmail, getDob} z „./getPersonalDetails.js”

Istnieje inny sposób użycia import funkcjonalność. To pozwala nam zaimportować wszystkie eksporty w określonym pliku. Odbywa się to za pomocą importuj * jako składnia.

Możesz zaimportować cały eksport w naszym pobierz dane osobowe.js dodając następujący wiersz kodu:

import * Jak Moduł danych osobowych z „./getPersonalDetails.js”

Powyższe spowoduje utworzenie obiektu o nazwie Moduł danych osobowych.

To tylko nazwa zmiennej, możesz nadać jej dowolną nazwę.

Ten obiekt zawiera wszystkie eksporty w naszym getPersonalDetails.js. Funkcje są przechowywane w tym obiekcie i można uzyskać do nich dostęp w taki sam sposób, jak w przypadku dowolnej właściwości obiektu.

Na przykład, możemy uzyskać dostęp do pobierzPełneNazwisko funkcję, dodając następujący wiersz kodu

Moduł danych osobowych.getPełnaNazwa();

Co to jest domyślny eksport?

Eksportuj domyślnie to wyjątkowa funkcjonalność eksportu. Jest to używane, jeśli z pliku eksportowana jest tylko jedna zmienna. Służy również do tworzenia wartości rezerwowej dla pliku lub modułu.

Poniżej znajduje się przykład, w którym użyliśmy pobierzPełneNazwisko działają domyślnie:

eksportdomyślnyfunkcjonowaćpobierzPełneNazwisko (pełna nazwa){...}

Nie możesz mieć więcej niż jednej wartości domyślnej w każdym module lub pliku.

Funkcja używana jako domyślna jest importowana w inny sposób. Oto jak zaimportować nasz pobierzPełneNazwisko funkcja używana domyślnie:

import pełna nazwa z „./getPersonalDetails.js”

Oto różnice:

  1. Nie ma nawiasów klamrowych wokół importowanej wartości, pełna nazwa.
  2. pełna nazwa tutaj jest tylko nazwa zmiennej. Przechowuje wartość dowolnej funkcji domyślnej.

Doładuj swoje funkcje JavaScript

Moduły JavaScript to fragmenty kodu, które można ponownie wykorzystać w innych częściach kodu przy użyciu funkcji importu i eksportu JavaScript. Zwykle są zapisywane w osobnych plikach i importowane przy użyciu słowa kluczowego import. Jedną z zalet korzystania z modułów jest to, że pomaga to utrzymać porządek w kodzie. Sprawia również, że Twój kod jest łatwiejszy w zarządzaniu i łatwiejszy do debugowania.