From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../reference/statements/export/index.html | 259 +++++++++++++++++++++ 1 file changed, 259 insertions(+) create mode 100644 files/it/web/javascript/reference/statements/export/index.html (limited to 'files/it/web/javascript/reference/statements/export') diff --git a/files/it/web/javascript/reference/statements/export/index.html b/files/it/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..47d67a6eb2 --- /dev/null +++ b/files/it/web/javascript/reference/statements/export/index.html @@ -0,0 +1,259 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +tags: + - ECMAScript 2015 + - JavaScript + - Moduli + - export +translation_of: Web/JavaScript/Reference/Statements/export +--- +
{{jsSidebar("Statements")}}
+ +
Il comando export è utilizzato per esportare funzioni, oggetti o tipi primitivi da un dato file (o modulo) in modo tale da poter essere riutilizzati in altri file con il comando {{jsxref("Statements/import", "import")}}
+ +
+ +
I moduli sono esportati sempre in {{jsxref("Strict_mode","strict mode", "", 1)}}  nonostante non sia dichiarato. Il comando export non può essere usato in embedded scripts.
+ +

Sintassi

+ +

Ci sono due tipi di exports:

+ +
    +
  1. Named exports (uno o più exports per modulo)
    2. +
  2. Default exports (uno per modulo)
    3. +
+ +
// Export di variabili, funzioni e oggetti singolarmente
+export let name1, name2, …, nameN; // also var, const
+export let name1 = …, name2 = …, …, nameN; // also var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Export di una lista
+export { name1, name2, …, nameN };
+
+// Rinominare gli exports
+export { variable1 as name1, variable2 as name2, …, nameN };
+
+// Exporting destructured assignments with renaming
+// Export di assegnazioni destrutturate rinominando l'export
+export const { name1, name2: bar } = o;
+
+// DEfault export
+export default expression;
+export default function (…) { … } // also class, function*
+export default function name1(…) { … } // also class, function*
+export { name1 as default, … };
+
+// Aggregazione di moduli
+export * from …; // does not set the default export
+export * as name1 from …; // Draft ECMAScript® 2O21
+export { name1, name2, …, nameN } from …;
+export { import1 as name1, import2 as name2, …, nameN } from …;
+export { default } from …;
+ +
+
nameN
+
Nome che deve essere esportato (così da poter essere importato via import in un altro script).
+
+ +

Descrizione

+ +

Ci sono due tipi diversi di export, named and default. Puoi avere più named exports per modulo ma solamente un default export.

+ +

Named exports:

+ +
// Export di variabili, funzioni, oggetti dichiarati precedentemente
+export { myFunction, myVariable };
+
+// export individual features (can export var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+ +

Default exports:

+ +
// Export di funzioni dichiarati precedentemente come default
+export { myFunction as default };
+
+// Export di singole funzioni, oggetti come default
+export default function () { ... }
+export default class { .. }
+
+// ogni export sovrascrive il precedente
+ +

I named exports sono utili per esportare più valori. Durante l'import, è obbligatorio usare lo stesso nome dell'oggetto corrispondente.

+ +

I defalt export invece possono essere importati con qualsiasi nome. Ad esempio:

+ +
// file test.js
+let k; export default k = 12;
+
+ +
// some other file
+import m from './test'; //notare che abbiamo la libertà di importare m invece di importate k, perché  k era il default export
+console.log(m);        // stamperà 12
+
+ +

Puoi anche rinominare i named exports per evitare conflitti:

+ +
export { myFunction as function1,
+         myVariable as variable };
+ +

Ri-esportare / Aggregare

+ +

È anche possibile importare ed esportare da più moduli nel modulo padre in modo tale da rendere rendere disponibili gli import da quel modulo. In altre parole è possibile creare un modulo che aggreghi i vari export da vari moduli.

+ +

È possibile farlo con la sintassi "export from":

+ +
export { default as function1,
+         function2 } from 'bar.js';
+
+ +

che è paragonabile ad una combinazione di import e export:

+ +
import { default as function1,
+         function2 } from 'bar.js';
+export { function1, function2 };
+ +

dove function1 e function2 non sono disponibili nel modulo corrente.

+ +
+

Note: I seguenti esempi sono sintatticamente invalidi nonostante siano equivalenti dal punto divista del comando import

+
+ +
import DefaultExport from 'bar.js'; // Valid
+ +
export DefaultExport from 'bar.js'; // Invalid
+ +

Il modo corretto di farlo è di rinominare gli export:

+ +
export { default as DefaultExport } from 'bar.js';
+ +

Esempi

+ +

Usare gli export espliciti

+ +

In un modulo my-module.js, potremmo includere il seguente codice:

+ +
// modulo "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('From graph draw function');
+  }
+}
+
+export { cube, foo, graph };
+ +

E nel modulo principale incluso nella pagina HTML potremmo avere

+ +
import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888
+ +

Notare che:

+ + + +

Usare i default export

+ +

Se vogliamo esportare un singolo valore o avere un valore di default per il tuo modulo, allora possiamo usare il default export:

+ +
// modulo "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+
+ +

Quindi, in un altro script, puoi importare il modulo direttamente:

+ +
import cube from 'my-module';
+console.log(cube(3)); // 27
+
+ +

Usare export from

+ +

Facciamo l'esempio dove abbiamo i seguenti moduli:

+ + + +

Questo è come sarebbe con il codice:

+ +
// Nel modulo childModule1.js
+let myFunction = ...; // assegna una funzione myFunction
+let myVariable = ...; // assegna un valore alla variabile myVariable
+export {myFunction, myVariable};
+
+ +
// Nel modulo childModule2.js
+let myClass = ...; // assegna qualcosa di utile a myClass
+export myClass;
+
+ +
// Nel modulo parentModule.js
+// Aggreghiamo solamente gli export dai moduli childModule1 e childModule2
+// per poi riesportarli
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+
+ +
// Nel modulo principale
+// Possiamo usare gli export importandoli da un singolo modulo
+// che li colleziona/include in un singolo modulo
+import { myFunction, myVariable, myClass } from 'parentModule.js'
+ +

Specifiche

+ + + + + + + + + + + + +
Specifiche
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}
+ +

Compatibilità Browser

+ +

{{Compat("javascript.statements.export")}}

+ +

Vedi anche

+ + -- cgit v1.2.3-54-g00ecf