Export și import de componente ale modulelor

Exportul numit al componentelor modulului

Pentru ca anumite componente ale modulului (variabile/constante/funcții/clase) să poată fi conectate și utilizate în alt modul, acestea trebuie exportate. Putem exporta fiecare componentă în parte. Pentru acest lucru, înainte de definirea componentei se indică cuvântul cheie export. De exemplu, să avem următorul modul message.js

// exportul variabilei
export let welcome = "Welcome";
// exportul constantei
export const hello = "Hello";

// exportul funcției
export function sayHello() {
 console.log("Hello FDC.COM");
}

// exportul clasei
export class Messenger {
   send(text){
       console.log("Sending message:", text);
   }
}

Aici sunt exportate variabila welcome, constanta hello, funcția sayHello() și clasa Messenger. Este de remarcat că nu este necesar să exportăm toate componentele modulului, unele componente le putem folosi doar în interiorul acestui modul.

Ca alternativă, am putea exporta toate componentele împreună sub forma unei liste:

let welcome = "Welcome";
const hello = "Hello";

function sayHello() {
 console.log("Hello FDC.COM");
}

class Messenger {
   send(text){
       console.log("Sending message:", text);
   }
}

export {welcome, hello, sayHello, Messenger}

În acest caz, ambele metode de export sunt echivalente.

Importul numit al componentelor modulului

Toate componentele importate le putem conecta separat. Pentru acest lucru, după operatorul import în parantezele acolade se indică numele componentelor conectate - variabile/constante/funcții/clase. Apoi, după operatorul from se indică modulul din care se face importul.

import {componenta1, componenta2, ... componentaN} from "calea_către_modul";

De exemplu, să importăm în modulul main.js componentele exportate ale modulului message.js:

import {sayHello, welcome, Messenger} from "./message.js";

sayHello();

const telegram = new Messenger();
telegram.send(welcome);

Astfel, aici sunt conectate din modulul message.js variabila welcome, funcția sayHello() și clasa Messenger. Nu este obligatoriu să conectăm toate componentele modulului. Putem conecta doar acele componente care ne sunt direct necesare și pe care intenționăm să le utilizăm.

În final, la executarea paginii în browser, în consola acestuia vom vedea rezultatul activității componentelor modulului conectat main.js:

Hello FDC.COM
Sending message: Welcome

Importul întregului modul

Dacă modulul conectat conține foarte multe componente și intenționăm să folosim toate capacitățile modulului, atunci enumerarea tuturor componentelor conectate poate fi obositoare. În acest caz, putem conecta întreaga funcționalitate a modulului în forma:

import * as alias_modul from "modul";

După operatorul import urmează semnul stelei, care indică faptul că trebuie conectate toate componentele exportate. Și după operatorul as urmează aliasul modulului, cu care va fi asociat modulul conectat.

De exemplu, să conectăm în fișierul main.js întregul modul message.js

import * as MessageModule from "./message.js";

MessageModule.sayHello();

const telegram = new MessageModule.Messenger();
telegram.send(MessageModule.welcome);

În acest caz, modulul conectat message.js este asociat cu identificatorul MessageModule. Ca alias al modulului poate servi orice nume la alegere. Și ulterior putem accesa toate componentele exportate ale modulului prin aliasul modulului, de exemplu, accesând funcția sayHello: MessageModule.sayHello().