JS rozdělení

Před dvěma příspěvky jsem mluvil o tom, co je rozdělení kódu a jak byste to udělali, a uvedl jsem příklad s CSS. V tomto příspěvku budu mluvit o tom, jak to udělat v JavaScriptu.

Všechny své skripty můžete vložit do HTML, ale to by mohlo být nepraktické. Lepším způsobem je mít jeden skript propojený s vaším HTML (např. index.js) a poté importovat vše ostatní pouze tam, kde je to potřeba.

Zůstaneme u našeho jednoduchého webu, který má tři sekce:záhlaví, hlavní, zápatí a máme jednu JavaScriptovou funkci na sekci, z nichž žádná na sobě nezávisí. Vůbec ne jako v reálném životě, ale příklad je snadno pochopitelný.

Máte tři soubory, header.js, main.js a footer.js. V těchto souborech musíte exportovat všechny funkce v nich, které jsou spuštěny odjinud. Předpokládejme, že header.js má v sobě jednu funkci, která se nazývá headerFunction.

Nejprve jej musíte exportovat, aby jej ostatní soubory mohly vidět. Existují dva způsoby exportu, výchozí export nebo pojmenovaný export.

Výchozí export

Pokud je to jediná funkce v souboru, pak je výchozí export nejjednodušší:

export default function headerFunction() {
  // function does something here
}

Ačkoli pokud používáte funkci šipky, nemůžete před ni pouze umístit výchozí export, musíte ji deklarovat samostatně:

const headerFunction = () => {
  // function does something here
}

export default headerFunction;

Pak v index.js máte:

import headerFunction from 'header';

headerFunction();

Pojmenovaný export

Můžete mít pouze jeden výchozí export na soubor, takže pokud máte více funkcí, musíte exportovat z jednoho souboru, místo toho můžete udělat pojmenované exporty (buď všechny pojmenované, nebo můžete mít jeden, který je výchozí a ostatní pojmenované). Ty fungují stejně, ať už máte běžnou funkci nebo funkci šipky.

export function headerFunction() {
  // function does something here
}

export const headerFunction = () => {
  // function does something here
}

Rozdíl tedy není v žádném slově „výchozí“, jen ve slově „export“.

Chcete-li potom importovat pojmenovanou funkci, umístěte ji do složených závorek:

import { headerFunction } from 'header';

headerFunction();

Chyby

Pokud nepoužíváte bundler, zobrazí se chyby. Poté, co jsem si pohrál s některými řešeními, zjistil jsem, že nejjednodušší je nainstalovat bundler. Pokud jste ještě nikdy žádný nepoužívali, doporučuji Parcel, protože vše, co musíte udělat, je nainstalovat a funguje to.