Categorie
Javascript Programmazione

{JS} Moduli: Import & Export

Cosa sono i moduli?

In informatica, un modulo è un unità definita, logicamente separata e separabile racchiusa in se stessa;
Le variabili e funzioni racchiuse in se stesso risultano inaccessibile all’esterno.
Un modulo e’ una parte distinguibile all’interno di un programma.
Un modulo in genere ha uno scopo preciso ed esegue una precisa operazione.

Prima delle specifiche introdotte da ECMAScript 2015 non esisteva un metodo nativo per la gestione dei moduli e per crearne era necessario utilizzare il Module Pattern.

MODULE PATTERN

Cosa prevede il metodo nativo dei moduli?

Secondo le specifiche ECMAScript 2015, ogni modulo JavaScript è memorizzato/contenuto in un solo file con estensione .js
In altre parole, per creare un modulo è necessario creare un file al cui interno scriveremo codice JavaScript ed in cui dovremo indicare cosa in questo file è esportabile tra tutte le funzionalità implementate.

Il modulo

File moduloEsterno.js
function prodotto(x, y) {
	return x*y;
} 
export function somma(x, y) {
	return x + y;
}

Un modulo è quindi un file singolo nel nostro esempio “moduloEsterno.js”; all’interno del file è contenuto semplice codice Javascrit, nel nostro esempio, sono presenti due funzioni “prodotto” e “somma”.

Named Export

Vedremo come rendere esportabili, da un modulo-esterno, i diversi elementi che compongono il modulo.
Dobbiamo precisare che esistono due tipologie di indicazioni di esportabilità/export:

Named Export: esportazioni nominative, ovvero, l’indicazione singola, elemento per elementi di ciò che è esportabile;

Default Export: elementi che sono esportati in automatico.

export

La parola chiave “export” indica cosa è esportabile dal nostro modulo.
Anteponendo la parola “export”, nel nostro esempio, ad una funzione e nello specifico alla funzione “somma”, stiamo indicando cosa rendiamo accessibile all’esterno. Tutto ciò che non viene esplicitamente indicato come esportabile non sarà visibile fuori dal modulo cosi come accade per la funzione “prodotto”.

function prodotto(x, y) {
	return x*y;
} 
export function somma(x, y) {
	return x + y;
} 
export const pigreco = 3.141592;
export class Circonferenza {
	constructor(raggio) {
		this.raggio = raggio;
	}
}

Allo stesso modo possiamo rendere accessibili costanti, variabili, costruttori ecc.

export in coda

Un alternativa all’anteposizione della parola chiave ai singoli elementi del nostro modulo e quello di raggrupparli scrivendoli in un unico comando:

function prodotto(x, y) {
	return x*y;
} 
function somma(x, y) {
	return x + y;
} 
const pigreco = 3.141592;
class Circonferenza {
	constructor(raggio) {
		this.raggio = raggio;
	}
}

export {somma, pigreco, Circonferenza};

default export

export default function prodotto(x, y) {
	return x*y;
} 
function somma(x, y) {
	return x + y;
} 
const pigreco = 3.141592;
class Circonferenza {
	constructor(raggio) {
		this.raggio = raggio;
	}
}

export {somma, pigreco, Circonferenza};

L’Elemento con le parole chiavi “export default”, nel nostro esempio, la funzione “prodotto”, sarà resa esportabile anche senza che essa sia indicata nell’ultima riga:

 export {somma, pigreco, Circonferenza};

Import

Dopo aver creato il nostro modulo esterno “moduloEsterno.js” e dopo aver indicato quali elementi del nostro modulo sono esportabili possiamo importare tali elementi in altri moduli.

File moduloPrincipale.js
import {somma} from "moduloEsterno.js"; 

Indichiamo tra parentesi graffe l’elemento da importare; la parola chiave “form” serve ad indicare la fonte/provenienza “da”; mentre, a seguire, tra doppie virgolette, indichiamo il file del modulo.
Possiamo anche omettere l’estensione .js del file in quanto questa verrebbe sottintesa.

import {somma, pigreco, Circonferenza} from "moduloEsterno"; 

Nelle parentesi graffe con l’ausilio della virgola, possiamo indicare più elementi da importare contemporaneamente; nell’esempio qui sopra abbiamo omesso l’estensione del file.

as

Con la parola chiave “as” possiamo attribuire un alias ad un elemento.

import {somma} as addizione from "moduloEsterno";

I motivi per utilizzare un alias possono essere diversi:

  • evitare conflitti con elementi presenti nel modulo corrente
  • semplificare il nome
  • renderlo compatibile con una naming convention adottata in una specifica applicazione.
*

Per importare tutti gli elementi esportabili da un modulo esterno possiamo utilizzare il simbolo “*” in questo modo:

import * from "moduloEsterno";

Import di elementi Export Default

Un elemento con esportazione di default viene importato con una sintassi differente; riprendiamo un frammento del “moduloEsterno”:

export default function prodotto(x, y) {
	return x*y;
}
...

Quello che sostanzialmente cambia nell’importazione è il mancato utilizzo delle parentesi graffe:

import somma from "moduloEsterno";

Import di elementi anonimi con Export Default

Riprendiamo e modifichiamo ancora una volta un frammento del codice del “moduloEsterno”:

export default function(x, y) {
	return x*y;
}
...

questa volta la funzione creata è una funzione anonima; quello che sostanzialmente cambia nell’importazione, è la possibilità di attribuire un alias in automatico:

import addizioneMia from "moduloEsterno";

Alcune precisazione sui moduli

  • L’esporatazione è importazione di moduli sono processi statici, cioè non possiamo importare ed esportare un modulo a runtime.
  • Per convenzione si suggerisce di porre le istruzioni di import in cima ad modulo JavaScript.
  • Gli elementi importati da un modulo sono in sola lettura, cioè non possiamo assegnare un nuovo valore o ridefinire una funzione fuori dal suo scope di origine.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *