JavaScript dnes hraje obrovskou roli ve vývoji webových stránek. Vývojáři front-endu používají JavaScript k vytváření interaktivních webových aplikací. V důsledku toho vzrostla poptávka po vývojářích JavaScriptu.

JavaScript se samozřejmě v průběhu let vyvíjel. ES6 přinesl do jazyka mnoho nových funkcí. Jedním z nich je způsob, jak snadno sdílet kódy mezi soubory JavaScriptu.

Import a export funkcí pro JavaScript jsou nové funkce, které z vás udělají lepšího vývojáře. Zde je návod, jak tyto funkce fungují.

Co je modul JavaScript?

Modul JavaScript je soubor JavaScriptu, který obsahuje kolekci kódu, který můžete použít. Moduly jsou obvykle zapsány v samostatných souborech a importovány pomocí import klíčové slovo. Šetří čas a námahu, protože jej můžete později znovu použít.

Například pokud máte funkci tzv vypočítatSum(), můžete jej zahrnout do jiného souboru a zpřístupnit jej kdekoli ve vašem projektu pomocí vývozní a import JavaScript funguje bez problémů.

Jednou z výhod používání modulů je, že pomáhá udržovat váš kód uspořádaný. Díky tomu bude váš kód lépe spravovatelný a snáze se ladí.

instagram viewer

Chcete-li použít soubor JavaScript jako modul, musíte ve svém dokumentu HTML vytvořit skript s příponou a type="modul".

<typ skriptu="modul" src="fileName.js"></script>

Existují dva typy modulů:

  1. Moduly ECMAScript: standardní moduly JavaScriptu a jsou podporovány všemi hlavními prohlížeči.
  2. Moduly CommonJS: jsou starší a nejsou široce podporovány.

Zde se zaměříme na moduly ECMAScript. V případě potřeby se podívejte na naše úvod do JavaScriptu oprášit základy.

Jak exportovat funkce v JavaScriptu

V JavaScriptu jsou funkce prvotřídní objekty, které lze kromě toho, že se používají samostatně, předávat jako argumenty. Export funkcí je dobrý způsob, jak je přenést do jiných programů. Používá se také, když chcete vytvořit opakovaně použitelné knihovny.

Export funkcí v JavaScriptu se provádí pomocí vývozní funkce. The vývozní exportuje danou funkci pro použití jiným souborem nebo skriptem. Exportem naše vlastní funkce, můžeme je volně používat v jiných souborech nebo skriptech, aniž bychom se museli obávat problémů s licencí.

Existují dva způsoby použití vývozní fungovat efektivně. Projdeme si je s příklady kódu.

Předpokládejme, že máte soubor getPersonalDetails.js který má funkci, která po zadání výzvy vrací celé jméno uživatele. Funkce vypadá takto:

funkcegetFullName(celé jméno){
 celé jméno = prompt('Jaké je vaše křestní jméno');
řídicí panel.log (celé jméno);
 }
  1. Tuto funkci můžete exportovat jednoduše pomocí vývozní klíčové slovo následované názvem funkce ve složených závorkách. Vypadá to takto:
    vývozní {getFullName};
  2. Druhým způsobem je přidání vývozní klíčové slovo těsně před deklarací funkce.
    vývoznífunkcegetFullName (celé jméno){...}

Pomocí první metody můžete exportovat více funkcí. To se provádí zahrnutím názvů požadovaných funkcí do složených závorek. Funkce jsou odděleny čárkou.

Například: Předpokládejme, že v našem systému máte tři funkce getPersonalDetails.js soubor - getFullName(),getEmail(), getDob(). Funkce můžete exportovat přidáním následujícího řádku kódu:

export {getFullName, getEmail, getDob};

Jak importovat funkce v JavaScriptu

Abyste mohli modul používat, musíte jej nejprve importovat. Libovolnou funkci lze importovat pomocí odkazu na celou cestu.

Import funkcí je poměrně jednoduchý. JavaScript má vestavěnou funkci pro import vlastních funkcí z jiných souborů. Pokud chcete k těmto funkcím přistupovat z jiných modulů, je dobré zahrnout deklaraci funkce pro každý z vašich nástrojů.

Funkce, která má být importována, je již exportována ve svém původním souboru.

Funkce můžete importovat z jiného souboru pomocí import funkce klíčových slov. Import umožňuje vybrat, která část souboru nebo modulu se má načíst.

Zde je návod, jak importovat naše getFullName funkce od getPersonalDetails.js:

import {getFullName} z './getPersonalDetails.js'

Tím tuto funkci zpřístupníte pro použití v našem aktuálním souboru.

Aby bylo možné importovat více funkcí, jsou funkce, které se mají importovat, zahrnuty ve složených závorkách. Každá je oddělena čárkou (,).

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

Existuje další způsob, jak použít import funkčnost. To nám umožňuje importovat všechny exporty do konkrétního souboru. Provádí se pomocí import * jako syntax.

Všechny exporty můžete importovat do našeho getPersonalDetails.js přidáním následujícího řádku kódu:

import * tak jako modul personalDetails z './getPersonalDetails.js'

Výše uvedené vytvoří objekt s názvem modul personalDetails.

Toto je pouze název proměnné, můžete ji pojmenovat jakkoli.

Tento objekt obsahuje všechny exporty v našem getPersonalDetails.js. Funkce jsou uloženy v tomto objektu a lze k nim přistupovat způsobem, jakým přistupujete k jakékoli vlastnosti objektu.

Například můžeme získat přístup k getFullName funkce přidáním následujícího řádku kódu

modul personalDetails.getFullName();

Co je výchozí export?

Výchozí nastavení exportu je výjimečná exportní funkce. To se používá, pokud se ze souboru exportuje pouze jedna proměnná. Používá se také k vytvoření záložní hodnoty pro soubor nebo modul.

Níže je uveden příklad, kde jsme použili getFullName fungovat jako výchozí:

vývoznívýchozífunkcegetFullName (celé jméno){...}

V každém modulu nebo souboru nemůžete mít jako výchozí více než jednu hodnotu.

Funkce použitá jako výchozí se importuje jinak. Zde je návod, jak importovat naše getFullName funkce použitá jako výchozí:

import celé jméno z './getPersonalDetails.js'

Zde jsou rozdíly:

  1. Kolem importované hodnoty nejsou žádné složené závorky, celé jméno.
  2. celé jméno zde je pouze název proměnné. Ukládá hodnotu jakékoli výchozí funkce.

Doplňte své funkce JavaScriptu

Moduly JavaScript jsou části kódu, které lze znovu použít v jiných částech kódu pomocí funkcí importu a exportu JavaScriptu. Obvykle se zapisují do samostatných souborů a importují se pomocí klíčového slova import. Jednou z výhod používání modulů je, že pomáhá udržovat váš kód uspořádaný. Díky tomu bude váš kód lépe spravovatelný a snáze se ladí.