Jak korzystać z importu i eksportu w JavaScript

JavaScript oferuje zaawansowaną funkcję o nazwie moduły, używając tych moduły Możemy użyć dowolnego obiektu, klasy, literatury lub funkcji jednego pliku JavaScript do dowolnego innego pliku JavaScript. Poprawia ponowne użycie kodu i skraca czas ładowania pliku HTML. W tym celu moduły JavaScript dostarczają dwóch słów kluczowych, "import" I "eksport".

Wdrożenie eksportu w JavaScript

Słowo kluczowe "eksport" jest wymagane za każdym razem, gdy eksportujemy dane jednego pliku do innego pliku. Za pomocą słowa kluczowego "eksport" Możemy eksportować coś takiego jak zmienna, funkcja lub klasa do dowolnego innego pliku. To, co musimy zrobić, po prostu napisz "eksport" słowo kluczowe przed tą zmienną, funkcją, klasą lub cokolwiek, co chcemy wyeksportować.

Składnia eksportowania zmiennej, funkcji i klasy wynosi:

// Eksportowanie zmiennej
Eksport var emp_name;
// Eksportowanie funkcji
Funkcja eksportu emp ()

// Eksportowanie zajęć
Klasa eksportu Pracownik

Teraz wymyślymy działanie słowa kluczowego „eksportu” za pomocą poniższego przykładu, powiedzmy, że tworzymy plik z eksportem nazwy.JS:

Rozważ poniższy przykład, który określa, jak wyeksportować zmienną, funkcję lub klasę:

Eksport Let emp_name = "Mike Smith";
Funkcja eksportu emp ()
konsola.Log („Nazwa pracownika to Mike Smith”);

Klasa eksportu Pracownik
konstruktor (nazwa_mp)

konsola.log („wita” + nazwa_mp_name);

Alternatywna składnia do eksportowania elementów pliku jest:

Eksport emp_name, emp, pracownik;

Korzystając z powyższej składni, możemy wyeksportować wszystkie elementy pliku w jednym instrukcji, a podczas importowania będziemy używać tej samej nazwy dla zmiennych, funkcji i klasy. Na przykład:

var emp_name = "Mike Smith";
funkcja emp ()
konsola.Log („Nazwa pracownika to Mike Smith”);

Pracownik klasy
konstruktor (nazwa_mp)

konsola.log („wita” + nazwa_mp_name);


Eksport emp_name, emp, pracownik;

Innym sposobem eksportowania jest eksport domyślny, jest bardzo pomocny w eksportowaniu jednego elementu:

var emp_name = "Mike Smith";
Eksportuj domyślny nazwa emp_name;

Pomaga to w importowaniu zmiennej do dowolnej innej klasy o dowolnej innej nazwie.

Wdrożenie importu w JavaScript

W JavaScript słowo kluczowe "import" jest używany za każdym razem, gdy importujemy coś z pliku. Musimy napisać "import" Słowo kluczowe przed cokolwiek chcemy zaimportować z innego pliku.

Składnia do import Zmienna, funkcja i klasa to:

// importowanie zmiennej
import emp_name z './Nazwa pliku'
// importowanie funkcji
Import emp z './Nazwa pliku'
// importowanie klasy
import pracownik z './Nazwa pliku'

Utworzyliśmy kolejny plik o nazwie „Importuj.js ”i zaimportował wszystkie dane z pliku„ Eksportuj.JS ”:

import emp_name z "./eksport.JS "
konsola.log (emp_name);
import emp z "./eksport.JS "
emp ();
import pracownik z "./eksport.JS "
Niech a = nowy pracownik („John”);

Zmienna, funkcja i klasa są importowane z pliku „./eksport":

Wyjście zweryfikuje, że każdy element obecny w „./eksport.plik js ”jest importowany do„ importu.plik js ”:

nazwa_mp_ jest zmienne, emp jest funkcją i Pracownik to klasa stworzona w eksport.JS plik:

import emp_name, emp, pracownik z "./eksport.js ";
konsola.log (emp_name);
emp ();
Niech a = nowy pracownik („John”);

Teraz tutaj, w powyższym kodzie, importujemy wszystkie elementy w jednym oświadczeniu:

Otrzymamy następujące dane wyjściowe:

Teraz rozważymy inny przykład, aby zrozumieć, jak zaimportować domyślny element:

import _name z "./eksport.JS "
konsola.log (_name);

Importujemy domyślny element z pliku „Eksportuj.js ”z„ _name ”:

w "eksport.JS ” Plik Zmienna jest tworzona o nazwie „Emp_name”:

Ale uzyskujemy dostęp do tej samej zmiennej z "_nazwa" w "import.JS ” Plik i uzyskaj następujące dane wyjściowe:

Otrzymujemy to samo wyjście, oznacza to podczas importowania dowolnego domyślny element Nie jest konieczne używanie tej samej nazwy, co w pierwszym pliku, zamiast tego możemy również używać dowolnych nazwisk.

Wniosek

Import i eksport to nowe funkcje wprowadzone w modułach JavaScript w celu poprawy możliwości ponownego użycia kodu. JavaScript zapewnia słowo kluczowe importu i eksportu do wykorzystania kodu jednego pliku do innych plików. W tym artykule określamy, jak pracować z funkcjami importu i eksportu modułu. Aby lepiej zrozumieć koncepcję, rozważamy niektóre przykłady i wdrażają je w JavaScript.

Po dokładnym przestudiowaniu tego artykułu ktoś może to przeanalizować podczas korzystania z import I eksport cechy moduł Musimy użyć tej samej nazwy dla zmiennej, funkcji i klasy zarówno w plikach (plik, w którym wyeksportujesz dane, oraz plik, w którym importujesz dane). Chwila "domyślny" to wyjątkowy przypadek, w którym nie ma takiego wymogu, możesz użyć dowolnej nazwy wyboru podczas importowania.