JavaScript

ES6 Modules

Vad är en modul?

Text

När en applikation blir större och mer komplex bör vi dela in koden i mindre logiska delar för att få en bättre överblick.

 

Vad är en modul?

  • En modul är oftast en fristående fil, men det behöver inte vara det

  • Med export kan man göra en variabel, funktioner eller klasser tillgängliga utanför modulen

  • Med import kan man importera funktionalitet från andra moduler

  • En modul är alltså kod som är återanvändbar där funktionaliteten är inkapslad och bara åtkomlig inom modulen. Vad som exponeras från modulen med export brukar kallas public API. Det som importeras brukar kallas för dependency.

Från ES6 kom denna funktionalitet

En modul är, kort och gott, en återanvändbar och fristående kodenhet

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
# MODULER

Enkelt exempel

// 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // function...
sayHi('John'); // Hello, John!
<!--  📁 index.html -->
<script type="module" src="./main.js"></script>

Om scripten som laddas in är en modul, måste det anges

Två sätt att använda export  =>

Named export v.s default export

Export

Man kan fortfarande använda båda varianterna i en och samma fil.

// Export Statements
export default function Button() {} // default export
export function Button() {} // named export
# MODULER

Default export v.s named export

// Import Statements
import Banana from './button.js'; // default export
import { Button } from './button.js'; // Named export

En fil kan inte ha mer än en export default!

När man importerar en default export kan kan ändra namnet!

Så named exports heter så eftersom de är namngivna.



const sum = (a, b) => {
  return a + b;
};

// default export
export default sum;


# MODULER

Exporten kan också  göras på egen rad

Exporten måste göras på egen rad

Två sätt att använda import  =>

Om exporten vad named eller default

Import

//// named export
export function sum(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}
# MODULER

Import med named export

// named import
import {sum, multiply} from './another-file.js';

console.log(sum(35, 65)); // 100
//  default export
export default function sum(a, b) {
  return a + b;
}
# MODULER

Import med export default

// default import
import foo from './another-file.js';

console.log(foo(35, 65)); // 100

Lite historik innan ES6 modules

  • Common JS med require()
  • IIFE

Se länk